Complete Add Mission section

saziddeveloper · May 6, 2024 · 9d17957 · 9d17957
1 parent 5a905a3
commit 9d17957
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -30,8 +30,25 @@ <h1 id="headerTitle2" class="headerTitle">Mission 2024</h1>
             <img src="images/person/person-1.png" alt="PERSON">
         </div>
     </header>
-    <section>
-
+    <section id="section-1">
+        <h1>My Mission in <span id="headerYear">2022</span></h1>
+        <div id="myMission">
+            <div class="missionSubSection" id="missionSubSection1">
+                <img src="images/illustrators/illustrator-1.png" alt="ILLUSTRATOR-1">
+                <h4 class="missionTitle">Mission</h4>
+                <p class="missionDetails">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
+            </div>
+            <div class="missionSubSection" id="missionSubSection1">
+                <img src="images/illustrators/illustrator-2.png" alt="ILLUSTRATOR-1">
+                <h4 class="missionTitle">Vission</h4>
+                <p class="missionDetails">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
+            </div>
+            <div class="missionSubSection">
+                <img src="images/illustrators/illustrator-3.png" alt="ILLUSTRATOR-1">
+                <h4 class="missionTitle">Goals</h4>
+                <p class="missionDetails">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
+            </div>
+        </div>
     </section>
 </body>
 </html>
diff --git a/style/style.css b/style/style.css
@@ -49,6 +49,47 @@
         Start CSS of section-1
  -------------------------------------*/
 
-
+#section-1 h1 {
+    font-size: 48px;
+    font-weight: 700;
+    font-family: Poppins;
+    text-align: center;
+    color: #13103A;
+}
+#section-1 h1 span {
+    color: #FFAD5A;
+}
+#myMission {
+    padding: 0 100px;
+    display: flex;
+}
+# myMission h1 {
+    display: none;
+}
+.missionSubSection {
+    width: 100%;
+    background-color: #4F9DA6;
+    border-radius: 20px;
+    padding: 20px 32px 40px 28px;
+}
+.missionSubSection  img {
+    margin-left: -20px;
+}
+#missionSubSection1 {
+    margin-right: 25px;
+}
+.missionSubSection img {
+    width: 140px;
+}
+.missionTitle {
+    font-size: 24px;
+    font-family: Poppins;
+    font-weight: 600;
+}
+.missionDetails {
+    font-size: 16px;
+    font-family: Poppins;
+    color: #424242;
+}
 
  /* End CSS of section-1 */