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

Update dev server

Browse Source
This commit is contained in:
Ferit Yiğit BALABAN
2022-07-26 01:37:55 +03:00
parent 4efb842183
commit a17bf2cbf0
1 changed files with 195 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
resources/styles/main.css
View File

@@ -28,6 +28,11 @@
opacity: 1; opacity: 1;
} }
} }
.araclar {
text-align: center;
font: 600 32px "Montserrat", sans-serif;
}
.table { .table {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -36,7 +41,6 @@
margin-top: 10px; margin-top: 10px;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
align-items: center;
} }
.table .table-item p { .table .table-item p {
font: x-large sans-serif; font: x-large sans-serif;
@@ -48,10 +52,16 @@
} }
@media screen and (max-width: 850px) { @media screen and (max-width: 850px) {
.table .table-item p { .table .table-item p {
font-size: xx-small; font-size: 18px;
}
}
@media screen and (max-width: 400px) {
.table .table-item p {
font-size: 16px;
} }
} }
.table .table-item img { .table .table-item img {
align-self: center;
margin-right: 20px; margin-right: 20px;
width: 150px; width: 150px;
} }
@@ -73,35 +83,28 @@
width: 100px; width: 100px;
} }
} }
.table .table-item .vertical-separator { .table .table-item hr {
height: 120px; min-height: 100%;
border: solid 1px #1d60b5; max-height: 100vh;
margin-right: 180px; width: 5px;
background: #1d60b5;
margin-right: 175px;
} }
@media screen and (max-width: 1100px) { @media screen and (max-width: 1100px) {
.table .table-item .vertical-separator { .table .table-item hr {
margin-right: 90px; margin-right: 85px;
} }
} }
@media screen and (max-width: 850px) { @media screen and (max-width: 850px) {
.table .table-item .vertical-separator { .table .table-item hr {
margin-right: 18px; margin-right: 13px;
} }
} }
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
.table .table-item .vertical-separator { .table .table-item hr {
display: none;
}
}
.table .table-item .horizontal-separator {
display: none;
width: 120px; width: 120px;
border: solid 1px #1d60b5; border: solid 1px #1d60b5;
margin: 0 0 18px 0; margin: 0 0 18px 0;
}
@media screen and (max-width: 400px) {
.table .table-item .horizontal-separator {
display: block;
} }
} }
.table .table-item:first-of-type { .table .table-item:first-of-type {
@@ -110,6 +113,7 @@
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
.table .table-item { .table .table-item {
flex-direction: column; flex-direction: column;
align-items: center;
} }
} }
.table .reverse { .table .reverse {
@@ -129,20 +133,25 @@
margin-left: 2px; margin-left: 2px;
} }
} }
.table .reverse .vertical-separator { .table .reverse hr {
margin-right: 0; margin-right: 0;
margin-left: 180px; margin-left: 180px;
} }
@media screen and (max-width: 1100px) { @media screen and (max-width: 1100px) {
.table .reverse .vertical-separator { .table .reverse hr {
margin-left: 90px; margin-left: 90px;
} }
} }
@media screen and (max-width: 850px) { @media screen and (max-width: 850px) {
.table .reverse .vertical-separator { .table .reverse hr {
margin-left: 18px; margin-left: 18px;
} }
} }
@media screen and (max-width: 400px) {
.table .reverse hr {
margin: 0 0 18px 0;
}
}
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
.table .reverse { .table .reverse {
flex-direction: column; flex-direction: column;
@@ -210,7 +219,10 @@
font: 700 32px "Montserrat", sans-serif; font: 700 32px "Montserrat", sans-serif;
margin: 30px 0; margin: 30px 0;
} }
.social .social-button { .social nav {
display: flex;
}
.social nav .social-button {
display: inline-block; display: inline-block;
height: 52px; height: 52px;
width: auto; width: auto;
@@ -218,22 +230,22 @@
border-radius: 50%; border-radius: 50%;
margin: 0 10px 0 0; margin: 0 10px 0 0;
} }
.social .social-button img { .social nav .social-button img {
margin: 10px; margin: 10px;
height: 32px; height: 32px;
width: 32px; width: 32px;
} }
.social .social-button:hover { .social nav .social-button:hover {
background-color: white; background-color: white;
} }
.social .social-button:hover img { .social nav .social-button:hover img {
filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%); filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
} }
.social .social-button:last-of-type { .social nav .social-button:last-of-type {
margin: 0; margin: 0;
} }
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
.social .social-button { .social nav .social-button {
margin: 0 0 30px 0; margin: 0 0 30px 0;
} }
} }
@@ -246,6 +258,9 @@
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
} }
.social nav .social-button {
margin-right: 10px;
}
} }
table { table {
@@ -325,14 +340,6 @@ h1 {
margin: 0; margin: 0;
} }
a {
text-decoration: none;
color: #706fff;
}
a:hover {
color: #01003B;
}
#map { #map {
width: calc(100vw - (100vw - 100%)); width: calc(100vw - (100vw - 100%));
height: auto; height: auto;
@@ -347,24 +354,75 @@ a:hover {
font: 500 24px "Montserrat", sans-serif; font: 500 24px "Montserrat", sans-serif;
} }
#information .contact, #information .location { #information .contact, #information .location {
width: 100%;
display: flex; display: flex;
flex: 1;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
width: 50%;
} }
#information .contact h1, #information .location h1 { #information .contact h1, #information .location h1 {
font: 600 48px "Montserrat", sans-serif; font: 600 48px "Montserrat", sans-serif;
} }
@media screen and (max-width: 1235px) {
#information .contact h1, #information .location h1 {
font-size: 40px;
}
}
@media screen and (max-width: 1170px) {
#information .contact h1, #information .location h1 {
font-size: 48px;
}
}
@media screen and (max-width: 490px) {
#information .contact h1, #information .location h1 {
font-size: 36px;
}
}
#information .contact h2, #information .location h2 { #information .contact h2, #information .location h2 {
font: 600 40px "Montserrat", sans-serif; font: 600 40px "Montserrat", sans-serif;
margin: 0.5em 0 0 0; margin: 0.5em 0 0 0;
} }
@media screen and (max-width: 1235px) {
#information .contact h2, #information .location h2 {
font-size: 32px;
}
}
@media screen and (max-width: 1170px) {
#information .contact h2, #information .location h2 {
font-size: 40px;
}
}
@media screen and (max-width: 490px) {
#information .contact h2, #information .location h2 {
font-size: 28px;
}
}
#information .contact h3, #information .location h3 { #information .contact h3, #information .location h3 {
font: 600 32px "Montserrat", sans-serif; font: 600 32px "Montserrat", sans-serif;
margin: 0.5em 0 0.25em 0; margin: 0.5em 0 0.25em 0;
} }
@media screen and (max-width: 1235px) {
#information .contact h3, #information .location h3 {
font-size: 24px;
}
}
@media screen and (max-width: 1170px) {
#information .contact h3, #information .location h3 {
font-size: 32px;
}
}
@media screen and (max-width: 490px) {
#information .contact h3, #information .location h3 {
font-size: 18px;
}
}
#information .contact { #information .contact {
margin: 0 50px 0 0; margin: 0 2vw 0 0;
}
@media screen and (max-width: 1170px) {
#information .contact {
margin: 0 0 2vh 0;
}
} }
#information .click-call, #information .click-pm { #information .click-call, #information .click-pm {
margin: 0 0 0 1em; margin: 0 0 0 1em;
@@ -380,22 +438,46 @@ a:hover {
width: -webkit-fill-available; width: -webkit-fill-available;
border: solid 1px black; border: solid 1px black;
} }
@media screen and (max-width: 1170px) {
#information {
flex-direction: column;
align-items: center;
font-size: 24px;
}
}
@media screen and (max-width: 490px) {
#information {
font-size: 16px;
}
}
#video, #misyon, #vizyon, #hikaye, #yonetim {
text-align: center;
}
#video h1, #misyon h1, #vizyon h1, #hikaye h1, #yonetim h1 {
margin: 0 0 1em 0;
font: 600 2.5vw "Montserrat", sans-serif;
color: black;
}
#video p, #misyon p, #vizyon p, #hikaye p, #yonetim p {
font: 500 1.25vw "Montserrat", sans-serif;
}
#video ul, #misyon ul, #vizyon ul, #hikaye ul, #yonetim ul {
list-style-position: inside;
font-size: 1vw;
}
#video { #video {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
color: white;
background: linear-gradient(to left, #1d60b5, #3b8fff); background: linear-gradient(to left, #1d60b5, #3b8fff);
} }
#video video { #video video {
width: 100% !important; width: 100% !important;
height: auto !important; height: auto !important;
} }
#video h1 {
margin: 0 0 1em 0;
font: 600 2.5vw "Montserrat", sans-serif;
color: white;
}
.sec-links-to-documents { .sec-links-to-documents {
display: flex; display: flex;
@@ -442,6 +524,37 @@ a:hover {
} }
} }
#fullscreen {
display: none;
align-items: center;
justify-content: center;
width: 99vw;
height: 100vh;
}
#fullscreen #fullscreen-img {
max-width: 100%;
max-height: 100vh;
object-fit: cover;
cursor: pointer;
}
.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.gallery .photo {
margin: 1vh 1vw;
width: 25%;
height: 25%;
cursor: pointer;
}
.gallery .photo:hover {
filter: brightness(1.3);
}
#header { #header {
background: #FDFFFF; background: #FDFFFF;
padding: 0 150px; padding: 0 150px;
@@ -515,14 +628,14 @@ a:hover {
#header #toggle { #header #toggle {
display: none; display: none;
} }
#header .dropdown-toggle { #header #toggle-label {
margin: 0; margin: 0;
width: 36px; width: 36px;
height: 36px; height: 36px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
} }
#header .dropdown-toggle .bar { #header #toggle-label .bar {
padding: 0; padding: 0;
width: 36px; width: 36px;
height: 4px; height: 4px;
@@ -532,18 +645,18 @@ a:hover {
transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
position: absolute; position: absolute;
} }
#header .dropdown-toggle .bar1 { #header #toggle-label .bar1 {
transform-origin: 5%; transform-origin: 5%;
} }
#header .dropdown-toggle .bar4 { #header #toggle-label .bar4 {
transform-origin: 5%; transform-origin: 5%;
} }
@media screen and (max-width: 850px) { @media screen and (max-width: 850px) {
#header .dropdown-toggle { #header #toggle-label {
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
#header .dropdown-toggle .bar { #header #toggle-label .bar {
width: 28px; width: 28px;
} }
} }
@@ -566,33 +679,33 @@ a:hover {
#header .bar4 { #header .bar4 {
bottom: 0; bottom: 0;
} }
#header .toggle:checked + label > .dropdown-toggle > .bar1 { #header #toggle:checked + #toggle-label > .bar1 {
transform: rotate(45deg); transform: rotate(45deg);
height: 3px; height: 3px;
width: 50px; width: 50px;
} }
@media screen and (max-width: 850px) { @media screen and (max-width: 850px) {
#header .toggle:checked + label > .dropdown-toggle > .bar1 { #header #toggle:checked + #toggle-label > .bar1 {
width: 39px; width: 39px;
} }
} }
#header .toggle:checked + label > .dropdown-toggle > .bar3 { #header #toggle:checked + #toggle-label > .bar3 {
transform: rotate(45deg); transform: rotate(45deg);
height: 3px; height: 3px;
background-color: transparent; background-color: transparent;
} }
#header .toggle:checked + label > .dropdown-toggle > .bar2 { #header #toggle:checked + #toggle-label > .bar2 {
transform: rotate(-45deg); transform: rotate(-45deg);
height: 3px; height: 3px;
background-color: transparent; background-color: transparent;
} }
#header .toggle:checked + label > .dropdown-toggle > .bar4 { #header #toggle:checked + #toggle-label > .bar4 {
transform: rotate(-45deg); transform: rotate(-45deg);
height: 3px; height: 3px;
width: 50px; width: 50px;
} }
@media screen and (max-width: 850px) { @media screen and (max-width: 850px) {
#header .toggle:checked + label > .dropdown-toggle > .bar4 { #header #toggle:checked + #toggle-label > .bar4 {
width: 39px; width: 39px;
} }
} }
@@ -695,6 +808,17 @@ html, body {
font-family: sans-serif; font-family: sans-serif;
} }
a {
text-decoration: none;
color: #706fff;
}
a:hover {
color: #01003B;
}
a:active {
font-style: italic;
}
.content-spacing { .content-spacing {
padding: 100px 200px; padding: 100px 200px;
} }
@@ -931,16 +1055,18 @@ html, body {
width: 100%; width: 100%;
filter: invert(100%); filter: invert(100%);
} }
#scroll-to-top:hover { @media (hover: hover) and (pointer: fine) {
#scroll-to-top:hover {
width: 60px; width: 60px;
height: 60px; height: 60px;
right: 20px; right: 20px;
bottom: 50px; bottom: 50px;
transition: 250ms cubic-bezier(0.51, 1.27, 0.18, 0.96); transition: 250ms cubic-bezier(0.51, 1.27, 0.18, 0.96);
} }
#scroll-to-top:hover img { #scroll-to-top:hover img {
transform: translateY(-5px); transform: translateY(-5px);
transition: 250ms cubic-bezier(0.51, 1.27, 0.18, 0.96); transition: 250ms cubic-bezier(0.51, 1.27, 0.18, 0.96);
}
} }
#footer { #footer {