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

ZA2 - Patou Mabando - COURSEWORK-WEEK1 #141

Open
PatouMabando wants to merge 1 commit into
base: master
Choose a base branch
from
Open

ZA2 - Patou Mabando - COURSEWORK-WEEK1 #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
126 changes: 118 additions & 8 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,118 @@
/**
* 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.
*
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');

html {
font-family: 'Roboto', sans-serif;
}

body {
padding: 0;
margin: 0;
box-sizing: border-box;
}

header {
width: 100%;
height: 40vh;
border-bottom: 2px solid rgb(109, 93, 68);
background-image: linear-gradient(60deg, #2b412d 0%, #352517 100%);
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
}

h1 {
font-weight: 500;
font-size: 50px;
color: rgb(201, 201, 100);
border: 2px solid rgb(201, 201, 100);
padding: 10px 30px;
}

h1:hover {
box-shadow: 0 0 20px 0px rgb(129, 129, 15)
}


h2 {
font-size: 35px;
}

h3 {
font-size: 20px;
}

p {
font-size: 30px;
}

main {
width: 80%;
margin: 15px auto;
}


/* img */
.img {
width: 100%;
height: 80vh;
}

/* container */
.container {
width: 85%;
margin: 0 auto;
}

/* articles- blog */
.articles-blogs {
background-color: white;
padding: 20px;
margin-top: 20px;
}

/* Footer */
footer {
text-align: center;
background: rgb(13, 71, 78);
color: #e4e4e4;
height: 40vh;
padding-top: 20px 0;
}

.footer-content h4 {
padding: 20px 0 0 0;
font-weight: 500;
font-size: 20px;
text-align: center;
}


.footer-content p {
max-width: 500;
line-height: 10px;
font-size: 15px;
}

.socials {
list-style: none;
display: flex;
margin: 16px;
align-items: center;
justify-content: center;
margin: 1rem 2rem;
padding: 20px 20px;
}

.socials li {
margin: 0 10px;
}

.footer-bottom {
background: rgb(3, 40, 44);
padding: 20px 0;
}

span {
color: crimson;
}
180 changes: 170 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,181 @@
<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>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<title>My Blog</title>
</head>

<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<header>
<h1>NOBEL PEACE PRIZE</h1>
</header>
<main>
<article class="container">
<article class="articles-blogs">
<h2>Nobel Peace Price</h2>
<img
class="img"
src="https://i.pinimg.com/564x/f6/40/31/f640312328fa8a6a2c2bf98d3da8273b.jpg"
alt="photo"
/>
<p>
The Nobel Peace Prize is one of the five Nobel Prizes established by
the will of Swedish industrialist, inventor and armaments (military
weapons and equipment) manufacturer Alfred Nobel, along with the
prizes in Chemistry, Physics, Physiology or Medicine and Literature.
Since March 1901, it has been awarded annually (with some
exceptions) to those who have "done the most or the best work for
fraternity between nations, for the abolition or reduction of
standing armies and for the holding and promotion of peace
congresses".
</p>
<p>
In accordance with Alfred Nobel's will, the recipient is selected by
the Norwegian Nobel Committee, a five-member committee appointed by
the Parliament of Norway. Since 2020 the prize is awarded in the
Atrium of the University of Oslo, where it was also awarded
1947–1989; the Abel Prize is also awarded in the building. The prize
was previously awarded in Oslo City Hall (1990–2019), the Norwegian
Nobel Institute (1905–1946), and the Parliament (1901–1904). Due to
its political nature, the Nobel Peace Prize has, for most of its
history, been the subject of numerous controversies. The most recent
prize for 2021 was awarded to Maria Ressa and Dmitry Muratov.
</p>
<p>
Read more about Nobel Peace Price
<a
class="tribute-link"
target="_blank"
href="https://en.wikipedia.org/wiki/Nobel_Peace_Prize"
>Wikipedia entry.</a
>
</p>
</article>
<article class="articles-blogs">
<h2>Dr.Denis Mukwege</h2>
<h3>Dr.Denis Mukwege, Nobel Peace Prize 2018</h3>
<img
class="img"
src="https://i.pinimg.com/564x/5f/79/51/5f79510c4c10e50b2af4dc098727afee.jpg"
alt="photo"
/>
<p>
Denis Mukwege (born 1 March 1955) is a Congolese gynecologist and
Pentecostal pastor. He founded and works in Panzi Hospital in
Bukavu, where he specializes in the treatment of women who have been
raped by armed rebels.
</p>
<p>
In 2018, Mukwege and Iraqi Yazidi human rights activist Nadia Murad
were jointly awarded the Nobel Peace Prize for "their efforts to end
the use of sexual violence as a weapon of war and armed conflict"
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas
porro, iure reiciendis modi voluptatibus blanditiis, debitis vitae
nam obcaecati nihil at, distinctio assumenda dolorem neque ducimus
fugit aperiam qui amet.
</p>
<p>
Read more about Dr.Denis Mukwege
<a
class="tribute-link"
target="_blank"
href="https://en.wikipedia.org/wiki/Denis_Mukwegee"
>Wikipedia entry.</a
>
</p>
</article>
<article class="articles-blogs">
<h2>Maria Ressa</h2>
<h3>Maria Angelita Ressa Nobel Peace Price, 2021</h3>
<img
class="img"
src="https://i.pinimg.com/564x/de/3a/57/de3a5791d8a0cf7b5a1169bbe96ff70f.jpg"
alt="photo"
/>
<p>
Maria Angelita Ressa (Tagalog pronunciation: [ˈɾesa], born on
October 2, 1963) is a Filipino-American journalist and author, the
co-founder and CEO of Rappler, and the first Filipino recipient of
the Nobel Peace Prize. She previously spent nearly two decades
working as a lead investigative reporter in Southeast Asia for CNN.
</p>
<p>
Ressa was included in Time's Person of the Year 2018 issue as one of
a collection of journalists from around the world combating fake
news. On February 13, 2019, she was arrested by Philippine
authorities for cyberlibel due to accusations that Rappler published
a false news story concerning businessman Wilfredo Keng. On June 15,
2020, a court in Manila found her guilty of cyberlibel under the
controversial Anti-Cybercrime law, a move condemned by human rights
groups and journalists as an attack on press freedom. As she is a
prominent critic of Philippine President Rodrigo Duterte, her arrest
and conviction was seen by many in the opposition and the
international community as apolitically motivated act by Duterte's
government. Ressa is one of the 25 leading figures on the
Information and Democracy Commission launched by Reporters Without
Borders. She was awarded the 2021 Nobel Peace Prize jointly with
Dmitry Muratov for "their efforts to safeguard freedom of
expression, which is a precondition for democracy and lasting
peace."
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus,
suscipit eligendi deleniti earum eius, officia id vel eveniet
voluptatem repellendus placeat aut animi accusantium vero porro
ducimus deserunt ut quia.
</p>
<p>
Read more about Maria Ressa
<a
class="tribute-link"
target="_blank"
href="https://en.wikipedia.org/wiki/Maria_Ressa"
>Wikipedia entry.</a
>
</p>
</article>
</article>
</main>

<footer>
<div class="footer-content">
<h4>Patou Mabando</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<ul class="socials">
<li>
<a href="#"
><img
src="https://img.icons8.com/ios-glyphs/30/undefined/github.png"
/></a>
</li>
<li>
<a href="#"
><img
src="https://img.icons8.com/ios-glyphs/30/undefined/linkedin-circled--v1.png"
/></a>
</li>
<li>
<a href="#"
><img
src="https://img.icons8.com/ios-glyphs/30/undefined/facebook-circled--v1.png"
/></a>
</li>
</ul>
</div>
<div class="footer-bottom">
<p>
Copyright &copy;2022 Nobel Peace Price Blog, Design by
<span>Patou Mabando</span>
</p>
</div>
</footer>
</body>
</html>