A Pen by Raffaele Spataro on CodePen.
Created
May 27, 2017 21:39
-
-
Save anonymous/e90c60b3024d46f8a0c884cedcacfc09 to your computer and use it in GitHub Desktop.
Minimal BootStrap 3 Template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title>Hello World!</title> | |
<meta charset="utf-8"/> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> | |
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> | |
<link rel="stylesheet" type="text/css" href="main.css"> | |
<script src="https://use.fontawesome.com/9204c5f991.js"> | |
</script> | |
</head> | |
<body> | |
<header class="container"> | |
<div class="row"> | |
<h1 class="col-sm-4">Hello World!</h1> | |
<nav class="col-sm-8 text-right"> | |
<p>nav</p> | |
<p>nav</p> | |
<p>nav</p> | |
</nav> | |
</div> | |
<section class="jumbotron"> | |
<div class="container"> | |
<div class="row text-center"> | |
<h2 class="col-sm-12">Hello Jumbotron!</h2> | |
<h3 class="col-sm-12">I am a template and I know it! | |
<br /> | |
<a class="btn btn-primary" href="#" role="button">See all</a> | |
</h3> | |
</div> | |
</div> | |
</section> | |
<section class="container"> | |
<div class="row"> | |
<figure class="col-sm-6"> | |
<p>sample1</p> | |
<img src="http://placehold.it/350x150"/> | |
</figure> | |
<figure class="col-sm-6"> | |
<p>sample2</p> | |
<img src="http://placehold.it/350x150"/> | |
</figure> | |
</div> | |
<div class="row"> | |
<figure class="col-sm-6"> | |
<p>sample3</p> | |
<img src="http://placehold.it/350x150"/> | |
</figure> | |
<figure class="col-sm-6"> | |
<p>sample4</p> | |
<img src="http://placehold.it/350x150"/> | |
</figure> | |
</div> | |
</section> | |
</header> | |
<footer class="container"> | |
<hr /> | |
<div class="row"> | |
<h4 class="col-sm-4">© 2017 Raffaele Spataro</h4> | |
<ul class="col-sm-8"> | |
<li class="col-sm-1"> | |
<i class="fa fa-twitter fa-4x" aria-hidden="true"></i> | |
</li> | |
<li class="col-sm-1"> | |
<i class="fa fa-github fa-4x" aria-hidden="true"></i> | |
</li> | |
<li class="col-sm-1"> | |
<i class="fa fa-codepen fa-4x" aria-hidden="true"></i> | |
</li> | |
<li class="col-md-1"> | |
<i class="fa fa-free-code-camp fa-4x" aria-hidden="true"></i> | |
</li> | |
</ul> | |
</div> | |
</footer> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-family: 'Roboto', sans-serif; | |
font-weight: 300; | |
} | |
header { | |
padding: 20px 0; | |
} | |
header .row, | |
footer .row { | |
display: flex; | |
align-items: center; | |
} | |
header h1 { | |
font-weight: 700; | |
margin: 0; | |
} | |
header nav { | |
display: flex; | |
justify-content: flex-end; | |
} | |
header p { | |
padding: 0 20px; | |
margin: 0; | |
} | |
.jumbotron { | |
display: flex; | |
align-items: center; | |
background-image: url('http://placehold.it/1600x900'); | |
background-size: cover; | |
color: #ffffff; | |
height: 500px; | |
text-shadow: 0.25px 0.25px 0.25px #000000; | |
} | |
.jumbotron h2 { | |
font-size: 60px; | |
font-weight: 700; | |
margin: 0; | |
color: #fff; | |
} | |
.jumbotron h3 { | |
margin: 0 0 20px; | |
color: #fff; | |
} | |
section .row img { | |
margin: 0 0 30px; | |
width: 100%; | |
} | |
.col-md-6 { | |
margin: 0 0 30px; | |
} | |
.btn.btn-primary { | |
border-radius: 2px; | |
border: 0px; | |
color: #fbd1d5; | |
text-shadow: none; | |
background-color: #ffffff; | |
} | |
.btn.btn-primary:hover { | |
color: #ffffff; | |
background-color: #fbd1d5; | |
} | |
.btn-secondary { | |
background-color: #E8DFE0; | |
color: #ffffff; | |
margin: 0 0 30px; | |
} | |
footer { | |
font-size: 12px; | |
padding: 20px 0; | |
} | |
footer .col-sm-8 { | |
display: flex; | |
justify-content: flex-end; | |
} | |
footer ul { | |
list-style: none; | |
} | |
footer li img { | |
width: 32px; | |
height: 32px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment