Flexbox - Flexbox Basic Layout

Developer
Kevin
Size
3,205 Kb
Views
18,216
  1. Flexbox - Flexbox Basic Layout Previews
  2. Flexbox - Flexbox Basic Layout HTML Codes
  3. Flexbox - Flexbox Basic Layout CSS Codes

How do I make an flexbox - flexbox basic layout?

What is a flexbox - flexbox basic layout? How do you make a flexbox - flexbox basic layout? This script and codes were developed by Kevin on 13 November 2022, Sunday.

Flexbox - Flexbox Basic Layout Previews
IQ Test

Flexbox - Flexbox Basic Layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox - Flexbox Basic Layout</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="hero"> <p>Things are <span>awesome</span> here at</p> <h1>Awesome<span>Co</span></h1> <p>We <strong>Design</strong> and <strong>Develope Awesome</strong> stuff</p>
</div>
<div class="sales-points"> <div class="sales-point"> <h2>Sales Point 1</h2> <p>Maecenas id volutpat tellus. Praesent at rhoncus ante, non sollicitudin nisl.</p> </div> <div class="sales-point"> <h2>Sales Point 2</h2> <p>Maecenas id volutpat tellus. Praesent at rhoncus ante, non sollicitudin nisl.</p> </div> <div class="sales-point"> <h2>Sales Point 3</h2> <p>Maecenas id volutpat tellus. Praesent at rhoncus ante, non sollicitudin nisl.</p> </div>
</div>
<div class="cta"> <div class="cta-text"> <h2>Call to <span>Action</span></h2> <p>Sed lacus leo, auctor ut odio non, tincidunt blandit nunc. Integer mauris dolor, maximus eu consectetur non, imperdiet sit amet nisi. Nam in sem finibus mi hendrerit ornare eu eu leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vestibulum, magna sit amet interdum fringilla.</p> <a href="" class="btn">Buy Now</a> </div>
</div>
</body>
</html>

Flexbox - Flexbox Basic Layout - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Poppins:300,600");
* { box-sizing: border-box; margin-top: 0;
}
body { font-family: 'Poppins', sans-serif; color: #444; font-size: 1.1rem;
}
h1 { font-size: 5rem; color: #0F9; text-transform: uppercase; letter-spacing: 15px; outline: 3px solid #FFF; outline-offset: .25em; display: inline-block; margin: 0.25em 0 0.5em;
}
h1 span { font-weight: 300;
}
h2 { font-size: 1.6rem; margin-bottom: 0.5em;
}
p span { color: #0F9;
}
.btn { display: inline-block; padding: .7em 1.7em; background: #0F9; color: #444; font-weight: 600; text-decoration: none;
}
.btn:hover { background: #00cc7a;
}
.hero { background-color: #444; background-image: url(//unsplash.it/1000/600); background-blend-mode: multiply; background-size: cover; height: 100vh; padding: 1em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #FFF;
}
.sales-points { padding: 12vh 0; display: -webkit-box; display: -ms-flexbox; display: flex; text-align: center;
}
.sales-point { margin: 0 1vw;
}
.cta { background-image: url(//unsplash.it/600/400); background-size: cover; padding: 10vh 0; color: #FFF; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;
}
.cta-text { -ms-flex-preferred-size: 50%; flex-basis: 50%; padding: 2em;
}
Flexbox - Flexbox Basic Layout - Script Codes
Flexbox - Flexbox Basic Layout - Script Codes
Home Page Home
Developer Kevin
Username kevinpowell
Uploaded November 13, 2022
Rating 3
Size 3,205 Kb
Views 18,216
Do you need developer help for Flexbox - Flexbox Basic Layout?

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!

Kevin (kevinpowell) Script Codes
Name
Mobile nav
Some fun button effects
Nav bar with fun hover effect
Flexbox navigation bar
Mega menu
Explicit and Implicit grid
Flexbox - Flexbox Basic Layout - start
Simple Clearfix
Anchors with smooth scrolling
Flexbox - Flexbox Container Properties
Create amazing web content 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!