Skip to content

Instantly share code, notes, and snippets.

@stephanBerger

stephanBerger/index.html

Created September 11, 2019 08:38
Show Gist options
  • Save stephanBerger/b7aaef148e24ada523b878e009139aef to your computer and use it in GitHub Desktop.
Save stephanBerger/b7aaef148e24ada523b878e009139aef to your computer and use it in GitHub Desktop.
Download ZIP
08 - CSS : Flexbox
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
<title>Find the precious!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li>FindThePrecious.com</li>
<li>Fellows</li>
<li>Contact us</li>
</ul>
</nav>
<section>
<div class="carousel"></div>
</section>
<section id="fellows">
<h2>Fellows wanted dead (or alive if you want to eat them later)</h2>
</section>
<section class="boxes">
<article></article>
<article></article>
<article></article>
</section>
<hr class="ligne">
<form>
<h2>Contact us</h2>
<input class="bord" type="text" placeholder="@">
<input class="bord" type="text" placeholder="&#8962;">
<input class="bord" type="text" placeholder="I have seen one of them">
<textarea class="bord" placeholder="Your message"></textarea>
<input class="button" type="submit" value="Send">
</form>
<footer>
<section class="footer">
<div>
<a href="">About us</a>
<a href="">Fellows</a>
<a href="">Join our army</a>
</div>
<div>
<a href="">FAQ</a>
<a href="">Reward conditions</a>
<a href="">Legal mentions</a>
</div>
<div>
<a href="">Sauron4Ever.com</a>
<a href="">Follow him</a>
</div>
</section>
</footer>
</body></html>
Raw
style.css
*,
body {
color: #777;
font-size: 16px;
box-sizing: border-box
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333
}
li {
float: left;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none
}
li:hover {
background-color: #bbb;
color: #111
}
.carousel {
height: 200px;
background-color: #ddd
}
#fellows h2 {
text-align: center;
font-size: 0.8em;
padding: 0px 25px 0 25px;
}
.boxes article {
display: flex;
flex-flow: column;
justify-content: space-around;
height: 250px;
margin: 5px 20px;
background-color: #ddd;
}
.ligne {
margin-top: 5px
}
form {
display: flex;
flex-flow: column wrap;
text-align: center;
margin: 0 auto;
width: 80%
}
form input,
textarea {
width: 100%;
margin-top: 10px
}
textarea {
height: 50px
}
.bord {
border: 2px solid grey
}
footer {
background-color: grey;
margin-top: 20px;
}
.footer div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.footer a {
color: white;
}
@media all and (min-width:961px) {
#fellows h2 {
text-align: center;
font-size: 1.5em;
padding: 25px
}
.boxes {
display: flex;
flex-direction: row;
justify-content: space-around;
}
article {
width: 31%;
height: 245px;
margin: 4px;
background-color: #ddd
}
.ligne {
margin-top: 100px
}
.footer {
display: flex;
flex-direction: row wrap;
align-items: center;
justify-content: center;
padding: 20px;
}
.footer div {
flex: 1;
}
.footer div:nth-child(3) {
flex: 2;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment