Demo Flexbox 2
How do I make an demo flexbox 2?
What is a demo flexbox 2? How do you make a demo flexbox 2? This script and codes were developed by Hugo Giraudel on 09 August 2022, Tuesday.
Demo Flexbox 2 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Demo Flexbox 2</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .navigation { list-style: none; margin: 0; background: deepskyblue; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: flex-end;
}
.navigation a { text-decoration: none; display: block; padding: 1em; color: white;
}
.navigation a:hover { background: #00b7f5;
}
@media all and (max-width: 800px) { .navigation { justify-content: space-around; }
}
@media all and (max-width: 600px) { .navigation { -webkit-flex-flow: column wrap; flex-flow: column wrap; padding: 0; } .navigation a { text-align: center; padding: 10px; border-top: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .navigation li:last-of-type a { border-bottom: none; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ul class="navigation"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact</a></li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Demo Flexbox 2 - Script Codes CSS Codes
.navigation { list-style: none; margin: 0; background: deepskyblue; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: flex-end;
}
.navigation a { text-decoration: none; display: block; padding: 1em; color: white;
}
.navigation a:hover { background: #00b7f5;
}
@media all and (max-width: 800px) { .navigation { justify-content: space-around; }
}
@media all and (max-width: 600px) { .navigation { -webkit-flex-flow: column wrap; flex-flow: column wrap; padding: 0; } .navigation a { text-align: center; padding: 10px; border-top: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .navigation li:last-of-type a { border-bottom: none; }
}
Developer | Hugo Giraudel |
Username | HugoGiraudel |
Uploaded | August 09, 2022 |
Rating | 4.5 |
Size | 2,778 Kb |
Views | 42,504 |
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 |
CSS 3 progress bar | 2,808 Kb |
Items on circle | 3,437 Kb |
Pure CSS button switch | 4,769 Kb |
Pure CSS light switch | 4,088 Kb |
Demo Flexbox 3 | 2,822 Kb |
Demo Flexbox 1 | 2,388 Kb |
CSS power button | 3,836 Kb |
CSS Dribbble invite request | 9,749 Kb |
Sass mixin for scrollbar styling | 2,400 Kb |
Stripe-a-gradient Sass function | 11,192 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 |
Video Player Custom Controls | EleftheriaBatsou | 3,665 Kb |
Flex layout example | Mofny | 1,663 Kb |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
This in constructor context | _shree33 | 1,718 Kb |
GrcJS | Vino6 | 2,047 Kb |
A Pen by Alexandru Pora | Axpro | 1,615 Kb |
Marching Squares Visualized | Sakri | 7,074 Kb |
Pomodoro Clock | Yas46 | 3,328 Kb |
Tab Menus | Zephyr | 3,180 Kb |
React Vote Component | Souporserious | 5,465 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!