Blog page details :
Description at the top of the page + background image
covering the entire section and
Topics box When you click on each box, a tab page
opens
new to the selected topic)
• The doctor asked for 3 topics (about agriculture, for
example the harms of hybridization).
Agriculture, summer farming, proper farming methods,
etc.
Part1 :
Steps followed in building the blog page:
1- Build html file called blogfile.html It is
necessary to write .html so that the file is saved in
html format
2- Build css file called blogStyle.css and
link it with blogfile.html in head element
3- In blogfile.html we created section with
blogtopic class this section contain the blog
heading and the blog container that contains
the blog boxes and blog image and blog text
Example:
Hint : that the section blogtopic must be wrriten
inside body element
Next step we go to blogStyle.css file and
customize our html code
number 1 : we reset the page measurements
number2 : Adjust the page contents using flex and padding to suit
Add topic boxes later, add an image and adjust its settings to be
In the middle and contains the entire page
Number 3 : Modify the words so that they are in one line (on top of each other).
Number 4 and 5 : customize color and font size
of heading and sub heading
Then in line 38 in the photo We started putting the
boxes next to each other by using flex box
After that we in line 48 we stared to customize the width and height of
the every box
And line 53 and 58 we customize the image in the box by giving to it
width and height and border and position center
And line 65 and 70 we customize the blog text by giving it color and
padding and font-size
1- Set the black title
2- Add a beige effect and color when hovering over
the black title
3- Adjust the paragraph
4- Adjust the More button and modify its size and
color
5- Add effect and a beige color when hovering over
the More button
Now we have finished this css file
So next step we will repeat the
blogbox inside the blog
container
Example :
in this photo if you looked you
will see that we repeated the
code of blogbox 3 time and that
to make 3 box
final result :
Part 2 :
Steps followed in building the blog page:
1 – build html file called blogtopic1.html and link this
file in the first box in blogpage.html by using a href
element
Example :
2- in blogtopic1.html inside the
body element create section
with class name called
blogtopic1 and inside this
section create h1 element to
write the title and create p
element to write the content of
the blog box
Then create hr element and img
element and collection of Points
using ul li element
Example :
Then create blogtopic1.css file
and linked it with the
blogtopic1.html
And in the blogtopic1.css put
this code
1/Reset the page measurements to zero.
2/Adjust page contents using flex and padding
3/Modify the size, location, and color of the main title
and add an image
4/ Adjust the size, color and location of the topic
paragraph
1 Subtitle format
2/Formatting transverse lines hr
3/Modify the location of the image
/4 Coordinating the color and size of the dots
5/Coordinate image measurements
Final result :
Then repeat the last setp and
create blogTopic2.html and
blogTopic2.css and
blogTopic3.html and
blogTopic3.css and make the
same setps in blocTopic2.html
and link it with its styling file
that called blocTopic2.css
And the same in
blogTopic3.html then go to the
blogPage.html and link the box
2 to blogTopic2.html by using
the a href element like we did
before and the same in box 3
link it with page of
blogTopic3.html
