Skip to content

Instantly share code, notes, and snippets.

@igoventura

igoventura/index.html

Created May 3, 2019 19:52
Show Gist options
  • Save igoventura/d59bd614f42f89221c0d8936b37d5bf5 to your computer and use it in GitHub Desktop.
Save igoventura/d59bd614f42f89221c0d8936b37d5bf5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Teste 001</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
</head>
<body>
<header class="mx-2 my-1">
<h1 class="my-0">Search</h1>
<p class="my-0">for perfume</p>
<div class="search-box my-1">
<div class="input-group">
<div class="icon"></div>
<input type="text" placeholder="Find your scent">
</div>
<button class="btn btn-white">
<div class="icon"></div>
</button>
<button class="btn btn-white">
<div class="icon"></div>
</button>
</div>
</header>
<main class="my-1">
<article>
<h1 class="mx-2 my-1">By Notes</h1>
<div class="card-list row">
<div class="card tall">
<img src="https://placeimg.com/100/100/animals">
<p>Strelitzia</p>
<span>240 perfumes</span>
</div>
<div class="card tall">
<img src="https://placeimg.com/100/100/animals">
<p>Strelitzia</p>
<span>240 perfumes</span>
</div>
<div class="card tall">
<img src="https://placeimg.com/100/100/animals">
<p>Strelitzia</p>
<span>240 perfumes</span>
</div>
<div class="card tall">
<img src="https://placeimg.com/100/100/animals">
<p>Strelitzia</p>
<span>240 perfumes</span>
</div>
</div>
</article>
<article>
<h1 class="mx-2 my-1">By Groups</h1>
<div class="mx-2 card-list column">
<div class="card mini">
<img src="https://placeimg.com/640/480/any">
<p>Aromatic</p>
</div>
<div class="card mini">
<img src="https://placeimg.com/640/480/any">
<p>Floral</p>
</div>
<div class="card mini">
<img src="https://placeimg.com/640/480/any">
<p>Citrus</p>
</div>
<div class="card mini">
<img src="https://placeimg.com/640/480/any">
<p>Wooden</p>
</div>
<div class="card mini">
<img src="https://placeimg.com/640/480/any">
<p>Aromatic</p>
</div>
<div class="card mini">
<img src="https://placeimg.com/640/480/any">
<p>Floral</p>
</div>
<div class="card mini">
<img src="https://placeimg.com/640/480/any">
<p>Citrus</p>
</div>
<div class="card mini">
<img src="https://placeimg.com/640/480/any">
<p>Wooden</p>
</div>
<div class="card mini">
<img src="https://placeimg.com/640/480/any">
<p>Aromatic</p>
</div>
<div class="card mini">
<img src="https://placeimg.com/640/480/any">
<p>Floral</p>
</div>
<div class="card mini">
<img src="https://placeimg.com/640/480/any">
<p>Citrus</p>
</div>
<div class="card mini">
<img src="https://placeimg.com/640/480/any">
<p>Wooden</p>
</div>
</div>
</article>
</main>
<footer>
<div class="item">
<div class="icon"></div>
</div>
<div class="item">
<div class="icon"></div>
</div>
<div class="item">
<div class="icon"></div>
</div>
<div class="item">
<div class="icon"></div>
</div>
</footer>
</body>
</html>
Raw
styles.css
body,
h1,
p,
span {
font-family: "Lato", sans-serif;
color: currentColor;
margin: 0;
}
body {
font-family: "Lato", sans-serif;
color: #333;
background: rgb(250, 250, 250);
padding-top: 16px;
padding-bottom: 80px;
}
header p {
font-size: 1.7rem;
}
.card-list.column {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 12px;
grid-row-gap: 12px;
}
.card-list.row {
display: grid;
grid-template-columns: repeat(4, 120px);
grid-column-gap: 24px;
padding: 0 1rem;
overflow-x: auto;
}
.card-list .card {
background-color: white;
border-radius: 12px;
padding: 12px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.03);
}
.card-list .card.mini {
display: flex;
}
.card-list .card.mini p {
margin-left: 8px;
vertical-align: middle;
line-height: 36px;
}
.card-list .card.mini img {
width: 36px;
height: 36px;
border-radius: 6px;
}
.card-list .card.tall {
background-color: indianred;
width: 100px;
height: 160px;
margin: 12px;
}
.card-list .card.tall p,
.card-list .card.tall span {
color: white;
text-align: center;
}
.card-list .card.tall p {
font-weight: 700;
}
.card-list .card.tall img {
margin-bottom: 12px;
border-radius: 12px;
}
footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
justify-items: center;
align-content: center;
height: 60px;
padding-bottom: 12px;
position: fixed;
bottom: 0;
background: white;
width: 100vw;
}
.icon {
height: 24px;
width: 24px;
background-color: #777;
}
.search-box {
display: grid;
grid-template-columns: calc(100% - 120px) 48px 48px;
grid-column-gap: 12px;
}
div.input-group {
position: relative;
}
div.input-group .icon {
position: absolute;
top: 12px;
left: 12px;
}
.search-box input,
.search-box button {
border: none;
font-size: 1rem;
padding: 12px;
border-radius: 12px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.03);
background: white;
outline: none;
}
input[type="text"] {
padding-left: 48px;
height: 24px;
max-width: calc(100% - 60px);
font-family: "Lato", sans-serif;
}
/* spacing */
.mx-0 {
margin-left: 0;
margin-right: 0;
}
.mx-1 {
margin-left: 1rem;
margin-right: 1rem;
}
.mx-2 {
margin-left: 2rem;
margin-right: 2rem;
}
.my-0 {
margin-top: 0;
margin-bottom: 0;
}
.my-1 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-2 {
margin-top: 2rem;
margin-bottom: 2rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment