CodeYourFuture · Khlil1313 · Jan 22, 2023 · Jan 23, 2023 · Jan 23, 2023 · Jan 23, 2023
diff --git a/.github/HTML-CSS-Coursework-Week1.code-workspace b/.github/HTML-CSS-Coursework-Week1.code-workspace
@@ -0,0 +1,11 @@
+{
+	"folders": [
+		{
+			"path": ".."
+		},
+		{
+			"path": "../../exercise1"
+		}
+	],
+	"settings": {}
+}
diff --git a/css/style.css b/css/style.css
@@ -6,3 +6,71 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+ html {
+    background-color:rgb(240, 240, 229);
+ }
+.nav {
+    overflow: hidden;
+    background-color: aquamarine;
+
+}
+
+.nav a {
+    float: left;
+    color:black;
+    padding: 10px 15px;
+    text-align: center;
+    font-size: 20px;
+    text-decoration: none;
+
+}
+
+.nav a:hover {
+    background-color: brown;
+    color:white;
+
+}
+
+h1 {
+    color: rgb(5, 24, 18);
+    font-size: 35px;
+}
+
+.image {
+    padding-bottom: 2rem;
+}
+
+.articles {
+    color: rgb(63, 6, 6);
+    padding: 1rem 0 10rem 0;
+}
+
+.articles h2 {
+    color:brown;
+
+}
+
+.articles a {
+    text-decoration: none;
+}
+
+.articles a:hover {
+    background-color: blueviolet;
+    color: white;
+}
+
+article:first-child {
+    color: rgb(8, 9, 9);
+    font-style: italic;
+}
+
+footer {
+    font-style: inherit;
+}
+
+footer span {
+   color: rgb(2, 93, 2);
+   font-size: 1.5rem;
+   font-weight: bold;
+}
+
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <title>My Blog</title>
+    <title>The benefits of cycling</title>
     <link
       href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
       rel="stylesheet"
@@ -16,7 +16,39 @@
     <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 -->
+    <div class="nav">
+      <a href="#">Home</a>
+      <a href="#">statistics</a>
+      <a href="#">About us</a>
+      <a href="#">Contacts</a>
+    </div>
+    <h1>How can cycling change our life?</h1>
+    <img class="image"  src="https://post.healthline.com/wp-content/uploads/2020/08/Santa_Monica_Path-732x549-Thumbnail-732x549.jpg" width="100%">
+    <h2>Cycling can reduce depression and anxiety, improve the health system and maintain a low weight</h2>
+
+    <div class="articles">
+      <article>
+        <h2>The benefits of cycling on mental health</h2>
+        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos cupiditate doloremque aspernatur eligendi incidunt porro nostrum maiores. Perspiciatis esse laudantium porro nisi blanditiis distinctio tempore dolore, asperiores placeat consequuntur nemo.</p>
+        <p>To continue reading, please click <a href="#">here</a></p>
+      </article>
+
+      <article>
+        <h2>The benefits of cycling on reduing weight</h2>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias corporis rem aliquam similique voluptates? Nostrum recusandae provident impedit laboriosam velit sunt iure possimus sint fugiat nam dolore soluta, cumque doloribus?</p>
+        <p>To continue reading, please click <a href="#">here</a></p>
+      </article>
+
+      <article>
+        <h2>The benefits of cycling on boosting mood</h2>
+        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos cupiditate doloremque aspernatur eligendi incidunt porro nostrum maiores. Perspiciatis esse laudantium porro nisi blanditiis distinctio tempore dolore, asperiores placeat consequuntur nemo.</p>
+        <p>To continue reading, please click <a href="#">here</a></p>
+      </article>
+    </div>
+
   </body>
+
+  <footer>
+    <p>For any enquiries, please contact us on the number <span>07481173302</span> </p>
+  </footer>
 </html>