fikrcamp · MAbdullahx · Mar 30, 2022 · Mar 30, 2022 · Mar 31, 2022 · Mar 31, 2022
diff --git a/images/coding-Icon.png b/images/coding-Icon.png
diff --git a/images/image-1.png b/images/image-1.png
diff --git a/images/image-2.png b/images/image-2.png
diff --git a/images/image-3.png b/images/image-3.png
diff --git a/images/image-4.png b/images/image-4.png
diff --git a/images/image-5.png b/images/image-5.png
diff --git a/images/image-6.png b/images/image-6.png
diff --git a/images/image-7.png b/images/image-7.png
diff --git a/images/image-8.png b/images/image-8.png
diff --git a/images/image-9.png b/images/image-9.png
diff --git a/index.html b/index.html
@@ -4,10 +4,121 @@
     <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>Code Website</title>
     <link rel="stylesheet" href="style/style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
-    <!-- start here -->
+    <header id="nav-bar">
+      <img class="icon" src="images/coding-Icon.png" />
+      <ul class="nav-list">
+        <li>Home</li>
+        <li>About</li>
+        <li>Work</li>
+      </ul>
+      <button class="nav-btn">Contact</button>
+    </header>
+    <div class="main" id="coder">
+      <img class="image-1" src="images/image-1.png" />
+      <div class="text">
+        <h1 class="h1">< coder ></h1>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quo
+          cumque et harum sunt quidem provident consequuntur libero odio saepe
+          excepturi earum accusantium illum deserunt assumenda, laudantium,
+          distinctio dignissimos. Recusandae, numquam at, eligendi officia natus
+          ab nihil earum, magni veritatis aut ex similique soluta incidunt quas
+          aspernatur delectus odit itaque!
+        </p>
+      </div>
+    </div>
+    <div class="secondary" id="html-css-js">
+      <img src="images/image-2.png" />
+      <div class="text">
+        <h2>< html, css & js ></h2>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, vitae
+          temporibus! Ab praesentium et enim temporibus assumenda nemo
+          aspernatur esse laborum deleniti repellat dignissimos est, doloribus
+          aliquid delectus laudantium nesciunt Lorem ipsum dolor sit amet
+          consectetur, adipisicing elit. Ratione error, consectetur similique
+          minus mollitia esse nemo necessitatibus voluptatem odio. Perferendis
+          cupiditate a nulla facere eveniet voluptas laudantium atque doloribus
+          dolores.
+        </p>
+      </div>
+    </div>
+    <div class="row" id="git">
+      <div class="row-img">
+        <img src="images/image-3.png" />
+        <img src="images/image-4.png" />
+        <img src="images/image-5.png" />
+      </div>
+      <div class="text">
+        <h2>< git & github ></h2>
+        <p>
+          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est enim
+          totam sed, architecto hic nulla? Quaerat ex ducimus, tenetur enim odit
+          voluptatem harum odio veritatis aliquid tempora sit consequuntur nemo
+          rem blanditiis nihil unde itaque. At similique est distinctio dolore,
+          laboriosam, quae quasi error ipsum quos placeat delectus sequi eos.
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione
+          consequuntur ipsa voluptates recusandae saepe nesciunt soluta unde!
+          Natus, porro exercitationem animi ducimus obcaecati harum modi soluta.
+          Ex rem quas placeat perspiciatis sed, eveniet illum dolorem aperiam
+          non eligendi molestiae, numquam similique fugit molestias alias dicta,
+          quaerat iste necessitatibus nostrum? Delectus.
+        </p>
+      </div>
+    </div>
+    <div class="work" id="work">
+      <div class="work-img">
+        <img src="images/image-6.png" /><img src="images/image-7.png" /><img
+          src="images/image-8.png"
+        /><img src="images/image-9.png" />
+      </div>
+      <div class="text">
+        <h2>< remote work, freelance ></h2>
+        <p style="text-align: center">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium
+          tempora quam iste eum autem aliquid sapiente, fugit nihil quisquam
+          maiores sit, ea nobis voluptatibus, ut corporis enim numquam
+          cupiditate voluptatum! Debitis quisquam tempore ipsum reiciendis
+          voluptates totam fuga hic deleniti, quas sit amet nesciunt aspernatur
+          dicta velit dolores delectus eum dolorem recusandae magni voluptatum
+          repudiandae ullam aliquam corporis. Distinctio mollitia neque id
+          repellendus nemo, dolores officiis consequatur cupiditate rem ipsam
+          error quas nulla delectus nesciunt dicta vero eligendi voluptatum
+          aspernatur sed harum perspiciatis aut dignissimos ut nihil? Aut
+          accusantium tempore hic eveniet laudantium labore explicabo, cumque,
+          voluptatem itaque voluptas consequuntur.
+        </p>
+      </div>
+    </div>
+    <footer>
+      <img src="images/coding-Icon.png" />
+      ©Copyright2022
+      <div class="contact">
+        <h3>Contact</h3>
+        <p>Lorem ipsum dolor sit amet.</p>
+      </div>
+      <div class="address">
+        <h3>Address</h3>
+        <p>Lorem, 500 ipsum dolor.</p>
+        <div class="navi">
+          <h3>Navigation</h3>
+          <a href="#nav-bar">Nav-Bar</a>
+          <a href="#coder">coder</a>
+          <a href="#html-css-js">html, css & js</a>
+          <a href="#git">git & github</a>
+          <a href="#work">remote work & freelance</a>
+        </div>
+      </div>
+    </footer>
   </body>
 </html>
diff --git a/style/style.css b/style/style.css
@@ -0,0 +1,143 @@
+* {
+  padding: 0px;
+  margin: 0px;
+}
+:root {
+  --blue: #003d6a;
+  --gray: #f0f0f0;
+}
+body {
+  background-color: var(--gray);
+}
+header {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background-color: whitesmoke;
+}
+.icon {
+  height: 100px;
+}
+.nav-list {
+  list-style-type: none;
+  display: flex;
+  gap: 50px;
+}
+.nav-btn {
+  border: none;
+  border-radius: 50px;
+  padding: 10px;
+  background-color: var(--blue);
+  color: var(--gray);
+}
+header,
+.nav-btn:hover {
+  cursor: pointer;
+}
+.nav-list li:hover {
+  color: var(--blue);
+}
+header .nav-btn:hover {
+  color: black;
+}
+.main {
+  padding: ;
+  display: flex;
+  align-items: center;
+  padding: 100px;
+}
+.h1,
+h2 {
+  font-size: 30px;
+  font-family: "Press Start 2P";
+  padding-bottom: 10px;
+  text-align: center;
+}
+.text p {
+  font-family: monospace;
+  color: var(--blue);
+  font-size: 20px;
+}
+.main img {
+  width: 50%;
+}
+
+.secondary {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 50px;
+  padding: 0px 100px 100px 100px;
+}
+.secondary p {
+  text-align: center;
+}
+.row {
+  display: flex;
+  align-items: center;
+  gap: 50px;
+  padding: 100px 0px;
+}
+.work {
+  padding: 100px 0px;
+}
+.work-img img {
+  width: 400px;
+}
+.work-img {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.work .text {
+  padding: 50px;
+}
+footer {
+  background-color: whitesmoke;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+footer img {
+  height: 100px;
+}
+.navi {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 600px) {
+  .main {
+    flex-direction: column;
+    gap: 40px;
+  }
+  .main img {
+    width: 70%;
+  }
+  .text p {
+    text-align: center;
+    gap: 20px;
+    font-size: 15px;
+  }
+  ..secondary {
+    display: flex;
+    flex-direction: row;
+  }
+  .secondary img {
+    width: 70%;
+  }
+  .secondary h2 {
+  }
+  .row {
+    flex-direction: column;
+    align-items: center;
+  }
+  .row-img {
+    display: flex;
+  }
+  .row-img img {
+    width: 33%;
+  }
+  .work-img img {
+    width: 50%;
+  }