Hero Flex-list

Developer
Lukejacksonn
Size
5,064 Kb
Views
12,144
  1. Hero Flex-list Previews
  2. Hero Flex-list HTML Codes
  3. Hero Flex-list CSS Codes
  4. Hero Flex-list JS Codes

How do I make an hero flex-list?

Some responsive hero image style cards arranged using flexbox. . What is a hero flex-list? How do you make a hero flex-list? This script and codes were developed by Lukejacksonn on 30 November 2022, Wednesday.

Hero Flex-list Previews
IQ Test

Hero Flex-list - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hero Flex-list</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="view h fs" id="list"> <ul class="x w z"> <li class="np xl"><img src="http://lorempixel.com/1400/400/abstract/6"/> <div class="p"> <h3 data-lorem="5"></h3> <h5 data-lorem="8"></h5> <p data-lorem="40"></p> </div> </li> <li class="np md"><img src="http://lorempixel.com/1400/400/abstract/1"/> <div class="p"> <h3 data-lorem="3"></h3> <h5 data-lorem="6"></h5> <p data-lorem="20"></p> </div> </li> <li class="np md"><img src="http://lorempixel.com/1400/400/abstract/4"/> <div class="p"> <h3 data-lorem="2"></h3> <h5 data-lorem="5"></h5> <p data-lorem="20"></p> </div> </li> <li class="np xl"><img src="http://lorempixel.com/1400/400/abstract/8"/> <div class="p"> <h3 data-lorem="5"></h3> <h5 data-lorem="8"></h5> <p data-lorem="40"></p> </div> </li> <li class="np xl"><img src="http://lorempixel.com/1400/400/abstract/4"/> <div class="p"> <h3 data-lorem="5"></h3> <h5 data-lorem="8"></h5> <p data-lorem="40"></p> </div> </li> <li class="np md"><img src="http://lorempixel.com/1400/400/abstract/8"/> <div class="p"> <h3 data-lorem="2"></h3> <h5 data-lorem="5"></h5> <p data-lorem="20"></p> </div> </li> <li class="np xl"><img src="http://lorempixel.com/1400/400/abstract/8"/> <div class="p"> <h3 data-lorem="5"></h3> <h5 data-lorem="8"></h5> <p data-lorem="40"></p> </div> </li> <li class="np md"><img src="http://lorempixel.com/1400/400/abstract/3"/> <div class="p"> <h3 data-lorem="2"></h3> <h5 data-lorem="5"></h5> <p data-lorem="20"></p> </div> </li> <li class="np xl"><img src="http://lorempixel.com/1400/400/abstract/5"/> <div class="p"> <h3 data-lorem="5"></h3> <h5 data-lorem="8"></h5> <p data-lorem="40"></p> </div> </li> <li class="np md"><img src="http://lorempixel.com/1400/400/abstract/9"/> <div class="p"> <h3 data-lorem="2"></h3> <h5 data-lorem="5"></h5> <p data-lorem="20"></p> </div> </li> </ul>
</section>
<section class="view y h ctrls"> <ul class="y c"> <li class="np circle active"> <button class="ocd-ctrl">OCD</button> </li> <li class="np circle"> <button class="flex-ctrl">?</button> </li> <li class="np circle active"> <button class="vp-ctrl">fs</button> </li> <li class="np circle"> <button class="vp-ctrl">l</button> </li> <li class="np circle"> <button class="vp-ctrl">m</button> </li> <li class="np circle"> <button class="vp-ctrl">s</button> </li> </ul>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://rawgit.com/lukejacksonn/Lorem/master/lorem.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hero Flex-list - Script Codes CSS Codes

html { box-sizing: border-box;
}
*,
*:before,
*:after { box-sizing: inherit;
}
html,
body { position: relative; width: 100%; min-width: 320px; height: 100%; min-height: 320px; font-family: "Roboto", sans-serif; color: #a1a1a1; font-size: 24px; background: #f2f2f2;
}
body { padding-left: 125px;
}
img { display: block; width: 100%; height: auto;
}
h3 { font-weight: bold; color: #404040; line-height: 1.2rem;
}
h5 { font-size: 0.5rem; margin-top: 0.5rem;
}
p { padding-top: 1rem; max-width: 100%; font-size: 16px !important; line-height: 125%;
}
.view { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; margin: 0 auto; background: #f9f9f9;
}
.view.m { max-width: 100vh;
}
.view.l { max-width: 138vh;
}
.view.s { max-width: 68vh;
}
.view.fs { max-width: 100vw;
}
.c { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center;
}
.h { height: auto;
}
.x { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;
}
.y { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.z { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch;
}
.w { -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.g { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-negative: 0; flex-shrink: 0;
}
.s { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 1; flex-shrink: 1;
}
.p { padding: 1rem;
}
.np { padding: 0;
}
ul { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 1.618rem 0 0 1.618rem; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
}
ul li { position: relative; background: #fff; border: #b8b8b8; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26); margin: 0 1.618rem 1.618rem 0; padding: 1rem;
}
ul li.sq:before { content: ""; display: block; padding-bottom: 98%;
}
.xs { -webkit-box-flex: 4.23580103em; -ms-flex: 4.23580103em; flex: 4.23580103em;
}
.sm { -webkit-box-flex: 6.85352607em; -ms-flex: 6.85352607em; flex: 6.85352607em;
}
.md { -webkit-box-flex: 11.08900518em; -ms-flex: 11.08900518em; flex: 11.08900518em;
}
.lg { -webkit-box-flex: 17.94201038em; -ms-flex: 17.94201038em; flex: 17.94201038em;
}
.xl { -webkit-box-flex: 29.0301728em; -ms-flex: 29.0301728em; flex: 29.0301728em;
}
button { padding: 0.5rem; width: 70px; height: 70px; text-transform: uppercase; background: #fff; color: #d8d8d8; font-weight: bold; border: 0; outline: none; cursor: pointer; font-size: 18px;
}
.circle { overflow: hidden; border: 3px solid #eaeaea; box-shadow: none; -webkit-transform: scale(0.9); transform: scale(0.9); border-radius: 50%; -webkit-box-flex: 0; -ms-flex: none; flex: none;
}
.circle.active { border-color: #c6c6c6; -webkit-transform: scale(1); transform: scale(1);
}
.circle.active button { color: #b6b6b6;
}
.ctrls { position: fixed; top: 0; left: 0px; min-height: 100%; z-index: 99; border-right: 1px solid #eaeaea; background: #fff; width: auto;
}
.ctrls ul { margin: 1rem 0 0 1rem;
}
.ctrls ul li { margin: 0 1rem 1rem 0;
}
@media (orientation: portrait) { .ctrls li:nth-child(3), .ctrls li:nth-child(4) { display: none; }
}
#list { -webkit-transition: all 2s; transition: all 2s; min-width: 320px;
}

Hero Flex-list - Script Codes JS Codes

$(function() { $('.vp-ctrl').click(function() { $('#list').removeClass('s m l fs'); $('#list').addClass($(this).text()); $('.vp-ctrl').parent().removeClass('active'); $(this).parent().addClass('active'); }); $('.ocd-ctrl').click(function() { $('#list ul').toggleClass('z'); $(this).parent().toggleClass('active'); }); $('.flex-ctrl').click(function() { $('#list li').removeClass('sm md lg xl'); var rand; var alts = ['md','md','lg','xl']; var wrds = [20,20,30,40]; $('#list li').each(function(){ rand = Math.floor((Math.random()*4)%4) $(this).addClass(alts[rand]) .find('p').lorem(wrds[rand]); $(this).find('h3').lorem(wrds[rand]/10); }) });
})
Hero Flex-list - Script Codes
Hero Flex-list - Script Codes
Home Page Home
Developer Lukejacksonn
Username lukejacksonn
Uploaded November 30, 2022
Rating 4.5
Size 5,064 Kb
Views 12,144
Do you need developer help for Hero Flex-list?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lukejacksonn (lukejacksonn) Script Codes
Name
Flex Fix
Flexbox Masonry
Inline Radio Buttons
Sliding Drawers
Complex Flexbox Layouts
Pinger
Flexbox Email Template
Flexy Google Homepage
Lorem Ipsum Generator
Responsive Slider
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!