1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Adding Text Above Div Wrapper?

Discussion in 'HTML & Website Design' started by pirate_tat87, Mar 11, 2023.

0
  1. #1
    See reply to this post for the help on this

    [​IMG]

    <!DOCTYPE html>
<!-- Coding by CodingLab || www.codinglabweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Neumorphism Loading Spinner</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <span></span>
    </div>
  </body>
</html>
    HTML:
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
}
.wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 1),
    inset 10px 10px 10px rgba(0, 0, 0, 0.1);
}
.wrapper::before {
  content: "";
  position: absolute;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  box-shadow: -10px -10px 15px rgba(255, 255, 255, 1),
    10px 10px 10px rgba(0, 0, 0, 0.1);
}
span {
  height: 186px;
  width: 220px;
  position: absolute;
  animation: rotate 5s linear infinite;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
span::before {
  content: "";
  position: absolute;
  height: 30px;
  border-radius: 50%;
  width: 30px;
  background: linear-gradient(45deg, #336dff, #5c89ff);
  box-shadow: 0 5px 10px rgb(0 0 0 / 30%);
}
    Code (CSS):

     
    Solved! View solution.
    Last edited: Mar 11, 2023
    pirate_tat87, Mar 11, 2023 IP
  2. pirate_tat87

    pirate_tat87 Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #2
    Update I was able to get the main issue resolved now my issue is I am trying to add a link into the center of this div wrapper, I have the text there but can't get the link to work

    I know i'm missing something but I don't know what? 

        <div class="wrapper">
    <div id="link"><a href="https://piratesdmcaservice.com">Enter</a>
      
        </div>
      <span></span>
    </div>
    HTML:
     
    pirate_tat87, Mar 11, 2023 IP
  3. IanT

    IanT Well-Known Member

    Messages:
    503
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    130
    #3
    Try adding "/" to the end of your link

     <div class="wrapper">
    <div id="link"><a href="https://piratesdmcaservice.com/">Enter</a>
     
        </div>
    Code (markup):
     
    IanT, Mar 11, 2023 IP
  4. pirate_tat87

    pirate_tat87 Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #4
    @IanT - Hey thank you very much for your reply. I did edit the the code and add "/" at the end of the .com but that still did not work.

    As of right now this is how it looks like, The "Enter" is showing that it should be hyperlinked however there is no response when clicking on the "Enter" below is an updated picture along with the uploaded coding

    [​IMG]

    The additional coding that I added myself after trying to do some research on my own on adding the text and possible coding I had to add addtional CSS so the #Title and #link are the two scripts of CSS code I added everything else in the CSS was default

    <!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Neumorphism Loading Spinner</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
    <div id="link">
    <a href="#https://piratesdmcaservice.com/">Enter</a>
    </div>
        </div>
      <span></span>
    </div>
    <div id="title"><h2>Pirate's DMCA Service</h2>
       
   
    </div>
  </body>
</html>
    HTML:
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
}
#title {
  float: left;
  vertical-align:top; 
  height: 700px;
  width: center;
  position: absolute;
  font-family: comic sans ms;

}
#link {
font-family: comic sans ms;
font-size: 20px;
}

.wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 1),
    inset 10px 10px 10px rgba(0, 0, 0, 0.1);
}
.wrapper::before {
  content: "";
  position: absolute;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  box-shadow: -10px -10px 15px rgba(255, 255, 255, 1),
    10px 10px 10px rgba(0, 0, 0, 0.1);
}
span {
  height: 186px;
  width: 220px;
  position: absolute;
  animation: rotate 5s linear infinite;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
span::before {
  content: "";
  position: absolute;
  height: 30px;
  border-radius: 50%;
  width: 30px;
  background: linear-gradient(45deg, #336dff, #5c89ff);
  box-shadow: 0 5px 10px rgb(0 0 0 / 30%);
}
    Code (CSS):
     
    pirate_tat87, Mar 11, 2023 IP
  5. pirate_tat87

    pirate_tat87 Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #5
    This did not work but thank you for the input
     
    pirate_tat87, Mar 11, 2023 IP
  6. pirate_tat87

    pirate_tat87 Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #6
    This is the current working of the coding that I have the "Enter" is there like it's supposed to be linked but when clicking on it does nothing

    [​IMG]
     
    pirate_tat87, Mar 11, 2023 IP
  7. IanT

    IanT Well-Known Member

    Messages:
    503
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    130
    #7
    That's really weird it should be working. What's the page you are working on?
     
    IanT, Mar 11, 2023 IP
  8. pirate_tat87

    pirate_tat87 Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #8
    @IanT - I'm not sure what you mean by that but I am using Jsfiddle to practice the code to see if things are working, I am also using notepad++ to see what things actually look in a full browser format.

    https://jsfiddle.net/vscala87/8x1uomsg/ <--- this is the link I believe and regardless if I used Jsfiddle or run it in notepad++ the link doesn't work
     
    pirate_tat87, Mar 12, 2023 IP
  9. IanT

    IanT Well-Known Member

    Messages:
    503
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    130
    #9
    Not sure what's going on
     
    IanT, Mar 13, 2023 IP
  10. #10
    The solution is very simple, actually. Add z-index:10000; to

    #link {
    font-family: comic sans ms;
    font-size: 20px;
    z-index:10000;
    }

    Working in jsfiddle: https://jsfiddle.net/aktp7x21/

    PS 10000 is arbitrary. You can use a smaller/bigger one if you want to. May not work if it's too small.
     
    qwikad.com, Mar 13, 2023 IP
  11. IanT

    IanT Well-Known Member

    Messages:
    503
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    130
    #11
    I was thinking it could be something like that but forgot what it was referred to as! Let's hope this clears up OPs issue
     
    IanT, Mar 13, 2023 IP
  12. pirate_tat87

    pirate_tat87 Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #12
    Thank you very much. I would have never had guessed that. You wouldn't know anything about transitions would, or is transitions not really able to be done with css, I was wanting to some how also in the future when clicking on enter it opens the page like an elevator or something and then brings you to the home page. if not it's kool i'll keep doing some research but thank you so much for this help
     
    pirate_tat87, Mar 13, 2023 IP