Skip to content

Instantly share code, notes, and snippets.

@deeqoo
Created December 22, 2016 13:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save deeqoo/45ee022bd8034b2298c21910b51691dd to your computer and use it in GitHub Desktop.
Save deeqoo/45ee022bd8034b2298c21910b51691dd to your computer and use it in GitHub Desktop.
Inovation cloud - css file
html, 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;
background-size: cover;
}
.header .container {
position: relative;
top: 200px;
}
.header h1 {
font-size: 80px;
line-height: 100px;
margin-top: 0;
margin-bottom: 80px;
}
@media (min-width:850px) {
.header h1 {
font-size: 120px;
}
}
.header p {
font-weight: 500;
letter-spacing: 8px;
margin-bottom: 40px;
margin-top: 0;
}
.btn {
color: #fff;
background-color: #000;
text-decoration: none;
padding: 10px 40px;
}
.btn:hover {
background: #117bff;
cursor: pointer;
transition: background .5s;
}
/* Nav */
.nav {
background-color: black;
}
.nav ul {
list-style: none;
margin: 0 auto;
padding: 30px 0;
text-align: center;
}
.nav ul li {
display: inline-block;
background-color:white;
}
/* Main */
.main .container {
margin: 80px auto;
float:left;
}
.main img {
float: left;
margin: 50px 80px 50px 0;
}
img {
height: 128px;
width: 196px;
}
/* Jumbotron */
.jumbotron {
height: 600px;
text-align: right;
background: url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/jumbotron_bg.jpg') no-repeat center;
background-size: cover;
}
.jumbotron .container {
position: relative;
top: 220px;
}
/* Footer */
.footer {
font-size: 14px;
background-color: black;
color: #fff;
}
/* Media Queries */
@media (max-width: 500px) {
.header h1 {
font-size: 50px;
line-height: 64px;
}
.main, .jumbotron {
padding: 0 30px;
}
.main img {
width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment