Skip to content

Instantly share code, notes, and snippets.

@krez69

krez69/index.html

Created September 12, 2019 07:54
Show Gist options
  • Save krez69/cc5601ce628d80adede8e6e77964f9eb to your computer and use it in GitHub Desktop.
Save krez69/cc5601ce628d80adede8e6e77964f9eb to your computer and use it in GitHub Desktop.
Download ZIP
Responsive mobile/desktop
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Find the precious!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a href="#FindThePrecious.com" title="FindThePrecious">FindPrecious.com</li>
<li><a href="#Fellows" title="the Fellows">Fellows</a></li>
<li><a href="#Contact_us" title="contact">Contact us</a></li>
</ul>
</nav>
<section>
<div class="carousel">
<p><img src="https://via.placeholder.com/1680X250.jpg" alt="fellows" class="image"/
</div>
</section>
<section>
<h2>Fellows wanted dead (or alive if you want to eat them later)</h2>
</section>
<section>
<div class="conteneur">
<article><p><img src="https://via.placeholder.com/250.jpg" alt="fellows" class="image"/></article>
<article><p><img src= "https://via.placeholder.com/250.jpg" alt="fellows" class="image"/></article>
<article><p><img src="https://via.placeholder.com/250.jpg" alt="fellows" class="image"/></article>
</div>
</section>
<form>
<h2>Contact us</h2>
<input type="text" placeholder="@">
<input type="text" placeholder="&#8962;">
<input type="text" placeholder="I have seen one of them">
<textarea class="textarea" placeholder="Your message"></textarea>
</form>
</body>
</html>
Raw
style.css
/* responsive desktop*/
@media screen and (min-width: 961px) {
body{
margin: 0 auto;
width: 100%;
}
ul{
list-style: none;
display: fleX;
font-size: 30px;
width: 100%;
padding: 2px;
background-color: black;
margin-bottom: 0px;
}
a{
padding: 30px 15px 10px 0px;
text-decoration: none;
color: darkgrey;
}
.conteneur{
margin: 80px;
display: flex;
flex-direction: row;
justify-content: space-around;
border-bottom: 2px solid;
padding-bottom: 80px;
}
form h2{
text-align: left;
}
h2{
text-align: center;
margin-top: 80px;
}
.image{
margin: 0 auto;
display: block;
width: 100%;
}
form{
display: block;
text-align: center;
margin-bottom: 50px;
margin-top: 10px;
width: 100%;
/* limite du formulaire */
padding: 15px;
}
input{
width: 80%;
margin-bottom: 30px;
}
.textarea{
width: 80%;
padding-bottom: 150px;
}
}
/* Responsive mobile*/
@media screen and (max-width: 961px) {
body{
margin: 0 auto;
width: 100%;
}
ul{
list-style: none;
display: fleX;
font-size: 30px;
width: 100%;
padding: 2px;
background-color: black;
margin-bottom: 0px;
}
a{
padding: 30px 15px 10px 0px;
text-decoration: none;
color: darkgrey;
}
.conteneur{
margin: 80px;
display: flex;
flex-direction: column;
justify-content: space-around;
border-bottom: 2px solid;
padding-bottom: 80px;
}
.h2{
text-align: center;
margin-top: 80px;
}
.image{
margin: 0 auto;
display: block;
width: 100%;
}
form{
display: block;
text-align: center;
margin-bottom: 50px;
margin-top: 10px;
width: 100%;
/* limite du formulaire */
padding: 15px;
}
input{
width: 80%;
margin-bottom: 30px;
}
.textarea{
width: 80%;
padding-bottom: 150px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment