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

🔲 Fix inconsistency in solution

This commit is contained in:
Arjun 2023-01-27 07:22:49 +05:30
parent 50fccec8c4
commit 960fd76572
1 changed files with 43 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
flex/07-flex-layout-2/solution/solution.css
View File

@ -1,87 +1,89 @@
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
margin: 0;
min-height: 100vh;
}
.header {
height: 72px;
background: darkmagenta;
color: white;
height: 72px;
background: darkmagenta;
color: white;
}
.footer {
height: 72px;
background: #eee;
color: darkmagenta;
height: 72px;
background: #eee;
color: darkmagenta;
}
.sidebar {
width: 300px;
background: royalblue;
width: 300px;
background: royalblue;
}
.card {
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0,0,0,.06);
border-radius: 4px;
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.06);
border-radius: 4px;
}
/* SOLUTION */
body {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
}
.header {
display: flex;
align-items: center;
padding: 0 16px;
font-size: 32px;
font-weight: 900;
display: flex;
align-items: center;
padding: 0 16px;
font-size: 32px;
font-weight: 900;
}
.body {
flex: 1;
display: flex;
flex: 1;
display: flex;
}
.sidebar {
flex-shrink: 0;
padding: 16px;
flex-shrink: 0;
box-sizing: border-box;
padding: 16px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin-bottom: 16px;
margin-bottom: 16px;
}
a {
color: white;
text-decoration: none;
font-size: 24px;
color: white;
text-decoration: none;
font-size: 24px;
}
.container {
padding: 32px;
display: flex;
flex-wrap: wrap;
padding: 32px;
display: flex;
flex-wrap: wrap;
}
.card {
padding: 16px;
margin: 16px;
width: 300px;
padding: 16px;
margin: 16px;
width: 300px;
}
.footer {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}