<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Navigation</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wrapper">
<section class="panel">
<header class="title">
<h1>Title 1</h1>
</header>
<p class="description">Lorem ipsum</p>
<ul class="list">
<li class="item">Lorem ipsum dolor.</li>
<li class="item">Lorem ipsum dolor sit amet.</li>
<li class="item">Lorem ipsum dolor sit.</li>
</ul>
<p class="price">$5</p>
<footer class="footer">
<input class="button" type="button" value="Join us!">
</footer>
</section>
<section class="panel">
<header class="title">
<h1>Title 2</h1>
</header>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing</p>
<ul class="list">
<li class="item">Lorem ipsum dolor.</li>
<li class="item">Lorem ipsum dolor sit amet.</li>
<li class="item">Lorem ipsum dolor sit.</li>
<li class="item">Lorem ipsum dolor sit.</li>
<li class="item">Lorem ipsum dolor sit.</li>
<li class="item">Lorem ipsum dolor sit.</li>
<li class="item">Lorem ipsum dolor sit.</li>
<li class="item">Lorem ipsum dolor sit.</li>
</ul>
<p class="price">$5</p>
<footer class="footer">
<input class="button" type="button" value="Join us!">
</footer>
</section>
<section class="panel">
<header class="title">
<h1>Title 3</h1>
</header>
<p class="description">Lorem ipsum dolor sit amet, cons</p>
<ul class="list">
<li class="item">Lorem ipsum dolor.</li>
<li class="item">Lorem ipsum dolor sit amet.</li>
<li class="item">Lorem ipsum dolor sit amet.</li>
<li class="item">Lorem ipsum dolor sit.</li>
</ul>
<p class="price">$5</p>
<footer class="footer">
<input class="button" type="button" value="Join us!">
</footer>
</section>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
background: #386860;
}
.wrapper {
width: 90%;
margin: auto;
display: flex;
}
.panel {
flex: 1;
display: flex;
flex-wrap: wrap;
text-align: center;
margin-right: 20px;
padding: 25px;
border-radius: 10px;
background: rgba(255,255,255,.5);
}
.panel > * {
flex: 1;
flex-basis: 100%;
margin-bottom: 20px;
}
.panel > *:last-child {
margin-bottom: 0;
}
.panel:last-child {
margin-right: 0;
}
.title h1 {
color: #7CE8D5;
text-shadow: 1px 1px 1px rgba(0,0,0,.1);
}
.list {
list-style: none;
}
.item {
padding: 10px;
border-bottom: 1px solid rgba(0,0,0,.1);
}
.price {
font-size: 40px;
}
.footer {
align-self: flex-end;
}
.button {
padding: 15px 60px;
border: none;
border-radius: 10px;
background: #9B95FF;
color: #fff;
font-size: 16px;
}
