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

Files uploaded

master
Bharath Kumar 3 年之前
當前提交
46b0dff8fa
共有 20 個檔案被更改，包括 2424 行新增 和 0 行删除
分割檢視
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. 二進制
      images/back-arrow.png
  6. 二進制
      images/facebook.png
  7. 二進制
      images/forward-arrow.png
  8. 二進制
      images/instagram.png
  9. 二進制
      images/linkedin.png
  10. 二進制
      images/logo.jpg
  11. 二進制
      images/pexels-aleksandar-pasaric-325185.jpg
  12. 二進制
      images/pexels-essow-936722.jpg
  13. 二進制
      images/pexels-pixabay-534219.jpg
  14. 二進制
      images/search.png
  15. 二進制
      images/twitter-sign.png
  16. 二進制
      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 查看文件

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

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


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

+ 4
- 0
_variables.scss 查看文件

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

二進制
images/back-arrow.png 查看文件

Before After
Width: 64  |  Height: 64  |  Size: 622 B

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

Before After
Width: 32  |  Height: 32  |  Size: 461 B

二進制
images/forward-arrow.png 查看文件

Before After
Width: 64  |  Height: 64  |  Size: 633 B

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

Before After
Width: 32  |  Height: 32  |  Size: 754 B

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

Before After
Width: 32  |  Height: 32  |  Size: 551 B

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

Before After
Width: 301  |  Height: 301  |  Size: 57 KiB

二進制
images/pexels-aleksandar-pasaric-325185.jpg 查看文件

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

二進制
images/pexels-essow-936722.jpg 查看文件

Before After
Width: 6000  |  Height: 4000  |  Size: 7.3 MiB

二進制
images/pexels-pixabay-534219.jpg 查看文件

Before After
Width: 5456  |  Height: 3568  |  Size: 3.9 MiB

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

Before After
Width: 32  |  Height: 32  |  Size: 592 B

二進制
images/twitter-sign.png 查看文件

Before After
Width: 32  |  Height: 32  |  Size: 595 B

二進制
images/united-states-flag.png 查看文件

Before After
Width: 512  |  Height: 512  |  Size: 15 KiB

+ 304
- 0
index.html 查看文件

@@ -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
文件差異過大導致無法顯示
查看文件


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


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

}
}

}


}
}
}

Write Preview
Loading…
取消
儲存