From d805cf7da6da720d97ff1e6e49dd9b8d1f66381a Mon Sep 17 00:00:00 2001 From: Mastan Sayyad Date: Sat, 22 Jun 2024 06:37:06 +0530 Subject: [PATCH 01/23] Added Progress bar --- index.html | 2327 +++++++++++++++++++++++++++------------------------- 1 file changed, 1225 insertions(+), 1102 deletions(-) diff --git a/index.html b/index.html index c12f88eb..5f0bdd04 100644 --- a/index.html +++ b/index.html @@ -6,17 +6,17 @@ - - - + + + - + @@ -27,8 +27,8 @@ href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet"> - - + + @@ -39,389 +39,444 @@ - + - - - - - - - - - - - - + + /*Preloader CSS*/ + .pre { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + transition: opacity 2s ease-out, visibility 2s ease-out; + opacity: 1; + visibility: visible; + z-index: 9999; + } + + .pre--hidden { + opacity: 0; + visibility: hidden; + } + + .loader { + display: block; + position: relative; + width: 150px; + height: 150px; + border-radius: 50%; + border: 3px solid transparent; + border-top-color: #55a5ea; + animation: spin 3s linear infinite; + } + + .loader:before { + content: ""; + position: absolute; + top: 5px; + left: 5px; + right: 5px; + bottom: 5px; + border-radius: 50%; + border: 3px solid transparent; + border-top-color: #3fbcc0c6; + animation: spin 3s linear infinite; + } + + .loader:after { + content: ""; + position: absolute; + top: 15px; + left: 15px; + right: 15px; + bottom: 15px; + border-radius: 50%; + border: 3px solid transparent; + border-top-color: #fff; + animation: spin 1.5s linear infinite; + } + + @keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } + } + + .avatar { + margin: 20px 100px; + } + + .textbox input { + width: 200px; + height: 40px; + } + + .btn { + margin-left: 50px; + width: 240px; + height: 40px; + background-color: #00C896; + border: none; + font-size: 1rem; + border-radius: 20px; + margin-bottom: 20px; + } + + #appointment.appointment.section-bg { + margin: 0px 280px 100px; + } + + #appointment.appointment.section-bg h2 { + margin: 0px 115px; + } + + form.php-email-form { + width: 300px; + margin-right: 250px; + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-content: flex-start + } + + .loader--hidden { + opacity: 0; + visibility: hidden; + } + + + + + + + + + + +
+
- -
-
- -
- -
+ +
+
+ +
+ +