commit b5e1eae9109ac26508dfe6dc9392dbbf7a7a5ca6 Author: bharath Date: Mon Oct 31 13:21:52 2022 +0530 Files uploading diff --git a/_breakpoints.scss b/_breakpoints.scss new file mode 100644 index 0000000..23b11d8 --- /dev/null +++ b/_breakpoints.scss @@ -0,0 +1,8 @@ +$breakpoints: ("mobile":500px); + +@mixin mobile { + + @media (max-width: map-get($breakpoints, "mobile")) { + @content; + } +} \ No newline at end of file diff --git a/_reset.scss b/_reset.scss new file mode 100644 index 0000000..8db98ea --- /dev/null +++ b/_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%; +} + diff --git a/_variables.scss b/_variables.scss new file mode 100644 index 0000000..f6bdd2b --- /dev/null +++ b/_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); \ No newline at end of file diff --git a/images/Green_Wood.webp b/images/Green_Wood.webp new file mode 100644 index 0000000..6f27c6e Binary files /dev/null and b/images/Green_Wood.webp differ diff --git a/images/bitmap.svg b/images/bitmap.svg new file mode 100644 index 0000000..80a98b6 --- /dev/null +++ b/images/bitmap.svg @@ -0,0 +1,37 @@ + + + + + + + + + + diff --git a/images/cedar.jpg b/images/cedar.jpg new file mode 100644 index 0000000..a2da3fb Binary files /dev/null and b/images/cedar.jpg differ diff --git a/images/cherry.jpg b/images/cherry.jpg new file mode 100644 index 0000000..033ca6f Binary files /dev/null and b/images/cherry.jpg differ diff --git a/images/dcnt0g5-202c9677-8207-4754-b7f5-3f0035dd3dfa.png b/images/dcnt0g5-202c9677-8207-4754-b7f5-3f0035dd3dfa.png new file mode 100644 index 0000000..942e736 Binary files /dev/null and b/images/dcnt0g5-202c9677-8207-4754-b7f5-3f0035dd3dfa.png differ diff --git a/images/dead_tree_02_png_by_gd08_d4s7iiz-fullview.png b/images/dead_tree_02_png_by_gd08_d4s7iiz-fullview.png new file mode 100644 index 0000000..4b7c6be Binary files /dev/null and b/images/dead_tree_02_png_by_gd08_d4s7iiz-fullview.png differ diff --git a/images/dead_tree_04_by_gd08_d5xl4sv-fullview.png b/images/dead_tree_04_by_gd08_d5xl4sv-fullview.png new file mode 100644 index 0000000..396f56b Binary files /dev/null and b/images/dead_tree_04_by_gd08_d5xl4sv-fullview.png differ diff --git a/images/facebook.svg b/images/facebook.svg new file mode 100644 index 0000000..78cbf65 --- /dev/null +++ b/images/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/footer-bg.png b/images/footer-bg.png new file mode 100644 index 0000000..f4a1116 Binary files /dev/null and b/images/footer-bg.png differ diff --git a/images/google.svg b/images/google.svg new file mode 100644 index 0000000..267f92a --- /dev/null +++ b/images/google.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 0000000..c352a4a --- /dev/null +++ b/images/logo.svg @@ -0,0 +1,40 @@ + + + + + + + + + + diff --git a/images/maple.jpg b/images/maple.jpg new file mode 100644 index 0000000..2ca18cf Binary files /dev/null and b/images/maple.jpg differ diff --git a/images/meterial-bg.png b/images/meterial-bg.png new file mode 100644 index 0000000..dd4969c Binary files /dev/null and b/images/meterial-bg.png differ diff --git a/images/oak.jpg b/images/oak.jpg new file mode 100644 index 0000000..0bf97a3 Binary files /dev/null and b/images/oak.jpg differ diff --git a/images/pine.jpg b/images/pine.jpg new file mode 100644 index 0000000..856f186 Binary files /dev/null and b/images/pine.jpg differ diff --git a/images/pngegg.png b/images/pngegg.png new file mode 100644 index 0000000..7d2eb83 Binary files /dev/null and b/images/pngegg.png differ diff --git a/images/product-1.jpg b/images/product-1.jpg new file mode 100644 index 0000000..4f6aa98 Binary files /dev/null and b/images/product-1.jpg differ diff --git a/images/product-2.jpg b/images/product-2.jpg new file mode 100644 index 0000000..0e48233 Binary files /dev/null and b/images/product-2.jpg differ diff --git a/images/product-3.jpg b/images/product-3.jpg new file mode 100644 index 0000000..e92ff87 Binary files /dev/null and b/images/product-3.jpg differ diff --git a/images/product-bg.png b/images/product-bg.png new file mode 100644 index 0000000..93e594b Binary files /dev/null and b/images/product-bg.png differ diff --git a/images/tree-3417631__340.png b/images/tree-3417631__340.png new file mode 100644 index 0000000..7d7085d Binary files /dev/null and b/images/tree-3417631__340.png differ diff --git a/images/twitter.svg b/images/twitter.svg new file mode 100644 index 0000000..02b29cd --- /dev/null +++ b/images/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/upfold-bg.png b/images/upfold-bg.png new file mode 100644 index 0000000..37b25ed Binary files /dev/null and b/images/upfold-bg.png differ diff --git a/images/upfold-image-1.jpg b/images/upfold-image-1.jpg new file mode 100644 index 0000000..918acc9 Binary files /dev/null and b/images/upfold-image-1.jpg differ diff --git a/images/upfold-image-2.jpg b/images/upfold-image-2.jpg new file mode 100644 index 0000000..45d0b78 Binary files /dev/null and b/images/upfold-image-2.jpg differ diff --git a/images/upfold-image-3.jpg b/images/upfold-image-3.jpg new file mode 100644 index 0000000..26c589b Binary files /dev/null and b/images/upfold-image-3.jpg differ diff --git a/images/walnut.jpg b/images/walnut.jpg new file mode 100644 index 0000000..737723a Binary files /dev/null and b/images/walnut.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..5e56371 --- /dev/null +++ b/index.html @@ -0,0 +1,191 @@ + + + + + + + + Document + + + + +
+
+ +
+
+
+ +
+

Woodlands

+
+
+ +
+
+
+

Specialty Wood Product

+
+
+ +
+
+ +
+
+ +
+
+
+
+
+ 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. +
+ Contact Us +
+
+
+
+
+
+
+

Our Products

+
+
+
+ +
+
+
+

Furniture

+

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.

+
+ Shop Online +
+
+
+
+ +
+
+
+

Features

+

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.

+
+ Shop Online +
+
+
+
+ +
+
+
+

Flooring

+

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.

+
+ Shop Online +
+
+
+
+
+
+
+

Meterials

+ +
+ +
+

Maple

+ + +
+ +
+

Walnut

+ + +
+ +
+

Cherry

+ + +
+ +
+

Pine

+ + +
+ +
+

Oak

+ + +
+ +
+

Cedar

+ +
+
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..bb295b8 --- /dev/null +++ b/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 */ \ No newline at end of file diff --git a/style.css.map b/style.css.map new file mode 100644 index 0000000..bfb4d12 --- /dev/null +++ b/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["_reset.scss","style.css","_variables.scss","style.scss","_breakpoints.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/style.scss b/style.scss new file mode 100644 index 0000000..9010ab8 --- /dev/null +++ b/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; + } +} \ No newline at end of file