Style aydinlatma.html

resources/css/main.scss

@@ -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 {

resources/css/mixins.scss

@@ -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;
+  }
 }

resources/css/variables.scss

@@ -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;

resources/css/views/aydinlatma.scss

@@ -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;
+  }
 }