From 96e95f56d200fd9dfd2e8e026f317f7c9a04ea5b Mon Sep 17 00:00:00 2001
From: asandikci <git@aliberksandikci.com.tr>
Date: Thu, 9 Nov 2023 18:56:57 +0300
Subject: [PATCH] ifl branding

---
 about.html                | 85 ++++++++++++++++++++---------------
 assets/css/main.css       | 84 ++++++++++++++++++++++++++++++++++
 assets/css/main.css.map   |  2 +-
 assets/scss/_article.scss | 53 ++++++++++++++++++++--
 assets/scss/_utils.scss   | 23 +++++++++-
 bagis.html                |  2 +-
 index.html                | 95 +++++++++++++--------------------------
 7 files changed, 237 insertions(+), 107 deletions(-)

diff --git a/about.html b/about.html
index d13da22..6a1ef19 100644
--- a/about.html
+++ b/about.html
@@ -8,8 +8,8 @@
 
   <!-- Meta Content -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="iflpanel Hakkımızda">
-  <meta name="keywords" content="iflpanel,mainpage,hakkımızda,aboutme,about,bilgi">
+  <meta name="description" content="İzmir Fen Lisesi Topluluğu Hakkında">
+  <meta name="keywords" content="İzmir Fen Lisesi,İFL,Fen Lisesi,,mainpage,hakkımızda,aboutme,about,bilgi">
   <meta name="author" content="Aliberk Sandıkçı">
 
   <!-- CSS Files -->
@@ -19,7 +19,7 @@
   <link rel="icon" type="image/x-icon" href="/assets/images/icons/favicon.ico">
 
 
-  <title>Hakkımızda | iflpanel</title>
+  <title>Hakkımızda | İzmir Fen Lisesi Topluluğu</title>
 </head>
 
 
@@ -30,7 +30,7 @@
     <nav>
       <ul>
         <a href="/yunohost/sso">
-          <li>Panel Giriş</li>
+          <li>Topluluk Girişi</li>
         </a>
         <a href="about.html">
           <li>Hakkında</li>
@@ -43,43 +43,56 @@
 
   <div class="main-scrollable">
     <article class="plain">
-      <h2>Hakkımızda</h2>
-      <div style="text-align: center;">
-        <p style="text-align: center;"><b>iflpanel</b>, topluluk ekosistemi kurmak için ortaya çıkmış bir
-          girişimdir. Topluluğun ihtiyaçlarını göz önünde bulundurarak ortak çalışmaya dayalı uygulamalar ile verimi en
-          üst seviyeye çıkarmayı amaçlar. Sağladığı servisler ile kullanıcıların, editörlerin ve yöneticilerin
+      <h1>Hakkımızda</h1>
+      <div style="text-align: justify; font-size: large;">
+        <p style="text-align: justify;"><b>iflpanel</b>, İzmir Fen Lisesi 24 dönemi öğrencisi Aliberk Sandıkçı
+          tarafından
+          topluluk ekosistemi kurmak için ortaya çıkmış bir girişimdir. Topluluğun ihtiyaçlarını göz önünde bulundurarak
+          ortak çalışmaya dayalı uygulamalar ile verimi en üst seviyeye çıkarmayı amaçlar. Sağladığı servisler ile
+          öğrencilerin, topluluk editörlerinin, öğretmenlerin ve okul yöneticilerinin
           işlemlerini hızlı bir şekilde gerçekleştirmesine olanak sağlar. Aynı zamanda topluluğun verilerini kendi
           içinde tutmasını sağlayarak büyük şirketler tarafından kullanılmasını engeller ve dışa bağımlılığı azaltır.
         </p>
-        <hr>
-        <h3>SSA VPN</h3>
-        <p>kesintisiz, hızlı, gizli ve güvenli VPN servisimiz. Fatih (MEB) internetinde çalışır. Detaylı bilgi için <a
-            href="https://vpn.iflpanel.com/">VPN bilgi sayfamızı</a> ziyaret edebilirsiniz</p>
-        <h3>Galeri</h3>
-        <p><b>Topluluk için</b> Galeri servisi. Fotoğraflarınızı orijinal boyutunda saklar. Topluluk Editörleri;
-          etiketler, albümler ve açıklamalar ile kolay sınıflandırma yapabilir. Kullanıcılar ise yorum yapma ve puanlama
-          özellikleri sayesinde etikileşimde bulunabilir. </p>
-        <h3>Kütüphane</h3>
-        <p><b>Topluluk için</b> Kütüphane servisi. Pdf ve diğer dosya formatlarını yükleyebilirsiniz.</p>
-        <h3>Anket</h3>
-        <p>Topluluk Editörleri için gelişmiş anket servisi. Kullanıcı verilerinizi ustalıkla yönetmenizi ve özelleşmiş
-          anketler oluşturmanızı sağlar. Detaylı bilgi için <a
-            href="https://wiki.iflpanel.com/books/anket-kullanimi-editor/page/hizli-bakis">Editörler için Anket
-            Kullanımı - Hızlı Bakış</a> sayfasına göz atabilirsiniz. </p>
-        <h3>Wiki</h3>
-        <p>Servislerin kullanım ayrıntıları için wiki</p>
-        <br>
-        <p>
-        <div>Giderlerimizi karşılamamızda yardımcı olmak için <a href="bagis.html">bağış</a> yapmayı düşünebilirsiniz
-        </div>
-        </p>
-        <p style="text-align: center;"><a href=https://asandikci.com>Aliberk Sandıkçı</a> - 2023</p>
       </div>
-    </article>
+      <h2>Uygulamalarımız Hakkında</h2>
+      <!-- ANKET -->
+      <h3>Anket</h3>
+      <p>Topluluk Editörleri için gelişmiş anket servisi. Form ve anketlerinizi yönetmenizi ve özelleştirmenize olanak
+        sağlarDetaylı bilgi için <a
+          href="https://wiki.iflpanel.com/books/anket-kullanimi-editor/page/hizli-bakis">Editörler için Anket
+          Kullanımı - Hızlı Bakış</a> sayfasına göz atabilirsiniz.
+      </p>
 
-    <footer>
-      <div class="copyright">2023 © Aliberk Sandıkçı</div>
-    </footer>
+      <!-- GALERİ -->
+      <h3>Galeri</h3>
+      <p>Topluluk için Galeri servisi. Fotoğraflarınızı orijinal boyutunda saklar. Topluluk Editörleri;
+      etiketler, albümler ve açıklamalar ile kolay sınıflandırma yapabilir. Kullanıcılar ise yorum yapma ve puanlama
+      özellikleri sayesinde etikileşimde bulunabilir. </p>
+
+      <!-- KÜTÜPHANE -->
+      <h3>Kütüphane</h3>
+      <p><b>Topluluk için</b> Kütüphane servisi. Pdf ve diğer dosya formatlarını yükleyebilirsiniz.</p>
+
+
+      <!-- DOKÜMANTASYON -->
+      <h3>Dokümantasyon</h3>
+      <p>Servislerin kullanım ayrıntıları için wiki</p>
+
+      <br><br>
+      <hr>
+      <p>
+      <div>iflpanel projesi resmi olarak İzmir Fen Lisesi tarafından fonlanmamaktadır. Dolayısı ile giderlerimizi
+        karşılamamızda yardımcı olmak için <a href="bagis.html">bağış</a> yapmayı düşünebilirsiniz.
+      </div>
+      </p>
+  </div>
+  </article>
+
+  <footer>
+    <div class="copyright" style="text-align: center;">2023 © <a href="https://asandikci.com/">Aliberk
+        Sandıkçı</a><br><sup>İzmir Fen Lisesi 24 dönemi öğrencisi</sup><br>*site içindeki veriler bizzat İzmir Fen
+      Lisesi'ni ilgilendirmemektedir.</div>
+  </footer>
   </div>
 </body>
 
diff --git a/assets/css/main.css b/assets/css/main.css
index 95a7666..e1f856e 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -310,6 +310,86 @@ body article.sections > .section .grid-plain > .element {
   text-align-last: left;
   line-break: loose;
 }
+html article.sections > .section .grid-linear,
+body article.sections > .section .grid-linear {
+  column-gap: 5px;
+}
+html article.sections > .section .grid-linear .hover:hover,
+body article.sections > .section .grid-linear .hover:hover {
+  transform: translateY(-15px);
+}
+@media screen and (min-width: 1367px) {
+  html article.sections > .section .grid-linear,
+  body article.sections > .section .grid-linear {
+    justify-content: space-between;
+  }
+  html article.sections > .section .grid-linear > .element,
+  body article.sections > .section .grid-linear > .element {
+    width: 24%;
+  }
+  html article.sections > .section .grid-linear > .element:first-child,
+  body article.sections > .section .grid-linear > .element:first-child {
+    border-top-left-radius: 10px;
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 10px;
+  }
+  html article.sections > .section .grid-linear > .element:last-child,
+  body article.sections > .section .grid-linear > .element:last-child {
+    border-top-right-radius: 10px;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 10px;
+  }
+  html article.sections > .section .grid-linear > .element:only-child,
+  body article.sections > .section .grid-linear > .element:only-child {
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+  }
+  html article.sections > .section .grid-linear > .element .hover:hover,
+  body article.sections > .section .grid-linear > .element .hover:hover {
+    transform: translateX(15px);
+  }
+}
+html article.sections > .section .grid-big .element,
+body article.sections > .section .grid-big .element {
+  width: 48%;
+  min-height: 40vh;
+}
+@media screen and (max-width: 1366px) {
+  html article.sections > .section .grid-big > .element,
+  body article.sections > .section .grid-big > .element {
+    width: 90%;
+    min-height: auto;
+  }
+  html article.sections > .section .grid-big > .element:first-child,
+  body article.sections > .section .grid-big > .element:first-child {
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+  html article.sections > .section .grid-big > .element:last-child,
+  body article.sections > .section .grid-big > .element:last-child {
+    border-top-right-radius: 0px;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+  }
+  html article.sections > .section .grid-big > .element:only-child,
+  body article.sections > .section .grid-big > .element:only-child {
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+  }
+  html article.sections > .section .grid-big > .element .hover:hover,
+  body article.sections > .section .grid-big > .element .hover:hover {
+    transform: translateX(15px);
+  }
+}
 html article.sections > .section > .note,
 body article.sections > .section > .note {
   font-style: italic;
@@ -335,6 +415,10 @@ body footer {
   margin-block-start: 10px;
   padding-top: 10px;
 }
+html footer div,
+body footer div {
+  text-align: center;
+}
 html a,
 body a {
   background-color: transparent;
diff --git a/assets/css/main.css.map b/assets/css/main.css.map
index c56c036..7fa3ff3 100644
--- a/assets/css/main.css.map
+++ b/assets/css/main.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/_images.scss","../scss/_animation.scss","../scss/main.scss","../scss/_fonts.scss","../scss/_colors.scss","../scss/_header.scss","../scss/_nav.scss","../scss/_article.scss","../scss/_utils.scss","../scss/_footer.scss","../scss/_copy.scss"],"names":[],"mappings":"AAGE;EACE;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;;;AAbF;EACE;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;;;AChBJ;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;;AClBJ;EACE;;;AAGF;AAAA;EAEE;EACA;EAEA;EACA;EAEA;EACA;EAEA,aC3BM;ED4BN,kBEjBS;EFkBT,OEXa;;AFeb;AAAA;EG9BA;EACA;EACA;EAEA;EACA;EAEA,kBDCS;ECAT;EAEA;;AAEA;AAAA;EACE;EACA;EACA;EACA;;AHmBF;AAAA;EIrCA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;;AJ0BF;AAAA;EKtCA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;;ALiBA;AAAA;EKZF,kBHfa;EGgBb;EACA;;ALcE;AAAA;EKVF;;AAEA;AAAA;EACE;EACA;EACA;EAEA;EACA;EAEA,kBH/BW;;AIVb;AAAA;EACE,wBDyCgC;ECxChC,yBDwCgC;ECvChC;EACA;;AAGF;AAAA;EACE;EACA;EACA,2BDgCgC;EC/BhC,4BD+BgC;;AC5BlC;AAAA;EACE,yBD2BgC;EC1BhC,wBD0BgC;ECzBhC,2BDyBgC;ECxBhC,4BDwBgC;;AAGhC;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA,kBH5DO;;AITb;AAAA;EACE,wBDqEoC;ECpEpC,yBDoEoC;ECnEpC;EACA;;AAGF;AAAA;EACE;EACA;EACA,2BD4DoC;EC3DpC,4BD2DoC;;ACxDtC;AAAA;EACE,yBDuDoC;ECtDpC,wBDsDoC;ECrDpC,2BDqDoC;ECpDpC,4BDoDoC;;AAEhC;AAAA;EACE;EACA;;AAEA;AAAA;EACE;;AAIJ;AAAA;EACE;EACA;;AAIJ;AAAA;EACE;;AAEA;AAAA;EACE;;AAMJ;EACE;AAAA;IACE;;EC3ER;AAAA;IACE;IACA,wBD0E+B;ICzE/B;IACA;;EAGF;AAAA;IACE,yBDoE+B;ICnE/B;IACA;IACA;;EAGF;AAAA;IACE;IACA;IACA,2BD2D+B;IC1D/B;;EAGF;AAAA;IACE;IACA;IACA;IACA,4BDmD+B;;EAIzB;AAAA;IACE;;;AAQN;AAAA;EACE;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAIJ;AAAA;EACE;EACA;;AAOJ;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;AAAA;EAOE;EACA;EACA;;AARA;AAAA;EACE;EACA;EACA;;AL5GN;AAAA;EOtDA;EACA;EACA;EACA;EAEA;EACA,kBLCS;EKAT;EAEA;EACA;EAEA;;AP+CA;AAAA;EACE;EACA;;AAEA;AAAA;EACE,OE9CS;;AFiDX;AAAA;EACE;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;EACE;;AAIJ;AAAA;EACE;EACA;EMjFF;EACA;;AALA;AAAA;EACE;;AEDF;AAAA;EACE;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA","file":"main.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/_images.scss","../scss/_animation.scss","../scss/main.scss","../scss/_fonts.scss","../scss/_colors.scss","../scss/_header.scss","../scss/_nav.scss","../scss/_article.scss","../scss/_utils.scss","../scss/_footer.scss","../scss/_copy.scss"],"names":[],"mappings":"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","file":"main.css"}
\ No newline at end of file
diff --git a/assets/scss/_article.scss b/assets/scss/_article.scss
index 824bce0..e7d9b04 100644
--- a/assets/scss/_article.scss
+++ b/assets/scss/_article.scss
@@ -152,9 +152,56 @@
         border: none;
         background-color: inherit;
         list-style-type: disc;
-        text-align:justify;
-        text-align-last:left;
-        line-break:loose;
+        text-align: justify;
+        text-align-last: left;
+        line-break: loose;
+      }
+    }
+
+    .grid-linear {
+      column-gap: 5px;
+
+      .hover {
+        &:hover {
+          transform: translateY(-15px);
+        }
+      }
+
+      @media screen and (min-width:1367px) {
+        justify-content: space-between;
+
+        >.element {
+          width: 24%;
+          @include util.border-linear(10px);
+
+          .hover {
+            &:hover {
+              transform: translateX(15px);
+            }
+          }
+        }
+      }
+    }
+
+    .grid-big {
+      .element {
+        width: 48%;
+        min-height: 40vh;
+      }
+
+      @media screen and (max-width:1366px) {
+    
+        >.element {
+          width: 90%;
+          min-height: auto;
+          @include util.border-first-last(10px);
+
+          .hover {
+            &:hover {
+              transform: translateX(15px);
+            }
+          }
+        }
       }
     }
 
diff --git a/assets/scss/_utils.scss b/assets/scss/_utils.scss
index 7a839c0..4faf878 100644
--- a/assets/scss/_utils.scss
+++ b/assets/scss/_utils.scss
@@ -21,7 +21,7 @@
     border-bottom-left-radius: $radius;
     border-bottom-right-radius: $radius;
   }
-  
+
   &:only-child {
     border-top-right-radius: $radius;
     border-top-left-radius: $radius;
@@ -59,6 +59,27 @@
     border-bottom-left-radius: 0px;
     border-bottom-right-radius: $radius;
   }
+}
 
+@mixin border-linear($radius) {
+  &:first-child {
+    border-top-left-radius: $radius;
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: $radius;
+  }
 
+  &:last-child {
+    border-top-right-radius: $radius;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: $radius;
+  }
+
+  &:only-child {
+    border-top-right-radius: $radius;
+    border-top-left-radius: $radius;
+    border-bottom-left-radius: $radius;
+    border-bottom-right-radius: $radius;
+  }
 }
\ No newline at end of file
diff --git a/bagis.html b/bagis.html
index 54628a4..d7407d6 100644
--- a/bagis.html
+++ b/bagis.html
@@ -30,7 +30,7 @@
     <nav>
       <ul>
         <a href="/yunohost/sso">
-          <li>Panel Giriş</li>
+          <li>Topluluk Girişi</li>
         </a>
         <a href="about.html">
           <li>Hakkında</li>
diff --git a/index.html b/index.html
index 948a7f1..a5ec649 100644
--- a/index.html
+++ b/index.html
@@ -44,101 +44,66 @@
   <div class="main-scrollable">
     <article class="sections">
 
-      <!-- TOPLULUK İÇİN -->
+      <!-- TOPLULUK SERVİSLERİMİZ -->
       <div class="section">
-        <h2>Topluluk Servislerimiz</h2>
-        <ul class="grid grid2x2">
-          <!-- <li class="element hover">
-            <a href="https://vpn.iflpanel.com">
-              <h3 class="with-explanation ssavpn-logo">SSA VPN</h3>
-              <p class="explanation">Güvenli, Gizli ve Hızlı VPN servisi</p>
-            </a>
-          </li> -->
-
-          <li class="element hover">
-            <a href="https://galeri.iflpanel.com">
-              <h3 class="with-explanation">Galeri</h3>
-              <p class="explanation">Toplu Anılarınızı Saklayabileceğiniz Topluluk Galerisi</p>
+        <h1>Topluluk Servislerimiz</h1>
+        <ul class="grid grid-linear grid-big">
+          <li class="element hover" style="display:flex;">
+            <a href="https://anket.iflpanel.com" style="height: 100%; width: 100%; align-self: center; color: #45c301">
+              <h3 class="with-explanation" style="font-size: xx-large;">İFL <u>Anket</u> Sitesi</h3>
+              <p class="explanation">Anket ve Form Servisi</p>
             </a>
           </li>
 
-
-          <li class="element hover">
-            <a href="https://kutuphane.iflpanel.com">
-              <h3 class="with-explanation">Kütüphane</h3>
-              <p class="explanation">Kitaplar, kaynaklar, ders notları ve daha fazlası</p>
+          <li class="element hover" style="display:flex;">
+            <a href="https://galeri.iflpanel.com" style="height: 100%; width: 100%; align-self: center; color: #ff7700">
+              <h3 class="with-explanation" style="font-size: xx-large;">İFL <u>Galeri</u> Sitesi</h3>
+              <p class="explanation">İzmir Fen Lisesi Okul Galerisi</p>
             </a>
           </li>
 
-
-          <!-- <li class="element hover">
-            <a href="https://tahta.iflpanel.com">
-              <h3 class="with-explanation">iflpanel Tahta</h3>
-              <p class="explanation">Akıllı Tahta Arka Planı</p>
-            </a>
-          </li> -->
         </ul>
       </div>
 
-      <!-- EDİTÖRLER İÇİN -->
+      <!-- DİĞER SERVİSLERİMİZ-->
       <div class="section">
-        <h2>Editörler İçin</h2>
-        <ul class="grid">
+        <h2>Diğer Servislerimiz</h2>
+        <ul class="grid grid-linear">
           <li class="element hover">
-            <a href="https://anket.iflpanel.com">
-              <h3 class="with-explanation">iflpanel Anket</h3>
-              <p class="explanation">Topluluğunuz için anketler oluşturun ve veri toplayın</p>
+            <a href="https://kutuphane.iflpanel.com">
+              <h3 class="with-explanation">İFL Kütüphane</h3>
+              <p class="explanation">Kitaplar ve ders notları</p>
             </a>
           </li>
 
           <li class="element hover">
-            <a href="https://wiki.iflpanel.com">
-              <h3 class="with-explanation">Wiki</h3>
-              <p class="explanation">Servislerin kullanımı ile ilgili detaylar için wiki</p>
+            <a href="https://wiki.iflpanel.com/shelves/iflpanel-kullanimi">
+              <h3 class="with-explanation">Dokümantasyon</h3>
+              <p class="explanation">Site kullanım rehberi</p>
+            </a>
+          </li>
+
+          <li class="element hover">
+            <a href="https://tahta.iflpanel.com">
+              <h3 class="with-explanation">Akıllı Tahta Arkaplanı</h3>
+              <p class="explanation">Sınıflar için işlevsel arkaplan</p>
             </a>
           </li>
 
           <li class="element hover">
             <a href="https://l.iflpanel.com">
               <h3 class="with-explanation">Link Kısaltıcı</h3>
-              <p class="explanation">Hadi şu linki kısaltalım!</p>
+              <p class="explanation">Link Kısaltıcı</p>
             </a>
           </li>
         </ul>
-
-
       </div>
-
-      <!-- GELISTIRME SURECINDE
-      <div class="section">
-        <h2>Geliştirme Sürecinde 🔧</h2>
-        <ul class="grid grid2x2">
-          <li class="element">
-            <p>iflpanel Haberler</p>
-          </li>
-
-          <li class="element">
-            <p>Pansiyon Yönetim Servisi</p>
-          </li>
-
-          <li class="element">
-            <p>Telefon Uygulaması</p>
-          </li>
-
-          <li class="element">
-            <p>iflpanel <em>Social</em> (Sosyal Medya/Forum)</p>
-          </li>
-        </ul>
-        <div class="note"><span class="symbol">👉🏼</span> <a
-            href="https://anket.iflpanel.com/?r=iflpanel-meta-1">Ankete katılarak</a> uygulama isteğinde
-          bulunabilirsiniz!</div>
-      </div> -->
     </article>
 
     <footer>
-      <!-- <div>Giderlerimizi karşılamamızda yardımcı olmak için <a href="bagis.html">bağış</a> yapmayı düşünebilirsiniz</div> -->
       <div class="copyright" style="text-align: center;">2023 © <a href="https://asandikci.com/">Aliberk
-          Sandıkçı</a><br><sup>İzmir Fen Lisesi 24 dönemi öğrencisi</sup></div>
+          Sandıkçı</a><br><sup>İzmir Fen Lisesi 24 dönemi öğrencisi</sup><br>*site içindeki veriler bizzat İzmir Fen
+        Lisesi'ni ilgilendirmemektedir.</div>
     </footer>
   </div>
 </body>