diff --git a/README.md b/README.md index 61644f44..29e601ae 100644 --- 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. + 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. + 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. + Done + Done + Done + 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._ + Done + Done diff --git a/css/style.css b/css/style.css index 75e9841e..8121ee09 100644 --- 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 new file mode 100644 index 00000000..43925d30 Binary files /dev/null and b/images/Maths-image.jpg differ diff --git a/images/facebook-image.jpg b/images/facebook-image.jpg new file mode 100644 index 00000000..ba1a3e8d Binary files /dev/null and b/images/facebook-image.jpg differ diff --git a/images/somali-image.jpg b/images/somali-image.jpg new file mode 100644 index 00000000..6843ab36 Binary files /dev/null and b/images/somali-image.jpg differ diff --git a/images/sports-image.jpg b/images/sports-image.jpg new file mode 100644 index 00000000..720465ae Binary files /dev/null and b/images/sports-image.jpg differ diff --git a/index.html b/index.html index 67dfc7f5..ac72fa50 100644 --- a/index.html +++ b/index.html @@ -2,21 +2,84 @@ - - My Blog - + + FLC College + + + - - +
+

Fit and Learning College FLC

+ +
+ +
+ +
+

Maths Courses

+
+ Math-image +
+

FLC provides high quality education, in specialized subjects

+
    +
  • Maths for Beginners
    • +
  • Secondary Level
    • +
  • Higher Mathematics
    • +
+ More Maths +
+
+
+ + +
+

Somali Language Courses

+
+ somali-image +
+

FLC can guaranteed you will be tough Somali Language in very short period of time

+
    +
  • Basics and alphabet
    • +
  • speaking and writing
    • +
  • Listening complex conversation
    • +
+ More about Somali +
+
+
+ + +
+

Sports Courses

+
+ sport-image +
+

FLC is proud to be one of the best sports and learning college in the country

+
    +
  • Football for kids
    • +
  • Football for all ages
    • +
  • Running & for advanced and beginners
    • +
  • Swimming
    • +
+ more about sport +
+
+
+
+ + + +