Skip to content

Instantly share code, notes, and snippets.

@edwjusti

edwjusti/flex.html

Last active October 11, 2016 08:26
Show Gist options
  • Save edwjusti/ca351ae4ad31f0ce71c89581fbf66667 to your computer and use it in GitHub Desktop.
Save edwjusti/ca351ae4ad31f0ce71c89581fbf66667 to your computer and use it in GitHub Desktop.
Download ZIP
It is just a demo of flexbox.
Raw
flex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta name="description" content="An almost responsive website">
<title>Shop</title>
<style>
body {
background-color: rgb(235,235,235);
font-family: Arial, Helvetica, sans-serif;
}
header {
position: fixed;
display: flex;
left: 0;
top: 0;
z-index: 900;
width: 100%;
height: 55px;
background-color: #ff9800;
box-shadow: 0 1px 3px rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.30);
justify-content: center;
}
.title {
line-height: 55px;
font-size: 22px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: bolder;
color: red;
text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
font-family: "Lucida Console", Monaco, monospace;
animation: enter 800ms linear;
animation-fill-mode: both;
}
@keyframes enter {
from {
transform: translateX(200%);
filter: blur(5px);
letter-spacing: 20px;
}
to {
transform: translateX(0);
filter: blur(0);
letter-spacing: 2px;
}
}
.title:hover {
color: blue;
transition: color 600ms ease;
}
.grid {
margin-top: 70px;
margin-bottom: 30vh;
display: flex;
flex-wrap: wrap;
justify-content: strech;
}
section {
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: strech;
}
.item {
width: 280px;
margin: 5px;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
background-color: white;
}
.item p {
margin: 20px;
text-align: center;
color: #393939;
}
.top {
display: flex;
width: 95%;
height: 50px;
padding: 20px 0 20px 5%;
border-radius: 0 0 8px 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.top ul {
padding: 0;
margin: 4px 0 0 8px;
list-style-type: none;
}
.top li {
margin-bottom: 4px;
font-weight: bold;
}
.gold {
background-color: yellow;
color: #424242;
}
.diamond {
background-color: #42a5f5;
color: white;
}
.emerald {
background-color: #00c853;
color: white;
}
.transfer {
background-color: purple;
color: white;
}
.reset {
background-color: #f44336;
color: white;
}
.friends {
background-color: orange;
color: #424242;
}
img {
height: 50px;
border-radius: 50%;
}
footer {
height: 90px;
padding: 10px 0 10px 0;
width: 100%;
display: block;
position: absolute;
float: left;
bottom: 100;
left: 0;
background-color: #454545;
text-align: center;
color: white;
border-top: solid orange;
line-height: 50px;
}
span > i {
font-size: 10px;
}
.dev {
font-size: 15px;
height: 20px;
}
svg#heart {
margin: 0 0 -2px 0;
}
svg#heart path#heartShape {
animation: heartbeat 1s infinite;
transform-origin: center center;
fill: #FF6688;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
10% {
transform: scale(1.2);
}
50% {
transform: scale(1);
}
}
@media screen and (min-width: 1025px){
header {
height: 60px;
}
.title {
line-height: 60px;
font-size: 28px;
}
.grid {
margin-top: 75px;
}
.item {
width: 350px;
}
}
@media screen and (max-width: 1024px){
header {
height: 54px;
}
.title {
line-height: 54px;
font-size: 24px;
}
}
</style>
</head>
<body>
<header>
<span class="title">Shop</span>
</header>
<div class="grid">
<section>
<div class="item">
<div class="top gold">
<img src="http://i0.wp.com/shop.brokenlens.xyz/wp-content/uploads/2016/09/gold1.png">
<ul>
<li>Gold</li>
<li>$5,00</li>
</ul>
</div>
<p>Gold rank! This rank is the cheapest you get 20 extra slots for your friends and can be able to fly in the lobby, cool tag in the forums and in-game and lvl 2 kits and so much more! This rank only lasts 30 days.</p>
</div>
<div class="item">
<div class="top diamond">
<img src="http://i0.wp.com/shop.brokenlens.xyz/wp-content/uploads/2016/09/diamond1.png">
<ul>
<li>Diamond</li>
<li>$10,00</li>
</ul>
</div>
<p>Diamond rank! Is one of the coolest ranks here you get 30 extra slots of friends and able to fly in the lobby you get a cool tag in the forums and in-game you are able to join the server even if its full! lvl 3 kits and so much more. This rank lasts only 90 days.</p>
</div>
<div class="item">
<div class="top emerald">
<img src="http://i0.wp.com/shop.brokenlens.xyz/wp-content/uploads/2016/09/emerald1.png">
<ul>
<li>Emerald</li>
<li>$25,00</li>
</ul>
</div>
<p>Emerald rank! Is the best rank in the server! You are able to fly in the lobby get 40 extra slots for your friend list get a cool tag in forums and in-game you are able to join the server if its full! lvl 4 kits (maxed out) and so much more. This rank lasts forever!!!</p>
</div>
<div class="item">
<div class="top transfer">
<img src="http://i2.wp.com/shop.brokenlens.xyz/wp-content/uploads/2016/09/transfer1.png">
<ul>
<li>Transfer Ticket</li>
<li>$2,50</li>
</ul>
</div>
<p>A Transfer Ticket allows you to transfer your entire account stats, including coins, friends, leaderboard stats and everything else to a new username.</p>
</div>
<div class="item">
<div class="top reset">
<img src="http://i1.wp.com/shop.brokenlens.xyz/wp-content/uploads/2016/09/reset1.png">
<ul>
<li>5x Reset Tickets</li>
<li>$2,50</li>
</ul>
</div>
<p>A Reset Ticket allows you to completelly wipe your InGame statistics for a game of your choice.</p>
</div>
<div class="item">
<div class="top friends">
<img src="http://i1.wp.com/shop.brokenlens.xyz/wp-content/uploads/2016/09/friend1.png">
<ul>
<li>+15 Friends Slots</li>
<li>$2,50</li>
</ul>
</div>
<p>This will add 15 more friend slots to your account! Adding a friend allows you to chat privately and see where they are at BrokenLens!</p>
</div>
</section>
</div>
<footer>
<span class="rights">All rights reserveds &copy; <i>And also lefts!</i></span><br>
<div class="dev">
Made with <svg id="heart" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path id="heartShape" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment