Skip to content

Instantly share code, notes, and snippets.

@chaitu111

chaitu111/flexbox-web-template.markdown

Created September 26, 2018 18:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chaitu111/fd4d436750d873ea15823dfdadaba75c to your computer and use it in GitHub Desktop.
Save chaitu111/fd4d436750d873ea15823dfdadaba75c to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox Web Template
Raw
flexbox-web-template.markdown

Flexbox Web Template

Start your adventure with Flexbox!

The entire layout for this responsive template was built using various Flexbox properties. Make sure to view in full page!

A Pen by Kevin Lesht on CodePen.

License.

Raw
index.haml
%header#main-header
.container
%a{href: '#', class: 'logo'} Guided Tours
%nav
%a{href: '#'} Tours
%a{href: '#'} Pricing
#intro
.cta.container
%img{class: 'splash', src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/adventure-splash.svg', alt: 'Splash'}
%h1 Explore and Discover
%p Delectus illum corporis laundantium illo repudiandae et doloemque.
%a{href: '#', class: 'button'}
%span Start your adventure
#tours
.container
%h2 Where would you like to go?
%form{action: '#'}
%input#location{type: 'text', placeholder: 'Location'}
%button{type: 'submit', class: 'button'} Get Moving
%ul
= list_of ([ {title: 'Denali', subtitle: 'Alaska', comment: '<!-- Image by Maureen [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Flickr, https://www.flickr.com/photos/amerune/9374725724 -->', img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/denali_alaska.jpg'}, {title: 'Mirror Lake', subtitle: 'California', comment: '<!-- Image By chensiyuan (chensiyuan) [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC BY-SA 4.0-3.0-2.5-2.0-1.0 (http://creativecommons.org/licenses/by-sa/4.0-3.0-2.5-2.0-1.0)], via Wikimedia Commons, https://upload.wikimedia.org/wikipedia/commons/7/70/Yosemite_national_park_mirror_lake_2010u.JPG -->', img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/mirror-lake_california.jpg'}, {title: 'Antelope Canyon', subtitle: 'Arizona', comment: '<!-- Image By Moyan Brenn [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Flickr, https://www.flickr.com/photos/aigle_dore/5951674773 -->', img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/antelope-canyon_arizona.jpg'}, {title: 'Key West', subtitle: 'Florida', comment: '<!-- Image By Ricymar Photography [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Flickr, https://www.flickr.com/photos/ricardo_mangual/5749480168 -->', img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/key-west_florida.jpg'}, {title: 'Saint Mary Lake', subtitle: 'Montana', comment: '<!-- Image By Ricymar Photography [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Flickr, https://www.flickr.com/photos/ricardo_mangual/5749480168 -->', img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/saint-mary-lake_montana.jpg'}, {title: 'Moab', subtitle: 'Utah', comment: '<!-- Image By Gridge [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC BY-SA 4.0-3.0-2.5-2.0-1.0 (http://creativecommons.org/licenses/by-sa/4.0-3.0-2.5-2.0-1.0)], via Wikimedia Commons, https://upload.wikimedia.org/wikipedia/commons/0/06/Delicatearch1.jpg -->', img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/moab_utah.jpg'}, {title: 'Waipio Valley', subtitle: 'Hawaii', comment: '<!-- Image By Paul Bica [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Flickr, https://www.flickr.com/photos/dexxus/5652914929 -->', img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/waipio-valley_hawaii.jpg'}, {title: 'Carlsbad Caverns', subtitle: 'New Mexico', comment: '<!-- Image By Guinther [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0/)], via Wikimedia Commons, https://upload.wikimedia.org/wikipedia/commons/d/dd/Carlsbad_Interior_Formations.jpg -->', img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/carlsbad-caverns_new-mexico.jpg'} ]) do |location|
%div
%h3= location[:title]
%h4= location[:subtitle]
= location[:comment]
%img{src: location[:img], alt: location[:title] + ', ' + location[:subtitle]}
#pricing.container
- 3.times do |i|
%article
%h3 Tier #{i+1}
%p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius adipisci, sed libero. Iste asperiores suscipit, consequatur debitis animi impedit numquam facilis iusto porro labore dolorem, maxime magni incidunt. Delectus, est!
%p Possimus deserunt nisi perferendis, consequuntur odio et aperiam, est, dicta dolor itaque sunt laborum, magni qui optio illum dolore laudantium similique harum. Eveniet quis, libero eligendi delectus repellendus repudiandae ipsum.
%a{href: '#', class: 'button'}
%span Learn More
#main-footer
%p &copy 2016
Raw
script.js
$('.cta a').click(function() {
$('html,body').animate({
scrollTop: $('#tours').offset().top
}, 500);
return false;
});
$('#tours li').on('click', function() {
$('#location').val($('img', this).attr('alt'));
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.scss
@import "bourbon";
$color1: #EEEBE4; // tan
$color2: #28415E; // blue
$color3: #B79D55; // gold
/* =================================
Base Styles
==================================== */
* {
@include box-sizing(border-box);
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: 'Lato', sans-serif;
color: #3a3a3a;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
a {
text-decoration: none;
}
.container {
margin: 0 auto;
width: 90%;
max-width: 1170px;
}
.button {
background: none;
height: 50px;
border-radius: 3px;
letter-spacing: 1px;
@include transition(background 0.4s);
}
/* ---- Header ---- */
#main-header {
background: #fff;
padding: 0.85em 0;
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.logo, nav a {
padding: 10px;
@media (min-width: 500px) {
padding: 10px 15px;
}
}
.logo {
font-size: 1.35em;
color: $color2;
}
nav a {
font-size: 0.65em;
text-transform: uppercase;
color: lighten($color2, 25%);
@media (min-width: 500px) {
font-size: 0.95em;
}
}
}
/* ---- Intro ---- */
#intro {
background: $color1;
display: flex;
justify-content: center;
align-items: center;
padding: 4em 0;
.cta {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: $color2;
.splash {
display: none;
@media (min-width: 500px) {
display: block;
width: 200px;
}
}
img {
margin-bottom: 1em;
}
h1, p, .button {
text-align: center;
}
h1 {
margin: 0;
}
p {
margin-bottom: 1.5em;
}
.button {
display: flex;
align-items: center;
padding: 10px 30px;
box-shadow: inset 0 0 0 2px $color3;
color: $color2;
&:hover, &:focus {
background: $color3;
color: #fff;
}
}
}
}
/* ---- Tours ---- */
#tours {
padding-top: 4em;
h2 {
margin: 0;
text-align: center;
}
form {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
margin: 0 auto;
padding: 4em 0;
max-width: 600px;
@media (min-width: 500px) {
flex-direction: row;
}
input, button {
margin: 0 1em;
padding: 10px;
height: 50px;
outline: 0;
}
input {
background-color: #fff;
margin-bottom: 1em;
border: 1px solid #ddd;
border-radius: 3px;
color: #494f4f;
@include transition(border-color 0.4s);
&:focus {
border-color: #879090;
}
@media (min-width: 500px) {
flex: 3;
margin-bottom: 0;
}
}
.button {
border: 0;
box-shadow: inset 0 0 0 2px #879090;
color: #494f4f;
&:hover, &:focus {
background: #879090;
color: #fff;
}
@media (min-width: 500px) {
flex: 100px;
}
}
}
ul, ul li, ul li div {
display: flex;
}
ul {
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
li {
background: rgba(0,0,0,0.35);
position: relative;
flex-direction: column;
cursor: pointer;
@include transition(background 0.4s);
&:hover {
background: rgba(0,0,0,0);
}
@media (min-width: 500px) {
flex: 50%;
}
@media (min-width: 800px) {
flex: 25%;
}
div {
position: absolute;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1em;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
h3, h4 {
margin: 0;
}
h3 {
margin-bottom: 0.35em;
font-size: 1em;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
}
h4 {
font-weight: 300;
letter-spacing: 1px;
}
}
img {
position: relative;
z-index: -1;
}
}
}
}
/* ---- Pricing ---- */
#pricing {
display: flex;
flex-direction: column;
padding: 4em 0;
article {
background: #edf4f7;
display: flex;
flex-direction: column;
flex: 1;
margin: 0 0.85em 1em;
padding: 1em;
border-radius: 3px;
&:last-child {
margin-bottom: 0;
}
h3 {
color: $color2;
}
p {
margin: 0 0 1em;
font-size: 0.95em;
line-height: 24px;
font-weight: 400;
&:last-of-type {
margin-bottom: 3em;
}
}
.button {
display: flex;
align-items: center;
align-self: center;
margin-top: auto;
padding: 10px 30px;
box-shadow: inset 0 0 0 2px lighten($color2, 10%);
color: $color2;
&:hover, &:focus {
background: lighten($color2, 10%);
color: #fff;
}
}
}
@media (min-width: 800px) {
flex-direction: row;
article {
margin-bottom: 0;
}
}
}
/* ---- Footer ---- */
#main-footer {
background: #d9e4ea;
flex: 1;
padding: 2em 0;
text-align: center;
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Lato:400,300" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment