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

Revert "🔲 Fix inconsistency in solution" 

This reverts commit 960fd76572.
This commit is contained in:
Arjun 2023-01-30 11:21:03 +05:30
parent 960fd76572
commit 03f4e594a8
1 changed files with 41 additions and 43 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,89 +1,87 @@
body { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; margin: 0;
margin: 0; min-height: 100vh;
min-height: 100vh;
} }
.header { .header {
height: 72px; height: 72px;
background: darkmagenta; background: darkmagenta;
color: white; color: white;
} }
.footer { .footer {
height: 72px; height: 72px;
background: #eee; background: #eee;
color: darkmagenta; color: darkmagenta;
} }
.sidebar { .sidebar {
width: 300px; width: 300px;
background: royalblue; background: royalblue;
} }
.card { .card {
border: 1px solid #eee; border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.06); box-shadow: 2px 4px 16px rgba(0,0,0,.06);
border-radius: 4px; border-radius: 4px;
} }
/* SOLUTION */ /* SOLUTION */
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 16px; padding: 0 16px;
font-size: 32px; font-size: 32px;
font-weight: 900; font-weight: 900;
} }
.body { .body {
flex: 1; flex: 1;
display: flex; display: flex;
} }
.sidebar { .sidebar {
flex-shrink: 0; flex-shrink: 0;
box-sizing: border-box; padding: 16px;
padding: 16px;
} }
ul { ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
li { li {
margin-bottom: 16px; margin-bottom: 16px;
} }
a { a {
color: white; color: white;
text-decoration: none; text-decoration: none;
font-size: 24px; font-size: 24px;
} }
.container { .container {
padding: 32px; padding: 32px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.card { .card {
padding: 16px; padding: 16px;
margin: 16px; margin: 16px;
width: 300px; width: 300px;
} }
.footer { .footer {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }