Skip to content

Instantly share code, notes, and snippets.

@lebowvsky
Created March 2, 2020 17:59
Show Gist options
  • Save lebowvsky/cfc42b2aa1d5afa76b962940f94688f8 to your computer and use it in GitHub Desktop.
Save lebowvsky/cfc42b2aa1d5afa76b962940f94688f8 to your computer and use it in GitHub Desktop.
WCS Flex
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Find the precious!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li>FindThePrecious.com</li>
<li class="active">Fellows</li>
<li>Contact us</li>
</ul>
</nav>
<section>
<div class="carousel"></div>
</section>
<section>
<h2>Fellows wanted dead (or alive if you want to eat them later)</h2>
</section>
<section class="pictures">
<article></article>
<article></article>
<article></article>
</section>
<form>
<h2>Contact us</h2>
<input type="email" placeholder="@">
<input type="text" placeholder="&#8962;">
<input type="text" placeholder="I have seen one of them">
<textarea placeholder="Your message"></textarea>
</form>
</body>
</html>
body {
color: grey;
}
nav {
background-color: rgb(46, 45, 45);
width: 100%;
height: 10vh;
box-sizing: border-box;
border: 1px solid rgb(46, 45, 45);
}
nav ul {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
padding: 10px;
}
.active {
background-color: lightgrey;
}
section {
margin-bottom: 50px;
width: 100%;
text-align: center;
}
.carousel {
width: 100%;
height: 30vh;
background-color: gainsboro;
}
.pictures {
height: 20vh;
display: flex;
}
.pictures article {
height: 15vh;
width: 30%;
display: inline-block;
margin-left: 2.5%;
background-color: gainsboro;
}
form {
border-top: 3px solid;
display: flex;
flex-wrap: wrap;
}
form input, form textarea {
width: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment