Skip to content

Instantly share code, notes, and snippets.

@VadimBrodsky

VadimBrodsky/flexbox-form.html

Last active February 23, 2019 04:12
Show Gist options
  • Save VadimBrodsky/c3cbe2f439e7cce6810d4e3e4704c872 to your computer and use it in GitHub Desktop.
Save VadimBrodsky/c3cbe2f439e7cce6810d4e3e4704c872 to your computer and use it in GitHub Desktop.
Download ZIP
What The Flexbox
Raw
flexbox-form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Flexbox Single Line Form</title>
<style type="text/css" media="screen">
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: sans-serif;
margin: 0;
overflow: hidden;
background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
}
a {
color:white;
}
.cover {
height:100vh;
width:100%;
}
/*Video*/
.dog {
-webkit-filter:blur(5px);
filter:blur(5px);
z-index: -1;
min-width: 100%;
min-height: 100%;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/*Hack to get them to align properly */
.flex-form > *:not([type="date"]) {
border-top:1px solid white;
border-bottom:1px solid white;
}
.flex-form input[type="submit"] {
background:#FF5A5F;
border-top: 1px solid #FF5A5F;
border-bottom: 1px solid #FF5A5F;
color:white;
}
.flex-form > * {
border:0;
padding:10px;
background:white;
line-height:50px;
font-size: 20px;
border-radius:0;
outline:0;
border-right:1px solid rgba(0,0,0,0.2);
-webkit-appearance:none;
}
.flex-form > *:last-child {
border-right: 0;
}
.cover {
display: flex;
justify-content: center;
align-items: center;
}
.flex-form {
display: flex;
border: 20px solid rgba(0,0,0,0.3);
border-radious: 5px;
}
input[type="search"] {
flex-basis: 500px;
}
</style>
</head>
<body>
<div class="cover">
<form class="flex-form" action="" method="post">
<input type="search" placeholder="Where do you want to go?"/>
<label for="form">Form</label>
<input type="date" name="form"/>
<label for="form">To</label>
<input type="date" name="to"/>
<select name="" id="">
<option value="1">1 Guest</option>
<option value="2">2 Guest</option>
<option value="3">3 Guest</option>
<option value="4">4 Guest</option>
<option value="5">5 Guest</option>
</select>
<input type="submit" value="search" />
</form>
</div>
<!-- video from https://coverr.co -->
<video class="dog" src="https://app.coverr.co/s3/mp4/Taxi_crossing.mp4" autoplay loop></video>
</body>
</html>
Raw
flexbox-nav.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Flexbox Nav</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css" media="screen">
html { box-sizing: border-box; }
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: sans-serif;
margin: 0;
background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
}
a {
color: white;
font-weight: 100;
letter-spacing: 2px;
text-decoration: none;
background: rgba(0,0,0,0.2);
padding: 20px 5px;
display: inline-block;
width: 100%;
text-align: center;
transition: all 0.5s;
}
a:hover {
background: rgba(0,0,0,0.3);
}
.wrapper {
max-width: 1000px;
margin: 0 auto;
padding: 50px;
}
.flex-nav ul {
border: 1px solid black;
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.flex-nav li {
flex: 3;
}
.flex-nav .social {
flex: 1;
}
@media all and (max-width: 1000px) {
.flex-nav ul {
flex-wrap: wrap;
}
.flex-nav li {
flex: 1 1 50%;
}
.flex-nav .social {
flex: 1 1 25%;
}
}
@media all and (max-width: 500px) {
.flex-nav li {
flex-basis: 100%;
}
}
</style>
</head>
<body>
<div class="wrapper">
<nav class="flex-nav">
<ul>
<li><a href="#">Item 01</a></li>
<li><a href="#">Item 02</a></li>
<li><a href="#">Item 03</a></li>
<li><a href="#">Item 04</a></li>
<li><a href="#">Item 05</a></li>
<li><a href="#">Item 06</a></li>
<li class="social">
<a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li class="social">
<a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li class="social">
<a href="#"><i class="fa fa-github"></i></a>
</li>
<li class="social">
<a href="#"><i class="fa fa-instagram"></i></a>
</li>
</ul>
</nav>
</div>
</body>
</html>
Raw
flexbox-pricing-grid.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Flexbox Pricing Grid</title>
<style type="text/css" media="screen">
html { box-sizing: border-box; }
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: sans-serif;
margin: 0;
background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
}
a {
color: white;
}
.plan ul {
margin: 0;
padding: 0;
list-style: none;
}
.plan ul li {
border-bottom: 1px solid rgba(0,0,0,0.1);
padding: 10px
}
.plan a {
text-decoration: none;
background: #FEFF00;
padding: 10px;
color: black;
border-radius: 4px;
}
.plan h2 {
text-transform: uppercase;
color: white;
letter-spacing: 2px;
text-shadow: 3px 3px 0 rgba(0,0,0,0.1);
}
.price {
font-size: 50px;
font-family: serif;
margin: 10px 0;
}
.pricing-grid {
max-width: 750px;
margin: 0 auto;
display: flex;
align-items: center;
}
.plan {
background: rgba(255,255,255,0.2);
margin: 20px;
padding: 20px;
border-radius: 4px;
text-align: center;
flex: 1;
display: flex;
flex-wrap: wrap;
}
.plan > * {
flex: 1 1 100%;
}
.plan .cta {
align-self: flex-end;
}
</style>
</head>
<body>
<div class="pricing-grid">
<div class="plan plan1">
<h2>Cat</h2>
<p>Common, yet regarded by many as the worst house pet.</p>
<ul class="features">
<li>Scratches everything</li>
<li>Easily lost for days</li>
<li>Kind of a bummer</li>
</ul>
<p class="price">free</p>
<a class="cta" href="#">🐱 Really?</a>
</div>
<div class="plan plan2">
<h2>Dog</h2>
<p>Loving, gentle and caring. Dogs are the best house pet to have and will increase happiness ten fold.</p>
<ul class="features">
<li>Super Fun</li>
<li>Plays games</li>
<li>Not a cat</li>
</ul>
<p class="price">$90</p>
<a class="cta" href="#">🐶 Best Deal --></a>
</div>
<div class="plan plan2">
<h2>Fish</h2>
<p>Cheap n' easy.</p>
<ul class="features">
<li>Eats flakes</li>
<li>Cop out</li>
<li>Replaceable</li>
</ul>
<p class="price">$3</p>
<a class="cta" href="#">🐟</a>
</div>
</div>
</body>
</html>
Raw
flexbox-vh-centering.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Vertical and Horizontal Cenering</title>
<style type="text/css" media="screen">
html { box-sizing: border-box; }
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: sans-serif;
margin: 0;
background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
}
.wrapper {
max-width: 1000px;
margin: 0 auto;
padding: 50px;
}
img {
max-width: 100%;
}
a {
color: white;
text-decoration: none;
font-size: 15px;
background-color: rgba(0,0,0,0.2);
padding: 20px 5px;
}
a:hover {
background: rgba(0,0,0,0.4);
}
.slider-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.slider-nav li {
flex: 2;
text-align: center;
display: flex;
}
.slider-nav a {
display: block;
width: 100%;
flex-basis: 100%;
display: flex;
align-items: center;
}
.slider-nav span {
display: block;
width: 100%;
}
.slider-nav .arrow {
flex: 1;
}
.arrow a {
font-size: 30px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="slider">
<img src="https://picsum.photos/1000/300"/>
</div>
<nav class="slider-nav">
<ul>
<li class="arrow"><a href="#"><span>&lt;-</span></a></li>
<li><a href="#"><span>Add a CLI to Node Apps with Vantage</span></a></li>
<li><a href="#"><span>NewSprint, Spectacle</span></a></li>
<li><a href="#"><span>Small Modules: Tales from a Serial Module Author</span></a></li>
<li><a href="#"><span>The End</span></a></li>
<li class="arrow"><a href="#"><span>-&gt;</span></a></li>
</ul>
</nav>
</div>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>What the Flexbox</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="box box1">one</div>
<div class="box box2">two</div>
<div class="box box3">three</div>
<div class="box box4">four</div>
<div class="box box5">five</div>
<div class="box box6">six</div>
<!-- <div class="box box7">seven</div> -->
<!-- <div class="box box8">eight</div> -->
<!-- <div class="box box9">nine</div> -->
<!-- <div class="box box10">ten</div> -->
</div>
</body>
</html>
Raw
style.css
body {
box-sizing: border-box;
margin: 0;
}
.box {
color: white;
font-size: 100px;
text-align: center;
text-shadow: 4px 4px 0 rgba(0,0,0,0.1);
padding: 10px;
}
.box1 { background: #1abc9c; }
.box2 { background: #3498db; }
.box3 { background: #9b59b6; }
.box4 { background: #34495e; }
.box5 { background: #f1c40f; }
.box6 { background: #e67e22; }
.box7 { background: #e74c3c; }
.box8 { background: #bdc3c7; }
.box9 { background: #2ecc71; }
.box10 { background: #16a085; }
.container {
border: 1vh solid goldenrod;
min-height: 98vh;
display: flex;
/* display: inline-flex; */
/* main axis direction, row is default */
flex-direction: row;
/* flex-direction: column; */
/* flex-direction: row-reverse; */
/* flex-direction: column-reverse; */
/* cross axis direction, nowrap is default */
/* flex-wrap: nowrap; */
/* flex-wrap: wrap; */
/* flex-wrap: wrap-reverse; */
/* takes the empty space on the main axis and divides it up */
justify-content: flex-start;
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
/* cross axis alignment */
/* align-items: center; */
/* align-items: stretch; */
align-items: flex-start;
/* align-items: flex-end; */
/* align-items: baseline; */
/* takes the space on the cross axis and divides it up, useful for same height columns */
/* align-content: space-between; */
/* align-content: space-around; */
/* align-content: stretch; */
/* align-content: flex-start; */
/* align-content: flex-end; */
/* align-content: center; */
}
.box {
/* width: 300px; */
}
.box2 {
/* evenly distribute the flex items */
/* shorthand for flex-grow, flex-shrink and flex-basis */
flex: 1 1 400px;
/* when we have extra space how should we divide it across */
/* default flex-grow is 0 */
/* flex-grow: 1; */
/* how to shrink where not enough space */
/* flex-shrink: 1; */
/* base size when there is enough space */
/* flex-basis: 400px; */
}
.box10 {
/* give twice as much space */
flex: 2;
/* default order if 0, nagative values works too */
/* order: 5; */
/* align-self: center; */
align-self: stretch;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment