changed layout on homepage #4

virtUOS · Nov 5, 2022 · a6bee0a · a6bee0a
1 parent 0388f63
commit a6bee0a
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 17 deletions.
diff --git a/learning_environment/static/learning_environment/ipaca.css b/learning_environment/static/learning_environment/ipaca.css
@@ -115,8 +115,24 @@ body {
 }
 
 
-
-
+h1 {
+    font-size: 72px;
+    font-weight: bold;
+    line-height:0.8;
+    background: linear-gradient(111.7deg, #FF6E7F 13.82%, #1C009C 90.68%, #BFE9FF 164.4%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-top:15vh;
+}
+
+h1-var {
+    font-size: 72px;
+    font-weight: bold;
+    line-height:0.8;
+    background: linear-gradient(107.34deg, #FF6E7F -20.29%, #1C009C 42.26%, #BFE9FF 102.26%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
 textarea {
     font-family: Consolas, Monaco, "Bitstream Vera Sans Mono", "Lucida Console", monospace;
 }

diff --git a/learning_environment/templates/learning_environment/home.html b/learning_environment/templates/learning_environment/home.html
@@ -5,31 +5,31 @@
 
     <div class="row justify-content-evenly">
             {# space for left side content #}
-        <div class="col-5"style="; margin-left:50px;">
+        <div class="col-5"style="margin-left:50px;">
             <img src="/static/img/logo.svg" class="img-fluid" alt="Responsive image">
-             <div class="row-fluid" align="center" >
+
+             <div class="row-fluid">
                {# <div class="col-4" style="border:1px solid rebeccapurple"> LEARN </div>#}
-             <h1> LEARN ENGLISH </h1>
+                 <span><h1> LEARN</h1>
+                     <h1-var>ENGLISH</h1-var></span>
 
-            <div class="align-middle"">
-                <div class="d-flex justify-content-center">
-                    <div class="d-flex flex-column">
-                    <h1 class="text align-self-center p-2">item 1</h1>
-                    <p class="text align-self-center p-2">Are you struggling to improve your academic English skills?  iPaca is here to help! With our carefully selected little tasks, you will be able to hone your skills and build confidence in your reading.</p>
+                    <div class="d-flex justify-content-center">
+                        <div class="d-flex flex-column">
+                        <p class="text align-self-center p-5" style="padding:48px; font-size: 16px;">Are you struggling to improve your academic English skills?  iPaca is here to help! With our carefully selected little tasks, you will be able to hone your skills and build confidence in your reading.</p>
+                        </div>
                     </div>
+
+                <div class="d-flex justify-content-start">
+                    <a class="btn btn-primary" href="{% url 'signup' %}">START</a>
+                    <a class="btn continue-btn" href="{% url 'login' %}">CONTINUE</a>
                 </div>
-            </div>
 
-            <div class="d-flex justify-content-start">
-                <a class="btn btn-primary" href="{% url 'signup' %}">START</a>
-                <a class="btn continue-btn" href="{% url 'login' %}">CONTINUE</a>
             </div>
-             </div>
         </div>
 
-        <div class="col-6">
+        <div class="col-6 vh-100">
                 {# space for right side content #}
-             <img src="/static/img/home_background_img.svg" class="img-fluid" alt="Responsive image">
+             <img src="/static/img/home_background_img.svg" class="img-fluid">
         </div>
     </div>
 {% endblock %}