bharath
/
woodlands
1
0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

Files uploading

master
Bharath Kumar 3 年之前
當前提交
b5e1eae910
共有 34 個檔案被更改，包括 1551 行新增 和 0 行删除
分割檢視
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. 二進制
      images/Green_Wood.webp
  5. +37
    -0
      images/bitmap.svg
  6. 二進制
      images/cedar.jpg
  7. 二進制
      images/cherry.jpg
  8. 二進制
      images/dcnt0g5-202c9677-8207-4754-b7f5-3f0035dd3dfa.png
  9. 二進制
      images/dead_tree_02_png_by_gd08_d4s7iiz-fullview.png
  10. 二進制
      images/dead_tree_04_by_gd08_d5xl4sv-fullview.png
  11. +1
    -0
      images/facebook.svg
  12. 二進制
      images/footer-bg.png
  13. +1
    -0
      images/google.svg
  14. +40
    -0
      images/logo.svg
  15. 二進制
      images/maple.jpg
  16. 二進制
      images/meterial-bg.png
  17. 二進制
      images/oak.jpg
  18. 二進制
      images/pine.jpg
  19. 二進制
      images/pngegg.png
  20. 二進制
      images/product-1.jpg
  21. 二進制
      images/product-2.jpg
  22. 二進制
      images/product-3.jpg
  23. 二進制
      images/product-bg.png
  24. 二進制
      images/tree-3417631__340.png
  25. +1
    -0
      images/twitter.svg
  26. 二進制
      images/upfold-bg.png
  27. 二進制
      images/upfold-image-1.jpg
  28. 二進制
      images/upfold-image-2.jpg
  29. 二進制
      images/upfold-image-3.jpg
  30. 二進制
      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 查看文件

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

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

+ 16
- 0
_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%;
}


+ 5
- 0
_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/Green_Wood.webp 查看文件

Before After

+ 37
- 0
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/cedar.jpg 查看文件

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

二進制
images/cherry.jpg 查看文件

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

二進制
images/dcnt0g5-202c9677-8207-4754-b7f5-3f0035dd3dfa.png 查看文件

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

二進制
images/dead_tree_02_png_by_gd08_d4s7iiz-fullview.png 查看文件

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

二進制
images/dead_tree_04_by_gd08_d5xl4sv-fullview.png 查看文件

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

+ 1
- 0
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/footer-bg.png 查看文件

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

+ 1
- 0
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>

+ 40
- 0
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/maple.jpg 查看文件

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

二進制
images/meterial-bg.png 查看文件

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

二進制
images/oak.jpg 查看文件

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

二進制
images/pine.jpg 查看文件

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

二進制
images/pngegg.png 查看文件

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

二進制
images/product-1.jpg 查看文件

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

二進制
images/product-2.jpg 查看文件

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

二進制
images/product-3.jpg 查看文件

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

二進制
images/product-bg.png 查看文件

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

二進制
images/tree-3417631__340.png 查看文件

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

+ 1
- 0
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>

二進制
images/upfold-bg.png 查看文件

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

二進制
images/upfold-image-1.jpg 查看文件

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

二進制
images/upfold-image-2.jpg 查看文件

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

二進制
images/upfold-image-3.jpg 查看文件

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

二進制
images/walnut.jpg 查看文件

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

+ 191
- 0
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>

+ 627
- 0
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 */

+ 1
- 0
style.css.map
文件差異過大導致無法顯示
查看文件


+ 623
- 0
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;
}
}

Write Preview
Loading…
取消
儲存