CodeYourFuture · khmdagal · Jul 23, 2022 · Jul 24, 2022 · Jul 24, 2022 · Jul 24, 2022
diff --git a/README.md b/README.md
@@ -2,25 +2,25 @@
 
 ## Setup
 
-First step is to fork this repo into your own Github account - if you don't remember how, then refer back Lesson 0 contents.
+<!-- First step is to fork this repo into your own Github account - if you don't remember how, then refer back Lesson 0 contents. --> Done
 
 ## Homework
 
 Create a new webpage on a subject that you're interested in (maybe the same topic you used for your Codepen submission).
 
-The page should **NOT** use any framework like Bootstrap.
+<!-- The page should **NOT** use any framework like Bootstrap. --> Done
 
 It should include the following elements:
 
 - The `.html` page and a linked `.css` file applies a consistent color scheme to links and text on your page.
-- A page header with a title and description for the site.
-- An articles section with three articles, each including a title, summary and a link.
-- A page footer containing info about you or the site.
-- Proper use of the semantic HTML tags we discussed.
+<!-- - A page header with a title and description for the site. --> Done
+<!-- - An articles section with three articles, each including a title, summary and a link. --> Done
+<!-- - A page footer containing info about you or the site. --> Done
+<!-- - Proper use of the semantic HTML tags we discussed. --> Done
 - Research the `:first-child` pseudo-class and use it to style the first article so that it stands out from the others.
-- Use this website [Lorem Ipsum](http://www.lipsum.com/) to generate random blocks of contents to fill your website.
-- **Commit often (with good meaningful commit messages), and Push to Github regularly.**
-- Use the sketch below to guide you towards the layout and content you are trying to achieve. _Please note that this is just a sketch - you can choose the colours, fonts and images that you want to use in the page._
+<!-- - Use this website [Lorem Ipsum](http://www.lipsum.com/) to generate random blocks of contents to fill your website. --> Done
+<!-- - **Commit often (with good meaningful commit messages), and Push to Github regularly.**
+- Use the sketch below to guide you towards the layout and content you are trying to achieve. _Please note that this is just a sketch - you can choose the colours, fonts and images that you want to use in the page._ --> Done
 
   <a href="blog-sketch-week-1.png" target="blank">
     <img src="blog-sketch-week-1.png" style="border: 1px solid #bababa;">

diff --git a/css/style.css b/css/style.css
@@ -6,3 +6,65 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+  /* body font and background color */
+ body{
+   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    background-color: khaki;
+ }
+
+ /* this is header and h2 styling rule */
+ header,h2{
+    border: solid 3px;
+    text-align: center;
+    box-shadow: 10px 5px 5px red;
+    font-size: x-large;
+    padding: 5px;
+   }
+/* for SEO reason I give enough space between nav items */
+#navigation{
+   display: flex;
+   justify-content: space-around;
+}
+   /* this rule is displaying the three sections of the page
+   as block means on top of each other or other words portrait  */
+ .articles{
+    display:block;
+    box-shadow: 10px 5px red;
+ }
+
+ /* This class is targeting pictures and summary section so 
+ they can appear side by side  */
+ .pict-summary-section{
+   display: flex;
+   padding: 10px;
+ }
+
+ /* this code helps to make space between the pictures and the 
+ other content such as paragraphs and ul list. */
+.summary-section{
+   margin: 5%;
+}
+
+ .summary-paragraph{
+   font-size: larger;
+ }
+ .articale-image{
+   height: 100%;
+    width: 40%;
+ }
+ footer{
+   box-shadow: -5px 5px 5px ;
+ }
+ .facebook-image{
+
+    width: 5%;
+   height: 4%;
+    border-radius: 50%;
+ }
+
+ /* this is to practice pseudo class
+  and targeting picture and first child of the (class="pict-summary-section")
+ */
+section :first-child{
+   border-radius: 50%;
+}
diff --git a/images/Maths-image.jpg b/images/Maths-image.jpg
diff --git a/images/facebook-image.jpg b/images/facebook-image.jpg
diff --git a/images/somali-image.jpg b/images/somali-image.jpg
diff --git a/images/sports-image.jpg b/images/sports-image.jpg
diff --git a/index.html b/index.html
@@ -2,21 +2,84 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <title>My Blog</title>
-    <link
-      href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
-      rel="stylesheet"
-      type="text/css"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
+    <title>FLC College</title>
+    <!-- I comment out this part to improve lighthouse best practices and SEO -->
+    <!-- <link href="//fonts.googleapis.com/css?family=Roboto:400,500,300" 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 -->
+    <header class="header">
+      <h1 class="title-1">Fit and Learning College <span id="title-span"> FLC</span></h1>
+        <nav id="navigation" class="navigation">
+          <a href="#maths-id">Maths Course</a>&nbsp;
+          <a href="#somali-id">Somali Language Course</a>&nbsp;
+          <a href="#sport-id">Sports Course</a>
+        </nav>
+   </header>
+    <!-- This the maine content of the page -->
+    <main  class="articles-section">
+      <!-- This is the first section or first child of the main section -->
+        <article id="maths-section" class="articles">
+          <h2 class="title-2">Maths Courses</h2>
+          <section class="pict-summary-section">
+            <img src="images/Maths-image.jpg" class="articale-image" alt="Math-image">
+            <section class="summary-section">
+              <p class="summary-paragraph">FLC provides high quality education, in specialized subjects</p>
+              <ul id="maths_list">
+                <li>Maths for Beginners</li>
+                <li>Secondary Level</li>
+                <li>Higher Mathematics</li>
+              </ul>
+              <a href="https://www.bbc.co.uk/bitesize/topics/zsjqtfr/year/z63tt39" class="math-link-toBitsize" target="_parent">More Maths</a>
+            </section>
+          </section>
+        </article>
+
+        <!-- This is the second section or second child of the main section -->
+        <article id="somali-section" class="articles">
+          <h2 class="title-2">Somali Language Courses</h2>
+           <section class="pict-summary-section">
+             <img src="images/somali-image.jpg" class="articale-image" alt="somali-image" >
+              <section class="summary-section">
+                <p class="summary-paragraph">FLC can guaranteed you will be tough Somali Language in very short period of time</p>
+                <ul>
+                  <li>Basics and alphabet</li>
+                  <li>speaking and writing</li>
+                  <li>Listening complex conversation</li>
+                </ul>
+                <a href="https://www.youtube.com/watch?v=uWWauiksJVs" class="somali-link" target="_parent">More about Somali</a>
+              </section>
+            </section>
+        </article>
+
+        <!-- This is the third section or third child of the main section -->
+        <article id="sport-section" class="articles">
+          <h2 class="title-2">Sports Courses</h2>
+          <section class="pict-summary-section">
+            <img src="images/sports-image.jpg" class="articale-image" alt="sport-image">
+              <section class="summary-section">
+                  <p class="summary-paragraph">FLC is proud to be one of the best sports and learning college in the country</p>
+                  <ul>
+                    <li>Football for kids</li>
+                    <li>Football for all ages</li>
+                    <li>Running & for advanced and beginners</li>
+                    <li>Swimming</li>
+                  </ul>
+                  <a href="https://www.liv-coll.ac.uk/course_departments/sports/" class="sports-link" target="_parent">more about sport</a>
+                </section>
+          </section>
+        </article>
+    </main>
+
+    <footer class="footer">
+      <!--a link for facebook has no class ** make it if necessary-->
+    <img src="images/facebook-image.jpg" class="facebook-image" alt="facebook-image">
+      <span class="">@copy-right Khadar</span>
+    </footer>
   </body>
 </html>
+<!-- titles should be top of the each section-->
+