End Project

parsfront · Jul 16, 2022 · 382dc56 · 382dc56
1 parent ef4c2c4
commit 382dc56
Show file tree

Hide file tree

Showing 16 changed files with 174 additions and 0 deletions.
diff --git a/fonts/isans.eot b/fonts/isans.eot
diff --git a/fonts/isans.ttf b/fonts/isans.ttf
diff --git a/fonts/isans.woff b/fonts/isans.woff
diff --git a/fonts/isans.woff2 b/fonts/isans.woff2
diff --git a/fonts/vazir-Black.eot b/fonts/vazir-Black.eot
diff --git a/fonts/vazir-Black.ttf b/fonts/vazir-Black.ttf
diff --git a/fonts/vazir-Black.woff b/fonts/vazir-Black.woff
diff --git a/fonts/vazir-Black.woff2 b/fonts/vazir-Black.woff2
diff --git a/fonts/vazir.eot b/fonts/vazir.eot
diff --git a/fonts/vazir.ttf b/fonts/vazir.ttf
diff --git a/fonts/vazir.woff b/fonts/vazir.woff
diff --git a/fonts/vazir.woff2 b/fonts/vazir.woff2
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./styles/style.css">
+    <title>Js Project</title>
+</head>
+
+<body>
+
+
+    <div class="search-icon">
+        <i class="fas fa-search search-btn"></i>
+    </div>
+
+    <div class="search-overlay"></div>
+
+    <div class="search-popup">
+        <form class="search-form">
+            <div class="form-group">
+                <input type="text" class="form-control" placeholder="جستجو کنید">
+                <button class="submit-btn"><i class="fas fa-search"></i></button>
+            </div>
+        </form>
+    </div>
+
+    <script src="./js/all.min.js"></script>
+    <script src="./js/script.js"></script>
+</body>
+
+</html>
diff --git a/js/all.min.js b/js/all.min.js
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,13 @@
+const btn = document.querySelector(".search-icon");
+const overlay = document.querySelector(".search-overlay");
+const popup = document.querySelector(".search-popup");
+
+btn.addEventListener("click", function () {
+    overlay.classList.add("active");
+    popup.classList.add("active");
+});
+
+overlay.addEventListener("click", function () {
+    overlay.classList.remove("active");
+    popup.classList.remove("active");
+});
diff --git a/styles/style.css b/styles/style.css
@@ -0,0 +1,123 @@
+@font-face {
+    font-family: "vazir";
+    src: url("../fonts/vazir.eot") format("eot"), url("../fonts/vazir.ttf") format("truetype"), url("../fonts/vazir.woff") format("woff"), url("../fonts/vazir.woff2") format("woff2");
+}
+
+* {
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    font-family: "vazir";
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.search-icon {
+    background: #ff0071;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    -ms-border-radius: 50%;
+    -o-border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.search-icon svg {
+    color: #fff;
+    font-size: 25px;
+}
+
+.search-overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: #000;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease-in-out;
+    -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+    -ms-transition: all 0.3s ease-in-out;
+    -o-transition: all 0.3s ease-in-out;
+}
+
+.search-overlay.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+.search-popup {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    -o-transform: translate(-50%, -50%);
+    width: 600px;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease-in-out;
+    -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+    -ms-transition: all 0.3s ease-in-out;
+    -o-transition: all 0.3s ease-in-out;
+}
+
+.search-popup.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+.search-popup .form-group {
+    width: 100%;
+    position: relative;
+}
+
+.search-popup .form-group input {
+    width: 100%;
+    height: 60px;
+    border: none;
+    font-family: "vazir";
+    outline: none;
+    font-size: 18px;
+    border-radius: 30px;
+    -webkit-border-radius: 30px;
+    -moz-border-radius: 30px;
+    -ms-border-radius: 30px;
+    -o-border-radius: 30px;
+    padding: 0 20px 0 90px;
+    box-sizing: border-box;
+}
+
+.search-popup .form-group .submit-btn {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 70px;
+    height: 60px;
+    background: #ff0071;
+    border: none;
+    color: #fff;
+    font-size: 18px;
+    border-radius: 30px 0 0 30px;
+    -webkit-border-radius: 30px 0 0 30px;
+    -moz-border-radius: 30px 0 0 30px;
+    -ms-border-radius: 30px 0 0 30px;
+    -o-border-radius: 30px 0 0 30px;
+    cursor: pointer;
+}