CodeYourFuture · ahmedjalalsd · Jun 4, 2021 · Jun 4, 2021 · Jun 4, 2021 · Jun 4, 2021
diff --git a/css/reset.css b/css/reset.css
@@ -0,0 +1,68 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default padding */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+/* figure,
+figcaption, */
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  scroll-behavior: smooth;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* Remove list styles on ul, ol elements with a class attribute */
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Natural flow and rhythm in articles by default */
+article > * + * {
+  margin-top: 1em;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
diff --git a/css/style.css b/css/style.css
@@ -6,3 +6,162 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+
+/* Global */
+img {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+}
+
+a {
+  text-decoration: none;
+}
+
+/* Header and nav */
+.site-header {
+  background: bisque;
+}
+
+.header-wrapper {
+  width: 1250px;
+  max-width: 100%;
+  padding: 20px;
+  margin: 0 auto 4rem auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo-container {
+  width: 4%;
+}
+
+.main-nav ul {
+  margin: 1em 0 0.5em;
+  text-align: center;
+}
+
+.main-nav li {
+  display: inline;
+}
+.main-nav a {
+  display: inline-block;
+  padding: 0.5em 1.5em;
+  color: #000;
+}
+
+/* Intro */
+.intro {
+  margin: 4rem 0;
+}
+
+.intro-content {
+  height: 15rem;
+  text-align: center;
+  line-height: 15rem;
+}
+
+.intro-content h1 {
+  vertical-align: middle;
+  display: inline-block;
+
+  opacity: 0;
+  animation-delay: 0.3s;
+  animation-fill-mode: forwards;
+}
+
+.bouncy h1 {
+  animation-name: cd-bounce-right;
+  animation-duration: 0.6s;
+}
+
+@keyframes cd-bounce-right {
+  0% {
+    opacity: 0.2;
+    transform: translateX(-200px);
+  }
+  60% {
+    opacity: 0.7;
+    transform: translateX(15px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Articles */
+
+.articles {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 0.5rem;
+}
+
+article {
+  min-height: 100px;
+  text-align: center;
+}
+
+.articles article:first-child {
+  border: 2px solid bisque;
+  border-radius: 10px;
+  padding: 1rem;
+}
+
+.articles article:first-child h2 {
+  background-image: linear-gradient(
+    to left,
+    violet,
+    indigo,
+    blue,
+    green,
+    yellow,
+    orange,
+    red
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+article p {
+  text-align: justify;
+  width: 26rem;
+  margin: 0 auto;
+  line-height: 1.4rem;
+}
+
+article .btn {
+  padding: 0.6rem;
+  background: bisque;
+  border: none;
+  border-radius: 7px;
+  transition: all 0.5s ease;
+}
+
+article .btn:hover {
+  padding: 0.8rem;
+  background: rgb(238, 180, 110);
+}
+
+/* footer */
+
+.site-footer {
+  background: bisque;
+}
+
+.footer-container {
+  width: 1250px;
+  max-width: 100%;
+  padding: 20px;
+  margin: 4rem auto 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.footer-icons a {
+  margin-right: 0.6rem;
+  color: #000;
+}
diff --git a/imgs/benjamin-voros-phIFdC6lA4E-unsplash.jpg b/imgs/benjamin-voros-phIFdC6lA4E-unsplash.jpg
diff --git a/imgs/circle-41652.png b/imgs/circle-41652.png
diff --git a/imgs/david-dibert-z-gL7br3MTk-unsplash.jpg b/imgs/david-dibert-z-gL7br3MTk-unsplash.jpg
diff --git a/imgs/yohann-libot-f7NnOkM1yeU-unsplash.jpg b/imgs/yohann-libot-f7NnOkM1yeU-unsplash.jpg
diff --git a/index.html b/index.html
@@ -12,11 +12,141 @@
       rel="stylesheet"
       type="text/css"
     />
+    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="css/reset.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 -->
+    <header class="site-header">
+      <div class="header-wrapper ">
+        <div class="logo-container">
+          <img src="imgs/circle-41652.png" alt="">
+        </div>
+        <nav class="main-nav">
+          <ul>
+            <li> <a href="#">Home </a></li>
+            <li><a href="#">About</a></li>
+            <li><a href="#">Articles</a></li>
+            <li><a href="#">Contact</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+      <main>
+
+        <section class="intro">
+          <div class="intro-content bouncy">
+            <h1>
+              Welcome to Circle!
+            </h1>
+         </div>
+        </section>
+
+        <section class="articles">
+
+          <article>
+            <header>
+              <h2>Yar Pirate Ipsum</h2>
+            </header>
+            <figure>
+              <img src="imgs/david-dibert-z-gL7br3MTk-unsplash.jpg" alt="Pirate Ship" >
+              <figcaption>
+                Photo by <a href="https://unsplash.com/@dibert?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"><i>David Dibert</i></a> on <a href="https://unsplash.com/s/photos/pirates?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"><i>Unsplash</i></a>
+              </figcaption>
+            </figure> 
+            <p>
+              Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone 
+              mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper 
+              chantey doubloon starboard grog black jack gangway rutters.Deadlights jack lad schooner scallywag 
+              dance the hempen jig.
+            </p>
+
+            <button class="btn"> Read more</button>
+            <footer>
+              <p>
+                Posted on
+                <time datetime="2021-06-04 19:00">June 4</time>
+                by <em>Jack Sparrow</em>.
+              </p>
+            </footer>
+          </article>
+
+          <article>
+            <header>
+              <h2>The Cosmos Awaits</h2>
+            </header>
+
+            <figure>
+              <img src="imgs/benjamin-voros-phIFdC6lA4E-unsplash.jpg" alt="Cosoms">
+              <figcaption>Photo by <a href="https://unsplash.com/@vorosbenisop?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"><i>Benjamin Voros</i></a> on <a href="https://unsplash.com/s/photos/cosmos?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"><i>Unsplash</i>></a>
+              </figcaption>
+            </figure>
+            <p>
+              Flatland Rig Veda of brilliant syntheses globular star cluster dispassionate extraterrestrial 
+              observer billions upon billions. The carbon in our apple pies vanquish the impossible extraordinary 
+              claims require extraordinary evidence circumnavigated network of wormholes a very small stage in a vast 
+              cosmic arena. 
+            </p>
+
+            <button class="btn"> Read more</button>
+
+            <footer>
+              <p>
+                Posted on
+                <time datetime="2021-06-04 19:00">June 4</time>
+                by <em>Carl Sagan</em>.
+              </p>
+            </footer>
+          </article>
+
+          <article>
+            <header>
+              <h2>Zombies have ethics!</h2>
+            </header>
+            <figure>
+              <img src="imgs/yohann-libot-f7NnOkM1yeU-unsplash.jpg" alt="Zombie">
+              <figcaption>Photo by <a href="https://unsplash.com/@yohannlibot?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"><i>Yohann Libot</i></a> on <a href="https://unsplash.com/s/photos/zombie?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"><i>Unsplash</i></a>
+              </figcaption>
+            </figure>
+            <p>
+              Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit, 
+               vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra 
+               adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. 
+               The voodoo sacerdos susci. 
+            </p>
+
+            <button class="btn"> Read more</button>
+
+            <footer>
+              <p>
+                Posted on
+                <time datetime="2021-06-04 19:00">June 4</time>
+                by <em>Zombies</em>.
+              </p>
+            </footer>
+          </article>
+
+        </section>
+
+        <footer class="site-footer">
+          <div class="footer-container">
+
+            <div class="footer-copyrights">
+              <p>&copy; Copyright 2021 Blog</p>
+            </div>
+
+            <div class="footer-icons">
+              <a href="#"><i class="fa fa-facebook"></i></a>
+              <a href="#"><i class="fa fa-twitter"></i></a>
+              <a href="#"><i class="fa fa-linkedin"></i></a>
+              <a href="#"><i class="fa fa-github"></i></a>
+            </div>
+
+          </div>
+        </footer>
+      </main>
   </body>
 </html>