commit 46b0dff8faaebeab110285e36a555819db7c4c9b Author: bharath Date: Mon Oct 31 13:19:45 2022 +0530 Files uploaded diff --git a/_breakpoints.scss b/_breakpoints.scss new file mode 100644 index 0000000..24a91af --- /dev/null +++ b/_breakpoints.scss @@ -0,0 +1,6 @@ +$breakpoints: ("sm":450px); +@mixin sm { + @media (max-width: map-get($breakpoints, "sm")) { + @content; + } +} \ No newline at end of file diff --git a/_mixins.scss b/_mixins.scss new file mode 100644 index 0000000..5ea15e1 --- /dev/null +++ b/_mixins.scss @@ -0,0 +1,87 @@ +@import "_breakpoints"; + +@mixin flex-center () { + display: flex; + justify-content: center; + align-items: center; +} + +@mixin flex-right () { + display: flex; + justify-content: flex-end; + align-items: flex-end; +} + +@mixin flex-left () { + display: flex; + justify-content: flex-start; + align-items: flex-start; +} + +@mixin flex-row-baseline { + display: flex; + flex-direction: row; + justify-content: baseline; +} + +@mixin flex-column-baseline { + display: flex; + flex-direction: column; + justify-content: baseline; +} +@mixin flex-column-center { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +@mixin flex-row-center { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +@mixin container { + width: 75%; + margin-left: 12.5%; +} + +@mixin container-sm { + width: 90%; + margin-left: 10%; + box-sizing: border-box; +} + + + +@mixin black-button { + background-color: black; + color: white; + border: none; + padding: 0.4rem 1rem 0.2rem; + width: 6rem; + text-transform: uppercase; + text-align: center; + font-size: 0.8rem; + text-decoration: none; + font-weight: 100; +} + +@mixin border-button { + padding: 0.4rem 2rem 0.3rem; + border: 1px solid white; + color: white; + text-decoration: none; + font-size: 0.8rem; + text-transform: uppercase; +} + +@mixin side-text { + position: absolute; + rotate: -90deg; + text-transform: uppercase; + font-weight: bolder; + font-size: small; +} + diff --git a/_reset.scss b/_reset.scss new file mode 100644 index 0000000..571412b --- /dev/null +++ b/_reset.scss @@ -0,0 +1,13 @@ + +@import "_variables"; + +*, body{ + margin: 0; + padding: 0; + box-sizing: border-box; + list-style: none; + font-family: $myfont; +} +img{ + width: 100%; +} \ No newline at end of file diff --git a/_variables.scss b/_variables.scss new file mode 100644 index 0000000..958f38d --- /dev/null +++ b/_variables.scss @@ -0,0 +1,4 @@ +$myfont: Josefin Sans; +$lite-mid-gray: #a7a7a7; +$dark-mid-gray: #6a6a6a; +$verticle-line: 1px solid $dark-mid-gray; \ No newline at end of file diff --git a/images/back-arrow.png b/images/back-arrow.png new file mode 100644 index 0000000..7e20430 Binary files /dev/null and b/images/back-arrow.png differ diff --git a/images/facebook.png b/images/facebook.png new file mode 100644 index 0000000..81e96b4 Binary files /dev/null and b/images/facebook.png differ diff --git a/images/forward-arrow.png b/images/forward-arrow.png new file mode 100644 index 0000000..6f63666 Binary files /dev/null and b/images/forward-arrow.png differ diff --git a/images/instagram.png b/images/instagram.png new file mode 100644 index 0000000..d90b7eb Binary files /dev/null and b/images/instagram.png differ diff --git a/images/linkedin.png b/images/linkedin.png new file mode 100644 index 0000000..c2178f2 Binary files /dev/null and b/images/linkedin.png differ diff --git a/images/logo.jpg b/images/logo.jpg new file mode 100644 index 0000000..fd6fed5 Binary files /dev/null and b/images/logo.jpg differ diff --git a/images/pexels-aleksandar-pasaric-325185.jpg b/images/pexels-aleksandar-pasaric-325185.jpg new file mode 100644 index 0000000..890108f Binary files /dev/null and b/images/pexels-aleksandar-pasaric-325185.jpg differ diff --git a/images/pexels-essow-936722.jpg b/images/pexels-essow-936722.jpg new file mode 100644 index 0000000..fac76a4 Binary files /dev/null and b/images/pexels-essow-936722.jpg differ diff --git a/images/pexels-pixabay-534219.jpg b/images/pexels-pixabay-534219.jpg new file mode 100644 index 0000000..606aa3b Binary files /dev/null and b/images/pexels-pixabay-534219.jpg differ diff --git a/images/search.png b/images/search.png new file mode 100644 index 0000000..08af66d Binary files /dev/null and b/images/search.png differ diff --git a/images/twitter-sign.png b/images/twitter-sign.png new file mode 100644 index 0000000..e784822 Binary files /dev/null and b/images/twitter-sign.png differ diff --git a/images/united-states-flag.png b/images/united-states-flag.png new file mode 100644 index 0000000..5e1212d Binary files /dev/null and b/images/united-states-flag.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..bf241d8 --- /dev/null +++ b/index.html @@ -0,0 +1,304 @@ + + + + + + + + Into Architecture + + + +
+
+

Skyscraper

+

Architecture

+
+
+
+
+
+ + +
+
+ +
+
+
+ + + +
+
+
+
+
+
+
01/03
+
02/03
+
03/03
+
+
+
+
+ slider-1 +
+
Lego House
+
+
13/11/1992
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. + More +

+

+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium + doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore + veritatis et quasi architecto beatae vitae dicta sunt explicabo. +

+

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut + odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi + nesciunt. +

+

+ MIES VAN DER ROHE AWARD +

+
+
+
+
+
+ slider-2 +
+
Lego House
+
+
13/11/1992
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. + More +

+

+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium + doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore + veritatis et quasi architecto beatae vitae dicta sunt explicabo. +

+

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut + odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi + nesciunt. +

+

+ MIES VAN DER ROHE AWARD +

+
+
+
+
+
+ slider-3 +
+
Lego House
+
+
13/11/1992
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. + More +

+

+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium + doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore + veritatis et quasi architecto beatae vitae dicta sunt explicabo. +

+

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut + odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi + nesciunt. +

+

+ MIES VAN DER ROHE AWARD +

+
+
+
+
+
+ + +
+
+
+
+
+
+
+
Recent News
+
+
+ news +
+
+
18/10/2022
+
Quarters Renovation
+
+
+

+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium + doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et + quasi architecto beatae vitae dicta sunt explicabo. +

+ More +
+
+
+
+
18/10/2022
+

Ut enim ad minim veniam,nostrud

+

+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium + doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et + quasi architecto beatae vitae dicta sunt explicabo. +

+

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed + quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. +

+ More +
+
+
18/10/2022
+

Ut enim ad minim veniam,nostrud

+
+ +
+

+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium + doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et + quasi architecto beatae vitae dicta sunt explicabo. +

+ More +
+
+
+
+
+
+
Competition
+
+
31/10/1992
+

Ut enim ad minim
veniam,nostrud

+

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia + consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium +

+ More +
+
+
+ +
+
1st Prize
+
+
+
+
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..781c88f --- /dev/null +++ b/style.css @@ -0,0 +1,1045 @@ +*, body { + margin: 0; + padding: 0; + box-sizing: border-box; + list-style: none; + font-family: Josefin Sans; +} + +img { + width: 100%; +} + +#menu { + position: absolute; + opacity: 0; +} +#menu:checked + .hamberger-menu .patty { + background-color: white; +} +#menu:checked + .hamberger-menu .patty::before { + transform: rotate(-45deg); + top: 0; +} +#menu:checked + .hamberger-menu .patty::after { + transform: rotate(45deg); + top: 0; +} +#menu:checked ~ .nav-holder { + height: 45vh; +} + +header { + width: 75%; + margin-left: 12.5%; + display: flex; + justify-content: center; + align-items: center; + padding: 2rem; + border-right: 1px solid #6a6a6a; + justify-content: space-between; + position: relative; +} +@media (max-width: 450px) { + header { + width: 90%; + margin-left: 10%; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: baseline; + display: flex; + justify-content: flex-start; + align-items: flex-start; + padding: 2rem; + padding-bottom: 0; + padding-right: 0; + margin-right: 1rem; + width: auto; + margin-left: auto; + } +} +header .logo-holder { + display: flex; + justify-content: flex-start; + align-items: flex-start; + flex-direction: column; +} +header .logo-holder h1 { + text-transform: uppercase; + font-size: 3rem; +} +@media (max-width: 450px) { + header .logo-holder h1 { + font-size: 2rem; + } +} +header .search-lang-nav-holder { + display: flex; + justify-content: flex-end; + align-items: flex-end; + flex-direction: column; +} +@media (max-width: 450px) { + header .search-lang-nav-holder { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + } +} +header .search-lang-nav-holder .search-lang-holder { + padding-bottom: 3rem; + display: flex; +} +@media (max-width: 450px) { + header .search-lang-nav-holder .search-lang-holder { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + padding-bottom: 0; + } +} +header .search-lang-nav-holder .search-lang-holder .header-form { + display: flex; + justify-content: flex-end; + align-items: flex-end; +} +@media (max-width: 450px) { + header .search-lang-nav-holder .search-lang-holder .header-form { + display: flex; + justify-content: center; + align-items: center; + margin: 2rem 0; + width: 100%; + } +} +header .search-lang-nav-holder .search-lang-holder .header-form .search { + border: 1px solid #a7a7a7; + margin-right: 1rem; + border-radius: 0.3rem; +} +@media (max-width: 450px) { + header .search-lang-nav-holder .search-lang-holder .header-form .search { + width: 80%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + } +} +header .search-lang-nav-holder .search-lang-holder .header-form .search input { + border: none; + background-color: transparent; + padding: 0.2rem 0.5rem; + outline: transparent; + width: 6rem; +} +@media (max-width: 450px) { + header .search-lang-nav-holder .search-lang-holder .header-form .search input { + width: 100%; + padding: 1rem; + } +} +header .search-lang-nav-holder .search-lang-holder .header-form .search .search-button { + border: none; + background-color: transparent; + padding: 0.2rem; +} +@media (max-width: 450px) { + header .search-lang-nav-holder .search-lang-holder .header-form .search .search-button { + padding: 0.5rem; + } +} +header .search-lang-nav-holder .search-lang-holder .header-form .search .search-button img { + width: 1rem; +} +@media (max-width: 450px) { + header .search-lang-nav-holder .search-lang-holder .header-form .search .search-button img { + width: 1.5rem; + } +} +header .search-lang-nav-holder .search-lang-holder .header-form .lang select { + padding: 0.2rem; + margin: 0; + background-color: transparent; + border: none; +} +header .search-lang-nav-holder .hamberger-menu { + display: none; + cursor: pointer; +} +@media (max-width: 450px) { + header .search-lang-nav-holder .hamberger-menu { + display: block; + position: absolute; + top: 3rem; + right: 2rem; + } + header .search-lang-nav-holder .hamberger-menu .patty { + width: 1rem; + height: 0.2rem; + background-color: black; + position: relative; + transition: transform 0.3s; + } + header .search-lang-nav-holder .hamberger-menu .patty::before { + content: ""; + position: absolute; + top: -0.5rem; + left: -0.25rem; + width: 1.5rem; + height: 0.2rem; + background-color: black; + transition: transform 0.3s; + } + header .search-lang-nav-holder .hamberger-menu .patty::after { + content: ""; + position: absolute; + top: 0.5rem; + left: -0.25rem; + width: 1.5rem; + height: 0.2rem; + background-color: black; + transition: transform 0.3s; + } +} +header .search-lang-nav-holder .hamberger-menu.active .patty { + color: white; +} +header .search-lang-nav-holder .hamberger-menu.active .patty::before { + transform: translateY(2rem) rotate(45deg); +} +header .search-lang-nav-holder .hamberger-menu.active .patty::after { + transform: translateY(2rem) rotate(-45deg); +} +header .search-lang-nav-holder .nav-holder { + display: flex; +} +@media (max-width: 450px) { + header .search-lang-nav-holder .nav-holder { + width: 105%; + background-color: white; + height: 0; + overflow: hidden; + text-align: center; + position: absolute; + z-index: 1; + top: 12.5rem; + left: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + box-shadow: 0rem 1rem 1rem rgba(0, 0, 0, 0.473); + transition: height 1s; + } +} +header .search-lang-nav-holder .nav-holder a { + margin-right: 3rem; + text-decoration: none; + color: rgb(51, 51, 51); +} +@media (max-width: 450px) { + header .search-lang-nav-holder .nav-holder a { + margin: 2rem 0; + width: auto; + } +} +header .search-lang-nav-holder .nav-holder a:last-child { + margin: 0; +} +@media (max-width: 450px) { + header .search-lang-nav-holder .nav-holder a:last-child { + margin: 2rem 0; + width: auto; + } +} +header .search-lang-nav-holder .nav-holder a.active { + position: relative; +} +header .search-lang-nav-holder .nav-holder a.active::after { + content: ""; + height: 3px; + width: 100%; + background-color: rgb(51, 51, 51); + position: absolute; + bottom: -7px; + left: 0; +} + +.carousel-container { + width: 100%; + background-image: -moz-linear-gradient(white 25%, rgb(245, 245, 245) 25%); +} +.carousel-container .carousel-holder, +.carousel-container .news-holder { + width: 75%; + margin-left: 12.5%; + display: flex; + justify-content: center; + align-items: center; + border-left: 1px solid #6a6a6a; +} +@media (max-width: 450px) { + .carousel-container .carousel-holder, +.carousel-container .news-holder { + width: 90%; + margin-left: 10%; + box-sizing: border-box; + } +} +.carousel-container .carousel-holder .carousel, +.carousel-container .news-holder .carousel { + position: relative; +} +@media (max-width: 450px) { + .carousel-container .carousel-holder .carousel, +.carousel-container .news-holder .carousel { + width: 100%; + } +} +.carousel-container .carousel-holder .carousel .slider-count, +.carousel-container .news-holder .carousel .slider-count { + position: absolute; + left: -4.3%; + rotate: -90deg; + top: 54vh; + z-index: 1; +} +@media (max-width: 450px) { + .carousel-container .carousel-holder .carousel .slider-count, +.carousel-container .news-holder .carousel .slider-count { + left: -12%; + } +} +.carousel-container .carousel-holder .carousel .slider-count .count, +.carousel-container .news-holder .carousel .slider-count .count { + display: none; +} +.carousel-container .carousel-holder .carousel .slider-count .count span, +.carousel-container .news-holder .carousel .slider-count .count span { + font-size: 2rem; +} +.carousel-container .carousel-holder .carousel .slider-count .count.active, +.carousel-container .news-holder .carousel .slider-count .count.active { + display: block; +} +.carousel-container .carousel-holder .carousel .slider, +.carousel-container .news-holder .carousel .slider { + width: 98%; + position: relative; + left: 2%; +} +.carousel-container .carousel-holder .carousel .slider .slide, +.carousel-container .news-holder .carousel .slider .slide { + width: 100%; + display: none; +} +.carousel-container .carousel-holder .carousel .slider .slide .slide-image, +.carousel-container .news-holder .carousel .slider .slide .slide-image { + width: 90%; + height: 60vh; + overflow: hidden; +} +@media (max-width: 450px) { + .carousel-container .carousel-holder .carousel .slider .slide .slide-image, +.carousel-container .news-holder .carousel .slider .slide .slide-image { + width: 100%; + height: auto; + } +} +@media (max-width: 450px) { + .carousel-container .carousel-holder .carousel .slider .slide .slide-image img, +.carousel-container .news-holder .carousel .slider .slide .slide-image img { + width: 100%; + height: 60vh; + -o-object-fit: cover; + object-fit: cover; + } +} +.carousel-container .carousel-holder .carousel .slider .slide .slider-text, +.carousel-container .news-holder .carousel .slider .slide .slider-text { + position: absolute; + top: 10%; + right: 0; + width: 25%; + font-size: 5rem; + font-weight: 900; + text-transform: uppercase; +} +@media (max-width: 450px) { + .carousel-container .carousel-holder .carousel .slider .slide .slider-text, +.carousel-container .news-holder .carousel .slider .slide .slider-text { + width: 120%; + rotate: -90deg; + font-size: 3.3rem; + top: 15%; + right: -48%; + } +} +.carousel-container .carousel-holder .carousel .slider .slide .slider-text::after, +.carousel-container .news-holder .carousel .slider .slide .slider-text::after { + content: ""; + width: 100%; + height: 10px; + background-color: black; + position: absolute; + bottom: -5%; + left: 0; +} +.carousel-container .carousel-holder .carousel .slider .slide .slider-content, +.carousel-container .news-holder .carousel .slider .slide .slider-content { + display: flex; + flex-direction: column; + justify-content: baseline; + margin: 5% 0; +} +.carousel-container .carousel-holder .carousel .slider .slide .slider-content .slider-date, +.carousel-container .news-holder .carousel .slider .slide .slider-content .slider-date { + font-size: 1rem; + margin-bottom: 2%; +} +@media (max-width: 450px) { + .carousel-container .carousel-holder .carousel .slider .slide .slider-content .slider-date, +.carousel-container .news-holder .carousel .slider .slide .slider-content .slider-date { + margin-left: 2rem; + margin-bottom: 1rem; + } +} +.carousel-container .carousel-holder .carousel .slider .slide .slider-content .slider-description, +.carousel-container .news-holder .carousel .slider .slide .slider-content .slider-description { + display: flex; + flex-direction: row; + justify-content: baseline; +} +@media (max-width: 450px) { + .carousel-container .carousel-holder .carousel .slider .slide .slider-content .slider-description, +.carousel-container .news-holder .carousel .slider .slide .slider-content .slider-description { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; + } +} +.carousel-container .carousel-holder .carousel .slider .slide .slider-content .slider-description p, +.carousel-container .news-holder .carousel .slider .slide .slider-content .slider-description p { + margin-right: 3rem; + width: 25%; + font-weight: lighter; +} +@media (max-width: 450px) { + .carousel-container .carousel-holder .carousel .slider .slide .slider-content .slider-description p, +.carousel-container .news-holder .carousel .slider .slide .slider-content .slider-description p { + display: flex; + flex-direction: row; + justify-content: baseline; + width: auto; + margin: 1rem 2rem; + margin-bottom: 0; + } +} +.carousel-container .carousel-holder .carousel .slider .slide .slider-content .slider-description p:nth-child(1), +.carousel-container .news-holder .carousel .slider .slide .slider-content .slider-description p:nth-child(1) { + font-weight: bold; + display: flex; + flex-direction: column; + justify-content: baseline; +} +@media (max-width: 450px) { + .carousel-container .carousel-holder .carousel .slider .slide .slider-content .slider-description p:nth-child(1), +.carousel-container .news-holder .carousel .slider .slide .slider-content .slider-description p:nth-child(1) { + display: flex; + flex-direction: row; + justify-content: baseline; + margin-top: 20vh; + } +} +.carousel-container .carousel-holder .carousel .slider .slide .slider-content .slider-description p:nth-child(3), +.carousel-container .news-holder .carousel .slider .slide .slider-content .slider-description p:nth-child(3) { + margin-bottom: 5rem; +} +.carousel-container .carousel-holder .carousel .slider .slide .slider-content .slider-description p:nth-child(4), +.carousel-container .news-holder .carousel .slider .slide .slider-content .slider-description p:nth-child(4) { + margin-right: 0; + padding: 2%; + padding-right: 6%; + border: 5px solid black; + font-size: 2.4rem; + font-weight: 900; +} +@media (max-width: 450px) { + .carousel-container .carousel-holder .carousel .slider .slide .slider-content .slider-description p:nth-child(4), +.carousel-container .news-holder .carousel .slider .slide .slider-content .slider-description p:nth-child(4) { + position: absolute; + top: 0; + margin-right: 2rem; + } +} +.carousel-container .carousel-holder .carousel .slider .slide .slider-content .slider-description .more, +.carousel-container .news-holder .carousel .slider .slide .slider-content .slider-description .more { + background-color: black; + color: white; + border: none; + padding: 0.4rem 1rem 0.2rem; + width: 6rem; + text-transform: uppercase; + text-align: center; + font-size: 0.8rem; + text-decoration: none; + font-weight: 100; + margin-top: 70%; +} +@media (max-width: 450px) { + .carousel-container .carousel-holder .carousel .slider .slide .slider-content .slider-description .more, +.carousel-container .news-holder .carousel .slider .slide .slider-content .slider-description .more { + margin: auto; + padding: 1rem 0.5rem; + width: 80%; + margin-left: 0; + position: absolute; + bottom: 0; + } +} +.carousel-container .carousel-holder .carousel .slider .slide.active, +.carousel-container .news-holder .carousel .slider .slide.active { + display: block; +} +.carousel-container .carousel-holder .carousel .slider-control, +.carousel-container .news-holder .carousel .slider-control { + position: absolute; + right: 9.7%; + top: 54.8vh; + display: flex; +} +@media (max-width: 450px) { + .carousel-container .carousel-holder .carousel .slider-control, +.carousel-container .news-holder .carousel .slider-control { + top: 54.1vh; + right: 0; + } +} +.carousel-container .carousel-holder .carousel .slider-control button, +.carousel-container .news-holder .carousel .slider-control button { + margin: 0; +} +.carousel-container .carousel-holder .carousel .slider-control .previous, +.carousel-container .carousel-holder .carousel .slider-control .next, +.carousel-container .news-holder .carousel .slider-control .previous, +.carousel-container .news-holder .carousel .slider-control .next { + padding: 0.5rem 1.5rem; + margin: 0; + font-size: 2rem; + border-radius: 0; + border: none; + background-color: white; +} +.carousel-container .carousel-holder .carousel .slider-control .previous:hover, +.carousel-container .carousel-holder .carousel .slider-control .next:hover, +.carousel-container .news-holder .carousel .slider-control .previous:hover, +.carousel-container .news-holder .carousel .slider-control .next:hover { + background-color: #dfdfdf; +} + +.news-container { + width: 100%; + background-image: -moz-linear-gradient(rgb(245, 245, 245) 7%, white 7%); +} +.news-container .news-holder { + position: relative; + width: 75%; + margin-left: 12.5%; + display: flex; + justify-content: center; + align-items: center; + border-left: 1px solid #6a6a6a; + align-items: inherit; +} +@media (max-width: 450px) { + .news-container .news-holder { + width: 90%; + margin-left: 10%; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: baseline; + } +} +.news-container .news-holder .section-side-text { + position: absolute; + rotate: -90deg; + text-transform: uppercase; + font-weight: bolder; + font-size: small; + left: -6%; + top: 7%; +} +@media (max-width: 450px) { + .news-container .news-holder .section-side-text { + left: -17%; + top: 2.5%; + } +} +.news-container .news-holder .primary-news { + display: flex; + flex-direction: column; + justify-content: baseline; + width: 48%; + margin-left: 2%; + position: relative; +} +@media (max-width: 450px) { + .news-container .news-holder .primary-news { + width: 98%; + } +} +.news-container .news-holder .primary-news .primary-news-image { + display: flex; + justify-content: center; + align-items: center; +} +.news-container .news-holder .primary-news .primary-news-image img { + height: 60vh; + -o-object-fit: cover; + object-fit: cover; +} +.news-container .news-holder .primary-news .primary-news-floting-text { + position: absolute; + top: 5%; + left: 5%; +} +.news-container .news-holder .primary-news .primary-news-floting-text .primary-news-date { + font-size: 1rem; + margin-bottom: 2rem; +} +.news-container .news-holder .primary-news .primary-news-floting-text .primary-news-title { + font-size: 3rem; + width: 44%; + text-transform: uppercase; + font-weight: 900; + position: relative; + line-height: 3rem; + letter-spacing: 0rem; +} +.news-container .news-holder .primary-news .primary-news-floting-text .primary-news-title::after { + content: ""; + position: absolute; + bottom: -1.5rem; + left: 0; + width: 100%; + height: 6px; + background-color: black; +} +.news-container .news-holder .primary-news .primary-news-description { + background-color: black; + padding: 15% 10% 10%; + color: white; + position: relative; +} +.news-container .news-holder .primary-news .primary-news-description::before { + content: ""; + position: absolute; + top: -15px; + left: 80%; + width: 0; + height: 0; + border-bottom: 15px solid black; + border-right: 15px solid transparent; + border-left: 15px solid transparent; +} +.news-container .news-holder .primary-news .primary-news-description p { + font-weight: 100; + margin-bottom: 10%; +} +.news-container .news-holder .primary-news .primary-news-description .more { + padding: 0.4rem 2rem 0.3rem; + border: 1px solid white; + color: white; + text-decoration: none; + font-size: 0.8rem; + text-transform: uppercase; +} +.news-container .news-holder .secondary-news { + display: flex; + justify-content: flex-start; + align-items: flex-start; + width: 50%; + margin-top: 33%; + margin-bottom: 5%; +} +@media (max-width: 450px) { + .news-container .news-holder .secondary-news { + display: flex; + flex-direction: column; + justify-content: baseline; + width: 100%; + margin-top: 3rem; + } +} +.news-container .news-holder .secondary-news .secondary-news-description { + display: flex; + flex-direction: column; + justify-content: baseline; + margin-left: 5%; + position: relative; + width: 50%; +} +@media (max-width: 450px) { + .news-container .news-holder .secondary-news .secondary-news-description { + width: 98%; + margin-left: 2%; + } +} +.news-container .news-holder .secondary-news .secondary-news-description::before { + content: ""; + position: absolute; + top: -10%; + width: 100%; + height: 7px; + background-color: black; +} +@media (max-width: 450px) { + .news-container .news-holder .secondary-news .secondary-news-description::before { + top: 1%; + right: 0; + width: 70%; + } +} +.news-container .news-holder .secondary-news .secondary-news-description p, +.news-container .news-holder .secondary-news .secondary-news-description h3, +.news-container .news-holder .secondary-news .secondary-news-description .secondary-news-image, +.news-container .news-holder .secondary-news .secondary-news-description .secondary-news-date { + margin: 8%; + margin-top: 0; +} +@media (max-width: 450px) { + .news-container .news-holder .secondary-news .secondary-news-description p, +.news-container .news-holder .secondary-news .secondary-news-description h3, +.news-container .news-holder .secondary-news .secondary-news-description .secondary-news-image, +.news-container .news-holder .secondary-news .secondary-news-description .secondary-news-date { + margin-left: 2%; + } +} +.news-container .news-holder .secondary-news .secondary-news-description .secondary-news-image { + width: 100%; + height: 11rem; + overflow: hidden; +} +.news-container .news-holder .secondary-news .secondary-news-description .more { + background-color: black; + color: white; + border: none; + padding: 0.4rem 1rem 0.2rem; + width: 6rem; + text-transform: uppercase; + text-align: center; + font-size: 0.8rem; + text-decoration: none; + font-weight: 100; + margin-left: 8%; +} +@media (max-width: 450px) { + .news-container .news-holder .secondary-news .secondary-news-description .more { + margin-left: 2%; + margin-bottom: 2rem; + } +} + +.row-3-container { + width: 100%; + background-image: -moz-linear-gradient(white 35%, rgb(245, 245, 245) 35%); + background-size: 87.2% auto; + background-repeat: no-repeat; +} +.row-3-container .row-3 { + display: flex; + justify-content: center; + align-items: center; + width: 75%; + margin-left: 12.5%; + padding-top: 10%; + border-left: 1px solid #6a6a6a; + padding-bottom: 4rem; + position: relative; +} +@media (max-width: 450px) { + .row-3-container .row-3 { + width: 90%; + margin-left: 10%; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: baseline; + flex-direction: column-reverse; + } +} +.row-3-container .row-3 .row-3-col-1 { + display: flex; + flex-direction: column; + justify-content: baseline; + justify-content: space-between; + width: 40%; + height: 30vh; + margin-right: 10%; + position: relative; + margin-left: 2%; +} +@media (max-width: 450px) { + .row-3-container .row-3 .row-3-col-1 { + width: 98%; + height: 40vh; + margin-right: auto; + } +} +.row-3-container .row-3 .row-3-col-1::before { + content: ""; + position: absolute; + width: 30%; + height: 7px; + background-color: black; + top: -18%; +} +@media (max-width: 450px) { + .row-3-container .row-3 .row-3-col-1::before { + top: 1%; + width: 70%; + right: 0; + } +} +.row-3-container .row-3 .row-3-col-1 .more { + background-color: black; + color: white; + border: none; + padding: 0.4rem 1rem 0.2rem; + width: 6rem; + text-transform: uppercase; + text-align: center; + font-size: 0.8rem; + text-decoration: none; + font-weight: 100; +} +.row-3-container .row-3 .row-3-col-2 { + width: 50%; + position: relative; +} +@media (max-width: 450px) { + .row-3-container .row-3 .row-3-col-2 { + width: 98%; + margin-left: 2%; + margin-top: 5rem; + } +} +.row-3-container .row-3 .row-3-col-2 .row-3-image { + width: 95%; +} +@media (max-width: 450px) { + .row-3-container .row-3 .row-3-col-2 .row-3-image { + width: 100%; + margin-bottom: 3rem; + } +} +.row-3-container .row-3 .row-3-col-2 .row-3-image img { + width: 100%; +} +.row-3-container .row-3 .row-3-float-text { + top: -27%; + right: 5%; + padding: 5%; + width: 40%; + position: absolute; + border: 5px solid black; + font-size: 4rem; + line-height: 3.5rem; + font-weight: 900; + text-transform: uppercase; +} +@media (max-width: 450px) { + .row-3-container .row-3 .row-3-float-text { + width: 65%; + } +} +.row-3-container .row-3 .row-3-float-text span { + position: relative; + font-size: 3rem; +} +.row-3-container .row-3 .row-3-side-text { + left: -6%; + top: 29%; + position: absolute; + rotate: -90deg; + text-transform: uppercase; + font-weight: bolder; + font-size: small; +} +@media (max-width: 450px) { + .row-3-container .row-3 .row-3-side-text { + left: -17%; + top: 10%; + } +} + +footer { + display: flex; + justify-content: center; + align-items: center; + width: 75%; + margin-left: 12.5%; + border-left: 1px solid #6a6a6a; + padding-bottom: 2%; + position: relative; + padding-top: 12%; +} +@media (max-width: 450px) { + footer { + width: 90%; + margin-left: 10%; + box-sizing: border-box; + padding-top: 0; + padding-bottom: 3rem; + } +} +footer .footer-side-text { + position: absolute; + rotate: -90deg; + text-transform: uppercase; + font-weight: bolder; + font-size: small; + left: -5%; + top: -40%; +} +@media (max-width: 450px) { + footer .footer-side-text { + top: 8%; + left: -14%; + } +} +footer .footer-holder { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + top: 80%; +} +@media (max-width: 450px) { + footer .footer-holder { + display: flex; + flex-direction: column; + justify-content: baseline; + position: relative; + top: 10%; + } +} +footer .footer-holder .footer-col { + display: flex; + flex-direction: column; + justify-content: baseline; + justify-content: space-between; + font-style: normal; + border-right: 1px solid #6a6a6a; + padding: 3%; + padding-top: 0; + width: 25%; + height: 25vh; +} +@media (max-width: 450px) { + footer .footer-holder .footer-col { + width: 80%; + margin-top: 3rem; + height: 20vh; + border-right: none; + padding: 0; + padding-left: 2%; + } +} +footer .footer-holder .footer-col h3 { + position: absolute; + top: -25%; + font-weight: 100; +} +@media (max-width: 450px) { + footer .footer-holder .footer-col h3 { + position: relative; + top: 0; + } +} +footer .footer-holder .footer-col span { + text-transform: uppercase; + font-weight: 900; +} +footer .footer-holder .footer-col h4 { + margin-bottom: 5%; + margin-top: 0; +} +@media (max-width: 450px) { + footer .footer-holder .footer-col h4 { + position: relative; + } + footer .footer-holder .footer-col h4::after { + content: ""; + position: absolute; + width: 60%; + height: 2px; + background-color: lightgray; + right: 0; + top: 35%; + } +} +footer .footer-holder .footer-col a { + text-decoration: none; + color: black; +} +footer .footer-holder .footer-col a:hover { + opacity: 0.6; +} +footer .footer-holder .footer-col .newsletter p { + font-size: 0.8rem; +} +footer .footer-holder .footer-col .subscribe-form { + display: flex; + flex-direction: row; + justify-content: baseline; + border: 1px solid rgb(0, 0, 0); + margin-top: 5%; +} +footer .footer-holder .footer-col .subscribe-form input { + border: none; + background-color: transparent; + padding: 1rem; + padding-right: 0; + width: 65%; +} +footer .footer-holder .footer-col .subscribe-form button { + background-color: black; + border-radius: 0; + border: none; + color: white; + padding-left: 1rem; + padding-right: 1rem; + width: 35%; +} +footer .footer-holder .footer-col .social-media { + display: flex; + justify-content: center; + align-items: center; + margin: 0; + margin-top: 5%; +} +footer .footer-holder .footer-col .social-media a { + margin-left: 5%; + opacity: 0.6; + margin-top: 5%; +} +footer .footer-holder .footer-col .social-media a:hover { + opacity: 1; +} +footer .footer-holder .footer-col .social-media a figure { + width: 70%; + margin: 0; +} +footer .footer-holder .footer-col .social-media a figure img { + width: 100%; +}/*# 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..2922967 --- /dev/null +++ b/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["_reset.scss","_variables.scss","style.css","style.scss","_mixins.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..3a4cd48 --- /dev/null +++ b/style.scss @@ -0,0 +1,964 @@ +@import "_variables"; +@import "_reset"; +@import "_mixins"; +@import "_breakpoints"; + +#menu { + position: absolute; + opacity: 0; + + &:checked { + +.hamberger-menu { + .patty { + background-color: white; + + &::before { + transform: rotate(-45deg); + top: 0; + } + + &::after { + transform: rotate(45deg); + top: 0; + } + } + } + + ~.nav-holder { + height: 45vh; + } + } + + +} + +header { + @include container(); + @include flex-center(); + padding: 2rem; + border-right: $verticle-line; + justify-content: space-between; + position: relative; + + @include sm { + @include container-sm(); + @include flex-column-baseline(); + @include flex-left(); + padding: 2rem; + padding-bottom: 0; + padding-right: 0; + margin-right: 1rem; + width: auto; + margin-left: auto + } + + .logo-holder { + @include flex-left(); + flex-direction: column; + } + + .logo-holder h1 { + text-transform: uppercase; + font-size: 3rem; + + @include sm { + font-size: 2rem + } + } + + .search-lang-nav-holder { + @include flex-right(); + flex-direction: column; + + @include sm { + @include flex-column-center(); + width: 100%; + } + + .search-lang-holder { + padding-bottom: 3rem; + display: flex; + + @include sm { + @include flex-column-center(); + width: 100%; + padding-bottom: 0; + } + + + .header-form { + @include flex-right(); + + @include sm { + @include flex-center(); + margin: 2rem 0; + width: 100%; + } + + + .search { + border: 1px solid $lite-mid-gray; + margin-right: 1rem; + border-radius: 0.3rem; + + @include sm { + width: 80%; + @include flex-row-center; + } + + + input { + border: none; + background-color: transparent; + padding: 0.2rem 0.5rem; + outline: transparent; + width: 6rem; + + @include sm { + width: 100%; + padding: 1rem; + } + } + + .search-button { + border: none; + background-color: transparent; + padding: 0.2rem; + + @include sm { + padding: 0.5rem; + } + + img { + width: 1rem; + + @include sm { + width: 1.5rem; + } + } + } + } + + .lang select { + padding: 0.2rem; + margin: 0; + background-color: transparent; + border: none; + } + } + } + + + + .hamberger-menu { + display: none; + cursor: pointer; + + @include sm { + display: block; + position: absolute; + top: 3rem; + right: 2rem; + + .patty { + width: 1rem; + height: 0.2rem; + background-color: black; + position: relative; + transition: transform 0.3s; + + &::before { + content: ""; + position: absolute; + top: -0.5rem; + left: -0.25rem; + width: 1.5rem; + height: 0.2rem; + background-color: black; + transition: transform 0.3s; + } + + &::after { + content: ""; + position: absolute; + top: 0.5rem; + left: -0.25rem; + width: 1.5rem; + height: 0.2rem; + background-color: black; + transition: transform 0.3s; + } + } + } + + + + } + + .hamberger-menu.active { + .patty { + color: white; + + &::before { + transform: translateY(2rem) rotate(45deg); + } + + &::after { + transform: translateY(2rem) rotate(-45deg); + } + } + } + + .nav-holder { + display: flex; + + @include sm { + width: 100% + 5%; + background-color: white; + height: 0; + overflow: hidden; + text-align: center; + position: absolute; + z-index: 1; + top: 12.5rem; + left: 0; + @include flex-column-center(); + box-shadow: 0rem 1rem 1rem rgba(0, 0, 0, 0.473); + transition: height 1s; + } + + a { + margin-right: 3rem; + text-decoration: none; + color: rgb(51, 51, 51); + + @include sm { + margin: 2rem 0; + width: auto; + } + + &:last-child { + margin: 0; + + @include sm { + margin: 2rem 0; + width: auto; + } + } + } + + a.active { + position: relative; + + &::after { + content: ""; + height: 3px; + width: 100%; + background-color: rgb(51, 51, 51); + position: absolute; + bottom: -7px; + left: 0; + } + + } + + } + } +} + + +.carousel-container { + width: 100%; + background-image: -moz-linear-gradient(white 25%, rgb(245, 245, 245) 25%); + + .carousel-holder, + .news-holder { + @include container(); + @include flex-center(); + border-left: $verticle-line; + + @include sm { + @include container-sm(); + } + + .carousel { + position: relative; + + @include sm { + width: 100%; + } + + .slider-count { + position: absolute; + left: -4.3%; + rotate: -90deg; + top: 54vh; + z-index: 1; + + @include sm { + left: -12%; + } + + .count { + display: none; + + span { + font-size: 2rem; + } + } + + .count.active { + display: block; + } + + } + + .slider { + width: 98%; + position: relative; + left: 2%; + + .slide { + width: 100%; + display: none; + + .slide-image { + width: 90%; + height: 60vh; + overflow: hidden; + + @include sm { + width: 100%; + height: auto; + } + + img { + @include sm { + width: 100%; + height: 60vh; + object-fit: cover; + } + } + } + + .slider-text { + position: absolute; + top: 10%; + right: 0; + width: 25%; + font-size: 5rem; + font-weight: 900; + text-transform: uppercase; + + @include sm { + width: 120%; + rotate: -90deg; + font-size: 3.3rem; + top: 15%; + right: -48%; + } + + &::after { + content: ""; + width: 100%; + height: 10px; + background-color: black; + position: absolute; + bottom: -5%; + left: 0; + } + } + + .slider-content { + @include flex-column-baseline(); + margin: 5% 0; + + .slider-date { + font-size: 1rem; + margin-bottom: 2%; + + @include sm { + margin-left: 2rem; + margin-bottom: 1rem; + } + } + + .slider-description { + @include flex-row-baseline(); + + @include sm { + @include flex-column-center(); + position: relative; + } + + p { + margin-right: 3rem; + width: 25%; + font-weight: lighter; + + @include sm { + @include flex-row-baseline(); + width: auto; + margin: 1rem 2rem; + margin-bottom: 0; + } + + &:nth-child(1) { + font-weight: bold; + @include flex-column-baseline(); + + @include sm { + @include flex-row-baseline(); + margin-top: 20vh; + } + } + + &:nth-child(3) { + margin-bottom: 5rem; + } + + &:nth-child(4) { + margin-right: 0; + padding: 2%; + padding-right: 6%; + border: 5px solid black; + font-size: 2.4rem; + font-weight: 900; + + @include sm { + position: absolute; + top: 0; + margin-right: 2rem; + } + } + } + + .more { + @include black-button(); + margin-top: 70%; + + @include sm { + margin: auto; + padding: 1rem 0.5rem; + width: 80%; + margin-left: 0; + position: absolute; + bottom: 0; + } + } + } + + + } + } + + .slide.active { + display: block; + } + + } + + + .slider-control { + position: absolute; + right: 9.7%; + top: 54.8vh; + display: flex; + + @include sm { + top: 54.1vh; + right: 0; + } + + button { + margin: 0; + } + + .previous, + .next { + padding: 0.5rem 1.5rem; + margin: 0; + font-size: 2rem; + border-radius: 0; + border: none; + background-color: white; + + &:hover { + background-color: #dfdfdf; + } + } + + + } + } + + } +} + +.news-container { + width: 100%; + background-image: -moz-linear-gradient(rgb(245, 245, 245) 7%, white 7%); + + .news-holder { + position: relative; + @include container(); + @include flex-center(); + border-left: $verticle-line; + align-items: inherit; + + @include sm { + @include container-sm(); + @include flex-column-baseline(); + + } + + .section-side-text { + @include side-text(); + left: -6%; + top: 7%; + + @include sm { + left: -17%; + top: 2.5%; + } + } + + .primary-news { + @include flex-column-baseline(); + width: 48%; + margin-left: 2%; + position: relative; + + @include sm { + width: 98%; + + } + + .primary-news-image { + @include flex-center(); + + img { + height: 60vh; + object-fit: cover; + } + } + + .primary-news-floting-text { + position: absolute; + top: 5%; + left: 5%; + + .primary-news-date { + font-size: 1rem; + margin-bottom: 2rem; + } + + .primary-news-title { + font-size: 3rem; + width: 44%; + text-transform: uppercase; + font-weight: 900; + position: relative; + line-height: 3rem; + letter-spacing: 0rem; + + &::after { + content: ""; + position: absolute; + bottom: -1.5rem; + left: 0; + width: 100%; + height: 6px; + background-color: black; + } + } + } + + + .primary-news-description { + background-color: black; + padding: 15% 10% 10%; + color: white; + position: relative; + + &::before { + content: ""; + position: absolute; + top: -15px; + left: 80%; + width: 0; + height: 0; + border-bottom: 15px solid black; + border-right: 15px solid transparent; + border-left: 15px solid transparent; + } + + p { + font-weight: 100; + margin-bottom: 10%; + } + + .more { + @include border-button(); + } + + + + } + + + + + } + + .secondary-news { + @include flex-left(); + width: 50%; + margin-top: 33%; + margin-bottom: 5%; + + @include sm { + @include flex-column-baseline; + width: 100%; + margin-top: 3rem; + } + + .secondary-news-description { + @include flex-column-baseline(); + margin-left: 5%; + position: relative; + width: 50%; + + @include sm { + width: 98%; + margin-left: 2%; + } + + + &::before { + content: ""; + position: absolute; + top: -10%; + width: 100%; + height: 7px; + background-color: black; + + @include sm { + top: 1%; + right: 0; + width: 70%; + } + } + + p, + h3, + .secondary-news-image, + .secondary-news-date { + margin: 8%; + margin-top: 0; + + @include sm { + margin-left: 2%; + } + } + + .secondary-news-image { + width: 100%; + height: 11rem; + overflow: hidden; + } + + + .more { + @include black-button(); + margin-left: 8%; + + @include sm { + margin-left: 2%; + margin-bottom: 2rem; + } + } + } + } + + + } + +} + +.row-3-container { + width: 100%; + background-image: -moz-linear-gradient(white 35%, rgb(245, 245, 245) 35%); + background-size: 87.2% auto; + background-repeat: no-repeat; + + .row-3 { + @include flex-center(); + @include container(); + padding-top: 10%; + border-left: $verticle-line; + padding-bottom: 4rem; + position: relative; + + @include sm { + @include container-sm(); + @include flex-column-baseline(); + flex-direction: column-reverse; + } + + .row-3-col-1 { + @include flex-column-baseline(); + justify-content: space-between; + width: 40%; + height: 30vh; + margin-right: 10%; + position: relative; + margin-left: 2%; + + @include sm { + width: 98%; + height: 40vh; + margin-right: auto; + } + + + &::before { + content: ""; + position: absolute; + width: 30%; + height: 7px; + background-color: black; + top: -18%; + + @include sm { + top: 1%; + width: 70%; + right: 0; + } + } + + .more { + @include black-button(); + } + } + + .row-3-col-2 { + width: 50%; + position: relative; + + @include sm { + width: 98%; + margin-left: 2%; + margin-top: 5rem; + } + + .row-3-image { + width: 95%; + + @include sm { + width: 100%; + margin-bottom: 3rem; + } + + img { + width: 100%; + } + } + + } + + .row-3-float-text { + top: -27%; + right: 5%; + padding: 5%; + width: 40%; + position: absolute; + border: 5px solid black; + font-size: 4rem; + line-height: 3.5rem; + font-weight: 900; + text-transform: uppercase; + + @include sm { + width: 65%; + } + + span { + position: relative; + font-size: 3rem; + } + } + + .row-3-side-text { + left: -6%; + top: 29%; + @include side-text(); + + @include sm { + left: -17%; + top: 10%; + } + } + + } +} + +footer { + @include flex-center(); + @include container(); + border-left: $verticle-line; + padding-bottom: 2%; + position: relative; + padding-top: 12%; + + @include sm { + @include container-sm(); + padding-top: 0; + padding-bottom: 3rem; + } + + .footer-side-text { + @include side-text(); + left: -5%; + top: -40%; + + @include sm { + top: 8%; + left: -14%; + } + } + + .footer-holder { + @include flex-center(); + position: absolute; + top: 80%; + + @include sm { + @include flex-column-baseline(); + position: relative; + top: 10%; + } + + .footer-col { + @include flex-column-baseline(); + justify-content: space-between; + font-style: normal; + border-right: $verticle-line; + padding: 3%; + padding-top: 0; + width: 25%; + height: 25vh; + + @include sm { + width: 80%; + margin-top: 3rem; + height: 20vh; + border-right: none; + padding: 0; + padding-left: 2%; + } + + h3 { + position: absolute; + top: -25%; + font-weight: 100; + + @include sm { + position: relative; + top: 0; + } + } + + span { + text-transform: uppercase; + font-weight: 900; + } + + h4 { + margin-bottom: 5%; + margin-top: 0; + + @include sm { + position: relative; + + &::after { + content: ""; + position: absolute; + width: 60%; + height: 2px; + background-color: lightgray; + right: 0; + top: 35%; + } + } + } + + a { + text-decoration: none; + color: black; + + &:hover { + opacity: 0.6; + } + } + + .newsletter p { + font-size: 0.8rem; + } + + .subscribe-form { + @include flex-row-baseline; + border: 1px solid rgb(0, 0, 0); + margin-top: 5%; + + input { + border: none; + background-color: transparent; + padding: 1rem; + padding-right: 0; + width: 65%; + } + + button { + background-color: black; + border-radius: 0; + border: none; + color: white; + padding-left: 1rem; + padding-right: 1rem; + width: 35%; + } + + } + + .social-media { + @include flex-center(); + margin: 0; + margin-top: 5%; + + a { + margin-left: 5%; + opacity: 0.6; + margin-top: 5%; + + &:hover { + opacity: 1; + } + + figure { + width: 70%; + margin: 0; + + img { + width: 100%; + } + + } + } + + } + + + } + } +} \ No newline at end of file