CODEWITHSUNDEEP
htmlcss
AJKCJDC
AJKCJDC

Reputation: 95

How can I implement this shape into my code?

I was wondering how I could implement this shape into my website. Furthermore, when I copy and paste it into my website, the text position of the string "CLICK ON THE ARROW BELOW TO SCROLL DOWN" gets adjusted and I want it to stay above the arrow. Here is my codepen

I changed the hex colour to red so you can see what I mean.

Below is the HTML / CSS code for the rounded shape I want to implement within the middle of my website page. How could I also write text over this object?

<div id="shape">Rounded corners!</div>

#shape {
border-radius: 25px;
background: #111;
padding: 20px; 
width: 200px;
height: 150px;    
}

Upvotes: 0

Views: 63

Answers (1)

Johannes
Johannes

Reputation: 67768

The shape is already there. (?)

Concerning the text you write about: You have margin-top:530px; on your p tag, which makes it disappear behind another element. Erase or adjust that margin. And use a class on that element and its CSS, since otherwise all p tags will get these settings.

P.S.: To center your #shape DIV, use these mergin settings on it (and no float):

margin:100px auto 0 auto;

http://codepen.io/anon/pen/KaepGZ (edited)

ADDITION:

http://codepen.io/anon/pen/LxrpPY

--> This places the text above the arrow, giving it position absolute with horizontal centering and a fixed bottom setting:

.arrowtext {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 75px;
}

But you have to move that text container into your section, above the arrow element. See my second codepen for details.

Upvotes: 1

Related Questions