Style aydinlatma.html
This commit is contained in:
Ferit Yiğit BALABAN
@@ -2,6 +2,7 @@
|
||||
@use "mixins.scss";
|
||||
@use "views/index.scss";
|
||||
@use "views/aydinlatma.scss";
|
||||
@use "views/iletisim.scss";
|
||||
@use "partials/header.scss";
|
||||
@use "partials/footer.scss";
|
||||
@use "sass:math";
|
||||
@@ -10,6 +11,7 @@ html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: variables.$clr_sides;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.content-spacing {
|
||||
|
||||
@@ -40,4 +40,16 @@
|
||||
@media screen and (max-width: 400px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mx_aydinlatma_documents_fix {
|
||||
@media screen and (max-width: variables.$aydinlatma_documents_fix) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mx_aydinlatma_documents_fix2 {
|
||||
@media screen and (max-width: variables.$aydinlatma_documents_fix2) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -4,6 +4,8 @@ $index_brands_fix: 1100px;
|
||||
$index_brands_fix2: 850px;
|
||||
$footer_overflow: 1200px;
|
||||
$footer_overflow2: 850px;
|
||||
$aydinlatma_documents_fix: 1515px;
|
||||
$aydinlatma_documents_fix2: 420px;
|
||||
|
||||
$px_headerPadding: 150px;
|
||||
$px_headerPadding2: 50px;
|
||||
@@ -19,8 +21,8 @@ $sz_m_footer_p: 12px;
|
||||
$sz_s_footer_p: 8px;
|
||||
|
||||
$clr_dark: #01003B;
|
||||
|
||||
$clr_brand: #1d60b5;
|
||||
$clr_brand_gradient: linear-gradient(to left, $clr_brand, #3b8fff);
|
||||
|
||||
$clr_logo: #FDFFFF;
|
||||
$clr_header: #FDFFFF;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
@use "../variables.scss";
|
||||
@use "../mixins.scss";
|
||||
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border: solid 1px black;
|
||||
@@ -10,4 +9,80 @@ table {
|
||||
td {
|
||||
padding: 1em;
|
||||
border: solid 1px black;
|
||||
}
|
||||
|
||||
.documents {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: variables.$clr_brand_gradient;
|
||||
|
||||
a {
|
||||
margin: 0 5vw 0 0;
|
||||
padding: 1vh 1vw;
|
||||
flex: 1;
|
||||
display: block;
|
||||
filter: light(50%);
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
|
||||
&:last-of-type {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(100%, 100%, 100%, 75%);
|
||||
transition: 250ms cubic-bezier(0.4, 0, 1, 1);
|
||||
|
||||
img {
|
||||
filter: brightness(0) saturate(100%) invert(15%) sepia(90%) saturate(2506%) hue-rotate(220deg) brightness(96%) contrast(90%);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #1d409d;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0 0 2.5vh 0;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
font: 600 18px Montserrat, sans-serif;
|
||||
}
|
||||
|
||||
@include mixins.mx_aydinlatma_documents_fix {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0 0 4.5vh 0;
|
||||
|
||||
&:last-of-type {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0 2.5vw 0 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.mx_aydinlatma_documents_fix2 {
|
||||
img {
|
||||
width: 50px;
|
||||
margin: 0 2vw 0 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font: 500 12px Montserrat, sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.mx_aydinlatma_documents_fix {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
22
resources/img/aydinlatma/docs-white.svg
Normal file
22
resources/img/aydinlatma/docs-white.svg
Normal file
@@ -0,0 +1,22 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="enable-background:new 0 0 128 128;" version="1.1" viewBox="0 0 128 128" xml:space="preserve"><style type="text/css">
|
||||
.st0{fill:#00B8DF;}
|
||||
.st1{fill:#FF9A30;}
|
||||
.st2{fill:#FFFFFF;}
|
||||
.st3{fill:#61BEE2;}
|
||||
.st4{fill:#FD4233;}
|
||||
.st5{fill:#FF402F;}
|
||||
.st6{fill:#1D409D;}
|
||||
.st7{fill:#007732;}
|
||||
.st8{fill:#FF5A29;}
|
||||
</style><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g><g><g><path d="M104,126H24c-5.5,0-10-4.5-10-10V12c0-5.5,4.5-10,10-10h40.7c2.7,0,5.2,1,7.1,2.9l39.3,39.3 c1.9,1.9,2.9,4.4,2.9,7.1V116C114,121.5,109.5,126,104,126z M24,6c-3.3,0-6,2.7-6,6v104c0,3.3,2.7,6,6,6h80c3.3,0,6-2.7,6-6V51.3 c0-1.6-0.6-3.1-1.8-4.2L68.9,7.8C67.8,6.6,66.3,6,64.7,6H24z" style="fill: rgb(255, 255, 255);" id="id_101"></path></g><g><path d="M78.7,96h-8.3l-4.6-18c-0.2-0.6-0.5-2-0.9-4s-0.7-3.4-0.7-4c-0.1,0.8-0.3,2.2-0.7,4.1s-0.7,3.2-0.9,4L58,96 h-8.3L41,61.7h7.1l4.4,18.7c0.8,3.5,1.3,6.4,1.7,9c0.1-0.9,0.3-2.3,0.6-4.1s0.7-3.3,0.9-4.3l5-19.2h6.9l5,19.2 c0.2,0.9,0.5,2.2,0.8,3.9s0.6,3.3,0.8,4.5c0.2-1.2,0.4-2.7,0.8-4.6s0.7-3.3,0.9-4.4l4.4-18.7h7.1L78.7,96z" style="fill: rgb(255, 255, 255);" id="id_102"></path></g></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g>
|
||||
<metadata>
|
||||
<rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<rdf:description about="https://iconscout.com/legal#licenses" dc:title="File, Document, Docx, Text, Type, Word, Writing" dc:description="File, Document, Docx, Text, Type, Word, Writing" dc:publisher="Iconscout" dc:date="2016-12-14" dc:format="image/svg+xml" dc:language="en">
|
||||
<dc:creator>
|
||||
<rdf:bag>
|
||||
<rdf:li>Igor Verizub</rdf:li>
|
||||
</rdf:bag>
|
||||
</dc:creator>
|
||||
</rdf:description>
|
||||
</rdf:rdf>
|
||||
</metadata></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -262,6 +262,110 @@ td {
|
||||
border: solid 1px black;
|
||||
}
|
||||
|
||||
.documents {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: linear-gradient(to left, #1d60b5, #3b8fff);
|
||||
}
|
||||
.documents a {
|
||||
margin: 0 5vw 0 0;
|
||||
padding: 1vh 1vw;
|
||||
flex: 1;
|
||||
display: block;
|
||||
filter: light(50%);
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.documents a:last-of-type {
|
||||
margin: 0;
|
||||
}
|
||||
.documents a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
transition: 250ms cubic-bezier(0.4, 0, 1, 1);
|
||||
}
|
||||
.documents a:hover img {
|
||||
filter: brightness(0) saturate(100%) invert(15%) sepia(90%) saturate(2506%) hue-rotate(220deg) brightness(96%) contrast(90%);
|
||||
}
|
||||
.documents a:hover h1 {
|
||||
color: #1d409d;
|
||||
}
|
||||
.documents a img {
|
||||
margin: 0 0 2.5vh 0;
|
||||
height: 100px;
|
||||
}
|
||||
.documents a h1 {
|
||||
color: white;
|
||||
font: 600 18px Montserrat, sans-serif;
|
||||
}
|
||||
@media screen and (max-width: 1515px) {
|
||||
.documents a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0 0 4.5vh 0;
|
||||
}
|
||||
.documents a:last-of-type {
|
||||
margin: 0;
|
||||
}
|
||||
.documents a img {
|
||||
margin: 0 2.5vw 0 0;
|
||||
}
|
||||
.documents a h1 {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 420px) {
|
||||
.documents a img {
|
||||
width: 50px;
|
||||
margin: 0 2vw 0 0;
|
||||
}
|
||||
.documents a h1 {
|
||||
font: 500 12px Montserrat, sans-serif;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1515px) {
|
||||
.documents {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #706fff;
|
||||
}
|
||||
a:hover {
|
||||
color: #01003B;
|
||||
}
|
||||
|
||||
.map {
|
||||
width: 100vw;
|
||||
height: auto;
|
||||
}
|
||||
.map iframe {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.information {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font: 500 24px "Montserrat", sans-serif;
|
||||
}
|
||||
.information .contact, .information .location {
|
||||
width: 50%;
|
||||
}
|
||||
.information .contact h1, .information .location h1 {
|
||||
font: 600 48px "Montserrat", sans-serif;
|
||||
}
|
||||
.information .contact h2, .information .location h2 {
|
||||
font: 600 40px "Montserrat", sans-serif;
|
||||
}
|
||||
.information .contact {
|
||||
margin: 0 50px 0 0;
|
||||
}
|
||||
|
||||
#header {
|
||||
background: #FDFFFF;
|
||||
padding: 0 150px;
|
||||
@@ -506,6 +610,7 @@ html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #364040;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.content-spacing {
|
||||
|
||||
Reference in New Issue
Block a user