bharath
/
woodlands
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Files uploading

master
Bharath Kumar 3 years ago
commit
b5e1eae910
34 changed files with 1551 additions and 0 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +8
    -0
      _breakpoints.scss
  2. +16
    -0
      _reset.scss
  3. +5
    -0
      _variables.scss
  4. BIN
      images/Green_Wood.webp
  5. +37
    -0
      images/bitmap.svg
  6. BIN
      images/cedar.jpg
  7. BIN
      images/cherry.jpg
  8. BIN
      images/dcnt0g5-202c9677-8207-4754-b7f5-3f0035dd3dfa.png
  9. BIN
      images/dead_tree_02_png_by_gd08_d4s7iiz-fullview.png
  10. BIN
      images/dead_tree_04_by_gd08_d5xl4sv-fullview.png
  11. +1
    -0
      images/facebook.svg
  12. BIN
      images/footer-bg.png
  13. +1
    -0
      images/google.svg
  14. +40
    -0
      images/logo.svg
  15. BIN
      images/maple.jpg
  16. BIN
      images/meterial-bg.png
  17. BIN
      images/oak.jpg
  18. BIN
      images/pine.jpg
  19. BIN
      images/pngegg.png
  20. BIN
      images/product-1.jpg
  21. BIN
      images/product-2.jpg
  22. BIN
      images/product-3.jpg
  23. BIN
      images/product-bg.png
  24. BIN
      images/tree-3417631__340.png
  25. +1
    -0
      images/twitter.svg
  26. BIN
      images/upfold-bg.png
  27. BIN
      images/upfold-image-1.jpg
  28. BIN
      images/upfold-image-2.jpg
  29. BIN
      images/upfold-image-3.jpg
  30. BIN
      images/walnut.jpg
  31. +191
    -0
      index.html
  32. +627
    -0
      style.css
  33. +1
    -0
      style.css.map
  34. +623
    -0
      style.scss

+ 8
- 0
_breakpoints.scss View File

@@ -0,0 +1,8 @@
$breakpoints: ("mobile":500px);

@mixin mobile {
@media (max-width: map-get($breakpoints, "mobile")) {
@content;
}
}

+ 16
- 0
_reset.scss View File

@@ -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%;
}


+ 5
- 0
_variables.scss View File

@@ -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);

BIN
images/Green_Wood.webp View File

Before After

+ 37
- 0
images/bitmap.svg View File

@@ -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>

BIN
images/cedar.jpg View File

Before After
Width: 800  |  Height: 533  |  Size: 75 KiB

BIN
images/cherry.jpg View File

Before After
Width: 640  |  Height: 640  |  Size: 26 KiB

BIN
images/dcnt0g5-202c9677-8207-4754-b7f5-3f0035dd3dfa.png View File

Before After
Width: 842  |  Height: 900  |  Size: 334 KiB

BIN
images/dead_tree_02_png_by_gd08_d4s7iiz-fullview.png View File

Before After
Width: 800  |  Height: 1003  |  Size: 570 KiB

BIN
images/dead_tree_04_by_gd08_d5xl4sv-fullview.png View File

Before After
Width: 600  |  Height: 978  |  Size: 390 KiB

+ 1
- 0
images/facebook.svg View File

@@ -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>

BIN
images/footer-bg.png View File

Before After
Width: 1920  |  Height: 1080  |  Size: 2.2 MiB

+ 1
- 0
images/google.svg View File

@@ -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>

+ 40
- 0
images/logo.svg View File

@@ -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>

BIN
images/maple.jpg View File

Before After
Width: 225  |  Height: 225  |  Size: 2.8 KiB

BIN
images/meterial-bg.png View File

Before After
Width: 1920  |  Height: 1080  |  Size: 3.6 MiB

BIN
images/oak.jpg View File

Before After
Width: 225  |  Height: 225  |  Size: 3.5 KiB

BIN
images/pine.jpg View File

Before After
Width: 540  |  Height: 360  |  Size: 32 KiB

BIN
images/pngegg.png View File

Before After
Width: 3947  |  Height: 1493  |  Size: 2.3 MiB

BIN
images/product-1.jpg View File

Before After
Width: 3264  |  Height: 4928  |  Size: 2.3 MiB

BIN
images/product-2.jpg View File

Before After
Width: 2992  |  Height: 3989  |  Size: 2.0 MiB

BIN
images/product-3.jpg View File

Before After
Width: 3508  |  Height: 4961  |  Size: 1.6 MiB

BIN
images/product-bg.png View File

Before After
Width: 1920  |  Height: 1080  |  Size: 3.5 MiB

BIN
images/tree-3417631__340.png View File

Before After
Width: 509  |  Height: 340  |  Size: 93 KiB

+ 1
- 0
images/twitter.svg View File

@@ -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>

BIN
images/upfold-bg.png View File

Before After
Width: 1920  |  Height: 1080  |  Size: 2.7 MiB

BIN
images/upfold-image-1.jpg View File

Before After
Width: 3648  |  Height: 5472  |  Size: 1.3 MiB

BIN
images/upfold-image-2.jpg View File

Before After
Width: 3456  |  Height: 5184  |  Size: 4.7 MiB

BIN
images/upfold-image-3.jpg View File

Before After
Width: 4016  |  Height: 6016  |  Size: 1.3 MiB

BIN
images/walnut.jpg View File

Before After
Width: 612  |  Height: 437  |  Size: 28 KiB

+ 191
- 0
index.html View File

@@ -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>

+ 627
- 0
style.css View File

@@ -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 */

+ 1
- 0
style.css.map
File diff suppressed because it is too large
View File


+ 623
- 0
style.scss View File

@@ -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;
}
}

Write Preview
Loading…
Cancel
Save