Brand section styling
This commit is contained in:
Ferit Yiğit BALABAN
38
index.html
38
index.html
@@ -22,32 +22,30 @@
|
||||
<div id="container">
|
||||
<div id="content">
|
||||
<div class="showcase">
|
||||
<img src="resources/img/showcase.jpg">
|
||||
<h1>Biz bir şeyler satıyoruz.</h1>
|
||||
</div>
|
||||
<!--<div id="brands" class="group">
|
||||
<div class="group-item">
|
||||
<img src="resources/img/ugurgaleri-yazıtek.png">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem dolore iusto nisi sit voluptate voluptatibus! Corporis deserunt dolores et vel voluptatum! Amet animi assumenda at atque cum cupiditate debitis esse ex exercitationem ipsam ipsum iure libero mollitia nesciunt nostrum odio optio perferendis quam quis repellat sed sint vel vero, voluptatem voluptates! At, aut beatae debitis distinctio doloribus enim eveniet ex exercitationem iusto magnam minus molestias nostrum odio quas vel? At natus officia sint unde voluptates? Aliquid ducimus nesciunt odit quia ratione velit! Consequatur cumque, deleniti enim et explicabo inventore minima quaerat quidem quod sed. Aperiam dolor eum odit sed!</p>
|
||||
<div id="brands" class="table content_spacing">
|
||||
<div class="table-item">
|
||||
<img src="resources/img/ugurgaleri-utek.png">
|
||||
<div class="vertical-separator"></div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores blanditiis doloremque eum labore laborum, mollitia nulla odit optio possimus quisquam tempora tenetur voluptatem. Atque cumque fugit harum maiores, necessitatibus nemo perspiciatis quos recusandae saepe sapiente, soluta totam vitae voluptate! Illum inventore ipsa mollitia, nihil odio optio rem. Blanditiis earum fugit nisi quas rem voluptates voluptatibus. Ad aut corporis cupiditate, deserunt dignissimos dolorem error esse excepturi expedita, illum impedit ipsum laudantium minima nostrum odio officia omnis perferendis porro, quae quaerat quasi quia ratione rem reprehenderit sapiente tempora ut voluptatibus? Amet dolores ducimus est fugiat incidunt odit quo, rerum soluta veritatis!</p>
|
||||
</div>
|
||||
<div class="group-item">
|
||||
<figure>
|
||||
<img src="resources/img/ukt.png" alt="Uğur Koçak Treyler logosu">
|
||||
<hr>
|
||||
<img class="side" src="resources/img/makinsan.png" alt="Makinsan logosu">
|
||||
<img class="side" src="resources/img/krone.jpg" alt="Krone logosu">
|
||||
</figure>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem dolore iusto nisi sit voluptate voluptatibus! Corporis deserunt dolores et vel voluptatum! Amet animi assumenda at atque cum cupiditate debitis esse ex exercitationem ipsam ipsum iure libero mollitia nesciunt nostrum odio optio perferendis quam quis repellat sed sint vel vero, voluptatem voluptates! At, aut beatae debitis distinctio doloribus enim eveniet ex exercitationem iusto magnam minus molestias nostrum odio quas vel? At natus officia sint unde voluptates? Aliquid ducimus nesciunt odit quia ratione velit! Consequatur cumque, deleniti enim et explicabo inventore minima quaerat quidem quod sed. Aperiam dolor eum odit sed!</p>
|
||||
<div class="table-item reverse">
|
||||
<img src="resources/img/ugurgaleri-utek.png">
|
||||
<div class="vertical-separator"></div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores blanditiis doloremque eum labore laborum, mollitia nulla odit optio possimus quisquam tempora tenetur voluptatem. Atque cumque fugit harum maiores, necessitatibus nemo perspiciatis quos recusandae saepe sapiente, soluta totam vitae voluptate! Illum inventore ipsa mollitia, nihil odio optio rem. Blanditiis earum fugit nisi quas rem voluptates voluptatibus. Ad aut corporis cupiditate, deserunt dignissimos dolorem error esse excepturi expedita, illum impedit ipsum laudantium minima nostrum odio officia omnis perferendis porro, quae quaerat quasi quia ratione rem reprehenderit sapiente tempora ut voluptatibus? Amet dolores ducimus est fugiat incidunt odit quo, rerum soluta veritatis!</p>
|
||||
</div>
|
||||
<div class="group-item">
|
||||
<img src="resources/img/ugurgaleri-yazıtek.png">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem dolore iusto nisi sit voluptate voluptatibus! Corporis deserunt dolores et vel voluptatum! Amet animi assumenda at atque cum cupiditate debitis esse ex exercitationem ipsam ipsum iure libero mollitia nesciunt nostrum odio optio perferendis quam quis repellat sed sint vel vero, voluptatem voluptates! At, aut beatae debitis distinctio doloribus enim eveniet ex exercitationem iusto magnam minus molestias nostrum odio quas vel? At natus officia sint unde voluptates? Aliquid ducimus nesciunt odit quia ratione velit! Consequatur cumque, deleniti enim et explicabo inventore minima quaerat quidem quod sed. Aperiam dolor eum odit sed!</p>
|
||||
<div class="table-item">
|
||||
<img src="resources/img/ugurgaleri-utek.png">
|
||||
<div class="vertical-separator"></div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores blanditiis doloremque eum labore laborum, mollitia nulla odit optio possimus quisquam tempora tenetur voluptatem. Atque cumque fugit harum maiores, necessitatibus nemo perspiciatis quos recusandae saepe sapiente, soluta totam vitae voluptate! Illum inventore ipsa mollitia, nihil odio optio rem. Blanditiis earum fugit nisi quas rem voluptates voluptatibus. Ad aut corporis cupiditate, deserunt dignissimos dolorem error esse excepturi expedita, illum impedit ipsum laudantium minima nostrum odio officia omnis perferendis porro, quae quaerat quasi quia ratione rem reprehenderit sapiente tempora ut voluptatibus? Amet dolores ducimus est fugiat incidunt odit quo, rerum soluta veritatis!</p>
|
||||
</div>
|
||||
<div class="group-item">
|
||||
<img src="resources/img/ugurgaleri-yazıtek.png">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem dolore iusto nisi sit voluptate voluptatibus! Corporis deserunt dolores et vel voluptatum! Amet animi assumenda at atque cum cupiditate debitis esse ex exercitationem ipsam ipsum iure libero mollitia nesciunt nostrum odio optio perferendis quam quis repellat sed sint vel vero, voluptatem voluptates! At, aut beatae debitis distinctio doloribus enim eveniet ex exercitationem iusto magnam minus molestias nostrum odio quas vel? At natus officia sint unde voluptates? Aliquid ducimus nesciunt odit quia ratione velit! Consequatur cumque, deleniti enim et explicabo inventore minima quaerat quidem quod sed. Aperiam dolor eum odit sed!</p>
|
||||
<div class="table-item reverse">
|
||||
<img src="resources/img/ugurgaleri-utek.png">
|
||||
<div class="vertical-separator"></div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores blanditiis doloremque eum labore laborum, mollitia nulla odit optio possimus quisquam tempora tenetur voluptatem. Atque cumque fugit harum maiores, necessitatibus nemo perspiciatis quos recusandae saepe sapiente, soluta totam vitae voluptate! Illum inventore ipsa mollitia, nihil odio optio rem. Blanditiis earum fugit nisi quas rem voluptates voluptatibus. Ad aut corporis cupiditate, deserunt dignissimos dolorem error esse excepturi expedita, illum impedit ipsum laudantium minima nostrum odio officia omnis perferendis porro, quae quaerat quasi quia ratione rem reprehenderit sapiente tempora ut voluptatibus? Amet dolores ducimus est fugiat incidunt odit quo, rerum soluta veritatis!</p>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
<div id="social">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,15 @@
|
||||
@use "../variables.scss";
|
||||
@use "../mixins.scss";
|
||||
|
||||
$table-item_img_width: 100px;
|
||||
$table-item_margin_between_items: 10px;
|
||||
$table-item_margin_img_to_paragraph: 10px;
|
||||
|
||||
.showcase {
|
||||
position: relative;
|
||||
background-image: none;
|
||||
background-color: black;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
background-image: url("../../resources/img/showcase.jpg");
|
||||
backdrop-filter: brightness(0%);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
@@ -13,38 +18,49 @@
|
||||
}
|
||||
|
||||
h1 {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -30%);
|
||||
|
||||
text-align: center;
|
||||
font: 800 128px "Montserrat", sans-serif;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.group {
|
||||
background-color: #FFFFFF;
|
||||
padding: 10px variables.$px_contentPadding;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.group-item {
|
||||
.table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
img {
|
||||
max-width: 300px;
|
||||
height: auto;
|
||||
|
||||
.table-item {
|
||||
margin-top: $table-item_margin_between_items;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
|
||||
img {
|
||||
margin-right: $table-item_margin_img_to_paragraph;
|
||||
height: $table-item_img_width;
|
||||
width: $table-item_img_width;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font: 400 22px "Montserrat", sans-serif;
|
||||
.reverse {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
img {
|
||||
margin-right: 0;
|
||||
margin-left: $table-item_margin_img_to_paragraph;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.vertical-separator {
|
||||
margin-right: 0;
|
||||
margin-left: $table-item_margin_img_to_paragraph;
|
||||
}
|
||||
}
|
||||
|
||||
.side {
|
||||
|
||||
.vertical-separator {
|
||||
height: $table-item_img_width + 20px;
|
||||
border: solid 1px variables.$clr_brand;
|
||||
margin-right: $table-item_margin_img_to_paragraph;
|
||||
}
|
||||
}
|
||||
@@ -2,9 +2,10 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
|
||||
.showcase {
|
||||
position: relative;
|
||||
background-image: none;
|
||||
background-color: black;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
background-image: url("../../resources/img/showcase.jpg");
|
||||
backdrop-filter: brightness(0%);
|
||||
}
|
||||
.showcase img {
|
||||
width: 100%;
|
||||
@@ -12,34 +13,45 @@
|
||||
filter: brightness(50%);
|
||||
}
|
||||
.showcase h1 {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -30%);
|
||||
text-align: center;
|
||||
font: 800 128px "Montserrat", sans-serif;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.group {
|
||||
background-color: #FFFFFF;
|
||||
padding: 10px 200px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.group-item {
|
||||
.table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.group-item img {
|
||||
max-width: 300px;
|
||||
height: auto;
|
||||
.table .table-item {
|
||||
margin-top: 10px;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.group-item p {
|
||||
font: 400 22px "Montserrat", sans-serif;
|
||||
.table .table-item img {
|
||||
margin-right: 10px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.table .reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.table .reverse img {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.table .reverse p {
|
||||
text-align: right;
|
||||
}
|
||||
.table .reverse .vertical-separator {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.table .vertical-separator {
|
||||
height: 120px;
|
||||
border: solid 1px #1d60b5;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#header {
|
||||
background: #FDFFFF;
|
||||
padding: 0 150px;
|
||||
|
||||
Reference in New Issue
Block a user