My created Usain Bolt site/We
HomePage1.jpg
My created Usain Bolt site/We
index.html
The real life Flash, Usain Bolt!
Home Â
Records Â
Personnel Life
     About the fastest man alive!
        (1) Usain Bolt, was du
ed "the fastest man alive" after winning three gold medals at the 2008 Olympic Games.
        (2) First man in Olympic history to win both the 100- and 200-meter races in record time.
        (3) Usain is 6ft 5in, which is not the normal height for sprinters
        (4) Born in Jamaica
        (5) He had 2 siblings
© Footer ...
My created Usain Bolt site/We
Page1.html
Records
XXXXXXXXXXHome Â
XXXXXXXXXXRecords Â
XXXXXXXXXXPersonnel Life
  Bolt's accomplishments
  Bolt is an 11-time world champion. A record for Bolt created in races for 100 meters, at 9.58 seconds, and 200-meters, at 19.19 seconds, both of which he made at the 2009 Berlin World Athletics Championships.
  He has a great stamina as won many prizes due to recieving the numerous awards, including the IAAF World Athlete of the Year (twice), Track & Field Athlete of the Year and Laureus Sportsman of the Year.
My created Usain Bolt site/We
Page2.html
Personnel Life
XXXXXXXXXXHome Â
XXXXXXXXXXRecords Â
XXXXXXXXXXPersonnel Life
  Deep dive into bolt's life:
  Bolt's favourite childhood memories, are the days he spent playing
XXXXXXXXXXCricket and Football with his
other Sadiki.
  He has a humanitarian side, which he showed to the world when he contributed $50,000 USD to the victims of the
XXXXXXXXXX2008 Siachen earthquake.
My created Usain Bolt site/We
ecords.jpg
My created Usain Bolt site/We
styles.css
html, body {
height: 100%;
padding: 0;
margin: 0;
}
* The navbar *
.topnav {
overflow: hidden;
}
* Page Header *
.page-header {
XXXXXXXXXXflex: none; /* fixed size *
XXXXXXXXXXpadding: 10px;
XXXXXXXXXXfont-size: 2em;
XXXXXXXXXXfont-weight: bold;
XXXXXXXXXXbackground: orange;
XXXXXXXXXXcolor: white;
}
*Page footer *
footer {
XXXXXXXXXXflex: 0 0 auto;
XXXXXXXXXXbackground: Orange;
XXXXXXXXXXcolor: white;
XXXXXXXXXXpadding: 10px;
}
* Content will go here *
.main {
display: flex;
flex-wrap: nowrap;
height: 100%;
overflow: auto;
}
.Content {
flex: 1;
}
Things to add to the website
I want you to greatly improve this website (The one I'm linking about Usain Bolt).
You definitely need to add these elements to the website below:
CSS for link states -
https:
www.w3schools.com/css/css_link.asp
CSS for positioning - absolute or relative,
https:
www.w3schools.com/css/css_positioning.asp
CSS for the box model - This is using any of the following css properties: padding,
margin, and/or border.
https:
www.w3schools.com/css/css_boxmodel.asp
Include a use of Google Fonts,
Li
ary of Google Fonts with HTML and CSS code for using fonts in your we
Pages
Documentation on How to Use Google Fonts
example of web page with Google Font (.html file)
Also, you must implement a better use of CSS for flexbox. In the .css file, in the
.page-header and .main classes it is declared ok with settings for the flex property that
are good, but in the .Content and the footer tag CSS it is not.
https:
www.w3schools.com/css/css3_flexbox.asp
MORE INFO NEXT PAGE
https:
www.w3schools.com/css/css_link.asp
https:
www.w3schools.com/css/css_positioning.asp
https:
www.w3schools.com/css/css_boxmodel.asp
https:
fonts.google.com
https:
fonts.google.com
https:
developers.google.com/fonts
https:
uwwtw.instructure.com/courses/401017/files/ XXXXXXXXXX?wrap=1
https:
www.w3schools.com/css/css3_flexbox.asp
It is ok to declare CSS properties and settings for the body tag, but you don't need to fo
the html tag because the html tag is declaring to the
owser that the HTML code inside
it are all HTML tags, but the content that displays in the
owser does not start until the
ody> tag,
so the code at the top of the .css file can be changed to:
ody { properties and settings }
I want this website to look beautiful. So you have to make sure everything actually looks
good and flows nicely together at the end of the day.