Update of Front Page

-The Front page was change to display information about the app on What it does , How it does it and the main reason why we think
Miguel-202 · Sep 17, 2023 · c9d5107 · c9d5107
1 parent 0d9c5a7
commit c9d5107
Show file tree

Hide file tree

Showing 12 changed files with 120 additions and 19 deletions.
diff --git a/static/css/frontpage.css → static/css/frontpage3.css b/static/css/frontpage.css → static/css/frontpage3.css
@@ -12,9 +12,9 @@
     }
 
     .content h1 {
-        font-size: 15vw;
+        font-size: 10vw;
         color:white;
-        font-weight: 50;
+        font-weight: 10;
         transition: 0.6s;
         font-weight: 900;
     }
@@ -39,8 +39,8 @@
 
         display: inline-block;
         text-decoration: none;
-        color: white;
-        border: 4px solid white;
+        color: #9c7cf4;
+        border: 4px solid #9c7cf4;
         padding: 12px 34px;
         font-size: 25px;
         background: transparent;
@@ -67,7 +67,7 @@
     }
 
     li a {
-      color: white;
+      color: #9c7cf4;
       text-decoration: none;
       position: relative;
       left: 30px;
@@ -77,14 +77,14 @@
     }
 
     .hero-btn:hover{
-        border: 1px solid white ;
-        background: white;
+        border: 1px solid#9c7cf4 ;
+        background: #9c7cf4;
         transition: 1s;
     }
 
     .hero {
         position: relative;
-        height: 80vh;
+        height: 70vh;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -129,7 +129,7 @@
 
       .nav-menu li a {
         text-decoration: none;
-        color: white;
+        color: #9c7cf4;
         font-size: 20px;
 
       }
@@ -154,14 +154,14 @@
 
       h1 {
         font-size: 5rem;
-        color: white;
+        color: #9c7cf4;
         margin-bottom: 30px;
       }
 
       .hero-btn {
         display: inline-block;
-        background-color: white;
-        color: black;
+        background-color: #9c7cf4;
+        color: white;
         padding: 10px 30px;
         border-radius: 50px;
         text-decoration: none;
@@ -177,6 +177,7 @@
         text-align: center;
         padding-top: 20px ;
         background:white;
+        border: black;
         }
 
         h1{
@@ -191,4 +192,69 @@
             font-size: 20px;
             padding: 10px;
             padding-bottom: 30px;
-        }
+        }
+
+
+
+        /*What*/
+        .image-container-ChatRespond {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 40vh;
+            padding-bottom: 20px;
+
+        }
+
+        .image-container-ChatRespond img {
+            max-width: 50%; /* Adjust the size as needed */
+            height: auto;
+        }
+
+
+        /*How*/
+
+        .image-container-ChatRespond2 {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          margin: 0;
+          padding: 0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          min-height: 40vh;
+
+      }
+
+      .image-container-ChatRespond2 img {
+          max-width: 10%; /* Adjust the size as needed */
+          height: auto;
+      }
+
+
+      .image-container-ChatRespond3 {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        margin: 0;
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 40vh;
+
+    }
+
+    .image-container-ChatRespond3 img {
+        max-width: 80%; /* Adjust the size as needed */
+        height: auto;
+    }
diff --git a/static/images/CarePathMate.jpeg b/static/images/CarePathMate.jpeg
diff --git a/static/images/CareerPath.jpeg b/static/images/CareerPath.jpeg
diff --git a/static/images/Graph.png b/static/images/Graph.png
diff --git a/static/images/LearnPython.jpeg b/static/images/LearnPython.jpeg
diff --git a/static/images/Mindsdb.png b/static/images/Mindsdb.png
diff --git a/static/images/Python-logo-notext.svg.png b/static/images/Python-logo-notext.svg.png
diff --git a/static/images/Screenshot 2023-09-17 071405.png b/static/images/Screenshot 2023-09-17 071405.png
diff --git a/static/images/What.jpeg b/static/images/What.jpeg
diff --git a/static/images/django-logo-positive.png b/static/images/django-logo-positive.png
diff --git a/static/images/prompt.png b/static/images/prompt.png
diff --git a/templates/accounts/frontpage.html b/templates/accounts/frontpage.html
@@ -14,14 +14,12 @@
         <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
         <link href="https://fonts.googleapis.com/css2?family=Anybody&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="{% static 'css/frontpage.css' %}" />
+        <link rel="stylesheet" href="{% static 'css/frontpage3.css' %}" />
     </head>
     <body>
 
         <section>
             <ul>
-                <li><a href="{% url 'accounts:signin' %}">Sign In</a></li>
-                <li><a href="{% url 'accounts:signup' %}">Sign Up</a></li>
 
               </ul>
               <div class="hero">
@@ -30,15 +28,52 @@
                 </video>
                   <div class="content">
                   <h1>Path Mate</h1>
-                  <a href="#" class="hero-btn"></a>
+                  <a href="{% url 'accounts:signin' %}" class="hero-btn">Sign In</a>
+                  <a href="{% url 'accounts:signup' %}" class="hero-btn">Sign Up</a>
                 </div>
               </div>
         </section>
 
         <section class="pilars">
-            <h1>Where your dreams find a date on your calendar</h1>
-            <p>Your AI-driven personal goal planner, turning aspirations into actionable steps.</p>
+            <h1>AI-driven calender generetor</h1>
+            <p>Your AI-driven personal goal planner,turning aspirations into actionable steps.</p>
         </section>
+
+        <div class="image-container-ChatRespond">
+            <img src="{% static 'images/What.jpeg' %}" alt="prompt">
+            <img src="{% static 'images/LearnPython.jpeg' %}" alt="CHATGPTrespond">
+        </div>
+
+        <section style="background-color: whitesmoke;"  class="pilars">
+            <h2 ><br><br>  "Path Mate guides you to your dream internship or job by mapping out a strategic career path on your calendar <br><br><br><br></h2>
+        </section>
+
+        <div class="image-container-ChatRespond">
+            <img src="{% static 'images/CareerPath.jpeg' %}" alt="prompt">
+            <img src="{% static 'images/CarePathMate.jpeg' %}" alt="CHATGPTrespond">
+        </div>
+
+        <section   class="pilars">
+            <h1>Built With</h1>
+            <p>Path Mate was meticulously crafted using cutting-edge technologies, including Python, Django, and MindsDB, ensuring a robust and intelligent platform</p>
+        </section>
+
+        <div class="image-container-ChatRespond2">
+            <img src="{% static 'images/Python-logo-notext.svg.png' %}" alt="prompt">
+            <img src="{% static 'images/django-logo-positive.png' %}" alt="CHATGPTrespond">
+            <img src="{% static 'images/Mindsdb.png' %}" alt="CHATGPTrespond">
+        </div>
+
+        <div class="image-container-ChatRespond3">
+            <img src="{% static 'images/Screenshot 2023-09-17 071405.png' %}" alt="prompt">
+        </div>
+
+        <section  style="background-color: whitesmoke;" class="pilars">
+            <h1>Why we Build it ?</h1>
+            <p>International students face added barriers in life after college</p>
+            <img src="{% static 'images/Graph.png' %}" alt="CHATGPTrespond">
+        </section>
+