CodeYourFuture · mhallaq · Jul 29, 2022 · Jul 29, 2022 · Jul 29, 2022
diff --git a/css/style.css b/css/style.css
@@ -6,3 +6,157 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+
+:root {
+  --grey-dark: #292b2c;
+  --grey-light: #e4e4e4;
+  --orange-dark: #c05326;
+  --orange-light: #f7eae4;
+  --white: #fff;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background: skyblue;
+  font-family: "Roboto", sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+/*navigation area */
+.nav {
+  width: 80%;
+  height: 10%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.nav .navbar {
+  display: flex;
+  align-items: center;
+}
+
+.nav ul {
+  list-style-type: none;
+}
+
+.nav ul li a {
+  padding-left: 2rem;
+  text-decoration: none;
+  font-size: large;
+}
+
+.nav .logo {
+  width: 5rem;
+  border: solid transparent;
+  border-radius: 10px;
+}
+/*Header Area */
+.header .hero {
+  margin: 20px auto;
+  width: 80%;
+  height: 35vh;
+  background-image: url(/images/hero-drone-pic.png);
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.hero h2 {
+  padding-top: 2rem;
+  text-align: center;
+  color: darkblue;
+}
+
+/*Blogs posts Area*/
+
+.main .blog {
+  margin: 20px auto;
+  width: 80%;
+}
+
+.post-image {
+  width: 400px;
+  height: 226.28px;
+}
+
+.blog-post {
+  border: 1px solid lightgray;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+  background: lightcyan;
+}
+
+.post-content {
+  margin-left: 1rem;
+}
+
+.post-title {
+  margin: 1.4rem 0;
+}
+
+.post-btn {
+  margin-top: 2rem;
+  padding: 0.7rem;
+  border-radius: 0.5em;
+  border-color: transparent;
+  font-size: 1rem;
+  font-family: "Roboto", sans-serif;
+  background-color: var(--orange-dark);
+  color: white;
+}
+
+.blog-post:first-child {
+  box-shadow: rgba(56, 46, 240, 0.4) 5px 5px, rgba(101, 46, 240, 0.3) 10px 10px,
+    rgba(46, 78, 240, 0.2) 15px 15px, rgba(46, 240, 217, 0.1) 20px 20px,
+    rgba(240, 46, 170, 0.05) 25px 25px;
+}
+
+/* Footer Area */
+
+footer img {
+  width: 1.2rem;
+}
+
+header h1,
+header h2 {
+  color: white;
+}
+
+footer .container {
+  margin: 20px auto;
+  width: 80%;
+  border-top: 2px solid var(--grey-light);
+  padding-top: 0.7rem;
+  padding-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  /* justify-content: space-between; */
+  align-items: center;
+}
+
+footer ul {
+  list-style: none;
+}
+
+footer .social-media {
+  display: flex;
+  justify-content: space-between;
+}
+
+footer .social-media li img {
+  /* margin: 4rem;
+  padding: 5rem; */
+
+  /* padding: 0.7rem; */
+  box-sizing: content-box;
+  margin: 0.5rem;
+  padding: 0.5rem;
+  border: 1px solid var(--grey-light);
+  border-radius: 100px;
+}
diff --git a/images/Drone-post-1.jpg b/images/Drone-post-1.jpg
diff --git a/images/drone-back-ground.jpg b/images/drone-back-ground.jpg
diff --git a/images/drone-post-2.jpg b/images/drone-post-2.jpg
diff --git a/images/drone-post-3.jpg b/images/drone-post-3.jpg
diff --git a/images/drones_logo2.png b/images/drones_logo2.png
diff --git a/images/facebook-icon.svg b/images/facebook-icon.svg
diff --git a/images/hero-drone-pic.png b/images/hero-drone-pic.png
diff --git a/images/instagram-icon.svg b/images/instagram-icon.svg
diff --git a/images/twitter-icon.svg b/images/twitter-icon.svg
diff --git a/index.html b/index.html
@@ -12,11 +12,85 @@
       rel="stylesheet"
       type="text/css"
     />
+
     <link rel="stylesheet" href="css/style.css" />
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body>
     <!-- Add your HTML markup here -->
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+
+    <nav class="nav">
+      <img src="/images/drones_logo2.png" alt="Drones blog logo" class="logo" />
+      <ul class="navbar">
+        <li class="item"><a href="#" class="link">Home</a></li>
+        <li class="item"><a href="#" class="link">Previous posts</a></li>
+        <li class="item"><a href="#" class="link">About Us</a></li>
+      </ul>
+    </nav>
+
+    <header class="header">
+      <div class="hero">
+        <h2>Lastest Drones News</h2>
+      </div>
+    </header>
+    <main class="main">
+      <section class="blog">
+        <article class="blog-post">
+          <img class="post-image" src="/images/Drone-post-1.jpg" alt="" />
+          <div class="post-content">
+            <h2 class="post-title">Arial Drones</h2>
+            <p class="post-text">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Exercitationem a numquam porro cum eos nisi reiciendis amet
+              deleniti doloremque ea. Odio minus eum assumenda cumque aliquid
+              inventore odit! Quia, placeat!
+            </p>
+            <button class="post-btn">Read More</button>
+          </div>
+        </article>
+        <article class="blog-post">
+          <img class="post-image" src="/images/Drone-post-2.jpg" alt="" />
+          <div class="post-content">
+            <h2 class="post-title">Commercial Drones</h2>
+            <p class="post-text">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Exercitationem a numquam porro cum eos nisi reiciendis amet
+              deleniti doloremque ea. Odio minus eum assumenda cumque aliquid
+              inventore odit! Quia, placeat!
+            </p>
+            <button class="post-btn">Read More</button>
+          </div>
+        </article>
+        <article class="blog-post">
+          <img class="post-image" src="/images/Drone-post-3.jpg" alt="" />
+          <div class="post-content">
+            <h2 class="post-title">Mini Drones</h2>
+            <p class="post-text">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Exercitationem a numquam porro cum eos nisi reiciendis amet
+              deleniti doloremque ea. Odio minus eum assumenda cumque aliquid
+              inventore odit! Quia, placeat!
+            </p>
+            <button class="post-btn">Read More</button>
+          </div>
+        </article>
+      </section>
+    </main>
+    <footer>
+      <div class="container">
+        <p>Join us on</p>
+        <ul class="social-media">
+          <li><img src="images/twitter-icon.svg" alt="Join us on twiter" /></li>
+          <li>
+            <img src="images/facebook-icon.svg" alt="Join us on facebook" />
+          </li>
+          <li>
+            <img src="images/instagram-icon.svg" alt="Join us on instagram" />
+          </li>
+        </ul>
+        <p>© SkySight</p>
+      </div>
+    </footer>
   </body>
 </html>