Created
September 14, 2019 14:02
-
-
Save angelique-w/78a028ce0c1797d227af2c72f4f8791f to your computer and use it in GitHub Desktop.
FindThePrecious Flexbox
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
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-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> | |
<h2>Fellows wanted dead <span class="or_alive">(or alive if you want to eat them later)</span></h2> | |
</section> | |
<section class="section_articles_fellows"> | |
<article class="article_fellows"></article> | |
<article class="article_fellows"></article> | |
<article class="article_fellows"></article> | |
</section> | |
<hr> | |
<form> | |
<h2 class="titre_contact">Contact us</h2> | |
<div class="container_form"> | |
<input class="element_form form_texte" type="email" placeholder="@"> | |
<input class="element_form form_texte" type="text" placeholder="⌂"> | |
<input class="element_form form_selection" type="text" placeholder="I have seen one of them"> | |
<textarea class="element_form form_texte" placeholder="Your message"></textarea> | |
<button class="button_submit" type="submit">Send !</button> | |
</div> | |
</form> | |
<footer> | |
<div class="container_part_footer"> | |
<a href="">About us</a> | |
<a href="">Fellows</a> | |
<a href="">Join our army</a> | |
</div> | |
<div class="container_part_footer footer_grow"> | |
<a href="">FAQ</a> | |
<a href="">Reward conditions</a> | |
<a href="">Legal mentions</a> | |
</div> | |
<div class="container_part_footer"> | |
<a href="">Sauron4Ever.com</a> | |
<a href="">Follow him</a> | |
</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
/*Version Mobile*/ | |
/*Général*/ | |
body { | |
font-family: sans-serif; | |
margin: 0; | |
} | |
h2 { | |
text-align: center; | |
font-size: 1.7em; | |
font-weight: lighter; | |
margin: 50px 0; | |
} | |
/*Nav*/ | |
nav { | |
background-color: rgb(75, 75, 75); | |
} | |
ul { | |
display: flex; | |
flex-direction: row; | |
margin: 0; | |
} | |
ul li { | |
list-style-type: none; | |
color: white; | |
padding: 0.7em 1em; | |
border: 1px solid rgb(75, 75, 75); | |
} | |
/*Carousel*/ | |
.carousel { | |
background-color: rgb(221, 221, 221); | |
height: 300px; | |
margin: 0; | |
} | |
/*Fellows*/ | |
.or_alive { | |
font-size: 0.8em; | |
} | |
.section_articles_fellows { | |
display: flex; | |
flex-direction: column; | |
} | |
.article_fellows { | |
background-color: rgb(221, 221, 221); | |
width: 75%; | |
height: 150px; | |
margin: 10px auto; | |
} | |
/*Form*/ | |
.container_form { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
width: 65%; | |
margin: auto; | |
} | |
.element_form { | |
width: 100%; | |
margin: 10px 0; | |
padding: 5px 3px; | |
} | |
.form_texte { | |
border: 2px solid black; | |
} | |
.form_selection { | |
border: 0.5px solid grey; | |
border-radius: 5px; | |
} | |
textarea { | |
height: 100px; | |
} | |
.button_submit { | |
background-color: darkgrey; | |
border: 1px solid black; | |
border-radius: 3px; | |
padding: 5px 20px; | |
align-self: flex-end; | |
} | |
/*Footer*/ | |
footer { | |
background-color: rgb(75, 75, 75); | |
margin-top: 20px; | |
padding: 30px; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
} | |
.container_part_footer { | |
width: 250px; | |
display: flex; | |
flex-direction: column; | |
} | |
footer a { | |
color: white; | |
text-decoration: none; | |
padding: 5px; | |
text-align: center; | |
} | |
/*Version Desktop*/ | |
@media screen and (min-width: 961px) { | |
/*Fellows*/ | |
.section_articles_fellows { | |
display: flex; | |
flex-direction: row; | |
justify-content: space-around; | |
margin-bottom: 100px; | |
} | |
.article_fellows { | |
background-color: rgb(221, 221, 221); | |
height: 350px; | |
margin: 10px; | |
} | |
/*Contact*/ | |
.titre_contact { | |
text-align: left; | |
padding-left: 10px; | |
} | |
/*Footer*/ | |
footer { | |
height: 100px; | |
flex-direction: row; | |
justify-content: space-between; | |
} | |
.footer_grow { | |
flex-grow: 2; | |
} | |
footer a { | |
text-align: left; | |
} | |
/*Etats*/ | |
ul li:hover { | |
background-color: #e0e0e0; | |
border: 1px solid #757575; | |
color: #424242; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment