Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

Westmidlands Class 2-Aaishah Okunade-HTML/CSS-Week 1 #3

Closed
aaokunade wants to merge 9 commits into from
Closed

Westmidlands Class 2-Aaishah Okunade-HTML/CSS-Week 1 #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8e1f32c
Html practice
aaokunade Nov 2, 2020
265f256
DIY_website
aaokunade Nov 11, 2020
a3dfaec
logo change in website
aaokunade Nov 12, 2020
da1be1e
changes to the article section
aaokunade Nov 12, 2020
a2fd0dd
Changed the background color of some sections
aaokunade Nov 13, 2020
a406870
footer
aaokunade Nov 13, 2020
9167a3f
links to new page
aaokunade Nov 13, 2020
c8a508f
Title Change
aaokunade Nov 13, 2020
e54a6a5
Modified .html and .css files
aaokunade Nov 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@

DIY_website.css
131 changes: 123 additions & 8 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,123 @@
/**
* Add your custom styles below
*
* Remember:
* - Be organised, use comments and separate your styles into meaningful chunks
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
body {
padding: 100px 200px 200px 200px;
}
header {
background-color: rgba(9, 61, 109, 0.253);
margin-bottom: 10px;
}
.logo {
text-align: center;
display: block;
margin-bottom: 20px;
background-color: rgb(243, 241, 241);
}
.logo p {
color: rgb(44, 12, 224);
font-size: 20px;
font-family: cursive;
}
.logo img {
width: 200px;
height: 150px;
text-align: center;
border-radius: 20px;
}
.navbar {
/*color: green;*/
display: flex;
justify-content: space-between;
}
li {
font-family: "Times New Roman", Times, serif;
float: left;
}
ul {
list-style-type: none;
}
li a {
display: inline-block;
text-decoration: none;
color: rgb(121, 12, 184);
padding: 10px;
}
a:hover {
background-color: navy;
}
/*.main_aside{
min-height:350px;
min-width:500px;
margin-bottom:10px;
background-color: rgb(132, 241, 227);
}*/
.aside ul {
list-style-type: disc;
}
.aside li {
padding: 20px;
}
aside {
width: 295px;
min-height: 250px;
background-color: rgb(132, 241, 227);
display: inline-block;
padding: 10px;
vertical-align: top;
margin-bottom: 10px;
color: rgb(29, 27, 27);
}
main {
width: 593px;
min-height: 250px;
background-color: rgb(175, 235, 235);
display: inline-block;
margin-bottom: 10px;
vertical-align: top;
padding: 10px;
}
/*.article{
background-color: peachpuff;
margin-bottom:10px;
}*/
article {
width: 268px;
min-height: 150px;
background-color: rgb(132, 241, 227);
display: inline-block;
padding: 20px;
/*margin-top:10px;*/
margin-bottom: 10px;
vertical-align: top;
}
article li {
padding: 33px;
list-style-type: disc;
}
article img {
width: 100px;
height: 100px;
float: right;
display: inline;
}
article:first-child {
background-color: palegreen;
color: rgb(231, 14, 14);
}
/*article{
width: 308px;
height: 150px;
background-color: rgb(121, 202, 207);
display:inline-block;
}
article{
width: 308px;
height: 150px;
background-color: rgb(121, 202, 207);
display:inline-block;
}*/
footer {
width: 934px;
min-height: 50px;
background-color: rgba(9, 61, 109, 0.253);
display: flex;
padding-left: 20px;
}
137 changes: 133 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</title>
<title>What you should know about corona virus</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
Expand All @@ -16,7 +16,136 @@
<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 -->
</body>
<header>
<section class="logo"><img
src="https://ichef.bbci.co.uk/news/800/cpsprodpb/168E3/production/_114678329_063573067-1.jpg">
<p>Real. Rampant. Rising.</p>
</section>
<nav class="navbar">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Menu</a></li>
</ul>
</nav>
</header>
<section class="main_aside">
<main>
<h1>How it all Began</h1>
<p>The Covid-19 pandemic began last year in a city in central China, but has since grown to affect nearly every
country on
earth. The virus has put world leaders in hospital while exposing inequality. It has asked major questions of
governments and encroached on the daily lives of billions. And it shows no signs of ending any time soon.
</p>
<p>The biggest story emerged from China, which the BBC first reported as a cluster of cases of a "mysterious viral
pneumonia" in the city of Wuhan.
</p>
<p>There were also fears the virus could spread rapidly as hundreds of millions of people in China prepared to
travel
around the country for Chinese New Year.
But it was still unclear how the illness was transmitted, with health officials saying no cases of human-to-human
transmission had been confirmed.
At that point, the World Health Organization (WHO) said it was aware of the outbreak, it was in contact with the
Chinese
government and it was closely monitoring the event.
By the end of the month, the toll had passed 100, with infections rising fast. It spread beyond Wuhan, both into
other
parts of China and to at least 16 countries around the world.
</p>
<p>There were also fears the virus could spread rapidly as hundreds of millions of people in China prepared to
travel
around the country for Chinese New Year.
But it was still unclear how the illness was transmitted, with health officials saying no cases of human-to-human
transmission had been confirmed.
At that point, the World Health Organization (WHO) said it was aware of the outbreak, it was in contact with the
Chinese
government and it was closely monitoring the event.
By the end of the month, the toll had passed 100, with infections rising fast. It spread beyond Wuhan, both into
other
parts of China and to at least 16 countries around the world.
</p>
<p>For a full read, <a href="https://www.bbc.co.uk/news/world-54337098" target="_blank">visit.</a> </p>
</main>
<aside class="aside">
<h3>Recent Findings</h3>
<ul>
<li>WHO is bringing the world’s scientists and global health professionals together to accelerate the research and
development process, and develop new norms and standards to contain the spread of the coronavirus pandemic and
help care
for those affected.</li>
<li>The R&D Blueprint has been activated to accelerate diagnostics, vaccines and therapeutics for this novel
coronavirus.
</li>
<li>The solidarity of all countries will be essential to ensure equitable access to COVID-19 health products.</li>
</ul>
<p>Read more <a
href="https://www.who.int/emergencies/diseases/novel-coronavirus-2019/global-research-on-novel-coronavirus-2019-ncov"
target="_blank">here.</a>
</p>
</aside>
</section>
<section class="article">
<article>
<h3 class="title">Covid 19 Prominent League</h3>
<h4>Prince Charles <img
src="https://e3.365dm.com/20/03/1600x900/skynews-prince-charles-coronavirus_4958368.jpg?bypass-service-worker&20200330133336">
</h4>
<p>Clarence House confirmed that the 71-year-old heir to the throne had been diagnosed in a statement released on 25
March.
In a video message a few days later, the Duke of Cornwall praised the "remarkable NHS".
He completed his period of isolation at Birkhall in Aberdeenshire.</p>
<h4>Prince Albert II of Monaco <img
src="https://e3.365dm.com/20/03/1600x900/skynews-prince-albert_4951106.jpg?bypass-service-worker&20200319170500">
</h4>
<p>The 62-year-old reigning monarch confirmed he had tested positive for the virus on 19 March.
However, a palace statement said his health was not worrying and he has since recovered.</p>
<h4>Boris Johnson <img
src="https://e3.365dm.com/20/03/1600x900/skynews-boris-johnson-statement_4954070.jpg?bypass-service-worker&20200323211827">
</h4>
<p>The prime minister's coronavirus diagnosis was confirmed on 27 March.
On 5 April, he was admitted to hospital for tests after continuing to display symptoms.
The following day, Downing Street said he was in "good spirits" after a "comfortable" night.</p>
<p>You can find a couple more of <a
href="https://news.sky.com/story/coronavirus-the-famous-faces-who-have-tested-positive-for-covid-19-11960449"
target="_blank">them</a></p>
</article>
<article>
<h3 class="title">Symptoms of Covid 19</h3>
<p>The main symptoms of coronavirus (COVID-19) are:</p>
<ul>
<li>a high temperature – this means you feel hot to touch on your chest or back (you do not need to measure your
temperature).</li>
<li>a new, continuous cough – this means coughing a lot for more than an hour, or 3 or more coughing episodes in
24 hours
(if you usually have a cough, it may be worse than usual).</li>
<li>a loss or change to your sense of smell or taste – this means you've noticed you cannot smell or taste
anything, or
things smell or taste different to normal.</li>
</ul>
<p>More information can be found <a href="https://www.nhs.uk/conditions/coronavirus-covid-19/"
target="_blank">here</a></p>
</article>
<article>
<h3 class="title">Managing Covid 19</h3>
<p>If you have a high temperature, it can help to:</p>
<ul>
<li>get lots of rest, drink plenty of fluids (water is best) to avoid dehydration – drink enough so your pee is
light yellow and clear, take paracetamol or ibuprofen if you feel uncomfortable</li>
<li>If you have a cough, it's best to avoid lying on your back. Lie on your side or sit upright instead, To help
ease a cough, try having a teaspoon of honey. But do not give honey to babies under 12 months.</li>
<li>If this does not help, you could contact a pharmacist for advice about cough treatments.</li>
</ul><br><br>
<!-- <span>You can do <a href="#">these!!!</a></span>-->
</article>
</section>
<footer>
<p>You and I can stop the spread by:</p>
<p>Washing our hands regularly with soap <br>
Keeping a 2m distance<br>
Using a face mask to cover nose and mouth.
</p>

</footer>
</body>
</html>