tod
/
odin-flex
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Completed exercise 07

This commit is contained in:
NetMan 2023-12-29 18:45:09 +01:00
parent ee1682f8ea
commit f1fc7a7c3d
2 changed files with 72 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
07-flex-layout-2/index.html
View File

@ -12,22 +12,25 @@
MY AWESOME WEBSITE
</div>
<div class="sidebar">
<ul>
<li><a href="#">⭐ - link one</a></li>
<li><a href="#">🦸🏽‍♂️ - link two</a></li>
<li><a href="#">🖌️ - link three</a></li>
<li><a href="#">👌🏽 - link four</a></li>
</ul>
<div class="content">
<div class="sidebar">
<ul>
<li><a href="#">⭐ - link one</a></li>
<li><a href="#">🦸🏽‍♂️ - link two</a></li>
<li><a href="#">🖌️ - link three</a></li>
<li><a href="#">👌🏽 - link four</a></li>
</ul>
</div>
<div class="cards">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="footer">
The Odin Project ❤️
</div>

55
07-flex-layout-2/style.css
View File

@ -2,12 +2,19 @@ body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header {
height: 72px;
background: darkmagenta;
color: white;
font-size: 2.5rem;
font-weight: bold;
display: flex;
align-items: center;
padding: 0 15px;
}
.footer {
@ -20,10 +27,58 @@ body {
width: 300px;
background: royalblue;
box-sizing: border-box;
flex: 0 0 auto;
padding: 16px 10px;
}
.sidebar ul {
list-style: none;
padding: 0;
margin: 0;
font-size: 1.2rem;
display: flex;
flex-direction: column;
gap: 8px;
}
/*
.sidebar li {
} */
.sidebar a {
text-decoration: none;
color: #fff;
}
.content {
display: flex;
flex: 1;
}
.cards {
flex: 1;
display: flex;
flex-wrap: wrap;
flex-direction: row;
padding: 30px;
gap: 20px;
align-items: stretch;
justify-content: flex-start ;
}
.card {
width: 320px;
/* height: ; */
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0,0,0,.06);
border-radius: 4px;
padding: 12px;
font-size: 1rem;
}
.footer {
display: flex;
justify-content: center;
align-items: center;
}