Flexbox - Flexbox Basic Layout - start

Developer
Kevin
Size
3,352 Kb
Views
26,312
  1. Flexbox - Flexbox Basic Layout - start Previews
  2. Flexbox - Flexbox Basic Layout - start HTML Codes
  3. Flexbox - Flexbox Basic Layout - start CSS Codes

How do I make an flexbox - flexbox basic layout - start?

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

Flexbox - Flexbox Basic Layout - start Previews
IQ Test

Flexbox - Flexbox Basic Layout - start - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox - Flexbox Basic Layout - start</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 - start - 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; color: #FFF; 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;
}
.sales-points { padding: 12vh 0; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
@media (min-width: 40rem) { .sales-points { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
}
.sales-point { -ms-flex-preferred-size: 30%; flex-basis: 30%;
}
.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: 100%; flex-basis: 100%; padding: 0 2em;
}
@media (min-width: 40rem) { .cta-text { -ms-flex-preferred-size: 50%; flex-basis: 50%; }
}
Flexbox - Flexbox Basic Layout - start - Script Codes
Flexbox - Flexbox Basic Layout - start - Script Codes
Home Page Home
Developer Kevin
Username kevinpowell
Uploaded November 13, 2022
Rating 3
Size 3,352 Kb
Views 26,312
Do you need developer help for Flexbox - Flexbox Basic Layout - start?

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
Awesome Portfolio demo
Flexbox - Flexbox Container Properties
Smooth Scrolling with jQuery
Background position test
Div button vs link button
Simple Clearfix
CSS Grid Area demo
Nav bar with fun hover effect
A Pen by Kevin
CSS outlines
Create amazing art & images 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!