CodeYourFuture · seyedsharifi12 · May 20, 2021 · May 20, 2021 · May 20, 2021 · May 21, 2021
diff --git a/css/style.css b/css/style.css
@@ -6,3 +6,70 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+#page-wrapper {
+  position: relative;
+}
+li {
+  list-style: none;
+}
+body {
+  background-color: #f0f8ff;
+}
+#header {
+  margin: auto;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  background-color: rgb(45, 46, 46);
+  justify-content: space-around;
+}
+img {
+  display: block;
+  height: auto;
+  max-width: 100%;
+  width: 400px;
+  top: 0px;
+  margin-left: 35%;
+}
+#main-articles {
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  padding: 10px 280px 20px 280px;
+  margin: 50px;
+  align-items: center;
+}
+article > h1 {
+  text-align: center;
+}
+.nav-bar ul {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+article:first-child {
+  background-color: cornflowerblue;
+}
+article:first-child p {
+  font-size: 16px;
+  font-family: Georgia, "Times New Roman", Times, serif;
+}
+a:link {
+  color: rgb(10, 2, 39);
+}
+
+a:visited {
+  color: rgb(17, 226, 191);
+}
+a:hover {
+  color: hotpink;
+}
+#bamboo {
+  margin-top: 140px;
+}
+footer > ul {
+  color: aqua;
+  background-color: darkslategrey;
+  display: flex;
+  justify-content: space-around;
+}
diff --git a/index.html b/index.html
@@ -15,8 +15,87 @@
     <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 -->
+    <div id="page-wrapper">
+      <header id="header">
+        <div class="logo">
+          <img
+            id="header-image"
+            src="https://lh3.googleusercontent.com/HkPwdVXNE1OuazbarW321RJDns6bB2uO_0Z7HqTZy8OAvpstKGwww8xgWBsi-Pi5Z1c5EPfG2034qKUW4fV2xPJK5Sf6jUhO84a-TrfeoyBrEsbZxNy8VDCQNyszp_25gjfaYKcjNA=w517-h120-p-k"
+            alt="Cricket bat as the company logo"
+          />
+        </div>
+        <nav class="nav-bar">
+          <ul>
+            <li><a class="nav-link" href="#main-articles">Articles</a></li>
+            <li><a class="nav-link" href="#contact-details">Contact Us</a></li>
+          </ul>
+        </nav>
+      </header>
+      <main id="main-articles">
+        <article id="bamboo">
+          <h1>The Revolutionary Bamboo Bats</h1>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            Elementum curabitur vitae nunc sed. Auctor elit sed vulputate mi sit
+            amet. Euismod quis viverra nibs cras. Quis auctor elit sed vulputate
+            mi sit. Eget arcu dictum varius duis at consectetur lorem donec
+            massa. Velit dignissim sodales ut eu. A condimentum vitae sapien
+            pellentesque habitant morbi tristique senectus. Vel pretium lectus
+            quam id leo in vitae turpis massa. Cursus risus at ultrices mi
+            tempus. At consectetur lorem donec massa sapien. Sapien et ligula
+            ullamcorper malesuada. Tortor condimentum lacinia quis vel eros
+            donec ac odio. Non quam lacus suspendisse faucibus interdum posuere.
+            Nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Purus sit amet
+            luctus venenatis. Ullamcorper velit sed ullamcorper morbi tincidunt.
+            Euismod quis viverra nibh cras pulvinar. Augue eget arcu dictum
+            varius. Non odio euismod lacinia at quis risus sed vulputate.
+          </p>
+        </article>
+        <article id="willow">
+          <h1>English Willow Bats</h1>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Id
+            semper risus in hendrerit gravida rutrum quisque non tellus.
+            Habitant morbi tristique senectus et netus et malesuada. Magna ac
+            placerat vestibulum lectus mauris ultrices eros in cursus. Sodales
+            neque sodales ut etiam sit amet nisl purus in. Phasellus vestibulum
+            lorem sed risus ultricies tristique. Vitae nunc sed velit dignissim
+            sodales ut eu sem. Donec pretium vulputate sapien nec sagittis.
+            Magna fringilla urna porttitor rhoncus. Adipiscing commodo elit at
+            imperdiet dui. Sit amet est placerat in egestas.
+          </p>
+        </article>
+        <article id="kashmir-willow">
+          <h1>Kashmir Willow Bats</h1>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Varius
+            sit amet mattis vulputate. Neque gravida in fermentum et
+            sollicitudin. Dignissim cras tincidunt lobortis feugiat vivamus at.
+            Faucibus vitae aliquet nec ullamcorper sit. Adipiscing enim eu
+            turpis egestas pretium aenean pharetra. Tincidunt dui ut ornare
+            lectus sit amet est placerat in. Eget velit aliquet sagittis id
+            consectetur purus ut faucibus. Id venenatis a condimentum vitae
+            sapien pellentesque. Ullamcorper sit amet risus nullam eget felis.
+          </p>
+        </article>
+      </main>
+      <footer>
+        <ul id="contact-details">
+          <li class="telephone-number">Telephone: 0077700777</li>
+          <li class="email">info@example.com</li>
+          <li>
+            <a class="back-to-top" href="#main-articles">Back to Top &uarr;</a>
+          </li>
+          <li class="copy-rights">All Rights Reserved &copy; 2020, HCB</li>
+        </ul>
+      </footer>
+    </div>
+
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
   </body>
 </html>
diff --git a/plant.jpg b/plant.jpg