Flex-panels content
How do I make an flex-panels content?
Wip of sectioned project that has responsive areas . What is a flex-panels content? How do you make a flex-panels content? This script and codes were developed by Jack on 16 September 2022, Friday.
Flex-panels content - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flex-panels content</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="wrapper-content"> <header class="flex header"><div class="column-mid"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p</div></header> <article class="flex main"> <div class="column-mid"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div> </article> <article class="flex aside aside-1">THIS is a really big side of words and more see later </article> <article class="flex aside aside-2">THIS is a really big side of words and more see later </article> </div></div>
<div class="wrapper"><div class="wrapper-content"> <aside class="flex aside aside-1x"> <div class="frame"> <div class="content"> <h1>Design Knowledge</h1> <svg id="svgtwo"></svg> </div></div>
</aside> <aside class="flex aside aside-2x"> <div class="frame"> <div class="content"> <h1>Design Knowledge</h1> <svg id="svgone"></svg> </div>x </div></aside> </div>
</div> <div class="wrapper"> <div class="wrapper-content"> <header class="flex header"> <div class="column-mid"> <ul> <li class="chart" data-percent="75"><span>26</span>Illustrator</li> <li class="chart" data-percent="15"><span>15</span>Heures</li> <li class="chart" data-percent="83"><span>50</span>Minutes</li> <li class="chart" data-percent="75"><span>26</span>Jours</li> <li class="chart" data-percent="15"><span>15</span>Heures</li> <li class="chart" data-percent="83"><span>50</span>Minutes</li> </ul> </div> </header> </div> </div> <div class="wrapper"><div class="wrapper-content"> <aside class="flex aside aside-1x"> <div class="frame"> <div class="content"> <h1>Design Knowledge</h1> <svg id="svgtwo"></svg> </div></div>
</aside> <aside class="flex aside aside-2x"> <div class="frame"> <div class="content"> <h1>Design Knowledge</h1> <svg id="svgone"></svg> </div> </div></aside> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js'></script>
</body>
</html>
Flex-panels content - Script Codes CSS Codes
.wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; background: white; font-weight: bold; text-align: center;
}
.wrapper-content {max-width:1200px; margin:auto;padding:0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; font-weight: bold; text-align: center;
}
.flex { padding: 10px; flex: 1 100%;
}
.column-mid { width: 100%; max-width: 900px; margin:auto; vertical-align:middle; text-align:left; padding: 0px 0px;
}
.column-sm { width: 10%; min-width:150px; max-width: 250px; padding: 10px 15px;
}
.header { background: rgba(10, 10, 10, 0.4); height: auto;
}
.main { flex: 4 auto;-webkit-flex: 4 auto; -moz-flex: 4 auto; text-align: left; background: deepskyblue;
}
.aside-1, .aside-2 { width:5%; flex: 1 auto;-webkit-flex: 1 auto;-moz-flex: 1 auto; background: gold;
}
.aside-1x, .aside-2x { flex: 1 auto; -moz-flex: 1 auto; -webkit-flex: 1 auto; background: blue; height: 400px;
}
@media all and (min-width: 600px) { .aside { flex: 1 auto;-webkit-flex: 1 auto; -moz-flex: 1 auto; }
}
@media all and (min-width: 800px) { .main { flex: 3 0px;-webkit-flex: 3 0px; -moz-flex: 3 0px; } .aside-1 { order: 1; } .main { order: 2; } .aside-2 { order: 3; } .footer { order: 4; }
}
.frame { border-radius: 4px; height: 400px;
}
body .frame .content h1 { text-align: center; font-family: 'roboto'; color: white; font-weight: 100; text-transform: uppercase;
}
#svgone, #svgtwo { width: 500px; height: 300px;
}
.content { height: 500px; text-align: center;
}
ul {vertical-align:middle; text-align:center; margin-bottom: 4em;margin:0;padding:auto;}
.chart {text-align:center; display: inline-block; width: 140px; height: 140px; margin: 15px; color:white; vertical-align:middle; font-size:20px; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 30px;
}
.chart:hover {color:black;}
.chart span {top:0;left:50%;bottom:0;
right:0;margin:0;padding:0; display: block; text-align:center; font-size: 2em; font-weight: normal;
}
.chart canvas { margin:auto; position: absolute; left: 0; top: 0;
}
Developer | Jack |
Username | jackmoran |
Uploaded | September 16, 2022 |
Rating | 3 |
Size | 2,787 Kb |
Views | 30,360 |
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!
Name | Size |
A Pen by jack | 4,612 Kb |
NAVIGATION | 4,360 Kb |
Rework of the rework with additional events | 9,314 Kb |
Svg Icons of my personal logo-moranideas | 5,343 Kb |
Sliding Blocks | 2,129 Kb |
CSS Google Now | 3,196 Kb |
Unify Test Example of Panorama | 2,117 Kb |
Social Bar | 2,200 Kb |
Stars Rise | 8,461 Kb |
MENU to Close Arrow | 2,593 Kb |
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!
Name | Username | Size |
Cloud upload | Jaflo | 2,774 Kb |
Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
Mobile Nav Menu | AliKlein | 4,745 Kb |
Long Shadow Button | Uixcrazy | 3,550 Kb |
Canvas snow | Win7killer | 2,572 Kb |
Glowing Pulse Form | Jackrugile | 2,542 Kb |
Sass Get Function | Lukewatts | 2,155 Kb |
CSS-Flexbox-Demo | Sstiglets | 1,709 Kb |
Portfolio Landing Page | FDfranklin | 3,585 Kb |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!