Skip to content

Instantly share code, notes, and snippets.

@yaosamo

yaosamo/index.html

Created March 21, 2020 02:21
Show Gist options
  • Save yaosamo/c7eb36ee2db98b007297208279b991af to your computer and use it in GitHub Desktop.
Save yaosamo/c7eb36ee2db98b007297208279b991af to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
@keyframes hello {
0% {
opacity: 0;
transform: translateY(-5px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
body {
font-family: Helvetica, sans-serif;
font-size: 16px;
font-weight:400;
color: #222;
}
#grid {
display: flex;
flex-wrap: wrap-reverse;
margin: 0 auto;
padding-top: 40px;
max-width: 900px;
}
.card {
max-width: 420px;
background-color: #f9f9f9;
border-radius: 10px;
transition: 0.2s ease-out;
margin: 10px;
}
.card:hover {
cursor: pointer;
background-color: #fff;
box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.06);
transform: translateY(-2px);
}
.info {
background-image: url(info.svg);
background-repeat: no-repeat;
width: 32px;
height: 32px;
float: right;
margin: 20px 20px 0 0;
}
.header {
margin: 20px 0 0 20px;
}
.footer {
margin: 20px;
}
.bold-title {
padding-top: 10px;
font-size: 20px;
font-weight: 600;
}
.price {
padding-top: 10px;
font-size: 20px;
}
.colors {
display: flex;
float: right;
}
.exterior {
background-color: #C43446;
width: 22px;
height: 22px;
border-radius: 12px;
margin-right: 10px;
}
.interior {
background-color: #000000;
width: 22px;
height: 22px;
border-radius: 12px;
}
.image {
animation: 1s ease-in-out 0s 1 hello;
background-image: url([email protected]);
background-size: 380px 254px;
width: 380px;
height: 254px;
margin: 20px;
}
Raw
index.html
<!---->
<!---->
<!---->
<!--Designer here is trying to make code. But we all know html is not a dev language-->
<!---->
<!---->
<!---->
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<meta charset="utf-8" />
<title>Showroom card hover</title>
</head>
<body>
<div id="grid">
<div class="card">
<div class="info"></div>
<div class="header">
<div class="title">2019</div>
<div class="bold-title">AMG GLA 45</div>
</div>
<div class="image"></div>
<div class="footer">
<div>
<div class="title">Starting at</div>
<div class="price">$35,000</div>
</div>
<div class="colors">
<div class="exterior"></div>
<div class="interior"></div>
</div>
</div>
</div>
<div class="card">
<div class="info"></div>
<div class="header">
<div class="title">2019</div>
<div class="bold-title">AMG GLA 45</div>
</div>
<div class="image"></div>
<div class="footer">
<div class="title">Starting at</div>
<div class="price">$35,000
<div class="colors">
<div class="exterior"></div>
<div class="interior"></div>
</div></div>
</div>
</div>
<div class="card">
<div class="info"></div>
<div class="header">
<div class="title">2019</div>
<div class="bold-title">AMG GLA 45</div>
</div>
<div class="image"></div>
<div class="footer">
<div class="title">Starting at</div>
<div class="price">$35,000
<div class="colors">
<div class="exterior"></div>
<div class="interior"></div>
</div></div>
</div>
</div>
<div class="card">
<div class="info"></div>
<div class="header">
<div class="title">2019</div>
<div class="bold-title">AMG GLA 45</div>
</div>
<div class="image"></div>
<div class="footer">
<div class="title">Starting at</div>
<div class="price">$35,000
<div class="colors">
<div class="exterior"></div>
<div class="interior"></div>
</div></div>
</div>
</div>
<div class="card">
<div class="info"></div>
<div class="header">
<div class="title">2019</div>
<div class="bold-title">AMG GLA 45</div>
</div>
<div class="image"></div>
<div class="footer">
<div class="title">Starting at</div>
<div class="price">$35,000
<div class="colors">
<div class="exterior"></div>
<div class="interior"></div>
</div></div>
</div>
</div>
<div class="card">
<div class="info"></div>
<div class="header">
<div class="title">2019</div>
<div class="bold-title">AMG GLA 45</div>
</div>
<div class="image"></div>
<div class="footer">
<div class="title">Starting at</div>
<div class="price">$35,000
<div class="colors">
<div class="exterior"></div>
<div class="interior"></div>
</div></div>
</div>
</div>
</div>
</body>
</html>
Raw
style.css
@keyframes hello {
0% {
opacity: 0;
transform: translateY(-5px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
body {
font-family: Helvetica, sans-serif;
font-size: 16px;
font-weight:400;
color: #222;
}
#grid {
display: flex;
flex-wrap: wrap-reverse;
margin: 0 auto;
padding-top: 40px;
max-width: 900px;
}
.card {
max-width: 420px;
background-color: #f9f9f9;
border-radius: 10px;
transition: 0.2s ease-out;
margin: 10px;
}
.card:hover {
cursor: pointer;
background-color: #fff;
box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.06);
transform: translateY(-2px);
}
.info {
background-image: url(info.svg);
background-repeat: no-repeat;
width: 32px;
height: 32px;
float: right;
margin: 20px 20px 0 0;
}
.header {
margin: 20px 0 0 20px;
}
.footer {
margin: 20px;
}
.bold-title {
padding-top: 10px;
font-size: 20px;
font-weight: 600;
}
.price {
padding-top: 10px;
font-size: 20px;
}
.colors {
display: flex;
float: right;
}
.exterior {
background-color: #C43446;
width: 22px;
height: 22px;
border-radius: 12px;
margin-right: 10px;
}
.interior {
background-color: #000000;
width: 22px;
height: 22px;
border-radius: 12px;
}
.image {
animation: 1s ease-in-out 0s 1 hello;
background-image: url([email protected]);
background-size: 380px 254px;
width: 380px;
height: 254px;
margin: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment