first updateeee let's gooo

nxpinhum5326 · Aug 15, 2024 · a2ee3aa · a2ee3aa
1 parent 82b1bd0
commit a2ee3aa
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 33 deletions.
diff --git a/audios/zebani_come.mp3 b/audios/zebani_come.mp3
diff --git a/index.html b/index.html
@@ -1,33 +1,31 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-
-<title>callZebani</title>
-
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-<link href="assets/css/main.css" rel="stylesheet" />
-<link rel="shortcut icon" href="assets/images/" />
-<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
-<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
-</head>
-
-<body>
-
-  <ul>
-    <li>
-      <span id="theme-toggle">
-        <i id="sun-icon" class="fa-sharp fa-solid fa-sun" style="color: white"></i>
-        <i id="moon-icon" class="fa-solid fa-moon"></i>
-      </span>
-    </li>
-  </ul>
-
-  <p>Text</p>
-
-  <script src="assets/javascript/toggle.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script
-</body>
-
-</html>
+<!DOCTYPE html>
+<html lang="tr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>callZebani</title>
+    <link rel="stylesheet" href="style/main.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Zebani Çağırmak İçin Tıkla!</h1>
+        <img id="zebani-image" src="style/images/sembol.png" alt="Zebani" onclick="callZebani()">
+        <audio id="zebani-sound" src="audios/zebani_come.mp3"></audio>
+    </div>
+
+    <footer>
+        <div class="footer-container">
+            <div class="footer-center">
+                <div>
+                    <i class="fa fa-map-marker"></i>
+                    <h3>geyik amaçlıdır :p</h3>
+                <p class="footer-lmao-part">© 2024 callZebani. Tüm Hakları Saklıdır.</p>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
+    <script src="style/main.js"></script>
+</body>
+</html>
diff --git a/style/images/sembol.png b/style/images/sembol.png
diff --git a/style/images/zebani.jpg b/style/images/zebani.jpg
diff --git a/style/main.css b/style/main.css
@@ -0,0 +1,103 @@
+html, body{
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    font-family: Arial, sans-serif;
+}
+
+body{
+    display: flex;
+    flex-direction: column;
+    background-color: #282c34;
+}
+
+.container{
+    text-align: center;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+img{
+    cursor: pointer;
+    max-width: 60%;
+    height: auto;
+    transition: transform 0.3s ease;
+}
+
+img:hover{
+    transform: scale(1.05);
+}
+
+.shake{
+    animation: shake 0.5s;
+    animation-iteration-count: infinite;
+}
+
+@keyframes shake{
+    0%{ transform: translate(1px, 1px) rotate(0deg); }
+    10%{ transform: translate(-1px, -2px) rotate(-1deg); }
+    20%{ transform: translate(-3px, 0px) rotate(1deg); }
+    30%{ transform: translate(3px, 2px) rotate(0deg); }
+    40%{ transform: translate(1px, -1px) rotate(1deg); }
+    50%{ transform: translate(-1px, 2px) rotate(-1deg); }
+    60%{ transform: translate(-3px, 1px) rotate(0deg); }
+    70%{ transform: translate(3px, 1px) rotate(-1deg); }
+    80%{ transform: translate(-1px, -1px) rotate(1deg); }
+    90%{ transform: translate(1px, 2px) rotate(0deg); }
+    100%{ transform: translate(1px, -2px) rotate(-1deg); }
+}
+
+footer{
+    background-color: #282c34;
+    color: white;
+    padding: 40px 0;
+    text-align: center;
+    font-family: Arial, sans-serif;
+}
+
+.footer-container{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.footer-center{
+    flex: 1;
+    margin: 20px;
+}
+
+.footer-lmao-part{
+    margin-top: 10px;
+    font-size: 14px;
+    color: #aaaaaa;
+}
+
+.footer-center i{
+    background-color: #33383b;
+    color: white;
+    font-size: 25px;
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 38px;
+    margin: 10px 15px;
+}
+
+.footer-center p{
+    display: inline-block;
+    color: #ffffff;
+    vertical-align: middle;
+    margin: 0;
+}
+
+.footer-center p span{
+    display: block;
+    font-weight: bold;
+    font-size: 14px;
+}
diff --git a/style/main.js b/style/main.js
@@ -0,0 +1,8 @@
+function callZebani(){
+    const sound = document.getElementById('zebani-sound');
+    sound.play();
+
+    const image = document.getElementById('zebani-image');
+    image.src = 'style/images/zebani.jpg';
+    image.classList.add('shake');
+}