Flexbox Footer
How do I make an flexbox footer?
What is a flexbox footer? How do you make a flexbox footer? This script and codes were developed by Tyler Fowle on 12 August 2022, Friday.
Flexbox Footer - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox Footer</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='wrap'> <header> <div class='logo'> Flexbox Footer </div> </header> <main> <div class='section s1'> 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. </div> <div class='section s2'> 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. </div> <div class='section s3'> 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. </div> </main> <footer> Footer </footer>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Flexbox Footer - Script Codes CSS Codes
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700");
* { box-sizing: border-box;
}
html, body { color: #fff; font-family: "Open Sans", sans-serif; font-weight: 300; font-size: 16px; padding: 0; margin: 0; height: 100%;
}
.wrap { display: flex; min-height: 100%; flex-direction: column;
}
header { background: #332222;
}
header .logo { padding: 1.4rem; font-size: 2rem;
}
main { flex: 1; background: #1a2b2b;
}
.section { font-size: 1.1rem; padding: 1rem 2rem; margin: 0; background: #661111;
}
footer { background: #332222; padding: 1.2rem 1.4rem; font-size: 1.2rem;
}
| Developer | Tyler Fowle |
| Username | tylerfowle |
| Uploaded | August 12, 2022 |
| Rating | 3.5 |
| Size | 2,827 Kb |
| Views | 28,336 |
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 |
| Online Autoprefixer | 3,155 Kb |
| Such Testimonial Bubble | 2,059 Kb |
| Icon nav with flip out description | 4,435 Kb |
| One Page Scroller | 3,800 Kb |
| FAQ accordion | 2,155 Kb |
| Watch_Dogs | 2,658 Kb |
| Timeline Slider Navigation | 4,780 Kb |
| 3d Sticky Nav | 9,017 Kb |
| Design Idea | 7,042 Kb |
| Pure CSS Slider | 2,454 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 |
| Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
| A Pen by Andrea Verlicchi | Verlok | 2,018 Kb |
| NAV WPMANAGER | Mstoic | 1,991 Kb |
| JQuery exercise | Brian-baum | 3,780 Kb |
| Horizontal slider on scroll | Alojzije | 2,672 Kb |
| Commuter Line Tokyu 8500 | Pedox | 7,031 Kb |
| Cartoon Bomb | Tcmulder | 4,929 Kb |
| Elephants Full screen site | Orrinward | 3,981 Kb |
| Responsive Minimal Blog Layout | Hackthevoid | 5,261 Kb |
| Mesmerizing octopus | Jllodra | 3,549 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!