fikrcamp · AbdilahiMohamed · Nov 3, 2022
diff --git a/about.html b/about.html
@@ -4,10 +4,120 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>About page</title>
+    <title>AboutUS</title>
+    <link rel="icon" type="image/x-icon" href="/images/favicon.png" />
     <link rel="stylesheet" href="style/style.css" />
   </head>
   <body>
-    <!-- start here -->
+    <main>
+      <nav>
+        <div class="logo">
+          <img src="/images/logo_transparent.png" alt="website logo" />
+        </div>
+
+        <div class="navigation">
+          <ul>
+            <li><a href="/home.html">Home</a></li>
+            <li><a href="/about.html">About Us</a></li>
+            <li><a href="/sign up.html" class="signUp">Sign Up</a></li>
+          </ul>
+        </div>
+      </nav>
+    </main>
+
+    <h1 class="aboutUStxt">About US</h1>
+    <section class="about">
+      <div class="aboutMAIN">
+        <h4 class="mTITLE">What We do</h4>
+        <p>
+          When we saw where we stand in terms of technology knowledge, we
+          decided to create a bootcamp whose first goal is to change the
+          perspective, and the level of knowledge, so the coder bootcamp is the
+          solution, join us and we will teach you all aspects of technology such
+          as building websites, web applications, computer and mobile software,
+          and various other areas, the second is making boot teams to make
+          strong communication between students and to get the chance for
+          sharign ideas and sources, training the brain of developers and
+          building someone who thinking like developer is our goal...
+        </p>
+      </div>
+
+      <div class="aboutpicture">
+        <img src="/images/about-us.png" alt="about us image" />
+      </div>
+    </section>
+
+    <section class="miss_vision">
+      <div class="mission">
+        <h4 class="VMtitles">MISSION</h4>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora vel,
+          illo corrupti repellat quisquam id eaque earum, repudiandae aliquid
+          odit mollitia quas tempore optio, asperiores laudantium eos nisi?
+          Possimus facere adipisci provident nulla magnam delectus hic nesciunt
+          laborum vitae odit.
+        </p>
+      </div>
+
+      <div class="vision">
+        <h4 class="VMtitles">VISION</h4>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
+          consequuntur unde tenetur excepturi maiores doloremque, voluptate
+          reprehenderit dicta voluptatum omnis architecto. Molestias consectetur
+          saepe hic corrupti ab distinctio eveniet ducimus ipsum. Excepturi
+          quidem totam doloribus possimus cupiditate officiis cumque! Molestias.
+        </p>
+      </div>
+    </section>
+
+    <section class="coder">
+      <p class="codertxt">What you are waiting FOR</p>
+
+      <p class="join">JOIN US</p>
+    </section>
+
+    <section class="Sfooter">
+      <footer>
+        <div class="footerlogo">
+          <img
+            style="width: 8rem; object-fit: cover; cursor: pointer"
+            src="/images/logo_transparent.png"
+            alt="website logo"
+          />
+        </div>
+
+        <div>
+          <p
+            style="
+              color: black;
+              font-size: 1rem;
+              font-weight: bold;
+              font-family: 'Courier New', Courier, monospace;
+            "
+          >
+            &#169;Coder|Abdilhai_mohamed| All Rights reserfed
+          </p>
+        </div>
+
+        <div class="social">
+          <a href="#">
+            <img src="/images/facebook.png" alt="facebook logo" />
+          </a>
+
+          <a href="#">
+            <img src="/images/twitter.png" alt="twitter logo" />
+          </a>
+
+          <a href="#">
+            <img src="/images/github-sign.png" alt="github logo" />
+          </a>
+
+          <a href="#">
+            <img src="/images/linkedin.png" alt="linkedin logo" />
+          </a>
+        </div>
+      </footer>
+    </section>
   </body>
 </html>
diff --git a/home.html b/home.html
@@ -4,10 +4,240 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <title>Home</title>
+    <link rel="icon" type="image/x-icon" href="/images/favicon.png" />
     <link rel="stylesheet" href="style/style.css" />
   </head>
   <body>
-    <!-- start here -->
+    <main>
+      <nav>
+        <div class="logo">
+          <img src="/images/logo_transparent.png" alt="website logo" />
+        </div>
+
+        <div class="navigation">
+          <ul>
+            <li><a href="/home.html">Home</a></li>
+            <li><a href="/about.html">About Us</a></li>
+            <li><a href="/sign up.html" class="signUp">Sign Up</a></li>
+          </ul>
+        </div>
+      </nav>
+    </main>
+
+    <section class="info">
+      <div class="m-text">
+        <h1 class="title">
+          Coder <br />
+          Bootcamp
+        </h1>
+        <h5 class="second-title">Zero To Hero</h5>
+
+        <p class="p-text">
+          Bootcamp kani waxa aad ku qadan doonta <br />
+          qaybaha kala duwan ee development ka sida, <br />
+          Front-End, Back-End, Mobile apps, Desktop <br />
+          apps, and Full-Stack development
+          <br />
+
+          In this bootcamp you will dive into the different <br />
+          areas of development such as, Front-End, Back-End, <br />
+          Mobile apps, Desktop apps, and Full-Stack development
+        </p>
+        <a href="/sign up.html">
+          <button class="btn">Regsiter Now</button>
+        </a>
+      </div>
+
+      <div class="m-image">
+        <img src="/images/PngItem_5312066.png" alt="main image" />
+      </div>
+    </section>
+
+    <h2
+      style="
+        margin-left: 8rem;
+        border-left: 5px solid var(--orange);
+        color: var(--bunni);
+      "
+    >
+      Our_Boots
+    </h2>
+    <section class="boots">
+      <div class="frontEnd">
+        <img
+          class="bootsIMG"
+          src="/images/frontend.png"
+          alt="frontedn developer picture"
+        />
+        <h4 class="b-header">Front-End</h4>
+      </div>
+
+      <div class="backend">
+        <img
+          class="bootsIMG"
+          src="/images/backend.png"
+          alt="backend developer picture"
+        />
+        <h4 class="b-header">Back-End</h4>
+      </div>
+
+      <div class="mobileapp">
+        <img
+          class="bootsIMG"
+          src="/images/mobileapp.png"
+          alt="mobileapp developer picture"
+        />
+        <h4 class="b-header">Mobile_apps</h4>
+      </div>
+
+      <div class="desktopapp">
+        <img
+          class="bootsIMG"
+          src="/images/desktop app.png"
+          alt="desktopapp developer picture"
+        />
+        <h4 class="b-header">Desktop_apps</h4>
+      </div>
+
+      <div class="fullstack">
+        <img
+          class="bootsIMG"
+          src="/images/full stack.png"
+          alt="fullstack developer picture"
+        />
+        <h4 class="b-header">Full-Stack</h4>
+      </div>
+    </section>
+
+    <h4
+      style="
+        margin-left: 8rem;
+        border-left: 5px solid var(--orange);
+        color: var(--bunni);
+        display: inline;
+        font-size: 1.7rem;
+        font-weight: 900;
+      "
+    >
+      Our_Team
+    </h4>
+    <section class="ourteam">
+      <div class="teamdiv">
+        <img
+          class="ourteamPNG"
+          src="/images/student.png"
+          alt="student picture"
+        />
+
+        <p>
+          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel, iste.
+          Laborum facere ex quaerat maxime iusto nulla praesentium soluta
+          molestias commodi explicabo unde quasi magnam, itaque facilis amet
+          saepe dolor fuga ea, ipsam consequuntur officia. Perspiciatis
+          temporibus placeat ad modi, optio explicabo, iure quibusdam ipsam
+          ullam, et tempora nobis veritatis.
+        </p>
+      </div>
+
+      <div class="teamdiv">
+        <img class="ourteamPNG" src="/images/student2.png" alt="" />
+
+        <p>
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae
+          molestias facilis a dolorem repellendus sit, enim in quaerat pariatur
+          fuga quisquam doloribus veniam minima eos nobis, aperiam
+          exercitationem alias, tempora sunt assumenda. Expedita totam ut
+          eveniet harum in sunt qui libero ullam accusamus. Similique
+          voluptatibus dicta tempore labore. Dignissimos, pariatur!
+        </p>
+      </div>
+    </section>
+
+    <hr class="line" />
+
+    <h4
+      style="
+        margin-left: 8rem;
+        border-left: 5px solid var(--orange);
+        color: var(--bunni);
+        display: inline;
+        font-size: 1.7rem;
+        font-weight: 900;
+      "
+    >
+      We are special FOR
+    </h4>
+    <section class="special">
+      <div class="support">
+        <img
+          class="specialIMGS"
+          src="/images/support.png"
+          alt="support image"
+        />
+        <h3>Support</h3>
+      </div>
+
+      <div class="teamwork">
+        <img
+          class="specialIMGS"
+          src="/images/teamwork.png"
+          alt="teamwork image"
+        />
+
+        <h3>Team_Work</h3>
+      </div>
+
+      <div class="hired">
+        <img class="specialIMGS" src="/images/hired.png" alt="hired image" />
+
+        <h3>Supporting to get a job</h3>
+      </div>
+    </section>
+
+    <hr class="line" />
+
+    <section class="Sfooter">
+      <footer>
+        <div class="footerlogo">
+          <img
+            style="width: 8rem; object-fit: cover; cursor: pointer"
+            src="/images/logo_transparent.png"
+            alt="website logo"
+          />
+        </div>
+
+        <div>
+          <p
+            style="
+              color: black;
+              font-size: 1rem;
+              font-weight: bold;
+              font-family: 'Courier New', Courier, monospace;
+            "
+          >
+            &#169;Coder|Abdilhai_mohamed| All Rights reserfed
+          </p>
+        </div>
+
+        <div class="social">
+          <a href="#">
+            <img src="/images/facebook.png" alt="facebook logo" />
+          </a>
+
+          <a href="#">
+            <img src="/images/twitter.png" alt="twitter logo" />
+          </a>
+
+          <a href="#">
+            <img src="/images/github-sign.png" alt="github logo" />
+          </a>
+
+          <a href="#">
+            <img src="/images/linkedin.png" alt="linkedin logo" />
+          </a>
+        </div>
+      </footer>
+    </section>
   </body>
 </html>
diff --git a/images/PngItem_5312066.png b/images/PngItem_5312066.png
diff --git a/images/about-us.png b/images/about-us.png
diff --git a/images/backend.png b/images/backend.png
diff --git a/images/desktop app.png b/images/desktop app.png
diff --git a/images/facebook.png b/images/facebook.png
diff --git a/images/favicon.png b/images/favicon.png
diff --git a/images/frontend.png b/images/frontend.png
diff --git a/images/full stack.png b/images/full stack.png
diff --git a/images/github-sign.png b/images/github-sign.png
diff --git a/images/hired.png b/images/hired.png
diff --git a/images/linkedin.png b/images/linkedin.png
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/logo_transparent.png b/images/logo_transparent.png
diff --git a/images/mobileapp.png b/images/mobileapp.png
diff --git a/images/student.png b/images/student.png
diff --git a/images/student2.png b/images/student2.png
diff --git a/images/support.png b/images/support.png
diff --git a/images/teamwork.png b/images/teamwork.png
diff --git a/images/twitter.png b/images/twitter.png
diff --git a/images/users.png b/images/users.png