fyb/ugurgaleri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AAAAAyes

Browse Source
This commit is contained in:
Ferit Yiğit BALABAN
2022-07-15 22:35:14 +03:00
parent 99b0cabc89
commit 1a8ee91e3e
8 changed files with 303 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/css/mixins.scss
View File

@@ -34,4 +34,10 @@
@media screen and (max-width: variables.$index_brands_fix2) {
@content;
}
}
@mixin mx_mobile {
@media screen and (max-width: 400px) {
@content;
}
}

24
resources/css/partials/footer.scss
View File

@@ -6,7 +6,8 @@
justify-content: space-between;
background-color: variables.$clr_footerBackground;
font: 16px "Montserrat", sans-serif;
padding: 50px 200px;
padding-top: 50px;
padding-bottom: 50px;
#small-logo {
height: 50px;
@@ -23,6 +24,10 @@
margin: 0 0 16px 0;
font: 700 18px "Montserrat", sans-serif;
color: variables.$clr_footerSleepHigh;
@include mixins.mx_mobile {
font-size: 14px;
}
}
a {
@@ -32,6 +37,10 @@
&:hover {
font-size: 17px;
color: variables.$clr_footerActive;
@include mixins.mx_mobile {
font-size: 13px;
}
}
}
@@ -42,11 +51,16 @@
}
}
}
@include mixins.mx_mobile {
font-size: 12px;
}
}
#footer-stateless {
display: flex;
justify-content: space-between;
align-items: center;
background-color: variables.$clr_brand;
color: white;
font: 14px "Montserrat", sans-serif;
@@ -63,5 +77,13 @@
.smaller {
font-weight: 200;
font-size: 12px;
@include mixins.mx_mobile {
font-size: 8px;
}
}
@include mixins.mx_mobile {
font-size: 10px;
}
}

2
resources/css/urls.scss Normal file
View File

@@ -0,0 +1,2 @@
$index_showcase_bg_day: url("../img/index/g.jpg");
$index_showcase_bg_night: url("../img/index/y.jpg");

4
resources/css/variables.scss
View File

@@ -2,8 +2,8 @@ $header_overflow: 1200px;
$header_overflow2: 850px;
$index_brands_fix: 1100px;
$index_brands_fix2: 850px;
$footer_overflow2: 880px;
$footer_overflow: 1110px;
$footer_overflow: 1200px;
$footer_overflow2: 850px;
$px_headerPadding: 150px;
$px_headerPadding2: 50px;

106
resources/css/views/index.scss
View File

@@ -1,8 +1,11 @@
@use "../variables.scss";
@use "../mixins.scss";
@use "../urls.scss";
@use "sass:math";
$table-item_img_width_l: 150px;
$table-item_img_width: 100px;
$table-item_img_width_s: 60px;
$table-item_margin_between_items: 10px;
$social-button_img_width: 32px;
@@ -10,12 +13,29 @@ $social-button_inner_margin: 10px;
.showcase {
display: flex;
height: 100vh;
background-image: url("../../resources/img/index/g.jpg"), url("../../resources/img/index/y.jpg");
height: 90vh;
background-image: urls.$index_showcase_bg_day;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
backdrop-filter: brightness(0%);
@include mixins.header_overflow2 {
height: 95vh;
}
}
.showcase-animation {
animation: slideshow-appear 1000ms;
}
@keyframes slideshow-appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.table {
@@ -28,23 +48,45 @@ $social-button_inner_margin: 10px;
flex-direction: row;
align-items: center;
p {
font: x-large sans-serif;
@include mixins.mx_index_brands_fix {
font-size: large;
}
@include mixins.mx_index_brands_fix2 {
font-size: xx-small;
}
}
img {
margin-right: math.div(variables.$px_horizontalPadding, 10);
height: auto;
width: $table-item_img_width;
width: $table-item_img_width_l;
@include mixins.mx_index_brands_fix {
margin-right: math.div(variables.$px_horizontalPadding2, 10);
width: $table-item_img_width;
}
@include mixins.mx_index_brands_fix2 {
margin-right: math.div(variables.$px_horizontalPadding2, 10);
width: $table-item_img_width_s;
}
@include mixins.mx_mobile {
margin: 0 0 2px 0;
width: $table-item_img_width;
}
}
&:first-of-type {
margin-top: 0;
}
@include mixins.mx_mobile {
flex-direction: column;
}
}
.vertical-separator {
@@ -60,6 +102,22 @@ $social-button_inner_margin: 10px;
@include mixins.mx_index_brands_fix2 {
margin-right: 9 * math.div(variables.$px_horizontalPadding3, 10);
}
@include mixins.mx_mobile {
display: none;
}
}
.horizontal-separator {
// horizontal-separator makes an empty div behave as a separator which aligned horizontally
display: none;
width: $table-item_img_width + 20px;
border: solid 1px variables.$clr_brand;
margin: 0 0 18px 0;
@include mixins.mx_mobile {
display: block;
}
}
.reverse {
@@ -83,6 +141,10 @@ $social-button_inner_margin: 10px;
p {
text-align: right;
@include mixins.mx_mobile {
text-align: left;
}
}
.vertical-separator {
@@ -97,11 +159,28 @@ $social-button_inner_margin: 10px;
margin-left: 9 * math.div(variables.$px_horizontalPadding3, 10);
}
}
@include mixins.mx_mobile {
flex-direction: column;
}
}
.square {
img {
height: $table-item_img_width;
height: $table-item_img_width_l;
width: auto;
@include mixins.mx_index_brands_fix {
height: $table-item_img_width;
}
@include mixins.mx_index_brands_fix2 {
height: $table-item_img_width_s;
}
@include mixins.mx_mobile {
height: $table-item_img_width;
}
}
}
@@ -148,6 +227,7 @@ $social-button_inner_margin: 10px;
p {
font: 700 $social-button_img_width "Montserrat", sans-serif;
margin: 30px 0;
}
.social-button {
@@ -175,5 +255,19 @@ $social-button_inner_margin: 10px;
&:last-of-type {
margin: 0;
}
@include mixins.mx_mobile {
margin: 0 0 30px 0;
}
}
@include mixins.mx_mobile {
flex-direction: column;
p {
font-size: 20px;
font-weight: 600;
text-align: center;
}
}
}

26
resources/scripts/index.js
View File

@@ -1,3 +1,23 @@
const doSlideshow = true;
const slideTime = 7500; // milliseconds
const animTime = 1000; // milliseconds
async function slideshow() {
let showcase = document.getElementsByClassName("showcase")[0];
while(doSlideshow) {
showcase.style.backgroundImage = "url(resources/img/index/g.jpg)";
showcase.classList.add("showcase-animation");
await sleep(animTime);
showcase.classList.remove("showcase-animation");
await sleep(slideTime);
showcase.style.backgroundImage = "url(resources/img/index/y.jpg)";
showcase.classList.add("showcase-animation");
await sleep(animTime);
showcase.classList.remove("showcase-animation");
await sleep(slideTime);
}
}
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
@@ -9,9 +29,9 @@ const observer = new IntersectionObserver(entries => {
});
});
let targets = document.querySelectorAll('.table-item');
targets.forEach(target => {
observer.observe(target);
})
})
slideshow();

140
resources/styles/main.css
View File

@@ -4,14 +4,30 @@
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap");
.showcase {
display: flex;
height: 100vh;
background-image: url("../../resources/img/index/g.jpg"), url("../../resources/img/index/y.jpg");
height: 90vh;
background-image: url("../img/index/g.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
backdrop-filter: brightness(0%);
}
@media screen and (max-width: 850px) {
.showcase {
height: 95vh;
}
}
.showcase-animation {
animation: slideshow-appear 1000ms;
}
@keyframes slideshow-appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.table {
display: flex;
flex-direction: column;
@@ -22,24 +38,49 @@
flex-direction: row;
align-items: center;
}
.table .table-item p {
font: x-large sans-serif;
}
@media screen and (max-width: 1100px) {
.table .table-item p {
font-size: large;
}
}
@media screen and (max-width: 850px) {
.table .table-item p {
font-size: xx-small;
}
}
.table .table-item img {
margin-right: 20px;
height: auto;
width: 100px;
width: 150px;
}
@media screen and (max-width: 1100px) {
.table .table-item img {
margin-right: 10px;
width: 100px;
}
}
@media screen and (max-width: 850px) {
.table .table-item img {
margin-right: 10px;
width: 60px;
}
}
@media screen and (max-width: 400px) {
.table .table-item img {
margin: 0 0 2px 0;
width: 100px;
}
}
.table .table-item:first-of-type {
margin-top: 0;
}
@media screen and (max-width: 400px) {
.table .table-item {
flex-direction: column;
}
}
.table .vertical-separator {
height: 120px;
border: solid 1px #1d60b5;
@@ -55,6 +96,22 @@
margin-right: 18px;
}
}
@media screen and (max-width: 400px) {
.table .vertical-separator {
display: none;
}
}
.table .horizontal-separator {
display: none;
width: 120px;
border: solid 1px #1d60b5;
margin: 0 0 18px 0;
}
@media screen and (max-width: 400px) {
.table .horizontal-separator {
display: block;
}
}
.table .reverse {
flex-direction: row-reverse;
}
@@ -75,6 +132,11 @@
.table .reverse p {
text-align: right;
}
@media screen and (max-width: 400px) {
.table .reverse p {
text-align: left;
}
}
.table .reverse .vertical-separator {
margin-right: 0;
margin-left: 180px;
@@ -89,8 +151,29 @@
margin-left: 18px;
}
}
@media screen and (max-width: 400px) {
.table .reverse {
flex-direction: column;
}
}
.table .square img {
height: 100px;
height: 150px;
width: auto;
}
@media screen and (max-width: 1100px) {
.table .square img {
height: 100px;
}
}
@media screen and (max-width: 850px) {
.table .square img {
height: 60px;
}
}
@media screen and (max-width: 400px) {
.table .square img {
height: 100px;
}
}
.table .table-item-animation {
animation: slide-in-right 3000ms;
@@ -129,6 +212,7 @@
}
.social p {
font: 700 32px "Montserrat", sans-serif;
margin: 30px 0;
}
.social .social-button {
display: inline-block;
@@ -152,6 +236,21 @@
.social .social-button:last-of-type {
margin: 0;
}
@media screen and (max-width: 400px) {
.social .social-button {
margin: 0 0 30px 0;
}
}
@media screen and (max-width: 400px) {
.social {
flex-direction: column;
}
.social p {
font-size: 20px;
font-weight: 600;
text-align: center;
}
}
#header {
background: #FDFFFF;
@@ -316,7 +415,8 @@
justify-content: space-between;
background-color: #000000;
font: 16px "Montserrat", sans-serif;
padding: 50px 200px;
padding-top: 50px;
padding-bottom: 50px;
}
#footer #small-logo {
height: 50px;
@@ -333,6 +433,11 @@
font: 700 18px "Montserrat", sans-serif;
color: #f5ffff;
}
@media screen and (max-width: 400px) {
#footer .footer-columns .footer-column h1 {
font-size: 14px;
}
}
#footer .footer-columns .footer-column a {
text-decoration: none;
color: #abb3b3;
@@ -341,15 +446,26 @@
font-size: 17px;
color: #b3d1ff;
}
@media screen and (max-width: 400px) {
#footer .footer-columns .footer-column a:hover {
font-size: 13px;
}
}
#footer .footer-columns .footer-column ul {
margin: 0;
padding: 0;
list-style-type: none;
}
@media screen and (max-width: 400px) {
#footer {
font-size: 12px;
}
}
#footer-stateless {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #1d60b5;
color: white;
font: 14px "Montserrat", sans-serif;
@@ -365,6 +481,16 @@
font-weight: 200;
font-size: 12px;
}
@media screen and (max-width: 400px) {
#footer-stateless .smaller {
font-size: 8px;
}
}
@media screen and (max-width: 400px) {
#footer-stateless {
font-size: 10px;
}
}
html, body {
margin: 0;