codecademy: innovation cloud #2

In this example below you will see how to do a codecademy: innovation cloud #2 with some HTML / CSS and Javascript

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>codecademy: innovation cloud #2</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
  <body>
    <div class="header">
      <div class="container">
        <h1>INNOVATION CLOUD</h1>
        <p>Connect Your Ideas Globally</p>
        <a href="#"class="btn">LEARN MORE</a>
      </div>
    </div>

    <div class="nav">
      <div class="container">
        <ul>
          <li>Register</li>
          <li>Schedule</li>
          <li>Sponsors</li>
          <li>About</li>
          <li>Contact</li>
        </ul>
      </div>
    </div>

    <div class="main">
      <div class="container">
        
		<img src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" />
        <h2>The Innovation Cloud Conference</h2>
        <p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
        <p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
         <p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
      </div>
    </div>
    <div class="jumbotron">
      <div class="container">
      <h1>Stay Connected</h1>
      <p>Receive weekly insights from industry insiders.<p>
      <a href="#" class="btn">JOIN</a>
    </div>
    </div>
    <div class="footer">
      <div class="container">
      <p>&#169;&nbsp;Innovation Cloud Conference</p>
      </div>
    </div>
  </body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/selbywinkler/codecademy-innovation-cloud-2-MayaWK */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100);

body {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
}

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


/* Header */
.header {
  height: 800px;
  text-align: center; 
  background: url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg') no-repeat center center fixed;
  background-size: cover;
}

.header .container {
	position: relative;
	top: 200px;
}

.header h1 {
	font-size: 80px;
	line-height: 100px; 
	margin-top: 0;
	margin-bottom: 80px;
  color: #fff;
}

@media (min-width:850px) {
	.header h1 {
		font-size: 120px;
	}
}

.header p {
	font-weight: 500;
	letter-spacing: 8px;
	margin-bottom: 40px;
	margin-top: 0;
  color: #fff;
  text-transform: uppercase;
}

.header a {
  color: #fff;
  background-color: #000;
  padding: 10px 15px;
  text-decoration: none;
}

.btn:hover {
	background: #117bff;
	cursor: pointer; 
	transition: background .5s;  
}


/* Nav */
.nav {
  background: #000;
}

.nav ul {
	list-style: none;
	margin: 0 auto; 
	padding: 30px 0;
}

.nav li {
  display: inline;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
  
}


/* Main */
.main .container {
	margin: 80px auto;
}

.main img {
  float: left;
  max-width: 200px;
  padding-right: 10px;
}


/* Jumbotron */
.jumbotron {
	height: 600px; 
	text-align: right;
  background: url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/jumbotron_bg.jpg') no-repeat center center fixed;
  background-size: cover;

}

.jumbotron .container {
	position: relative;
	top: 220px;
}
.jumbotron a {
  color: #fff;
  background-color: #000;
  padding: 10px 40px;
  text-decoration: none;
}

.jumbotron h1, .jumbotron p {
  color: #fff;
}


/* Footer */

.footer { 
  background: #000;
  height: 80px; 
}

.footer p { 
  color: #fff;
  font-size: 14px;  
  height: 80px; 
  line-height: 80px;
  margin: 0;  
}



/* Media Queries */
@media (max-width: 500px) {
  .header h1 {
    font-size: 50px;
    line-height: 64px;
  }

  .main, .jumbotron {
    padding: 0 30px;
  }

  .main img {
    width: 100%;
  }
}

Comments