bharath
/
skyscraper
1
0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Toiminta
Selaa lähdekoodia

Files uploaded

master
Bharath Kumar 3 vuotta sitten
commit
46b0dff8fa
20 muutettua tiedostoa jossa 2424 lisäystä ja 0 poistoa
Yhdistetty näkymä
Diff Options
Show Stats Download Patch File Download Diff File
  1. +6
    -0
      _breakpoints.scss
  2. +87
    -0
      _mixins.scss
  3. +13
    -0
      _reset.scss
  4. +4
    -0
      _variables.scss
  5. BIN
      images/back-arrow.png
  6. BIN
      images/facebook.png
  7. BIN
      images/forward-arrow.png
  8. BIN
      images/instagram.png
  9. BIN
      images/linkedin.png
  10. BIN
      images/logo.jpg
  11. BIN
      images/pexels-aleksandar-pasaric-325185.jpg
  12. BIN
      images/pexels-essow-936722.jpg
  13. BIN
      images/pexels-pixabay-534219.jpg
  14. BIN
      images/search.png
  15. BIN
      images/twitter-sign.png
  16. BIN
      images/united-states-flag.png
  17. +304
    -0
      index.html
  18. +1045
    -0
      style.css
  19. +1
    -0
      style.css.map
  20. +964
    -0
      style.scss

+ 6
- 0
_breakpoints.scss Näytä tiedosto

@@ -0,0 +1,6 @@
$breakpoints: ("sm":450px);
@mixin sm {
@media (max-width: map-get($breakpoints, "sm")) {
@content;
}
}

+ 87
- 0
_mixins.scss Näytä tiedosto

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


+ 13
- 0
_reset.scss Näytä tiedosto

@@ -0,0 +1,13 @@

@import "_variables";

*, body{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
font-family: $myfont;
}
img{
width: 100%;
}

+ 4
- 0
_variables.scss Näytä tiedosto

@@ -0,0 +1,4 @@
$myfont: Josefin Sans;
$lite-mid-gray: #a7a7a7;
$dark-mid-gray: #6a6a6a;
$verticle-line: 1px solid $dark-mid-gray;

BIN
images/back-arrow.png Näytä tiedosto

Before After
Leveys: 64  |  Korkeus: 64  |  Koko: 622 B

BIN
images/facebook.png Näytä tiedosto

Before After
Leveys: 32  |  Korkeus: 32  |  Koko: 461 B

BIN
images/forward-arrow.png Näytä tiedosto

Before After
Leveys: 64  |  Korkeus: 64  |  Koko: 633 B

BIN
images/instagram.png Näytä tiedosto

Before After
Leveys: 32  |  Korkeus: 32  |  Koko: 754 B

BIN
images/linkedin.png Näytä tiedosto

Before After
Leveys: 32  |  Korkeus: 32  |  Koko: 551 B

BIN
images/logo.jpg Näytä tiedosto

Before After
Leveys: 301  |  Korkeus: 301  |  Koko: 57 KiB

BIN
images/pexels-aleksandar-pasaric-325185.jpg Näytä tiedosto

Before After
Leveys: 5472  |  Korkeus: 3648  |  Koko: 1.6 MiB

BIN
images/pexels-essow-936722.jpg Näytä tiedosto

Before After
Leveys: 6000  |  Korkeus: 4000  |  Koko: 7.3 MiB

BIN
images/pexels-pixabay-534219.jpg Näytä tiedosto

Before After
Leveys: 5456  |  Korkeus: 3568  |  Koko: 3.9 MiB

BIN
images/search.png Näytä tiedosto

Before After
Leveys: 32  |  Korkeus: 32  |  Koko: 592 B

BIN
images/twitter-sign.png Näytä tiedosto

Before After
Leveys: 32  |  Korkeus: 32  |  Koko: 595 B

BIN
images/united-states-flag.png Näytä tiedosto

Before After
Leveys: 512  |  Korkeus: 512  |  Koko: 15 KiB

+ 304
- 0
index.html Näytä tiedosto

@@ -0,0 +1,304 @@
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Into Architecture</title>
</head>

<body>
<header>
<div class="logo-holder">
<h1>Skyscraper</h1>
<h2>Architecture</h2>
</div>
<div class="search-lang-nav-holder">
<div class="search-lang-holder">
<form class="header-form">
<div class="search">
<input type="text" placeholder="Search">
<button class="search-button">
<figure>
<img src="images/search.png" alt="search">
</figure>
</button>
</div>
<div class="lang">
<select name="" id="">
<option value="English">EN</option>
<option value="French">FR</option>
</select>
</div>
</form>
</div>
<input type="checkbox" id="menu">
<label for="menu" class="hamberger-menu">
<div class="patty"></div>
</label>
<nav class="nav-holder">
<a href="" class="active">Home</a>
<a href="">Projects</a>
<a href="">About</a>
<a href="">People</a>
<a href="">Contact</a>
</nav>
</div>
</header>
<section class="carousel-container">
<div class="carousel-holder">
<div class="carousel">
<div class="slider-count">
<div class="count active"><span>01</span>/03</div>
<div class="count"><span>02</span>/03</div>
<div class="count"><span>03</span>/03</div>
</div>
<div class="slider">
<div class="slide active" id="slide-1">
<figure class="slide-image">
<img src="images/pexels-aleksandar-pasaric-325185.jpg" alt="slider-1">
</figure>
<div class="slider-text">Lego House</div>
<div class="slider-content">
<div class="slider-date">13/11/1992</div>
<article class="slider-description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
<a href="" class="more">More</a>
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
MIES VAN DER ROHE AWARD
</p>
</article>
</div>
</div>
<div class="slide" id="slide-2">
<figure class="slide-image">
<img src="images/pexels-essow-936722.jpg" alt="slider-2">
</figure>
<div class="slider-text">Lego House</div>
<div class="slider-content">
<div class="slider-date">13/11/1992</div>
<article class="slider-description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
<a href="" class="more">More</a>
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
MIES VAN DER ROHE AWARD
</p>
</article>
</div>
</div>
<div class="slide" id="slide-3">
<figure class="slide-image">
<img src="images/pexels-pixabay-534219.jpg" alt="slider-3">
</figure>
<div class="slider-text">Lego House</div>
<div class="slider-content">
<div class="slider-date">13/11/1992</div>
<article class="slider-description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
<a href="" class="more">More</a>
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
MIES VAN DER ROHE AWARD
</p>
</article>
</div>
</div>
</div>
<div class="slider-control">
<button class="previous">&#x2039;</button>
<button class="next">&#x203A;</button>
</div>
</div>
</div>
</section>
<main>
<section class="news-container">
<div class="news-holder">
<div class="section-side-text">Recent News</div>
<div class="primary-news">
<figure class="primary-news-image">
<img src="images/pexels-pixabay-534219.jpg" alt="news">
</figure>
<div class="primary-news-floting-text">
<div class="primary-news-date">18/10/2022</div>
<div class="primary-news-title">Quarters Renovation</div>
</div>
<article class="primary-news-description">
<p>
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.
</p>
<a href="" class="more">More</a>
</article>
</div>
<div class="secondary-news">
<article class="secondary-news-description">
<div class="secondary-news-date">18/10/2022</div>
<h3>Ut enim ad minim veniam,nostrud</h3>
<p>
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.
</p>
<p>
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.
</p>
<a href="" class="more">More</a>
</article>
<article class="secondary-news-description">
<div class="secondary-news-date">18/10/2022</div>
<h3>Ut enim ad minim veniam,nostrud</h3>
<figure class="secondary-news-image">
<img src="images/pexels-essow-936722.jpg" alt="">
</figure>
<p>
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.
</p>
<a href="" class="more">More</a>
</article>
</div>
</div>
</section>
<section class="row-3-container">
<div class="row-3">
<div class="row-3-side-text">Competition</div>
<article class="row-3-col-1">
<div class="date">31/10/1992</div>
<h3>Ut enim ad minim <br> veniam,nostrud</h3>
<p>
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.
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
</p>
<a href="" class="more">More</a>
</article>
<div class="row-3-col-2">
<figure class="row-3-image">
<img src="images/pexels-pixabay-534219.jpg" alt="">
</figure>
<div class="row-3-float-text">1<span>st</span> Prize</div>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-holder">
<address class="footer-col">
<h3><span>skyscraper</span> Architecture</h3>
<h4>Bangalore</h4>
<p>Akshya Nagar 1st Block 1st Cross, Rammurthy nagar, Bangalore-560016</p>
<p>Phone: +91 98765 43212</p>
<p>Fax: 080 9876 5432</p>
</address>
<address class="footer-col">
<h3><span>skyscraper</span> Architecture</h3>
<h4>Mumbai</h4>
<p>Opp Bassein Drugs, Waliv Rd, Nr Golani Complex, Vasai (east), Mumbai-401506</p>
<p>Phone: +91 98765 43212</p>
<p>Fax: 080 9876 5432</p>
</address>
<div class="footer-col quick-links">
<h4>Shortcuts</h4>
<a href="">Home</a>
<a href="">Projects</a>
<a href="">About</a>
<a href="">People</a>
<a href="">Contact</a>
</div>
<div class="footer-col">
<div class="footer-side-text">Summery</div>
<div class="newsletter">
<h4>Newsletter</h4>
<p>Subscribe our newsletter for getting notifications about our latest projects.</p>
<form action="" class="subscribe-form">
<input type="email" placeholder="Enter your E-mail ID">
<button>Subscribe</button>
</form>
</div>
<div class="social-media">
<a href="">
<figure>
<img src="images/facebook.png" alt="">
</figure>
</a>
<a href="">
<figure>
<img src="images/instagram.png" alt="">
</figure>
</a>
<a href="">
<figure>
<img src="images/linkedin.png" alt="">
</figure>
</a>
<a href="">
<figure>
<img src="images/twitter-sign.png" alt="">
</figure>
</a>
</div>
</div>
</div>
</footer>
</body>

</html>

+ 1045
- 0
style.css
File diff suppressed because it is too large
Näytä tiedosto


+ 1
- 0
style.css.map
File diff suppressed because it is too large
Näytä tiedosto


+ 964
- 0
style.scss Näytä tiedosto

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

}
}

}


}
}
}

Kirjoita Esikatselu
Ladataan…
Peruuta
Tallenna