Flexbox Layout - One page website

Developer
Joost Jansen
Size
5,649 Kb
Views
8,096
  1. Flexbox Layout - One page website Previews
  2. Flexbox Layout - One page website HTML Codes
  3. Flexbox Layout - One page website CSS Codes
  4. Flexbox Layout - One page website JS Codes

How do I make an flexbox layout - one page website?

What is a flexbox layout - one page website? How do you make a flexbox layout - one page website? This script and codes were developed by Joost Jansen on 19 November 2022, Saturday.

Flexbox Layout - One page website Previews
IQ Test

Flexbox Layout - One page website - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox Layout - One page website</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans|Poppins'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="contactPopupBox"> <div id="contactInner"> <h2>Contact form</h2> <input type="email" placeholder="Your email"/> <textarea name="" cols="30" rows="10" placeholder="What are you contacting us for?"></textarea><a class="btn-secondary" href="#">Send</a> </div>
</div>
<div class="wrapper"> <div class="box navbar"> <div class="left"><a href="#"><img src="http://placehold.it/100x80"/></a></div> <div class="right"><a href="#">Nav Item 1</a><a href="#">Nav Item 2</a><a href="#">Nav Item 3</a></div> </div> <div class="box hero"> <h1>Hero text</h1> <p>subtitle</p><a class="btn-primary contactBtn" href="#">Contact us</a> </div> <div class="box about"> <div class="left"> <h2>About text</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> <div class="right"> <div class="carousel"> <div class="slide"><a href="#"><img src="http://placehold.it/500x512"/></a></div> <div class="slide"><a href="#"><img src="http://placehold.it/500x512"/></a></div> <div class="slide"><a href="#"><img src="http://placehold.it/500x512"/></a></div> <div class="slide"><a href="#"><img src="http://placehold.it/500x512"/></a></div> </div> </div> </div> <div class="box contact"> <div class="left"> <h2>Google maps here</h2> </div> <div class="right"> <h2>Contact info</h2> <p>28 Maple Road</p> <p>Miami FL 13378</p> <p>(805) 399-0349</p><a class="btn-secondary contactBtn" href="#">Contact us</a> </div> </div> <div class="box footer"> <div><a href="#">Footer Item 1</a><a href="#">Footer Item 2</a></div> <div><a href="#">Footer Item 3</a><a href="#">Footer Item 4</a></div> <div><a href="#">Footer Item 3</a><a href="#">Footer Item 4</a></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Flexbox Layout - One page website - Script Codes CSS Codes

/* Variables
-------------------------------------------------------- */
/* Fonts
-------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 { font-family: "Poppins", sans-serif;
}
p,
a { font-family: "Open Sans", sans-serif;
}
a { text-decoration: none; color: #fff; -webkit-transition: all 150ms linear; transition: all 150ms linear;
}
a:hover { color: #fff;
}
a.btn-primary { background-color: #e31e24; padding: 10px 50px; box-shadow: 0 5px 30px rgba(0,0,0,0.2);
}
a.btn-primary:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.3); -webkit-transform: translateY(-5px); transform: translateY(-5px);
}
a.btn-secondary { background-color: #2b303a; padding: 10px 50px; box-shadow: 0 5px 30px rgba(0,0,0,0.2);
}
a.btn-secondary:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.3); -webkit-transform: translateY(-5px); transform: translateY(-5px);
}
p { max-width: 300px;
}
/* Mixins
-------------------------------------------------------- */
/* Layout
-------------------------------------------------------- */
html,
body { height: 100%; width: 100%;
}
body { background-color: #22262e;
}
#contactPopupBox { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
#contactPopupBox { background-color: rgba(0,0,0,0.5); height: 100%; width: 100%; z-index: -2; opacity: 0; position: fixed; top: 0; left: 0; -webkit-transition: all 300ms linear; transition: all 300ms linear;
}
#contactPopupBox.show { z-index: 3; opacity: 1;
}
#contactPopupBox.show #contactInner { z-index: 4;
}
#contactPopupBox #contactInner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; background-color: #b7171c; height: 50%; width: 50%; max-width: 500px; min-width: 300px; padding: 20px 0;
}
#contactPopupBox #contactInner h2 { color: #fff;
}
.wrapper { max-width: 1000px; margin: 0 auto;
}
.wrapper .box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 512px; width: 100%;
}
.wrapper .box .left,
.wrapper .box .right { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; width: 50%;
}
.wrapper .navbar { background-color: #2b303a; margin: 0 auto; position: fixed; top: 0; left: 0; height: 80px; z-index: 2; box-shadow: 0 20px 60px -5px rgba(0,0,0,0.3); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.wrapper .navbar .left { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; width: 200px;
}
.wrapper .navbar .right { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; width: 800px;
}
.wrapper .navbar a:hover { color: #e31e24;
}
.wrapper .hero { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-image: url("http://placehold.it/500x512"), -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%); background-image: url("http://placehold.it/500x512"), linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%); background-blend-mode: multiply; background-size: cover; background-position: center; background-attachment: fixed; color: #fff;
}
.wrapper .about { color: #fff; overflow: hidden;
}
.wrapper .about .left { background-color: #3c4351;
}
.wrapper .about .right { background-color: #ce1a1f; overflow: hidden;
}
.wrapper .about .right .carousel { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; position: relative; height: 100%; width: 100%; -webkit-animation: carousel 20s infinite; animation: carousel 20s infinite;
}
.wrapper .about .right .carousel .slide { height: 100%; width: 100%;
}
.wrapper .about .right .carousel .slide a,
.wrapper .about .right .carousel .slide img { display: block; margin: 0 auto;
}
.wrapper .contact .left { background-color: #ddd;
}
.wrapper .contact .right { background-color: #ce1a1f;
}
.wrapper .footer { background-color: #999; height: 128px; -ms-flex-pack: distribute; justify-content: space-around;
}
.wrapper .footer div { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;
}
.wrapper .footer a:hover { color: #2b303a;
}
/* Media Queries ------------------------------------------------------- */
@media (max-width: 750px) { .wrapper .about, .wrapper .contact { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 1024px; } .wrapper .about .left, .wrapper .contact .left, .wrapper .about .right, .wrapper .contact .right { width: 100%; }
}
@media (max-width: 480px) { .wrapper .navbar .left { display: none; } .wrapper .navbar .right { width: 100%; }
}
/* Carousel animation
-------------------------------------------------------- */
@-webkit-keyframes carousel { 0% { top: 0; } 25% { top: -512px; } 50% { top: -1024px; } 75% { top: -1536px; } 100% { top: 0; }
}
@keyframes carousel { 0% { top: 0; } 25% { top: -512px; } 50% { top: -1024px; } 75% { top: -1536px; } 100% { top: 0; }
}

Flexbox Layout - One page website - Script Codes JS Codes

var contactBtns = document.querySelectorAll(".contactBtn"),	contactBox = document.getElementById("contactPopupBox");
function toggleContactForm(e) {	e.preventDefault();	if(contactBox.classList.contains("show")) {	document.querySelector("body").style.overflow = "scroll";	contactBox.classList.remove("show");	} else {	document.querySelector("body").style.overflow = "hidden";	contactBox.classList.add("show");	}
}
for(var i = 0; i < contactBtns.length; i++) {	contactBtns[i].addEventListener("click", function(event) {	toggleContactForm(event);	})
}
contactBox.addEventListener("click", function(event) {	toggleContactForm(event);
});
Flexbox Layout - One page website - Script Codes
Flexbox Layout - One page website - Script Codes
Home Page Home
Developer Joost Jansen
Username DevItWithDavid
Uploaded November 19, 2022
Rating 3
Size 5,649 Kb
Views 8,096
Do you need developer help for Flexbox Layout - One page website?

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!

Joost Jansen (DevItWithDavid) Script Codes
Name
Flexbox Mixin
DevWars Objectives Template
CSGO image overlay using clip path
League of Legends Login UI
Personal Website Redesign v2.0
My Business Card
JQuery Image Slider
TicTacToe
Portfolio Joost Jansen 2016
Overwatch cards, three styles
Create amazing marketing copy 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!