Files uploading

_breakpoints.scss

@@ -0,0 +1,8 @@
+$breakpoints: ("mobile":500px);
+
+@mixin mobile {
+    
+    @media (max-width: map-get($breakpoints, "mobile")) {
+        @content;
+    }
+}

_reset.scss

@@ -0,0 +1,16 @@
+*, body{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    box-sizing: border-box;
+}
+
+body{
+    background-color: $satin_deep_black;
+}
+
+img{
+    width: 100%;
+}
+

_variables.scss

@@ -0,0 +1,5 @@
+$satin_deep_black: #1A1F23;
+$black_gray:#21282E;
+$river_styx: #16191E;
+$black_shadow: rgba(0,0,0,0.5);
+$white_light: rgba(255,255,255,0.5);

images/bitmap.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="163.46629mm"
+   height="163.35728mm"
+   viewBox="0 0 163.46629 163.35728"
+   version="1.1"
+   id="svg306"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview308"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     showgrid="false" />
+  <defs
+     id="defs303" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-22.720238,-60.528986)">
+    <path
+       d="m 48.735138,181.79283 c 0.54186,-9.27806 1.61078,-18.48556 3.20181,-27.57664 -1.83797,-9.06992 -4.9904,-17.75884 -9.31334,-25.80923 -3.60785,-6.72041 -8.03063,-12.99633 -13.1833,-18.68311 -4.32118,9.95539 -6.72007,20.94089 -6.72007,32.48378 0,22.55309 9.14965,42.97539 23.93986,57.75678 0.56903,0.56797 1.14829,1.12889 1.73496,1.67922 -0.15875,-6.62163 -0.0462,-13.24327 0.34008,-19.8508 z m 113.536592,18.14689 c -4.95653,-7.05203 -8.87589,-14.74611 -11.67341,-22.84236 -0.86078,-2.49062 -1.6122,-5.01651 -2.25778,-7.57062 -0.22578,3.51014 -0.15875,7.02734 0.19755,10.51631 0.89606,8.72772 3.60539,17.27553 8.07156,25.05428 1.95792,-1.62278 3.84175,-3.33728 5.63739,-5.13292 z m -9.24278,-50.6977 c 0.2152,8.71714 1.78506,17.29317 4.5967,25.43528 2.38125,6.88975 5.66914,13.48317 9.79664,19.60386 11.71928,-14.1358 18.76425,-32.28269 18.76425,-52.07353 0,-21.79461 -8.54075,-41.59603 -22.46136,-56.239845 -0.0423,9.390952 -0.74789,18.739565 -2.10961,27.978815 -1.76037,11.94153 -4.63198,23.75606 -8.58662,35.29542 z m -18.63725,68.98923 c -9.40858,-15.44462 -16.52764,-32.06398 -21.209,-49.33598 -2.28247,-8.41375 -3.98286,-16.98625 -5.09058,-25.65753 -2.75872,26.58534 0.34219,53.78451 9.52147,79.59373 5.82083,-0.94192 11.43706,-2.49767 16.77811,-4.60022 z M 134.434,66.198125 c -8.94292,14.40744 -15.72331,29.827362 -20.29178,45.779975 -0.7232,18.63372 1.41464,37.16867 6.24416,54.99453 4.57906,16.89453 11.5817,33.13289 20.86328,48.18592 3.25261,-1.64041 6.38528,-3.49603 9.37331,-5.54214 -5.27403,-8.90764 -8.46314,-18.75367 -9.49325,-28.81842 -1.14653,-11.22539 0.38805,-22.72947 4.70958,-33.51389 l 0.0106,-0.0282 c 3.85586,-11.16542 6.66044,-22.68008 8.38552,-34.38878 1.65453,-11.21833 2.3107,-22.567195 1.95087,-33.898425 -6.49464,-5.31283 -13.82184,-9.64494 -21.75228,-12.77055 z M 85.567218,121.19971 c 1.01247,-5.6268 1.7145,-11.30653 2.09902,-17.00389 0.93134,-13.775975 0.0141,-27.671895 -2.7693,-41.313815 -4.32859,1.06187 -8.52311,2.46945 -12.54831,4.191 -0.27164,6.49464 0.17992,12.96459 1.32292,19.28989 1.27353,7.03792 3.41489,13.941785 6.39939,20.549315 2.46239,4.54731 4.30036,9.35214 5.49628,14.2875 z m 9.53911,-16.50647 c -1.06186,15.70567 -4.41678,31.2667 -10.033,46.16803 l -0.0635,0.16228 c -4.37092,11.26419 -7.02381,23.06108 -7.93045,35.00261 -0.86078,11.30653 -0.15875,22.71184 2.13431,33.88784 7.94808,2.5788 16.43239,3.97227 25.241252,3.97227 1.87325,0 3.73239,-0.0635 5.57742,-0.18697 -9.18987,-26.61003 -12.213172,-54.57472 -9.28159,-81.89384 2.93511,-27.32969 11.82511,-54.020865 26.45128,-78.069725 -7.22136,-2.08845 -14.85194,-3.20675 -22.74711,-3.20675 -4.16278,0 -8.251472,0.31044 -12.248452,0.91016 2.91395,14.29103 3.8735,28.83959 2.89984,43.254095 z m -31.54539,10.00125 c 1.15005,13.41614 -0.22225,27.06864 -4.17689,40.24489 -1.60867,9.06639 -2.68111,18.16806 -3.21028,27.26267 -0.50095,8.60425 -0.52917,17.23672 -0.0811,25.85861 4.64256,3.40784 9.65553,6.33942 14.96836,8.72067 -1.74272,-10.39636 -2.21191,-20.90561 -1.42169,-31.30903 0.95955,-12.60828 3.76766,-25.09308 8.39258,-37.04167 1.69686,-6.39586 2.14136,-12.99633 1.36878,-19.45217 -0.77611,-6.51933 -2.78342,-12.88344 -5.97606,-18.72191 l -0.127,-0.25048 -0.007,0.004 c -3.22439,-7.13669 -5.5492,-14.640283 -6.94267,-22.334365 -1.00894,-5.58095 -1.524,-11.24303 -1.52753,-16.9157 -3.89114,2.159 -7.58825,4.62845 -11.05605,7.36953 5.43983,11.62403 8.72419,24.010065 9.79664,36.565425 z m -14.3757,10.18822 c 2.413,4.48734 4.48381,9.15459 6.19831,13.96295 1.16769,-7.80697 1.41111,-15.70567 0.74083,-23.53381 -0.94192,-11.01725 -3.69358,-21.861645 -8.20808,-32.088675 l -1.25624,1.22767 c -5.36364,5.35869 -9.98503,11.461752 -13.69731,18.136315 6.43008,6.69925 11.87944,14.20636 16.22249,22.29555"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.0352778"
+       id="path121" />
+  </g>
+</svg>

images/facebook.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="24px" height="24px">    <path d="M17.525,9H14V7c0-1.032,0.084-1.682,1.563-1.682h1.868v-3.18C16.522,2.044,15.608,1.998,14.693,2 C11.98,2,10,3.657,10,6.699V9H7v4l3-0.001V22h4v-9.003l3.066-0.001L17.525,9z"/></svg>

images/google.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="24px" height="24px">    <path d="M12.545,10.239v3.821h5.445c-0.712,2.315-2.647,3.972-5.445,3.972c-3.332,0-6.033-2.701-6.033-6.032 s2.701-6.032,6.033-6.032c1.498,0,2.866,0.549,3.921,1.453l2.814-2.814C17.503,2.988,15.139,2,12.545,2 C7.021,2,2.543,6.477,2.543,12s4.478,10,10.002,10c8.396,0,10.249-7.85,9.426-11.748L12.545,10.239z"/></svg>

images/logo.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="163.46629mm"
+   height="163.35728mm"
+   viewBox="0 0 163.46629 163.35728"
+   version="1.1"
+   id="svg306"
+   inkscape:export-filename="logo.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview308"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     showgrid="false" />
+  <defs
+     id="defs303" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-22.720238,-60.528986)">
+    <path
+       d="m 48.735138,181.79283 c 0.54186,-9.27806 1.61078,-18.48556 3.20181,-27.57664 -1.83797,-9.06992 -4.9904,-17.75884 -9.31334,-25.80923 -3.60785,-6.72041 -8.03063,-12.99633 -13.1833,-18.68311 -4.32118,9.95539 -6.72007,20.94089 -6.72007,32.48378 0,22.55309 9.14965,42.97539 23.93986,57.75678 0.56903,0.56797 1.14829,1.12889 1.73496,1.67922 -0.15875,-6.62163 -0.0462,-13.24327 0.34008,-19.8508 z m 113.536592,18.14689 c -4.95653,-7.05203 -8.87589,-14.74611 -11.67341,-22.84236 -0.86078,-2.49062 -1.6122,-5.01651 -2.25778,-7.57062 -0.22578,3.51014 -0.15875,7.02734 0.19755,10.51631 0.89606,8.72772 3.60539,17.27553 8.07156,25.05428 1.95792,-1.62278 3.84175,-3.33728 5.63739,-5.13292 z m -9.24278,-50.6977 c 0.2152,8.71714 1.78506,17.29317 4.5967,25.43528 2.38125,6.88975 5.66914,13.48317 9.79664,19.60386 11.71928,-14.1358 18.76425,-32.28269 18.76425,-52.07353 0,-21.79461 -8.54075,-41.59603 -22.46136,-56.239845 -0.0423,9.390952 -0.74789,18.739565 -2.10961,27.978815 -1.76037,11.94153 -4.63198,23.75606 -8.58662,35.29542 z m -18.63725,68.98923 c -9.40858,-15.44462 -16.52764,-32.06398 -21.209,-49.33598 -2.28247,-8.41375 -3.98286,-16.98625 -5.09058,-25.65753 -2.75872,26.58534 0.34219,53.78451 9.52147,79.59373 5.82083,-0.94192 11.43706,-2.49767 16.77811,-4.60022 z M 134.434,66.198125 c -8.94292,14.40744 -15.72331,29.827362 -20.29178,45.779975 -0.7232,18.63372 1.41464,37.16867 6.24416,54.99453 4.57906,16.89453 11.5817,33.13289 20.86328,48.18592 3.25261,-1.64041 6.38528,-3.49603 9.37331,-5.54214 -5.27403,-8.90764 -8.46314,-18.75367 -9.49325,-28.81842 -1.14653,-11.22539 0.38805,-22.72947 4.70958,-33.51389 l 0.0106,-0.0282 c 3.85586,-11.16542 6.66044,-22.68008 8.38552,-34.38878 1.65453,-11.21833 2.3107,-22.567195 1.95087,-33.898425 -6.49464,-5.31283 -13.82184,-9.64494 -21.75228,-12.77055 z M 85.567218,121.19971 c 1.01247,-5.6268 1.7145,-11.30653 2.09902,-17.00389 0.93134,-13.775975 0.0141,-27.671895 -2.7693,-41.313815 -4.32859,1.06187 -8.52311,2.46945 -12.54831,4.191 -0.27164,6.49464 0.17992,12.96459 1.32292,19.28989 1.27353,7.03792 3.41489,13.941785 6.39939,20.549315 2.46239,4.54731 4.30036,9.35214 5.49628,14.2875 z m 9.53911,-16.50647 c -1.06186,15.70567 -4.41678,31.2667 -10.033,46.16803 l -0.0635,0.16228 c -4.37092,11.26419 -7.02381,23.06108 -7.93045,35.00261 -0.86078,11.30653 -0.15875,22.71184 2.13431,33.88784 7.94808,2.5788 16.43239,3.97227 25.241252,3.97227 1.87325,0 3.73239,-0.0635 5.57742,-0.18697 -9.18987,-26.61003 -12.213172,-54.57472 -9.28159,-81.89384 2.93511,-27.32969 11.82511,-54.020865 26.45128,-78.069725 -7.22136,-2.08845 -14.85194,-3.20675 -22.74711,-3.20675 -4.16278,0 -8.251472,0.31044 -12.248452,0.91016 2.91395,14.29103 3.8735,28.83959 2.89984,43.254095 z m -31.54539,10.00125 c 1.15005,13.41614 -0.22225,27.06864 -4.17689,40.24489 -1.60867,9.06639 -2.68111,18.16806 -3.21028,27.26267 -0.50095,8.60425 -0.52917,17.23672 -0.0811,25.85861 4.64256,3.40784 9.65553,6.33942 14.96836,8.72067 -1.74272,-10.39636 -2.21191,-20.90561 -1.42169,-31.30903 0.95955,-12.60828 3.76766,-25.09308 8.39258,-37.04167 1.69686,-6.39586 2.14136,-12.99633 1.36878,-19.45217 -0.77611,-6.51933 -2.78342,-12.88344 -5.97606,-18.72191 l -0.127,-0.25048 -0.007,0.004 c -3.22439,-7.13669 -5.5492,-14.640283 -6.94267,-22.334365 -1.00894,-5.58095 -1.524,-11.24303 -1.52753,-16.9157 -3.89114,2.159 -7.58825,4.62845 -11.05605,7.36953 5.43983,11.62403 8.72419,24.010065 9.79664,36.565425 z m -14.3757,10.18822 c 2.413,4.48734 4.48381,9.15459 6.19831,13.96295 1.16769,-7.80697 1.41111,-15.70567 0.74083,-23.53381 -0.94192,-11.01725 -3.69358,-21.861645 -8.20808,-32.088675 l -1.25624,1.22767 c -5.36364,5.35869 -9.98503,11.461752 -13.69731,18.136315 6.43008,6.69925 11.87944,14.20636 16.22249,22.29555"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.0352778"
+       id="path121" />
+  </g>
+</svg>

images/twitter.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="24px" height="24px">    <path d="M22,3.999c-0.78,0.463-2.345,1.094-3.265,1.276c-0.027,0.007-0.049,0.016-0.075,0.023c-0.813-0.802-1.927-1.299-3.16-1.299 c-2.485,0-4.5,2.015-4.5,4.5c0,0.131-0.011,0.372,0,0.5c-3.353,0-5.905-1.756-7.735-4c-0.199,0.5-0.286,1.29-0.286,2.032 c0,1.401,1.095,2.777,2.8,3.63c-0.314,0.081-0.66,0.139-1.02,0.139c-0.581,0-1.196-0.153-1.759-0.617c0,0.017,0,0.033,0,0.051 c0,1.958,2.078,3.291,3.926,3.662c-0.375,0.221-1.131,0.243-1.5,0.243c-0.26,0-1.18-0.119-1.426-0.165 c0.514,1.605,2.368,2.507,4.135,2.539c-1.382,1.084-2.341,1.486-5.171,1.486H2C3.788,19.145,6.065,20,8.347,20 C15.777,20,20,14.337,20,8.999c0-0.086-0.002-0.266-0.005-0.447C19.995,8.534,20,8.517,20,8.499c0-0.027-0.008-0.053-0.008-0.08 c-0.003-0.136-0.006-0.263-0.009-0.329c0.79-0.57,1.475-1.281,2.017-2.091c-0.725,0.322-1.503,0.538-2.32,0.636 C20.514,6.135,21.699,4.943,22,3.999z"/></svg>

index.html

@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body>
+    <input type="checkbox" id="menu">
+    <label for="menu" class="hamburger-menu">
+        <div class="patty"></div>
+    </label>
+    <section class="upfold">
+        <div class="upfold-container">
+            <nav class="navbar">
+                <a href="" class="action">Home</a>
+                <a href="">About Us</a>
+                <a href="">Shop</a>
+                <a href="">Blog</a>
+                <a href="">Contact</a>
+            </nav>
+            <div class="upfold-info-card">
+                <div class="branding">
+                    <figure class="brand-image">
+                        <img src="images/logo.svg" alt="">
+                    </figure>
+                    <h2 class="brand-name">Woodlands</h2>
+                </div>
+                <figure class="upfold-floating-image">
+                    <img src="images/pngegg.png" alt="">
+                </figure>
+                <div class="upfold-info-card-content">
+                    <div class="upfold-info-card-header-image">
+                        <h1>Specialty Wood Product</h1>
+                        <div class="upfold-info-card-images">
+                            <figure>
+                                <img src="images/upfold-image-1.jpg" alt="">
+                            </figure>
+                            <figure>
+                                <img src="images/upfold-image-2.jpg" alt="">
+                            </figure>
+                            <figure>
+                                <img src="images/upfold-image-3.jpg" alt="">
+                            </figure>
+                        </div>
+                    </div>
+                    <div class="upfold-info-card-descriprion">
+                        <article>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                            laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+                            voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                            cupidatat.
+                        </article>
+                        <a href="" class="upfold-info-card-descriprion-button">Contact Us</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="our-products">
+        <div class="our-products-container">
+            <h1 class="product-heading">Our Products</h1>
+            <div class="product-info-card">
+                <div class="product-info">
+                    <figure class="product-image">
+                        <img src="images/product-1.jpg" alt="">
+                    </figure>
+                    <div class="product-info-description">
+                        <article>
+                            <h2>Furniture</h2>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+                                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                                ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+                                reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+                                sint occaecat cupidatat.</p>
+                        </article>
+                        <a href="" class="product-info-descriprion-button">Shop Online</a>
+                    </div>
+                </div>
+                <div class="product-info">
+                    <figure class="product-image">
+                        <img src="images/product-2.jpg" alt="">
+                    </figure>
+                    <div class="product-info-description">
+                        <article>
+                            <h2>Features</h2>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+                                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                                ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+                                reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+                                sint occaecat cupidatat.</p>
+                        </article>
+                        <a href="" class="product-info-descriprion-button">Shop Online</a>
+                    </div>
+                </div>
+                <div class="product-info">
+                    <figure class="product-image">
+                        <img src="images/product-3.jpg" alt="">
+                    </figure>
+                    <div class="product-info-description">
+                        <article>
+                            <h2>Flooring</h2>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+                                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                                ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+                                reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+                                sint occaecat cupidatat.</p>
+                        </article>
+                        <a href="" class="product-info-descriprion-button">Shop Online</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="meterials-list">
+        <div class="meterials-container">
+            <h1 class="meterials-list-heading">Meterials</h1>
+            <a href="" class="meterial">
+                <figure>
+                    <img src="images/maple.jpg" alt="">
+                </figure>
+                <p>Maple</p>
+            </a>
+            <a href="" class="meterial">
+                <figure>
+                    <img src="images/walnut.jpg" alt="">
+                </figure>
+                <p>Walnut</p>
+            </a>
+            <a href="" class="meterial">
+                <figure>
+                    <img src="images/cherry.jpg" alt="">
+                </figure>
+                <p>Cherry</p>
+            </a>
+            <a href="" class="meterial">
+                <figure>
+                    <img src="images/pine.jpg" alt="">
+                </figure>
+                <p>Pine</p>
+            </a>
+            <a href="" class="meterial">
+                <figure>
+                    <img src="images/oak.jpg" alt="">
+                </figure>
+                <p>Oak</p>
+            </a>
+            <a href="" class="meterial">
+                <figure>
+                    <img src="images/cedar.jpg" alt="">
+                </figure>
+                <p>Cedar</p>
+            </a>
+        </div>
+    </section>
+    <footer>
+        <div class="contact-card">
+            <h1 class="contact-card-header">Contact</h1>
+            <form action="" class="contact-card-form">
+                <div class="contact-card-form-inputs-holder">
+                    <input type="text" placeholder="Your Name">
+                    <input type="email" name="" id="" class="Email ID">
+                </div>
+                <textarea name="" id="" cols="30" rows="10" placeholder="Message"></textarea>
+                <button>Submit</button>
+            </form>
+        </div>
+        <div class="social-media-icons">
+            <a href="">
+                <figure>
+                    <img src="images/facebook.svg" alt="">
+                </figure>
+            </a>
+            <a href="">
+                <figure>
+                    <img src="images/twitter.svg" alt="">
+                </figure>
+            </a>
+            <a href="">
+                <figure>
+                    <img src="images/google.svg" alt="">
+                </figure>
+            </a>
+        </div>
+        <p class="copyrights">© 2022 Brand Name. All Rights Reserved</p>
+    </footer>
+</body>
+</html>

style.css

@@ -0,0 +1,627 @@
+*, body {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #1A1F23;
+}
+
+img {
+  width: 100%;
+}
+
+#menu {
+  position: absolute;
+  opacity: 0;
+}
+#menu:checked + .hamburger-menu {
+  position: fixed;
+}
+#menu:checked + .hamburger-menu .patty {
+  background-color: rgba(255, 255, 255, 0);
+}
+#menu:checked + .hamburger-menu .patty::before {
+  transform: rotate(-45deg);
+  top: 0;
+  left: 0;
+}
+#menu:checked + .hamburger-menu .patty::after {
+  transform: rotate(45deg);
+  top: 0;
+  left: 0;
+}
+#menu:checked ~ .upfold .navbar {
+  opacity: 1;
+}
+#menu:checked ~ .upfold .navbar a {
+  display: block;
+}
+
+.hamburger-menu {
+  position: absolute;
+  top: 2rem;
+  right: 2rem;
+  cursor: pointer;
+  z-index: 5;
+  display: none;
+}
+@media (max-width: 500px) {
+  .hamburger-menu {
+    display: block;
+  }
+}
+.hamburger-menu .patty {
+  width: 1.5rem;
+  height: 0.2rem;
+  background-color: white;
+  position: relative;
+  transition: transform 0.3s;
+}
+.hamburger-menu .patty::before {
+  content: "";
+  position: absolute;
+  top: -0.5rem;
+  left: 0;
+  width: 1.5rem;
+  height: 0.2rem;
+  background-color: white;
+  transition: transform 0.3s;
+}
+.hamburger-menu .patty::after {
+  content: "";
+  position: absolute;
+  top: 0.5rem;
+  left: 0;
+  width: 1.5rem;
+  height: 0.2rem;
+  background-color: white;
+  transition: transform 0.3s;
+}
+
+.upfold {
+  width: 100%;
+  position: relative;
+  background-image: url(images/upfold-bg.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+.upfold .upfold-container {
+  width: 70%;
+  margin-left: 15%;
+}
+@media (max-width: 500px) {
+  .upfold .upfold-container {
+    width: 90%;
+    margin-left: 5%;
+    padding-top: 5rem;
+  }
+}
+.upfold .upfold-container .navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 40%;
+  margin-left: 60%;
+  height: 7rem;
+}
+@media (max-width: 500px) {
+  .upfold .upfold-container .navbar {
+    width: 100%;
+    position: fixed;
+    margin: 0;
+    left: 0;
+    top: 0;
+    flex-direction: column;
+    height: 100vh;
+    justify-content: space-around;
+    padding: 25vh 0;
+    z-index: 2;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    background-color: rgba(0, 0, 0, 0.5);
+    opacity: 0;
+  }
+}
+.upfold .upfold-container .navbar a {
+  color: white;
+  opacity: 0.7;
+  text-decoration: none;
+  font-size: 1.2rem;
+  display: none;
+}
+.upfold .upfold-container .navbar a:hover {
+  opacity: 1;
+}
+.upfold .upfold-container .navbar a.action {
+  opacity: 1;
+}
+.upfold .upfold-container .upfold-info-card {
+  display: flex;
+  flex-direction: column;
+  background-color: #1A1F23;
+  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
+  padding: 4rem;
+}
+@media (max-width: 500px) {
+  .upfold .upfold-container .upfold-info-card {
+    padding: 2rem;
+  }
+}
+.upfold .upfold-container .upfold-info-card .branding {
+  display: flex;
+  align-items: center;
+  margin-bottom: 5%;
+}
+@media (max-width: 500px) {
+  .upfold .upfold-container .upfold-info-card .branding {
+    justify-content: center;
+  }
+}
+.upfold .upfold-container .upfold-info-card .branding .brand-image {
+  width: 3%;
+  margin-right: 1rem;
+}
+@media (max-width: 500px) {
+  .upfold .upfold-container .upfold-info-card .branding .brand-image {
+    width: 18%;
+  }
+}
+.upfold .upfold-container .upfold-info-card .branding .brand-name {
+  font-size: 2rem;
+  color: white;
+}
+.upfold .upfold-container .upfold-info-card .upfold-floating-image {
+  position: absolute;
+  bottom: -15%;
+  right: 0;
+  width: 48%;
+  overflow: hidden;
+}
+@media (max-width: 500px) {
+  .upfold .upfold-container .upfold-info-card .upfold-floating-image {
+    bottom: -10rem;
+  }
+}
+.upfold .upfold-container .upfold-info-card .upfold-floating-image img {
+  width: 101%;
+  transform: scaleX(-1);
+}
+@media (max-width: 500px) {
+  .upfold .upfold-container .upfold-info-card .upfold-floating-image img {
+    width: 500%;
+  }
+}
+.upfold .upfold-container .upfold-info-card .upfold-info-card-descriprion {
+  width: 50%;
+  padding-left: 3%;
+  display: flex;
+  flex-direction: column;
+}
+@media (max-width: 500px) {
+  .upfold .upfold-container .upfold-info-card .upfold-info-card-descriprion {
+    width: 100%;
+    justify-content: center;
+    text-align: center;
+    padding: 0;
+  }
+}
+.upfold .upfold-container .upfold-info-card .upfold-info-card-descriprion article {
+  color: white;
+  font-size: 1.2rem;
+  line-height: 2rem;
+  opacity: 0.8;
+}
+@media (max-width: 500px) {
+  .upfold .upfold-container .upfold-info-card .upfold-info-card-descriprion article {
+    margin-top: 2rem;
+  }
+}
+.upfold .upfold-container .upfold-info-card .upfold-info-card-descriprion .upfold-info-card-descriprion-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  text-decoration: none;
+  font-size: 1.2rem;
+  height: 3rem;
+  margin-top: 2rem;
+  background-color: #21282E;
+}
+@media (max-width: 500px) {
+  .upfold .upfold-container .upfold-info-card .upfold-info-card-descriprion .upfold-info-card-descriprion-button {
+    position: relative;
+    z-index: 1;
+  }
+}
+.upfold .upfold-container .upfold-info-card .upfold-info-card-content {
+  display: flex;
+}
+@media (max-width: 500px) {
+  .upfold .upfold-container .upfold-info-card .upfold-info-card-content {
+    flex-direction: column;
+  }
+}
+.upfold .upfold-container .upfold-info-card .upfold-info-card-content .upfold-info-card-header-image {
+  width: 50%;
+  border-right: 1px solid rgba(255, 255, 255, 0.5);
+  padding-right: 5%;
+}
+@media (max-width: 500px) {
+  .upfold .upfold-container .upfold-info-card .upfold-info-card-content .upfold-info-card-header-image {
+    width: 100%;
+    border: none;
+  }
+}
+.upfold .upfold-container .upfold-info-card .upfold-info-card-content .upfold-info-card-header-image h1 {
+  font-size: 6rem;
+  color: white;
+}
+@media (max-width: 500px) {
+  .upfold .upfold-container .upfold-info-card .upfold-info-card-content .upfold-info-card-header-image h1 {
+    font-size: 3rem;
+    text-align: center;
+    margin-top: 2rem;
+  }
+}
+.upfold .upfold-container .upfold-info-card .upfold-info-card-content .upfold-info-card-header-image .upfold-info-card-images {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 5%;
+}
+@media (max-width: 500px) {
+  .upfold .upfold-container .upfold-info-card .upfold-info-card-content .upfold-info-card-header-image .upfold-info-card-images {
+    padding-top: 2rem;
+  }
+}
+.upfold .upfold-container .upfold-info-card .upfold-info-card-content .upfold-info-card-header-image .upfold-info-card-images figure img {
+  width: 10rem;
+  height: 10rem;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: bottom;
+     object-position: bottom;
+}
+@media (max-width: 500px) {
+  .upfold .upfold-container .upfold-info-card .upfold-info-card-content .upfold-info-card-header-image .upfold-info-card-images figure img {
+    width: 6rem;
+    height: 6rem;
+  }
+}
+
+.our-products {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  margin: 10% 0;
+  padding: 5% 0;
+  background-image: url(images/product-bg.png);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.our-products .our-products-container {
+  width: 60%;
+  margin-left: 20%;
+  display: flex;
+  flex-direction: column;
+}
+@media (max-width: 500px) {
+  .our-products .our-products-container {
+    width: 100%;
+    margin: 0;
+  }
+}
+.our-products .our-products-container .product-heading {
+  text-align: center;
+  font-size: 3.5rem;
+  color: white;
+  margin-bottom: 10%;
+}
+@media (max-width: 500px) {
+  .our-products .our-products-container .product-heading {
+    font-size: 2.5rem;
+  }
+}
+.our-products .our-products-container .product-info-card {
+  display: flex;
+  flex-direction: column;
+  background-color: #16191E;
+  padding: 4rem 15rem;
+  position: relative;
+}
+@media (max-width: 500px) {
+  .our-products .our-products-container .product-info-card {
+    padding: 4rem 2rem;
+  }
+}
+.our-products .our-products-container .product-info-card .product-info {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+  padding: 3rem 0;
+  position: relative;
+  justify-content: center;
+}
+.our-products .our-products-container .product-info-card .product-info:first-child {
+  padding-top: 0;
+}
+.our-products .our-products-container .product-info-card .product-info:last-child {
+  border: none;
+  padding-bottom: 0;
+}
+.our-products .our-products-container .product-info-card .product-info:nth-child(2) .product-image {
+  left: auto;
+  top: -5rem;
+  right: -30rem;
+}
+@media (max-width: 500px) {
+  .our-products .our-products-container .product-info-card .product-info:nth-child(2) .product-image {
+    top: auto;
+    right: auto;
+  }
+}
+.our-products .our-products-container .product-info-card .product-info:nth-child(2) .product-info-description {
+  margin-left: -20%;
+  text-align: right;
+}
+@media (max-width: 500px) {
+  .our-products .our-products-container .product-info-card .product-info:nth-child(2) .product-info-description {
+    text-align: center;
+    margin: auto;
+    margin-top: 2rem;
+  }
+}
+.our-products .our-products-container .product-info-card .product-info:nth-child(3) .product-image {
+  top: auto;
+  bottom: -10rem;
+}
+@media (max-width: 500px) {
+  .our-products .our-products-container .product-info-card .product-info:nth-child(3) .product-image {
+    top: auto;
+    bottom: auto;
+  }
+}
+.our-products .our-products-container .product-info-card .product-info .product-image {
+  width: 25rem;
+  height: 33rem;
+  position: absolute;
+  top: -10rem;
+  left: -30rem;
+  overflow: hidden;
+  box-shadow: 0 0 3rem rgba(0, 0, 0, 0.5);
+}
+@media (max-width: 500px) {
+  .our-products .our-products-container .product-info-card .product-info .product-image {
+    position: relative;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 50vh;
+  }
+}
+.our-products .our-products-container .product-info-card .product-info .product-info-description {
+  width: 120%;
+  color: white;
+}
+@media (max-width: 500px) {
+  .our-products .our-products-container .product-info-card .product-info .product-info-description {
+    width: auto;
+    text-align: center;
+    margin: 1rem;
+    margin-top: 2rem;
+  }
+}
+.our-products .our-products-container .product-info-card .product-info .product-info-description article h2 {
+  margin-bottom: 2rem;
+  font-size: 2.5rem;
+}
+@media (max-width: 500px) {
+  .our-products .our-products-container .product-info-card .product-info .product-info-description article h2 {
+    font-size: 1.5rem;
+  }
+}
+.our-products .our-products-container .product-info-card .product-info .product-info-description article p {
+  margin-bottom: 2rem;
+  font-size: 1.2rem;
+  line-height: 2rem;
+  opacity: 0.6;
+}
+@media (max-width: 500px) {
+  .our-products .our-products-container .product-info-card .product-info .product-info-description article p {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+}
+.our-products .our-products-container .product-info-card .product-info .product-info-description .product-info-descriprion-button {
+  color: white;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-size: 1.2rem;
+}
+@media (max-width: 500px) {
+  .our-products .our-products-container .product-info-card .product-info .product-info-description .product-info-descriprion-button {
+    font-size: 1rem;
+  }
+}
+
+.meterials-list {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  margin: 5% 0 5%;
+  padding-top: 5%;
+  padding-bottom: 10%;
+  background-image: url(images/meterial-bg.png);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+@media (max-width: 500px) {
+  .meterials-list {
+    background-size: cover;
+    margin-top: 0;
+    padding-top: 0;
+    background-position-x: center;
+  }
+}
+.meterials-list .meterials-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 60%;
+  margin-left: 20%;
+}
+@media (max-width: 500px) {
+  .meterials-list .meterials-container {
+    width: 90%;
+    margin-left: 5%;
+  }
+}
+.meterials-list .meterials-container .meterials-list-heading {
+  margin-bottom: 10%;
+  font-size: 3.5rem;
+  width: 100%;
+  text-align: center;
+  color: white;
+}
+@media (max-width: 500px) {
+  .meterials-list .meterials-container .meterials-list-heading {
+    font-size: 2.5rem;
+    margin-bottom: 4rem;
+  }
+}
+.meterials-list .meterials-container .meterial {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 33.33%;
+  margin-bottom: 3rem;
+  position: relative;
+  color: white;
+}
+@media (max-width: 500px) {
+  .meterials-list .meterials-container .meterial {
+    width: 40%;
+    margin-bottom: 0.5rem;
+  }
+}
+.meterials-list .meterials-container .meterial p {
+  position: absolute;
+  top: 43%;
+  text-align: center;
+  font-size: 2rem;
+  text-transform: uppercase;
+  text-shadow: 0 0 0.5rem black;
+}
+@media (max-width: 500px) {
+  .meterials-list .meterials-container .meterial p {
+    font-size: 1.3rem;
+  }
+}
+.meterials-list .meterials-container .meterial figure img {
+  height: 15rem;
+  width: 15rem;
+  border-radius: 10rem;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
+  box-shadow: 0 0 3rem rgba(0, 0, 0, 0.5);
+}
+@media (max-width: 500px) {
+  .meterials-list .meterials-container .meterial figure img {
+    width: 9rem;
+    height: 9rem;
+  }
+}
+
+footer {
+  width: 100%;
+  background-image: url(images/footer-bg.png);
+  background-repeat: no-repeat;
+  background-position: right bottom;
+  background-size: contain;
+}
+footer .contact-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #1A1F23;
+  width: 60%;
+  margin-left: 20%;
+  box-shadow: 0 0 3rem rgba(0, 0, 0, 0.5);
+  padding: 4rem 2rem 2rem 2rem;
+}
+@media (max-width: 500px) {
+  footer .contact-card {
+    width: 90%;
+    margin-left: 5%;
+    padding: 2rem 0;
+  }
+}
+footer .contact-card .contact-card-header {
+  text-align: center;
+  font-size: 3.5rem;
+  color: white;
+  margin-bottom: 5%;
+}
+@media (max-width: 500px) {
+  footer .contact-card .contact-card-header {
+    font-size: 2.5rem;
+  }
+}
+footer .contact-card .contact-card-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 90%;
+}
+footer .contact-card .contact-card-form .contact-card-form-inputs-holder {
+  display: flex;
+}
+footer .contact-card .contact-card-form .contact-card-form-inputs-holder input {
+  width: 50%;
+  margin: 1rem;
+  height: 2.5rem;
+  padding: 1rem;
+  font-size: 1.2rem;
+  background-color: #16191E;
+  color: white;
+  border: none;
+}
+footer .contact-card .contact-card-form textarea {
+  margin: 1rem;
+  padding: 1rem;
+  font-size: 1.2rem;
+  background-color: #16191E;
+  color: white;
+  border: none;
+}
+footer .contact-card .contact-card-form button {
+  margin: 1rem;
+  padding: 1rem;
+  font-size: 1.2rem;
+  background-color: #21282E;
+  color: white;
+  border: none;
+}
+footer .social-media-icons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 3%;
+}
+footer .social-media-icons a {
+  margin: 1rem;
+}
+footer .copyrights {
+  padding-bottom: 3rem;
+  color: white;
+  text-align: center;
+  opacity: 0.6;
+}/*# sourceMappingURL=style.css.map */

style.scss

@@ -0,0 +1,623 @@
+@import "variables";
+@import "reset";
+@import "breakpoints";
+
+
+#menu {
+    position: absolute;
+    opacity: 0;
+
+    &:checked {
+        +.hamburger-menu {
+            position: fixed;
+            .patty {
+                background-color: rgba(255, 255, 255, 0);
+
+                &::before {
+                    transform: rotate(-45deg);
+                    top: 0;
+                    left: 0;
+                }
+
+                &::after {
+                    transform: rotate(45deg);
+                    top: 0;
+                    left: 0;
+                }
+            }
+        }
+
+        
+
+        ~.upfold {
+            .navbar {
+                opacity: 1;
+                a{
+                    display: block;
+
+                }
+            }
+        }
+    }
+
+
+}
+
+.hamburger-menu {
+    position: absolute;
+    top: 2rem;
+    right: 2rem;
+    cursor: pointer;
+    z-index: 5;
+    display: none;
+
+    @include mobile {
+        display: block;
+    }
+
+    .patty {
+        width: 1.5rem;
+        height: 0.2rem;
+        background-color: white;
+        position: relative;
+        transition: transform 0.3s;
+
+        &::before {
+            content: "";
+            position: absolute;
+            top: -0.5rem;
+            left: 0;
+            width: 1.5rem;
+            height: 0.2rem;
+            background-color: white;
+            transition: transform 0.3s;
+        }
+
+        &::after {
+            content: "";
+            position: absolute;
+            top: 0.5rem;
+            left: 0;
+            width: 1.5rem;
+            height: 0.2rem;
+            background-color: white;
+            transition: transform 0.3s;
+        }
+    }
+}
+
+
+
+.upfold {
+    width: 100%;
+    position: relative;
+    background-image: url(images/upfold-bg.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+
+    .upfold-container {
+        width: 70%;
+        margin-left: 15%;
+        @include mobile{
+            width: 90%;
+            margin-left: 5%;
+            padding-top: 5rem;
+        }
+
+        .navbar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 40%;
+            margin-left: 60%;
+            height: 7rem;
+            @include mobile{
+                width: 100%;
+                position: fixed;
+                margin: 0;
+                left: 0;
+                top: 0;
+                flex-direction: column;
+                height: 100vh;
+                justify-content: space-around;
+                padding: 25vh 0;
+                z-index: 2;
+                -webkit-backdrop-filter: blur(10px);
+                backdrop-filter: blur(10px);
+                background-color: rgba(0, 0, 0, 0.5); 
+                opacity: 0;
+            }
+
+            a {
+                color: white;
+                opacity: 0.7;
+                text-decoration: none;
+                font-size: 1.2rem;
+                display: none;
+
+                &:hover {
+                    opacity: 1;
+                }
+            }
+            a.action{
+                opacity: 1;
+            }
+        }
+
+        .upfold-info-card {
+            display: flex;
+            flex-direction: column;
+            background-color: $satin_deep_black;
+            box-shadow: 0 0 2rem $black_shadow;
+            padding: 4rem;
+            @include mobile{
+                padding: 2rem;
+            }
+            
+
+            .branding {
+                display: flex;
+                align-items: center;
+                margin-bottom: 5%;
+                @include mobile{
+                    justify-content: center;
+                }
+
+                .brand-image {
+                    width: 3%;
+                    margin-right: 1rem;
+                    @include mobile{
+                        width: 18%;
+                    }
+                }
+
+                .brand-name {
+                    font-size: 2rem;
+                    color: white;
+                }
+            }
+
+            .upfold-floating-image {
+                position: absolute;
+                bottom: -15%;
+                right: 0;
+                width: 48%;
+                overflow: hidden;
+                @include mobile{
+                    bottom: -10rem;
+                }
+
+                img {
+                    width: 101%;
+                    transform: scaleX(-1);
+                    @include mobile{
+                        width: 500%;
+                    }
+                }
+            }
+
+            .upfold-info-card-descriprion {
+                width: 50%;
+                padding-left: 3%;
+                display: flex;
+                flex-direction: column;
+                @include mobile{
+                    width: 100%;
+                    justify-content: center;
+                    text-align: center;
+                    padding: 0;
+                }
+
+                article {
+                    color: white;
+                    font-size: 1.2rem;
+                    line-height: 2rem;
+                    opacity: 0.8;
+                    @include mobile{
+                        margin-top: 2rem;
+                    }
+                }
+
+                .upfold-info-card-descriprion-button {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: white;
+                    text-decoration: none;
+                    font-size: 1.2rem;
+                    height: 3rem;
+                    margin-top: 2rem;
+                    background-color: $black_gray;
+                    @include mobile{
+                        position: relative;
+                        z-index: 1;
+                    }
+                }
+            }
+
+            .upfold-info-card-content {
+                display: flex;
+                @include mobile{
+                    flex-direction: column;
+                }
+
+                .upfold-info-card-header-image {
+                    width: 50%;
+                    border-right: 1px solid $white_light;
+                    padding-right: 5%;
+                    @include mobile{
+                        width: 100%;
+                        border: none;
+                    }
+
+                    h1 {
+                        font-size: 6rem;
+                        color: white;
+                        @include mobile{
+                            font-size: 3rem;
+                            text-align: center;
+                            margin-top: 2rem;
+                        }
+                    }
+
+                    .upfold-info-card-images {
+                        display: flex;
+                        justify-content: space-between;
+                        padding-top: 5%;
+                        @include mobile{
+                            padding-top: 2rem;
+                        }
+
+                        figure {
+                            img {
+                                width: 10rem;
+                                height: 10rem;
+                                object-fit: cover;
+                                object-position: bottom;
+                                @include mobile{
+                                    width: 6rem;
+                                    height: 6rem;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.our-products {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    margin: 10% 0;
+    padding: 5% 0;
+    background-image: url(images/product-bg.png);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+
+    .our-products-container {
+        width: 60%;
+        margin-left: 20%;
+        display: flex;
+        flex-direction: column;
+
+        @include mobile{
+            width: 100%;
+            margin: 0;
+        }
+
+        .product-heading {
+            text-align: center;
+            font-size: 3.5rem;
+            color: white;
+            margin-bottom: 10%;
+            @include mobile{
+                font-size: 2.5rem;
+            }
+
+        }
+
+        .product-info-card {
+            display: flex;
+            flex-direction: column;
+            background-color: $river_styx;
+            padding: 4rem 15rem;
+            position: relative;
+            @include mobile{
+                padding: 4rem 2rem;
+            }
+
+            .product-info {
+                border-bottom: 1px solid $white_light;
+                padding: 3rem 0;
+                position: relative;
+                justify-content: center;
+
+                &:first-child {
+                    padding-top: 0;
+                }
+
+                &:last-child {
+                    border: none;
+                    padding-bottom: 0;
+                }
+
+                &:nth-child(2) {
+                    .product-image {
+                        left: auto;
+                        top: -5rem;
+                        right: -30rem;
+                        @include mobile{
+                            top: auto;
+                            right: auto;
+                        }
+                    }
+
+                    .product-info-description {
+                        margin-left: -20%;
+                        text-align: right;
+                        @include mobile{
+                            text-align: center;
+                            margin: auto;
+                            margin-top: 2rem;
+                        }
+                    }
+                }
+
+                &:nth-child(3) {
+                    .product-image {
+                        top: auto;
+                        bottom: -10rem;
+                        @include mobile{
+                            top: auto;
+                            bottom: auto;
+                        }
+                    }
+                }
+
+                .product-image {
+                    width: 25rem;
+                    height: 33rem;
+                    position: absolute;
+                    top: -10rem;
+                    left: -30rem;
+                    overflow: hidden;
+                    box-shadow: 0 0 3rem $black_shadow;
+                    @include mobile{
+                        position: relative;
+                        top: 0;
+                        left: 0;
+                        right: 0;
+                        width: 100%;
+                        height: 50vh;
+                    }
+                }
+
+                .product-info-description {
+                    width: 120%;
+                    color: white;
+                    @include mobile{
+                        width: auto;
+                        text-align: center;
+                        margin: 1rem;
+                        margin-top: 2rem;
+                    }
+
+                    article {
+                        h2 {
+                            margin-bottom: 2rem;
+                            font-size: 2.5rem;
+                            @include mobile{
+                                font-size: 1.5rem;
+                            }
+                        }
+
+                        p {
+                            margin-bottom: 2rem;
+                            font-size: 1.2rem;
+                            line-height: 2rem;
+                            opacity: 0.6;
+                            @include mobile{
+                                font-size: 1rem;
+                                line-height: 1.5rem;
+                            }
+                        }
+                    }
+
+                    .product-info-descriprion-button {
+                        color: white;
+                        text-decoration: none;
+                        text-transform: uppercase;
+                        font-size: 1.2rem;
+                        @include mobile{
+                            font-size: 1rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.meterials-list {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    margin: 5% 0 5%;
+    padding-top: 5%;
+    padding-bottom: 10%;
+    background-image: url(images/meterial-bg.png);
+    background-repeat: no-repeat;
+    background-size: contain;
+    @include mobile{
+        background-size: cover;
+        margin-top: 0;
+        padding-top: 0;
+        background-position-x: center;
+    }
+
+    .meterials-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        width: 60%;
+        margin-left: 20%;
+        @include mobile{
+            width: 90%;
+            margin-left: 5%;
+        }
+
+        .meterials-list-heading {
+            margin-bottom: 10%;
+            font-size: 3.5rem;
+            width: 100%;
+            text-align: center;
+            color: white;
+            @include mobile{
+                font-size: 2.5rem;
+                margin-bottom: 4rem;
+            }
+        }
+
+        .meterial {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 33.33%;
+            margin-bottom: 3rem;
+            position: relative;
+            color: white;
+            @include mobile{
+                width: 40%;
+                margin-bottom: 0.5rem;
+            }
+
+            p {
+                position: absolute;
+                top: 43%;
+                text-align: center;
+                font-size: 2rem;
+                text-transform: uppercase;
+                text-shadow: 0 0 0.5rem black;
+                @include mobile{
+                    font-size: 1.3rem;
+                }
+            }
+
+            figure {
+                img {
+                    height: 15rem;
+                    width: 15rem;
+                    border-radius: 10rem;
+                    object-fit: cover;
+                    object-position: center;
+                    box-shadow: 0 0 3rem $black_shadow;
+                    @include mobile{
+                        width: 9rem;
+                        height: 9rem;
+                    }
+                }
+            }
+
+        }
+
+    }
+}
+
+footer {
+    width: 100%;
+    background-image: url(images/footer-bg.png);
+    background-repeat: no-repeat;
+    background-position: right bottom;
+    background-size: contain;
+
+    .contact-card {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: $satin_deep_black;
+        width: 60%;
+        margin-left: 20%;
+        box-shadow: 0 0 3rem $black_shadow;
+        padding: 4rem 2rem 2rem 2rem;
+        @include mobile{
+            width: 90%;
+            margin-left: 5%;
+            padding: 2rem 0;
+        }
+
+        .contact-card-header {
+            text-align: center;
+            font-size: 3.5rem;
+            color: white;
+            margin-bottom: 5%;
+            @include mobile{
+                font-size: 2.5rem;
+            }
+        }
+
+        .contact-card-form {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            width: 90%;
+
+            .contact-card-form-inputs-holder {
+                display: flex;
+
+                input {
+                    width: 50%;
+                    margin: 1rem;
+                    height: 2.5rem;
+                    padding: 1rem;
+                    font-size: 1.2rem;
+                    background-color: $river_styx;
+                    color: white;
+                    border: none;
+                }
+            }
+
+            textarea {
+                margin: 1rem;
+                padding: 1rem;
+                font-size: 1.2rem;
+                background-color: $river_styx;
+                color: white;
+                border: none;
+            }
+
+            button {
+                margin: 1rem;
+                padding: 1rem;
+                font-size: 1.2rem;
+                background-color: $black_gray;
+                color: white;
+                border: none;
+            }
+        }
+    }
+
+    .social-media-icons {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 3%;
+
+        a {
+            margin: 1rem;
+        }
+    }
+
+    .copyrights {
+        padding-bottom: 3rem;
+        color: white;
+        text-align: center;
+        opacity: 0.6;
+    }
+}