diff --git a/grid/03-grid-layout-3/solution/solution.css b/grid/03-grid-layout-3/solution/solution.css new file mode 100644 index 0000000..1f1ab60 --- /dev/null +++ b/grid/03-grid-layout-3/solution/solution.css @@ -0,0 +1,206 @@ +* { + margin: 0; + padding: 0; +} + +.container { + text-align: center; + +} + +.container div { + padding: 15px; + font-size: 32px; + font-family: Helvetica; + font-weight: bold; + color: white; +} + +.header { + background-color: #393f4d; + +} + +.logo { + +} + +.menu { + +} + +.menu ul { + +} + +.menu ul, +.menu li { + font-size: 16px; + +} + +.sidebar { + background-color: #FF7755; + +} + +.sidebar .photo { + background-color: white; + color: black; + font-size: 12px; + font-weight: normal; + border-radius: 10px; +} + +.photo { + +} + +.sidebar .side-content { + background-color: white; + color: black; + font-size: 16px; + font-weight: normal; + +} + +.nav { + background-color: #FF7755; + +} + +.nav ul { + +} + +.nav ul li { + font-size: 16px; + text-transform: uppercase; +} + +.article { + background-color: #bccbde; + +} + +.article p { + font-size: 18px; + font-family: sans-serif; + color: white; + text-align: left; +} + +.article .card { + background-color: #FFFFFF; + color: black; + text-align: center; + +} + +.card p { + color: black; + font-weight: normal; + font-size: 14px; + +} + +.card .title { + font-size: 18px; + text-align: center; +} + +.footer { + background-color: #393f4d; + +} + +.footer p { + font-size: 13px; + font-weight: normal; +} + +/* SOLUTION */ + +.container { + display: grid; + grid-template-columns: 1fr 4fr; + gap: 4px; + text-align: center; +} + +.header { + grid-column: 1 / 3; + grid-row: 1 / 2; + display: grid; + grid-template-columns: 1fr 2fr; +} + +.logo { + grid-column: 1 / 2; + justify-self: start; +} + +.menu { + grid-column: 2 / 3; + align-self: center; +} + +.menu ul { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +.menu ul, +.menu li { + list-style-type: none; +} + +.sidebar { + grid-column: 1 / 2; + grid-row: 2 / 4; + display: grid; + gap: 50px; +} + +.photo { + display: grid; + align-items: center; +} + +.sidebar .side-content { + display: grid; + align-items: center; +} + +.nav { + grid-column: 2 / 3; + grid-row: 2 / 3; +} + +.nav ul { + list-style-type: none; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.article { + grid-column: 2 / 3; + grid-row: 3 / 4; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-template-rows: repeat(2, 1fr); + gap: 15px; +} + +.article .card { + height: 200px; +} + +.card p { + padding: 5px; +} + +.footer { + grid-column: 1 / 3; + grid-row: 4 / 5; +}