Last home page edits

Signed-off-by: Swastik Sharma <[email protected]>
swastkk · May 27, 2023 · 2dce824 · 2dce824
1 parent 8a49197
commit 2dce824
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 26 deletions.
diff --git a/db.sqlite3 b/db.sqlite3
diff --git a/static/css/home.css b/static/css/home.css
@@ -1732,3 +1732,106 @@ body {
   }
 }
 
+
+.square {
+    position: relative;
+    margin: 0 10px;
+    width: 400px; height: 400px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    }
+
+    .square .one {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border: 2px solid rgb(255, 255, 255);
+    border-radius: 32% 58% 69% 43% / 48% 32% 59% 55%;
+    transition: 0.5s;
+    animation: animate 6s linear infinite;
+
+    }
+
+    .twitch:hover .one {
+    border: none;
+    background:#347d39;
+    }
+
+    .square .two {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 2px solid rgb(255, 255, 255);
+    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
+    transition: 0.5s;
+    animation: animate 6s linear infinite;
+    }
+
+    .twitch:hover .two {
+    border: none;
+    background:#1f6feb;
+
+    }
+
+
+
+
+    .square .three {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 2px solid rgb(225, 225, 225);
+    border-radius: 31% 45% 74% 35% / 38% 56% 51% 37%;
+    transition: 0.5s;
+    animation: animate2 10s linear infinite;
+    }
+    .twitch:hover .three {
+    border: none;
+    background:#ec8e2c;
+    }
+
+    .circle {
+    position: relative;
+    padding: 40px 60px;
+    text-align: center;
+    transition: 0.5s;
+    z-index: 1000;
+    }
+
+    .square:hover{
+    color: white;
+    }
+
+    .content:hover {
+
+    color: #ffffff;
+    }
+
+    @keyframes animate {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    @keyframes animate2 {
+        0% {
+            transform: rotate(360deg);
+        }
+        100% {
+            transform: rotate(0deg);
+        }
+
+    }
+
+    .page1title{
+        font-size: 70px;
+    }
+
diff --git a/static_root/css/home.css b/static_root/css/home.css
@@ -14,9 +14,7 @@
 
   }
 
-  .container{
-    padding: 2rem 0rem;
-  }
+
 
  /* navbar */
 
@@ -185,12 +183,7 @@ picture {
     min-width: min-content;
   }
 
-  .container {
-    display: flex;
-    padding: 3rem 3rem;
-    justify-content: center;
-    max-width: 760px;
-  }
+
    .aboutFeature {
     flex: 0 1 760px;
     padding: 3rem 3rem;
@@ -392,11 +385,6 @@ picture {
       font-size: 16px;
     }
 
-    .container {
-      width: 100%;
-      padding-left: 6vw;
-      padding-right: 6vw;
-    }
 
     .miniReview {
       flex-grow: 1;

diff --git a/templates/home.html b/templates/home.html
@@ -39,18 +39,19 @@
             <div class="bgImage fog"></div>
 
             <div class="bgImage noise"></div>
-
-         <div class="bgImage heroContent " >
-            <img src="{% static 'logo.webp'%}" alt="">
-           <h1>eduBOT </h1>
-                <em>Study Anywhere & Anytime</em>
-             <div class="bottons"></div>
-                <a class="button btn-juicy" href="/bookbuddy">Book Buddy </a>
-                <a class="button btn-juicy" href="/youtubeplus">Youtube Plus+ </a>
-                <a class="button btn-juicy" href="/learnit">Learn it </a>
-             </div>
-
-        </div>
+            <div class="container">
+              <div class="content">
+                  <div class="square twitch" style="margin-bottom: 50px;">
+                      <span class="one" ></span>
+                      <span class="two"></span>
+                      <span class="three"></span>
+                      <div class="circle">
+                          <img src="{% static 'logo.webp'%}" alt="">
+                          <h2 class="page1title"> eduBOT</h2>
+                          <p>One Stop Solution for all learning problems.</p>
+                      </div>
+                  </div>
+                </div>
   </section>
   <div class="container">
     <div class="card" style="width: 23.5rem; margin-right: 40px;">