A Pen by Selby Winkler

Thumbnail
This awesome code was written by selbywinkler, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright selbywinkler ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Selby Winkler</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
  <body>
    <div class="header">
      <div class="container">
        <ul class="nav pull-left">
          <li>About</li>
          <li>Work</li>
          <li>Team</li>
          <li>Contact</li>
        </ul>
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">  
        <div class="main">
          <h1>We are Broadway</h1>
          <a class="btn-main">Get Started</a>
        </div>
      </div>
    </div>

    <div class="supporting">
      <div class="container">
        <div class="col">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg">
          <h2>Design</h2>
          <p>Make your projects look great and interact beautifully.</p>
          <a>Learn more</a>
        </div>
        <div class="col">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/develop.svg">
          <h2>Develop</h2>
          <p>Use modern tools to turn your design into a web site</p>
          <a>Learn more</a>
        </div>
        <div class="col">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg">
          <h2>Deploy</h2>
          <p>Use modern tools to turn your design into a web site</p>
          <a>Learn more</a>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>

    <div class="footer">
      <div class="container">
        <p>&copy; Broadway 2015</p>
      </div>
    </div>
  </body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/selbywinkler/a-pen-by-selby-winkler-XmdmJN */
@import url(https://fonts.googleapis.com/css?family=Raleway:400, 600);

body {
  margin: 0;
  padding: 0;
}
.header {
  background-color: #333333;
}

.container {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 10px;
}

.jumbotron {
  height: 800px;
  background: url('http://cdn.history.com/sites/2/2013/12/new-york-city-H.jpeg') no-repeat center center;
  background-size: cover;
}

.nav {
  margin: 0;
  padding: 20px 0;
}

.nav li {
  display: inline;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 12px;
}

.main {
  position: relative;
  top: 180px;
  text-align: center;
}

.main h1 {
  color: #333;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 70px;
  margin-top: 0;
  margin-bottom: 80px;
  text-transform: uppercase;
}

.btn-main {
  background-color: #333;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 16px 40px;
  text-decoration: none;
  text-transform: uppercase;
}

.supporting {
  padding-top: 80px;
  padding-bottom: 100px;
}

.supporting .col {
  float: left;
  width: 33%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
}

.supporting img {
  height: 32px;
}

.supporting h2 {
  font-weight: 600;
  font-size: 23px;
  text-transform: uppercase;
}

.supporting a {
	border: 1px solid #333333;
  padding: 10px;
}

.supporting p {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  padding: 0 50px;
  margin-bottom: 40px;
}

.clearfix {
  clear: both;
}

.footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
}

.footer p {
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size: 11px;
}

@media (max-width: 500px) {
  .main h1 {
    font-size: 50px;
    padding: 0 40px;
  }

  .supporting .col {
    width: 100%;
  }
}

Comments