Header+Footer: implement breakpoints

src/components/Footer/Footer.css

@@ -1,11 +1,101 @@
 footer {
   width: 100%;
+  position: relative;
   background-color: #925bff;
   overflow: hidden;
-  position: absolute;
 }
 
-@media screen and (min-width: 1280px) {
+#back-to-top-button {
+  width: 140px;
+  height: 140px;
+  margin: 0;
+  border-radius: 50%;
+}
+
+@media screen and (max-width: 759px) {
+  .outro h2 {
+    font-size: 28px;
+    line-height: 38px;
+    margin-bottom: 32px;
+  }
+
+  .fine-print {
+    margin: 80px 0 0;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  #marker-green {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(324px, 460px);
+  }
+  
+  #phone {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(-140px, 420px);
+  }
+}
+
+@media screen and (min-width: 760px) and (max-width: 1023px) {
+  .outro h2 {
+    font-size: 40px;
+    line-height: 50px;
+    margin-bottom: 32px;
+  }
+
+  .fine-print {
+    margin: 80px 0 0;
+    font-size: 20px;
+    line-height: 30px;
+  }
+
+  #marker-green {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(544px, 500px);
+  }
+  
+  #phone {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(80px, 480px);
+  }
+}
+
+@media screen and (max-width: 1023px) {
+  .outro {
+    position: relative;
+    margin: 292px 10% 292px;
+  }
+
+  #back-to-top {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(-48px, -196px);
+  }
+
+  #command {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(640px, -228px);
+  }
+}
+
+
+
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  footer {
+    height: 920px;
+  }
+
   .outro {
     position: relative;
     width: 666px;
@@ -31,24 +121,18 @@ footer {
     transform: translate(-212px, 0);
   }
 
-  #back-to-top-button {
-    width: 140px;
-    height: 140px;
-    border-radius: 50%;
-  }
-
   #marker-green {
     position: absolute;
     top: 0;
     left: 0;
-    transform: translate(384px, 500px);
+    transform: translate(384px, 512px);
   }
   
   #phone {
-    position: absolute;
+    position: relative;
-    top: 0;
+    /* top: 0; */
-    left: 0;
+    /* left: 0; */
-    transform: translate(-80px, 500px);
+    transform: translate(-80px, 16px);
   }
 
   #command {
@@ -59,67 +143,53 @@ footer {
   }
 }
 
-/* .outro-container {
+@media screen and (min-width: 1280px) {
-  position: relative;
+  .outro {
-  width: 1366px;
+    width: 660px;
-  height: 100%;
+    position: relative;
-  margin-left: auto;
+    margin: 160px 0 120px 468px;
-  margin-right: auto;
+  }
+  
+  .outro h2 {
+    font-size: 40px;
+    line-height: 50px;
+    margin-bottom: 32px;
+  }
+  
+  .fine-print {
+    margin: 96px 0 0;
+    font-size: 20px;
+    line-height: 30px;
+  }
+  
+  #back-to-top {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(-320px, -12px);
+  }
+  
+  #marker-green {
+    position: absolute;
+    top: 0;
+    left: 0;
+    /* x and y-translate is wrong in spec? */
+    transform: translate(-208px, 270px);
+  }
+  
+  #phone {
+    position: absolute;
+    top: 0;
+    left: 0;
+    /* y-translate is wrong in spec? */
+    transform: translate(-684px, 236px);
+  }
+  
+  #command {
+    position: absolute;
+    top: 0;
+    left: 0;
+    /* y-translate is wrong in spec? */
+    transform: translate(744px, 352px);
+  }
 }
-
-.outro-container img {
-  user-select: none;
-}
-
-.outro {
-  width: 660px;
-  position: absolute;
-  top: 104px;
-  left: 320px;
-}
-
-.outro h2 {
-  font-size: 40px;
-  line-height: 50px;
-  margin-bottom: 32px;
-}
-
-.fine-print {
-  margin: 104px 0 0;
-  font-size: 20px;
-  line-height: 30px;
-}
-
-#back-to-top {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: translate(120px, 104px);
-}
-
-#back-to-top-button {
-  width: 140px;
-  height: 140px;
-  border-radius: 50%;
-}
-
-#marker-green {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: translate(240px, 424px);
-}
-
-#phone {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: translate(-211px, 414px);
-}
-
-#command {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: translate(1213px, 464px);
-} */

src/components/Header/Header.css

@@ -1,6 +1,6 @@
 header {
   width: 100%;
-  height: 1435px;
+  height: 1434px;
   background-color: #ffd171;
   overflow: hidden;
 }
@@ -9,27 +9,13 @@ header img {
   user-select: none;
 }
 
-.intro {
+.links {
-  width: 660px;
-  position: absolute;
-  transform: translate(143px, 392px);
-}
-
-.intro h2 {
-  font-size: 40px;
-  line-height: 50px;
-  margin-bottom: 32px;
-}
-
-div.links {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: flex-start;
-  margin: 56px 0 0;
+  gap: 56px;
-}
+  margin: 48px 0;
-
-.links a:not(:first-child) {
-  margin-left: 48px;
 }
 
 a.nav-link {
@@ -39,7 +25,7 @@ a.nav-link {
 }
 
 a.nav-link:after {
-  content: '';
+  content: "";
   position: absolute;
   bottom: -2px;
   left: 0;
@@ -52,54 +38,149 @@ a.nav-link:hover:after {
   width: 100%;
 }
 
-
-.image-container {
-  position: relative;
-  width: 1366px;
-  height: 100%;
-  margin: auto;
-}
-
 .inspectable {
   cursor: cell;
 }
 
-#marker-purple {
+.image-container {
-  position: absolute;
+  position: relative;
-  transform: translate(143px, -158px);
+  width: 100%;
+  height: 100%;
+  margin: auto;
 }
 
-#tablet {
+@media screen and (max-width: 759px) {
-  position: absolute;
+  .intro h2 {
-  transform: translate(577px, -900px);
+    font-size: 40px;
+    line-height: 52px;
+    margin-bottom: 32px;
+  }
 }
 
-#billiard-ball {
+/* Illustrations remain at same layout up to 1024px */
-  position: absolute;
+@media screen and (max-width: 1023px) {
-  transform: translate(917.83px, 359.83px);
+  .intro {
+    margin: 0 10%;
+    position: absolute;
+    transform: translate(0, 382px);
+  }
+
+  .intro h2 {
+    font-size: 40px;
+    line-height: 52px;
+    margin-bottom: 32px;
+  }
+
+  #marker-purple {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(40px, -158px);
+  }
+
+  #billiard-ball {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(130px, -98px);
+  }
+
+  #paperclips {
+    position: absolute;
+    transform: translate(176px, 152px);
+  }
+
+  #warning {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(398px, -116px);
+  }
+
+  #tablet {
+    position: absolute;
+    transform: translate(672px, -900px);
+  }
+
+  #cutting-mat {
+    position: absolute;
+    transform: translate(96px, 766px);
+  }
+
+  #calculator {
+    position: absolute;
+    transform: translate(632px, 938px);
+  }
+
+  #receipt {
+    position: absolute;
+    transform: translate(-96px, 958px);
+  }
 }
 
-#warning {
+@media screen and (min-width: 760px) and (max-width: 1023px) {
-  position: absolute;
+  .intro h2 {
-  transform: translate(1184px, 421px);
+    font-size: 40px;
+    line-height: 52px;
+    margin-bottom: 32px;
+  }
 }
 
-#paperclips {
+@media screen and (min-width: 1024px) {
-  position: absolute;
+  .image-container {
-  transform: translate(982px, 621px);
+    width: 1366px;
-}
+  }
 
-#cutting-mat {
+  .intro {
-  position: absolute;
+    margin: 0;
-  transform: translate(119px, 825px);
+    width: 660px;
-}
+    position: absolute;
+    transform: translate(144px, 386px);
+  }
 
-#receipt {
+  .intro h2 {
-  position: absolute;
+    font-size: 40px;
-  transform: translate(-5px, 1016px);
+    line-height: 50px;
-}
+    margin-bottom: 32px;
+  }
 
-#calculator {
+  #marker-purple {
-  position: absolute;
+    position: absolute;
-  transform: translate(924px, 940px);
+    transform: translate(144px, -158px);
-}
+  }
+
+  #tablet {
+    position: absolute;
+    transform: translate(578px, -900px);
+  }
+
+  #billiard-ball {
+    position: absolute;
+    transform: translate(918px, 360px);
+  }
+
+  #warning {
+    position: absolute;
+    transform: translate(1184px, 424px);
+  }
+
+  #paperclips {
+    position: absolute;
+    transform: translate(982px, 621px);
+  }
+
+  #cutting-mat {
+    position: absolute;
+    transform: translate(120px, 824px);
+  }
+
+  #receipt {
+    position: absolute;
+    transform: translate(-16px, 1016px);
+  }
+
+  #calculator {
+    position: absolute;
+    transform: translate(924px, 940px);
+  }
+}