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)