<script language="JavaScript">
<!--
function _AN_global_var_init(){
	_AN_this_url = "/prx/000/";
	_AN_base_scheme = "https";
	_AN_base_host = "https://github.com";
	_AN_base_path = "https://github.com/jonasschmedtmann/html-css-course/compare/";
	_AN_encode_urls = 0;
	_AN_mpo = 1;
	_AN_md = 0;
	_AN_rel_urls = 0;
	_AN_nav_switch = 0;
	_AN_nav_allowurl = 1;
	_AN_nav_override = 0;
	_AN_has_iframe = 0;
	_AN_dbg_flags = null;
	_AN_nav_use_aaa = 1;
	_AN_expires_pass = 0;
	_AN_wrap_evthandlers = 0;
	_AN_rewrite_param_exact = 0;
	_AN_obj_params = {};
} 
_AN_global_var_init();
//-->
</script>
<script language="JavaScript" src="/prx/001/http/localh/an_util.js"></script>
<script language="JavaScript" src="/prx/001/http/localh/NSLib.js"></script>

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..ad92582bd
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true
+}
diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html
index e2daa6d42..d1981784a 100644
--- a/starter/04-CSS-Layouts/css-grid.html
+++ b/starter/04-CSS-Layouts/css-grid.html
@@ -11,6 +11,9 @@
       }
       .el--2 {
         background-color: orangered;
+        /* grid-column: 1 / span 4; */
+        /* grid-column: 1 / -1; */
+        grid-row: 2;
       }
       .el--3 {
         background-color: green;
@@ -30,6 +33,8 @@
       }
       .el--8 {
         background-color: crimson;
+        grid-column: 2 / 3;
+        grid-row: 1 / 3;
       }
 
       .container--1 {
@@ -40,6 +45,18 @@
         margin: 40px;
 
         /* CSS GRID */
+        display: grid;
+        /* grid-template-columns: 3fr 1fr 1fr 1fr; */
+        /* grid-template-rows: 1fr 1fr; */
+        grid-template-columns: repeat(4, 1fr);
+        grid-template-rows: 1fr 1fr;
+        /* height: 500px; */
+
+        column-gap: 10px;
+        row-gap: 40px;
+
+        /* TEMP */
+        display: none;
       }
 
       .container--2 {
@@ -47,12 +64,29 @@
         font-family: sans-serif;
         background-color: black;
         font-size: 40px;
-        margin: 100px;
+        margin: 40px;
 
-        width: 1000px;
+        width: 700px;
         height: 600px;
 
         /* CSS GRID */
+        display: grid;
+        grid-template-columns: 125px 200px 125px;
+        grid-template-rows: 250px 100px;
+        gap: 20px;
+
+        /* Aligning tracks inside container: distribute empty space*/
+        justify-content: center;
+        align-content: center;
+
+        /* Aligning items inside cells: move items around inside cells */
+        align-items: center;
+        justify-items: center;
+      }
+
+      .el--3 {
+        align-self: end;
+        justify-self: end;
       }
     </style>
   </head>
@@ -64,7 +98,7 @@
       <div class="el el--4">(4) are</div>
       <div class="el el--5">(5) amazing</div>
       <div class="el el--6">(6) languages</div>
-      <div class="el el--7">(7) to</div>
+      <!-- <div class="el el--7">(7) to</div> -->
       <div class="el el--8">(8) learn</div>
     </div>
 
diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html
index 15ecbeb77..eca207321 100644
--- a/starter/04-CSS-Layouts/index.html
+++ b/starter/04-CSS-Layouts/index.html
@@ -34,16 +34,18 @@ <h1>📘 The Code Magazine</h1>
         <header class="post-header">
           <h2>The Basic Language of the Web: HTML</h2>
 
-          <img - src="img/laura-jones.jpg,_ANDesc=img," - alt="Headshot of Laura Jones" - height="50" - width="50" - />
+          <div class="author-box">
+            <img + src="img/laura-jones.jpg,_ANDesc=img," + alt="Headshot of Laura Jones" + height="50" + width="50" + />
 
-          <p id="author">
-            Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
-          </p>
+            <p id="author" class="author">
+              Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
+            </p>
+          </div>
 
           <img src="img/post-img.jpg,_ANDesc=img," @ -123,25 +125,29 @><h3>Why should you learn HTML?</h3>
         <h4>Related posts</h4>
 
         <ul class="related">
-          <li>
+          <li class="related-post">
             <img src="img/related-1.jpg,_ANDesc=img," alt="Person programming" width="75" height="75" />
-            <a href="#">How to Learn Web Development</a>
-            <p class="related-author">By Jonas Schmedtmann</p>
+            <div>
+              <a href="#" class="related-link">How to Learn Web Development</a>
+              <p class="related-author">By Jonas Schmedtmann</p>
+            </div>
           </li>
-          <li>
+          <li class="related-post">
             <img src="img/related-2.jpg,_ANDesc=img," alt="Lightning" width="75" height="75" />
-            <a href="#">The Unknown Powers of CSS</a>
-            <p class="related-author">By Jim Dillon</p>
+            <div>
+              <a href="#" class="related-link">The Unknown Powers of CSS</a>
+              <p class="related-author">By Jim Dillon</p>
+            </div>
           </li>
           <li>
             <img diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index c879e79d2..e22a23173 100644 - a/starter/04-CSS-Layouts/style.css + b/starter/04-CSS-Layouts/style.css @ -14,7 +14,7 @ body { } .container { - width 800px + width 1200px margin-left auto margin-right auto * margin 0 auto @ -26,7 +26,6 @ body { padding-left 40px padding-right 40px * padding 20px 40px - margin-bottom 60px height 80px * } @ -35,10 +34,6 @ nav { text-align center * } -article { - margin-bottom 60px - - .post-header { margin-bottom 40px position relative * @ -51,7 +46,21 @ aside { padding-top 50px padding-bottom 50px * padding 50px 0 - width 500px + + +.related-post { + display flex + align-items center + gap 20px + margin-bottom 30px + + +.related-link { + font-size 17px + font-weight bold + font-style normal + margin-bottom 5px + display block } SMALLER ELEMENTS * @ -124,8 +133,10 @ li:last-child { } .related-author { - font-size 18px - font-weight bold + margin-bottom 0 + font-size 14px + font-weight normal + font-style italic } ul { @ -136,14 +147,6 @ li:last-child { list-style none } -body { - background-color orangered * - - - .first-li { - font-weight bold - * - li:first-child { font-weight bold } @ -197,7 +200,6 @ nav a:link { display block * margin-right 30px - margin-top 10px display inline-block } @ -222,10 +224,6 @ h1::first-letter { margin-right 5px } -h3 + p::first-line { - color red * - - h2 { background-color orange * position relative @ -265,3 +263,33 @ footer p { nav p { font-size 18px } * + +.author-box { + display flex + align-items center + margin 1rem 0 + + +.author { + margin-bottom 0 + margin-left 15px + + +.container { + display grid + grid-template-columns 1fr 300px + column-gap 75px + row-gap 60px + align-items start + + +.main-header { + grid-column 1 -1 + display flex + justify-content space-between + align-items center + + +footer { + grid-column 1 -1 + diff --git a/starter/05-Design/font/Inter-Bold.otf b/starter/05-Design/font/Inter-Bold.otf new file mode 100644 index 000000000..c74cc0c6c Binary files and b/starter/05-Design/font/Inter-Bold.otf differ diff --git a/starter/05-Design/font/Inter-BoldItalic.otf b/starter/05-Design/font/Inter-BoldItalic.otf new file mode 100644 index 000000000..20d20c195 Binary files and b/starter/05-Design/font/Inter-BoldItalic.otf differ diff --git a/starter/05-Design/font/Inter-Italic.otf b/starter/05-Design/font/Inter-Italic.otf new file mode 100644 index 000000000..39d6016be Binary files and b/starter/05-Design/font/Inter-Italic.otf differ diff --git a/starter/05-Design/font/Inter-Medium.otf b/starter/05-Design/font/Inter-Medium.otf new file mode 100644 index 000000000..ca7bfcd43 Binary files and b/starter/05-Design/font/Inter-Medium.otf differ diff --git a/starter/05-Design/font/Inter-MediumItalic.otf b/starter/05-Design/font/Inter-MediumItalic.otf new file mode 100644 index 000000000..2df62bc18 Binary files and b/starter/05-Design/font/Inter-MediumItalic.otf differ diff --git a/starter/05-Design/font/Inter-Regular.otf b/starter/05-Design/font/Inter-Regular.otf new file mode 100644 index 000000000..84e6a61c3 Binary files and b/starter/05-Design/font/Inter-Regular.otf differ diff --git a/starter/05-Design/font/Inter-V.ttf b/starter/05-Design/font/Inter-V.ttf new file mode 100644 index 000000000..be66f25d4 Binary files and b/starter/05-Design/font/Inter-V.ttf differ diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html index 92b74fd48..7aa09f766 100644 - a/starter/05-Design/index.html + b/starter/05-Design/index.html @ -27,6 +27,20 @ /><h1>We design and build better chairs, for a better life</h1>
         <h2>What makes our chairs special</h2>
         <div class="grid-3-cols">
           <div>
+            <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="features-icon" +>
+              <path + stroke-linecap="round" + stroke-linejoin="round" + d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" + />
+            </svg>
             <p class="features-title"><strong>Science meets design</strong></p>
             <p class="features-text">
               Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus
@@ -35,6 +49,20 @@ <h2>What makes our chairs special</h2>
           </div>
 
           <div>
+            <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="features-icon" +>
+              <path + stroke-linecap="round" + stroke-linejoin="round" + d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" + />
+            </svg>
             <p class="features-title">
               <strong>Maximal comfort</strong>
             </p>
@@ -45,6 +73,20 @@ <h2>What makes our chairs special</h2>
           </div>
 
           <div>
+            <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="features-icon" +>
+              <path + stroke-linecap="round" + stroke-linejoin="round" + d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" + />
+            </svg>
             <p class="features-title">
               <strong>Ethical and sustainable</strong>
             </p>
@@ -80,16 +122,72 @@ <h2>Our bestselling chairs</h2>
               <h3>The Laid Back</h3>
               <ul class="chair-details">
                 <li>
+                  <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="chair-icon" +>
+                    <path + stroke-linecap="round" + stroke-linejoin="round" + d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" + />
+                  </svg>
                   <!-- Span is a generic INLINE text element, it doesn't have any meaning. It's like a div element, but inline -->
                   <span>Leisure and relaxing</span>
                 </li>
                 <li>
+                  <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="chair-icon" +>
+                    <path + stroke-linecap="round" + stroke-linejoin="round" + d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" + />
+                  </svg>
                   <span>Comfortable for 4h</span>
                 </li>
                 <li>
+                  <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="chair-icon" +>
+                    <path + stroke-linecap="round" + stroke-linejoin="round" + d="M20.893 13.393l-1.135-1.135a2.252 2.252 0 01-.421-.585l-1.08-2.16a.414.414 0 00-.663-.107.827.827 0 01-.812.21l-1.273-.363a.89.89 0 00-.738 1.595l.587.39c.59.395.674 1.23.172 1.732l-.2.2c-.212.212-.33.498-.33.796v.41c0 .409-.11.809-.32 1.158l-1.315 2.191a2.11 2.11 0 01-1.81 1.025 1.055 1.055 0 01-1.055-1.055v-1.172c0-.92-.56-1.747-1.414-2.089l-.655-.261a2.25 2.25 0 01-1.383-2.46l.007-.042a2.25 2.25 0 01.29-.787l.09-.15a2.25 2.25 0 012.37-1.048l1.178.236a1.125 1.125 0 001.302-.795l.208-.73a1.125 1.125 0 00-.578-1.315l-.665-.332-.091.091a2.25 2.25 0 01-1.591.659h-.18c-.249 0-.487.1-.662.274a.931.931 0 01-1.458-1.137l1.411-2.353a2.25 2.25 0 00.286-.76m11.928 9.869A9 9 0 008.965 3.525m11.928 9.868A9 9 0 118.965 3.525" + />
+                  </svg>
                   <span>Vegan leather</span>
                 </li>
                 <li>
+                  <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="chair-icon" +>
+                    <path + stroke-linecap="round" + stroke-linejoin="round" + d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" + />
+                  </svg>
                   <span>Weighs 16 kg</span>
                 </li>
               </ul>
@@ -106,15 +204,71 @@ <h3>The Laid Back</h3>
               <h3>The Worker Bee</h3>
               <ul class="chair-details">
                 <li>
+                  <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="chair-icon" +>
+                    <path + stroke-linecap="round" + stroke-linejoin="round" + d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" + />
+                  </svg>
                   <span>Work</span>
                 </li>
                 <li>
+                  <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="chair-icon" +>
+                    <path + stroke-linecap="round" + stroke-linejoin="round" + d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" + />
+                  </svg>
                   <span>Comfortable for 8h</span>
                 </li>
                 <li>
+                  <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="chair-icon" +>
+                    <path + stroke-linecap="round" + stroke-linejoin="round" + d="M20.893 13.393l-1.135-1.135a2.252 2.252 0 01-.421-.585l-1.08-2.16a.414.414 0 00-.663-.107.827.827 0 01-.812.21l-1.273-.363a.89.89 0 00-.738 1.595l.587.39c.59.395.674 1.23.172 1.732l-.2.2c-.212.212-.33.498-.33.796v.41c0 .409-.11.809-.32 1.158l-1.315 2.191a2.11 2.11 0 01-1.81 1.025 1.055 1.055 0 01-1.055-1.055v-1.172c0-.92-.56-1.747-1.414-2.089l-.655-.261a2.25 2.25 0 01-1.383-2.46l.007-.042a2.25 2.25 0 01.29-.787l.09-.15a2.25 2.25 0 012.37-1.048l1.178.236a1.125 1.125 0 001.302-.795l.208-.73a1.125 1.125 0 00-.578-1.315l-.665-.332-.091.091a2.25 2.25 0 01-1.591.659h-.18c-.249 0-.487.1-.662.274a.931.931 0 01-1.458-1.137l1.411-2.353a2.25 2.25 0 00.286-.76m11.928 9.869A9 9 0 008.965 3.525m11.928 9.868A9 9 0 118.965 3.525" + />
+                  </svg>
                   <span>Vegan leather</span>
                 </li>
                 <li>
+                  <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="chair-icon" +>
+                    <path + stroke-linecap="round" + stroke-linejoin="round" + d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" + />
+                  </svg>
                   <span>Weighs 22 kg</span>
                 </li>
               </ul>
@@ -131,15 +285,71 @@ <h3>The Worker Bee</h3>
               <h3>The Chair 4/2</h3>
               <ul class="chair-details">
                 <li>
+                  <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="chair-icon" +>
+                    <path + stroke-linecap="round" + stroke-linejoin="round" + d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" + />
+                  </svg>
                   <span>Leisure and relaxing</span>
                 </li>
                 <li>
+                  <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="chair-icon" +>
+                    <path + stroke-linecap="round" + stroke-linejoin="round" + d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" + />
+                  </svg>
                   <span>Comfortable all day!</span>
                 </li>
                 <li>
+                  <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="chair-icon" +>
+                    <path + stroke-linecap="round" + stroke-linejoin="round" + d="M20.893 13.393l-1.135-1.135a2.252 2.252 0 01-.421-.585l-1.08-2.16a.414.414 0 00-.663-.107.827.827 0 01-.812.21l-1.273-.363a.89.89 0 00-.738 1.595l.587.39c.59.395.674 1.23.172 1.732l-.2.2c-.212.212-.33.498-.33.796v.41c0 .409-.11.809-.32 1.158l-1.315 2.191a2.11 2.11 0 01-1.81 1.025 1.055 1.055 0 01-1.055-1.055v-1.172c0-.92-.56-1.747-1.414-2.089l-.655-.261a2.25 2.25 0 01-1.383-2.46l.007-.042a2.25 2.25 0 01.29-.787l.09-.15a2.25 2.25 0 012.37-1.048l1.178.236a1.125 1.125 0 001.302-.795l.208-.73a1.125 1.125 0 00-.578-1.315l-.665-.332-.091.091a2.25 2.25 0 01-1.591.659h-.18c-.249 0-.487.1-.662.274a.931.931 0 01-1.458-1.137l1.411-2.353a2.25 2.25 0 00.286-.76m11.928 9.869A9 9 0 008.965 3.525m11.928 9.868A9 9 0 118.965 3.525" + />
+                  </svg>
                   <span>Organic cotton</span>
                 </li>
                 <li>
+                  <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="chair-icon" +>
+                    <path + stroke-linecap="round" + stroke-linejoin="round" + d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" + />
+                  </svg>
                   <span>Weighs 80 kg</span>
                 </li>
               </ul>
diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css
index 77dfdffa3..2ec97bdc2 100644
--- a/starter/05-Design/style.css
+++ b/starter/05-Design/style.css
@@ -6,6 +6,22 @@ FONT SIZE SYSTEM (px)
 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
 */
 
+@font-face {
+  font-family: "Inter";
+  src: url("font/Inter-V.ttf");
+}
+
+/* 
+MAIN COLOR: #087f5b
+GRAY COLOR: #343a40 
+*/
+
+:root {
+  --color-main: #087f5b;
+  --color-main-light: #099268;
+  --color-gray: #343a40;
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -16,7 +32,9 @@ FONT SIZE SYSTEM (px)
 /* GENERAL STYLES */
 /* ------------------------ */
 body {
-  font-family: sans-serif;
+  font-family: "Inter", sans-serif;
+  color: var(--color-gray);
+  border-bottom: 0.5rem solid #087f5b;
 }
 
 .container {
@@ -26,11 +44,13 @@ body {
 
 header,
 section {
-  margin-bottom: 48px;
+  margin-bottom: 6rem;
 }
 
 h2 {
-  margin-bottom: 48px;
+  margin-bottom: 3rem;
+  font-size: 1.875rem;
+  letter-spacing: -0.5px;
 }
 
 .grid-3-cols {
@@ -39,6 +59,36 @@ h2 {
   column-gap: 80px;
 }
 
+.btn:link,
+.btn:visited {
+  background-color: var(--color-main);
+  color: #fff;
+  text-decoration: none;
+  text-transform: uppercase;
+  display: inline-block;
+  font-weight: 500;
+  border-radius: 100px;
+}
+
+.btn:hover,
+.btn:active {
+  background-color: var(--color-main-light);
+}
+
+.btn--big {
+  font-size: 1.125rem;
+  padding: 1rem 2rem;
+}
+
+.btn--small {
+  font-size: 0.875rem;
+  padding: 0.5rem 0.75rem;
+}
+
+img {
+  border-radius: 0.75rem;
+}
+
 /* ------------------------ */
 /* COMPONENT STYLES */
 /* ------------------------ */
@@ -48,7 +98,7 @@ header {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   column-gap: 80px;
-  margin-top: 48px;
+  margin-top: 4rem;
 }
 
 .header-text-box {
@@ -56,11 +106,16 @@ header {
 }
 
 h1 {
-  margin-bottom: 24px;
+  margin-bottom: 2rem;
+  font-size: 2.75rem;
+  line-height: 1.2;
+  letter-spacing: -1px;
 }
 
 .header-text {
-  margin-bottom: 24px;
+  margin-bottom: 1.5rem;
+  font-size: 1.125rem;
+  line-height: 1.5;
 }
 
 img {
@@ -69,17 +124,28 @@ img {
 
 /* FEATURES */
 .features-icon {
+  stroke: #087f5b;
+  height: 2rem;
+  width: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .features-title {
-  margin-bottom: 16px;
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
 }
 
 .features-text {
+  font-size: 1.125rem;
+  line-height: 1.6;
 }
 
 /* TESTIMONIAL */
 .testimonial-section {
+  background-color: #087f5b;
+  color: white;
+  padding: 1.5rem;
+  border-radius: 0.75rem;
 }
 
 .testimonial-box {
@@ -88,33 +154,52 @@ img {
 }
 
 .testimonial-box h2 {
-  margin-bottom: 24px;
+  margin-bottom: 1.5rem;
+  font-size: 1.5rem;
 }
 
 .testimonial-text {
   font-style: italic;
-  margin-bottom: 24px;
+  margin-bottom: 1.5rem;
+  font-size: 1.125rem;
+  line-height: 1.6;
+  color: #e6fcf5;
+}
+
+.testimonial-author {
+  color: #c3fae8;
 }
 
 /* CHAIRS */
+.chair {
+  box-shadow: 0px 20px 30px 0px rgb(0, 0, 0, 0.07);
+  border-radius: 0.75rem;
+}
+
+.chair img {
+  width: 100%;
+  border-radius: 0.75rem 0.75rem 0 0;
+}
+
 .chair-box {
-  padding: 24px;
+  padding: 2rem;
 }
 
 h3 {
-  margin-bottom: 24px;
+  margin-bottom: 1.5rem;
+  font-size: 1.25rem;
 }
 
 .chair-details {
   list-style: none;
-  margin-bottom: 24px;
+  margin-bottom: 3rem;
 }
 
 .chair-details li {
   display: flex;
   align-items: center;
   gap: 12px;
-  margin-bottom: 24px;
+  margin-bottom: 1rem;
 }
 
 .chair-details li:last-child {
@@ -122,13 +207,20 @@ h3 {
 }
 
 .chair-icon {
+  stroke: #087f5b;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 
 .chair-price {
   display: flex;
   justify-content: space-between;
+  font-size: 1.25rem;
+  align-items: center;
 }
 
 footer {
-  margin-bottom: 48px;
+  margin-bottom: 3rem;
+  font-size: 0.875rem;
+  color: #495057;
 }
