Add solution.css

2022-01-10 17:32:07 -05:00 · 2022-01-10 17:32:07 -05:00 · b21592b94c
parent 3e7a835039
commit b21592b94c
1 changed files with 206 additions and 0 deletions
--- a/grid/03-grid-layout-3/solution/solution.css
+++ 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;
+}