Search code examples
htmlcssfontscodepen

Cloning a dribbble layout and the link text is appearing slightly at the top vs the middle

I'm trying to clone the template on the far left for practice from this dribbble: https://dribbble.com/shots/2262761-Mobile-Blog-App-Interface/attachments/424147

Here is my codepen so far: https://codepen.io/TheKyleDev/project/editor/ZWbLbw

.hero a {
  background: #FFF;
  color: #000;
  font-size: 0.75em;
  text-decoration: none;
  text-shadow: none;
  letter-spacing: 0.05em;
  font-size: 0.65em;
  padding: 8px 18px;
  border-radius: 3px;
}

For some reason the button link is acting weird. The text is appearing closer to the top despite having even padding on top and bottom. Can somebody explain this to me?

Solution

  • There is structuring issue in your code. I have rewritten it for your to refer. Hope this helps.

    HTML

    <!DOCTYPE html>
    <html>
        <head>
            <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,700" rel="stylesheet">
            <link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <body>
            <!-- <header class="hero">
                <p>Mark Manson</p>
                <h1>The<br />Dark Side<br />of the<br />Digital<br />Nomad</h1>

                <div class="btn"><a href="#">Travel</a></div>
           </header>
           <footer>Close</footer> -->

           <div class="container">
               <section class="data-chunk">
                   <h4>mark manson</h4>
                   <h1>the <br> dark side <br> of the <br> digital <br> nomad</h1>
                   <p class="tag">travel</p>
               </section>
               <section class="nav-chunk">
                   <p class="close-btn left"><a href="#">close</a></p>
                   <ul class="dots left">
                       <li class="selected"><a href="#">1</a></li>
                       <li><a href="#">2</a></li>
                       <li><a href="#">3</a></li>
                       <li><a href="#">4</a></li>
                   </ul>
                   <p class="chat right"><a href="#">chat with us</a></p>
                   <div class="clear"></div>
               </section>
           </div>
       </body>
   </html>

    CSS

    * {
  box-sizing: border-box;
}

html, body {
    background: #eaeaea;
    font-family: 'Josefin Sans', sans-serif;
    margin: 0;
    padding: 0;
}

.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
}

.container {
    background: transparent url(https://static.pexels.com/photos/6706/light-sky-beach-sand.jpg) top left;
    background-size: cover;
    box-shadow: 0px 0px 10px #ccc;
    height: 640px;
    margin: 4%;
    position: relative;
    width: 360px;
}

.data-chunk {
    bottom: 48px;
    padding: 15% 7%;
    position: absolute;
    width: 100%;
}

.data-chunk h4 {
    font-weight: normal;
    color: #fff;
    text-shadow: 1px 1px 1px #333;
    text-transform: uppercase;
}

.data-chunk h1 {
    font-size: 2.4rem;
    line-height: 1.25;
    font-weight: 700;
    color: #fff;
    text-shadow: 2px 2px 2px #333;
    text-transform: uppercase;
}

.tag {
    background: #fff;
    box-shadow: 1px 1px 1px #333;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    max-width: 80px;
    font-size: .75rem;
    display: block;
    padding: 3.5% 2% 2% 2%;
    border-radius: 2px;
    letter-spacing: 2px;
}

.nav-chunk {
    background: #fff;
    bottom: 0;
    left: 0;
    padding: 2% 6%;
    position: absolute;
    width: 100%;
}

.close-btn a{
    color: #000;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
}

.dots {
    list-style-type: none;
    margin-left: 26%;
    padding: 0;
}

.dots li {
    background: #ccc;
    border-radius: 6px;
    float: left;
    height: 6px;
    margin: 3px;
    text-indent: -9999px;
    width: 6px;
}

.dots li.selected {
    background: #333;
}

.chat {
    background: transparent url(chat.jpg) no-repeat 0 0;
    background-size: cover;
    height: 20px;
    margin: 12px 0;
    text-indent: -9999px;
    width: 20px;
}


/*html, body { height:100%; }
body {
  padding: 0;
  margin: 0;
}
h1 {
}
header.hero {
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  line-height: 3rem;
  letter-spacing: -0.04rem;
  width: 100%;
  max-width: 350px;
  height: 600px;
  background-image: url(https://static.pexels.com/photos/6706/light-sky-beach-sand.jpg);
  background-size: cover;
  text-shadow: 2px 3px 3px rgba(0,0,0,0.3);
  padding: 100px 0 30px 20px;
  color: white;
}
.hero a {
  background: #FFF;
  color: #000;
  font-size: 0.75em;
  text-decoration: none;
  text-shadow: none;
  letter-spacing: 0.05em;
  font-size: 0.65em;
  padding: 8px 18px;
  border-radius: 3px;
}
.hero p {
  margin-top: 0;
  font-size: 0.75em;
}*/