Improve interestSelection styles

sidarragac · Nov 7, 2024 · 38a9567 · 38a9567
1 parent 5f3176f
commit 38a9567
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 37 deletions.
diff --git a/accounts/static/styles/interestSelection.css b/accounts/static/styles/interestSelection.css
@@ -15,22 +15,46 @@ header {
     justify-content: center;
     align-items: center;
     min-height: 100vh;
-    padding: 0 20px 0 20px;
-}
-.row{
-  width:  900px;
-  height:550px;
-  border-radius: 35px;
-  background: #fff;
-  padding: 0px;
-  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
 }
+
 .content{
     display: flex;
-    justify-content: center;
     align-items: center;
     flex-direction: column;
-    width: 50%;
+    width: 45%;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 20px;
+    height: auto;
+    margin: 100px auto;
+}
+
+.titleContainer{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #1B263B;
+    border-radius: 20px 20px 0px 0px;
+    text-align: center;
+}
+
+.titleContainer h1{
+    color: #fff;
+    margin: 50px 0px;
+    font-weight: 600;
+    width: 90%;
+}
+
+.description{
+    width: 100%;
+    margin: 0px auto 50px auto;
+    text-align: center;
+}
+
+.description h6 {
+    color: #40414a;
+    font-weight: 300;
+    font-size: 16px;
 }
 
 .form-select {
@@ -44,12 +68,15 @@ header {
     color: #40414a;
 }
 
-i{
-    font-weight: 400;
-    font-size: 15px;
-}
 .input-box{
-  position: relative;
+    position: relative;
+    margin: 50px auto;
+    width: 80%;
+    height: 70%;
+}
+
+.interestLabel{
+    font-weight: 500;
 }
 
 .input-field{
@@ -104,15 +131,28 @@ i{
     background: #ececec;
     border-radius: 5px;
     transition: .4s;
+    width: 50%;
+    margin: 0 auto;
  }
  .submit:hover{
     background: rgba(37, 95, 156, 0.937);
     color: #fff;
  }
 
-@media only screen and (max-width: 768px){
-    .row{
-        max-width:420px;
-        width: 100%;
+@media (max-width: 1200px){
+    .content{
+        width: 60%;
+    }
+}
+
+@media (max-width: 992px){
+    .content{
+        width: 70%;
+    }
+}
+
+@media (max-width: 568px){
+    .content{
+        width: 90%;
     }
 }
diff --git a/accounts/templates/interestSelection.html b/accounts/templates/interestSelection.html
@@ -13,43 +13,55 @@
 </head>
 <body>
     {% block content %}
-    <div class="container main">
-        <div class="row">
-            <div class="content">
-                <header>Select Interests</header>
-                <div class="input-box">
-                    <form action="{% url 'interestSelection' %}" method="POST">
-                        {% csrf_token %}
-                        <!-- First interest -->
+    <div class="main">
+        <div class="content">
+            <div class="titleContainer">
+                <h1>Select Your Interests</h1>
+            </div>
+            <div class="input-box">
+                <form action="{% url 'interestSelection' %}" method="POST">
+                    {% csrf_token %}
+                    <div class="description">
+                        <h6>Select up to 3 interests that will be used to recommend community’s roadmaps. You can always change them or set the up later in your profile.</h6>
+                    </div>
+                    <!-- First interest -->
+                     <div>
+                        <label for="interest1" class="interestLabel">Interest 1</label>
                         <select name="interest1" class="form-select">
                             <option value=""></option>
                             {% for interest in interests %}
                                 <option value="{{ interest.id }}">{{ interest.name }}</option>
                             {% endfor %}
                         </select>
-                        <!-- Second interest -->
+                    </div>
+                    <!-- Second interest -->
+                    <div>
+                        <label for="interest2" class="interestLabel">Interest 2</label>
                         <select name="interest2" class="form-select">
                             <option value=""></option>
                             {% for interest in interests %}
                                 <option value="{{ interest.id }}">{{ interest.name }}</option>
                             {% endfor %}
                         </select>
-                        <!-- Third interest -->
+                    </div>
+                    <!-- Third interest -->
+                    <div>
+                        <label for="interest3" class="interestLabel">Interest 3</label>
                         <select name="interest3" class="form-select">
                             <option value=""></option>
                             {% for interest in interests %}
                                 <option value="{{ interest.id }}">{{ interest.name }}</option>
                             {% endfor %}
                         </select>
-                        <div class="input-field">
-                            <div class="button">
-                                <div class="input-field">
-                                    <input type="submit" class="submit" value="Done">
-                                </div>
+                    </div>
+                    <div class="input-field">
+                        <div class="button">
+                            <div class="input-field">
+                                <input type="submit" class="submit" value="Done">
                             </div>
                         </div>
-                    </form>
-                </div>
+                    </div>
+                </form>
             </div>
         </div>
     </div>