A super simple example of how flexbox is awesome!!
Let's write some html:
<body>
<header>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Contact</a></li>
<h1>Flourish Collective</h1>
<li><a href="">Blog</a></li>
<li><a href="">Courses</a></li>
</ul>
</nav>
</header>
<section class="hero">
<h2>Want to turn your passion project into a <br/> profitable, creative business ?</h2>
<button>Enroll Course</button>
</section>
<section class="intro">
<div class="intro-image">
<img src="./macbook-pro-iphone-cup-desk-7974.jpg" alt="laptop">
</div>
<div class="intro-text">
<h2>Hey I am GiandoDev</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, labore!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum hic, nulla.</p>
</div>
</section>
</body>
and now a little bit of css
html {
font-size: 62.5%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
color: black;
text-decoration: none;
}
nav ul {
display: flex;
justify-content: space-around;
align-items: center;
padding: 1rem;
min-height: 10vh;
list-style-type: none;
}
.hero {
min-height: 80vh;
background-image: url("/silver-and-black-laptop-computer-1229861.jpg");
background-size: cover;
background-position: center;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hero h2 {
text-align: center;
margin: 2rem;
}
.hero button {
padding: 1rem 2rem;
background: #97e9d4;
border: none;
}
.intro {
display: flex;
flex-wrap: wrap;
}
.intro img {
width: 100%;
}
.intro-image {
flex: 1 1 30rem;
}
.intro-text {
flex: 1 1 30rem;
background: #f7e6d6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.intro-text h2 {
padding: 2rem;
}
.intro-text p {
padding: 1rem;
}
Top comments (0)