fikrcamp · YuhanaZ · Mar 25, 2022 · Mar 25, 2022
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,154 @@
+* {
+    box-sizing: border-box;
+  }
+
+
+body {
+    font-family: Arial;
+    background: #f1f1f1;
+    padding:10px
+  }
+
+.topnav {
+    background-color: rgb(165, 164, 164);
+    overflow: hidden;
+  }
+
+
+  .topnav a {
+    float: left;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 17px;
+  }
+
+
+  .topnav a:hover {
+    background-color: #ddd;
+    color: black;
+  }
+
+  .topnav a.active {
+    background-color: #04AA6D;
+    color: white;
+  }
+
+  .header {
+    padding: 10px;
+    font-size: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .blogimg{
+      width:100%;
+      height: 50px;
+  }
+.article{
+    margin-top: 250px;
+    padding: 20px;
+}
+.article img{
+    float: left;
+}
+.courses{
+    margin-top: 4%;
+}
+.column {
+    float: left;
+    width: 25%;
+    padding: 0 10px;
+  }
+
+
+  .row {margin: 0 -5px;}
+
+
+  .row:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+
+  .card {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
+    padding: 16px;
+    text-align: center;
+    background-color: #f1f1f1;
+  }
+
+
+  @media screen and (max-width: 600px) {
+    .column {
+      width: 100%;
+      display: block;
+      margin-bottom: 20px;
+    }
+  }
+
+  .card-imgs{
+      width: 50px;
+
+  }
+
+
+
+  /* buttons */
+.success {
+    border-color: #04AA6D;
+    color: green;
+    border-radius: 10%;
+    width:100px;
+    height: 30px;
+  }
+
+  .success:hover {
+    background-color: #04AA6D;
+    color: white;
+  }
+  /* Footer */
+  .footer {
+    padding: 20px;
+    text-align: center;
+    background: #ddd;
+
+    font-weight: lighter;
+
+  }
+
+ .fa {
+    padding: 20px;
+    font-size: 30px;
+    width: 30px;
+    text-align: center;
+    text-decoration: none;
+    margin: 5px 2px;
+    border-radius: 50%;
+  }
+
+  fa:hover {
+      opacity: 0.7;
+  }
+
+  .fa-facebook {
+    background: #3B5998;
+    color: white;
+  }
+
+  .fa-twitter {
+    background: #55ACEE;
+    color: white;
+  }
+  .fa-youtube {
+    background: #bb0000;
+    color: white;
+  }
+
+  .fa-instagram {
+    background: #125688;
+    color: white;
+  }
+
diff --git a/images/blogimage.webp b/images/blogimage.webp
diff --git a/images/blogimg.jpeg b/images/blogimg.jpeg
diff --git a/images/css.jpg b/images/css.jpg
diff --git a/images/html.png b/images/html.png
diff --git a/images/html1.png b/images/html1.png
diff --git a/images/javas.png b/images/javas.png
diff --git a/images/nn.jpg b/images/nn.jpg
diff --git a/images/react.jpg b/images/react.jpg
diff --git a/images/students.jpg b/images/students.jpg
diff --git a/index.html b/index.html
@@ -13,9 +13,96 @@
       type="text/css"
     />
     <link rel="stylesheet" href="css/style.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>
   <body>
     <!-- Add your HTML  here -->
+    <div class="topnav">
+      <a class="active" href="#home">Home</a>
+      <a href="#Courses">Courses</a>
+      <a href="#contact">Contact</a>
+      <a href="#about">About</a>
+    </div>
+    <div class="container">
+    <div class="header">
+      <h2>fikircamp Bootcamp</h2>
+    </div>
+  <div class="blogimg" >
+    <img src="images/blogimage.webp"  style: height="300px"; width="100%" alt="">
+  </div> <br>
+   <section>
+    <div class="article">
+      <h2>Batch 104</h2>
+      <p> <img src="images/students.jpg" alt="students" style="width:170px;height:170px;margin-right:15px;">
+        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+         Totam eius perferendis odit molestias nostrum atque dolores.
+          Laborum sint, eos atque cum dolorem aperiam minima deleniti ipsum in accusantium, fugiat nihil!
+          Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+          Totam eius perferendis odit molestias nostrum atque dolores.
+           Laborum sint, eos atque cum dolorem aperiam minima deleniti ipsum in accusantium, fugiat nihil!</p>
+<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
+  Totam eius perferendis odit molestias nostrum atque dolores.
+  Laborum sint, eos atque cum dolorem aperiam minima deleniti ipsum in accusantium, fugiat nihil!
+  Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+  Totam eius perferendis odit molestias nostrum atque dolores.
+   Laborum sint, eos atque cum dolorem aperiam. Totam eius perferendis odit molestias nostrum atque dolores.
+   Laborum sint, eos atque cum dolorem aperiam.
+</p>
+    </div> 
+  </section>
+
+    <div class="courses">
+      <h2>list of all the courses </h2>
+      <hr>
+      <div class="row">
+        <div class="column">
+          <div class="card ">
+            <img src="images/html.png" alt="" style: width="290px">
+            <h3>HTML</h3>
+           <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
+           <button class="btn success">Start</button>
+
+          </div>
+        </div>
+        <div class="column">
+          <div class="card">
+            <img src="images/css.jpg" alt="" style: width="290px">
+            <h3>CSS</h3>
+           <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
+           <button class="btn success">Start</button>
+
+          </div>
+        </div>
+        <div class="column">
+          <div class="card">
+            <img src="images/javas.png" alt="" style: width="290px">
+            <h3>Java Script</h3>
+           <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
+
+           <button class="btn success">Start</button>
+          </div>
+        </div>
+        <div class="column">
+          <div class="card">
+            <img src="images/react.jpg" alt="" style: width="290px">
+            <h3>React</h3>
+           <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
+
+           <button class="btn success">Start</button>
+        </div>
+      </div>
+    </div> <br> <br>
+    <hr>
+
+  </div>
+  <div class="container">
+  <div class="footer "> @Copyright 2022</h3> <br>
+    <a href="#" class="fa fa-facebook"></a>
+    <a href="#" class="fa fa-twitter"></a>
+    <a href="#" class="fa fa-youtube"></a>
+    <a href="#" class="fa fa-instagram"></a>
+
+  </div>
+</div>
   </body>
 </html>