Level 1 Submission

Details: Category: Level 1, Portfolio 1 (Basic HTML, CSS); Published: Tuesday, 08 December 2020 17:01; Hits: 820

Design

CSS

/* Tags */

body {
/*I set an appropriate background colour and resized the full website */
background-color: #F0C027;
width: 900px;
margin: auto;
}

footer {
/*I set an appropriate background colour and dimensions and gave them rounded corners on the footer. */
clear: both;
text-align: center;
padding: 10px;
margin: 5px;
border: 1px dotted #A52A2A;
border-radius: 5px;
background: #009900;
}

p, li{
/*I set letter type, size, letter spacing between them and color. */
font-family: sans-serif;
font-size: 12px;
letter-spacing: 1px;
color: #3B3B3B;
}

p {
/*I set the lines so that each line has equal width (like in newspapers) except for the reference page. */
text-align: justify;
}

h1 {
font-family: Consolas;
font-size: 36px;
color: rgb(106, 114, 49);
}

h2 {
font-family: calibri;
font-size: 24px;
font-weight: bold;
color: #660000;
}

h3 {
font-family: arial;
font-size: 18px;
font-weight: bold;
color: #005500;
}

img {
margin: 10px;
border: 4px solid;
border-color: #43d03c;
border-radius: 5px;
box-shadow: 0 0 0 4px #e0fbcd;

}

a:hover { /* coursor hover on anchors */
color: red;
}

table {
margin: auto;
}

table th, td {
padding: 10px;
border: 1px dashed black;
text-align: center;
}

/* Classes */

.container {
padding: 10px;
border: 1px dotted #A52A2A;
border-radius: 5px;
margin-top: 2em;
margin-bottom: 2em;
}

.header {
border: 1px dotted #A52A2A;
border-radius: 5px;
background-image: url('../images/logo.png');
background-position: center;
background-repeat: no-repeat;
background-color: #78B82A;
position: relative;
height: 100px;
margin: 0 auto;
padding: 24px;
}

.invisibleLink {
display: block;
width: 100%;
height: 100%;
}

.side-panel {
float: left;
width: 25%;
padding: 10px;
border: 1px dotted #A52A2A;
background: #b5fdd8;
border-radius: 5px;
margin: 10px;
}

.side-panel li {
list-style: none;
margin: 0;
border-bottom: 1px solid gray;
text-decoration: none;
}

.side-panel li a {
text-decoration: none;
}

.content {
margin-left: 30%;
margin-top: 10px;
width: 66%;
padding: 5px 10px;
background: #d0fbf9;
border: 1px dotted #A52A2A;
border-radius: 5px;
}

/* Unique IDs */

#home {
background: #a0fbe0;
}

#about {
background: #bdfe8c;
}

#membership {
background: #c0fbc4;
}

#key {
background: #d0fb60;
}

#homelessness {
background: #e0fb80;
}

#mental {
background: #e3e76b;
}

#education {
background: #90fbb0;
}

#references {
background: #b8f274;
}

#references p { /* Exception on references page */
text-align: left;
}

#center-header {
text-align: center;
}

HTML Codes

Home.html

<!DOCTYPE HTML>

<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Green Party</title>
<link href="/css/style.css" rel="stylesheet" >
</head>

<body>

<div class="container">

<div class="header"> 
<a href="https://www.greenparty.org.uk/" class="invisibleLink"></a>
</div>

<div class="side-panel">
<h3>Menu</h3>

<ul>
<li>
<a href="/Home.html">Home</a>
</li>
<li>
<a href="/About.html">About the party/its manifesto</a>
</li>
<li>
<a href="/Membership.html">Membership benefits and costs</a>
</li>
<li>
Key issues
<ul>
<li>
<a href="/Homelessness.html">Homelessness</a>
</li>
<li>
<a href="/MentalHealth.html">Mental Health</a>
</li>
<li>
<a href="/Education.html">Education</a>
</li>
</ul>
</li>
<li>
<a href="/References.html">References</a>
</li>
</ul>
</div>

<div class="content" id="home"> 
<h2>Home</h2>

<h3>Parties in the United Kingdom.</h3>

<p>
There are 348 officially registered parties in the United Kingdom. (UK Parliament, 2017)
<img style="float: right;" src="/images/home.jpg" width="200" alt="Earth in hand"/>
</p>

<p>
The composition of the lower house is currently 650 seats on the basis of the number of representatives of each party. Green Party has 1 chair. The remaining 649 seats are shared by Conservative, Labor, Scottish National Party, Liberal Democrat, Democratic Unionist Party, Sinn Féin, Plaid Cymru, Independent and Speaker. (Anon, 2017)
</p>

<h3>The most popular parties for young people.</h3>

<p>
According to the youth, the most popular parties in 2017 was Labor, followed by the Consevative Party and the Liberal Democrats. As compared to the previous years, more people participate in the elections, so the participation rate of young people grows year after year. (Curtis and Curtis, 2017)
</p>

<h3>The role of next generations in politics.</h3>

<p>
Young people living in the Green Party account for 20% of the membership and are less visible within the party and have an obstacle to responsibility. The Green Party offers expert training and mentoring, and we feel that this project helps to make young people more likely to influence their future by doing so. (Younggreens.org.uk, 2017)
</p>

<h3>Why the selected green party are important to young people.</h3>

<p>
The younger generation is important for the Green Party, because they are the ones who should make the decisions of current politicians in the future and this has a bearing on their lives. They want to create a positive and a better future for young people in education and housing crisis management and many other programs. (CFJC Today, 2017), (Greenparty.org.uk, 2017)
</p>

</div>

<footer>Copyright © Andrea Franko</footer>

</div>
</body>
</html>

About.html

<!DOCTYPE HTML>

<head>
<meta charset="utf-8">
<title>Green Party</title>
<link href="/css/style.css" rel="stylesheet" >
</head>

<body>

<div class="container">

<div class="header"> 
<a href="https://www.greenparty.org.uk/" class="invisibleLink"></a>
</div>

<div class="side-panel">
<h3>Menu</h3>

<ul>
<li>
<a href="/Home.html">Home</a>
</li>
<li>
<a href="/About.html">About the party/its manifesto</a>
</li>
<li>
<a href="/Membership.html">Membership benefits and costs</a>
</li>
<li>
Key issues
<ul>
<li>
<a href="/Homelessness.html">Homelessness</a>
</li>
<li>
<a href="/MentalHealth.html">Mental Health</a>
</li>
<li>
<a href="/Education.html">Education</a>
</li>
</ul>
</li>
<li>
<a href="/References.html">References</a>
</li>
</ul>
</div>

<div class="content" id="about"> 
<h2>2. About the Party</h2>

<p>
<img style="float: left;" src="/images/about.jpg" width="200" alt="Stones"/>
<br/>
The Green Party was small group called „Club of Thirteen” in 1973. England and Wales has its roots in the PEOPLE party started by Tony Whittaker in 1973-1975. It then changed its name to "The Ecology Party" in 1975-1985. The Green Party ten years later, and finally to The Green Party of England and Wales in 1990. (Greensarecoming.org.uk, 2017)
</p>

<p>
The Green Party would like a government that prioritises the rights of citizens and the environment over those of corporations.
</p>

<br/><br/><br/>

<h3>The Green Party all our 2017 manifestos is:</h3>

<ul>
<li>
Economy should be innovative, collaborative, forward facing and for the benefit of communities and the environment
</li>
<li>
To put the environment at the centre of everything.
</li>
<li>
Believe that membership of the EU makes our future more hopeful and secure.
</li>
<li>
Our NHS and Public Services
</li>
<li>
Education is a right, and should therefore be available to people of all ages.
</li>
<li>
Positive future for everyone and in particular for young people. We want that future to be safer, happier, more equal and more secure.
</li>
<li>
Will tackle the causes of the housing crisis.
</li>
<li>
Build peace and protect the environment.
</li>
<li>
Believes that politics should be done by people.
</li>
<li>
A People’s Transport System investment and as well as to make our streets and roads safer for everyone. (Joshi, 2017)
</li>
</ul>

</div>

<footer>Copyright © Andrea Franko</footer>

</div>
</body>
</html>

Membership.html

<!DOCTYPE HTML>

<head>
<meta charset="utf-8">
<title>Green Party</title>
<link href="/css/style.css" rel="stylesheet" >
</head>

<body>

<div class="container">

<div class="header"> 
<a href="https://www.greenparty.org.uk/" class="invisibleLink"></a>
</div>

<div class="side-panel">
<h3>Menu</h3>

<ul>
<li>
<a href="/Home.html">Home</a>
</li>
<li>
<a href="/About.html">About the party/its manifesto</a>
</li>
<li>
<a href="/Membership.html">Membership benefits and costs</a>
</li>
<li>
Key issues
<ul>
<li>
<a href="/Homelessness.html">Homelessness</a>
</li>
<li>
<a href="/MentalHealth.html">Mental Health</a>
</li>
<li>
<a href="/Education.html">Education</a>
</li>
</ul>
</li>
<li>
<a href="/References.html">References</a>
</li>
</ul>
</div>

<div class="content" id="membership"> 
<h2>3. Membership and benefits and costs</h2>

<p>
The student membership fee is £5 . There is no lower age limit though you can not vote for up to 18 years of age.
</p>

<h3 id="center-header">The membership type and fee is:</h3>

<table>
<thead>
<tr>
<th>Type</th>
<th>Fee</th>
<th>Period</th>
</tr>
</thead>
<tbody>

<tr>
<td>Standard</td>
<td>£36.00</td>
<td>(£3.00 per month)</td>
</tr>

<tr>
<td>Student</td>
<td>£6.00</td>
<td>per year</td>
</tr>

<tr>
<td>International</td>
<td>£12.00</td>
<td>per year</td>
</tr>

<tr>
<td>Low waged</td>
<td>£12.00</td>
<td>per year</td>
</tr>

<tr>
<td>Unwaged</td>
<td>£6.00</td>
<td>per year</td>
</tr>

<tr>
<td>*Friend</td>
<td>£12.00</td>
<td>per year</td>
</tr>
</tbody>

</table>

<p>
<img style="float: left;" src="/images/membership.jpg" width="200" alt="Coins"/>
<br/><br/>
(*Become a Friend mean is If you are a member of any other political party, you have the opportunity to support the green party.)
</p>

<p>
When you join, you become a full member of the green party, you have the opportunity to participate in various programs, email us and access to campaign such as poster and leaflets. (Younggreens.org.uk, 2017)
<br/>
<br/>
<br/>
</p>

Homelessness.html

<!DOCTYPE HTML>

<head>
<meta charset="utf-8">
<title>Green Party</title>
<link href="/css/style.css" rel="stylesheet" >
</head>

<body>

<div class="container">

<div class="header"> 
<a href="https://www.greenparty.org.uk/" class="invisibleLink"></a>
</div>

<div class="side-panel">
<h3>Menu</h3>

<ul>
<li>
<a href="/Home.html">Home</a>
</li>
<li>
<a href="/About.html">About the party/its manifesto</a>
</li>
<li>
<a href="/Membership.html">Membership benefits and costs</a>
</li>
<li>
Key issues
<ul>
<li>
<a href="/Homelessness.html">Homelessness</a>
</li>
<li>
<a href="/MentalHealth.html">Mental Health</a>
</li>
<li>
<a href="/Education.html">Education</a>
</li>
</ul>
</li>
<li>
<a href="/References.html">References</a>
</li>
</ul>
</div>

<div class="content" id="homelessness"> 
<h2>Homelessness</h2>

<p>
The Green Party leader Natalie Bennett 28 March 2014 said the BBC's research show that only 6% of people affected by the bedroom tax have been able to move, 66% are in rent arrears, with 15% facing eviction as a result.
<br/><br/>
Latest research is further evidence that the bedroom tax is causing widespread misery and suffering. From the fault of the government, in hundreds of thousands of households they can not afford the "bedroom tax" so many families will find it difficult to get financially.
<br/><br/>
Natalie Bennett visited Emmaus Community, who are trying to solve the big challenges of homelessness and unemployment. That people have a roof over the heads and enough to eat in the UK. (Greenparty.org.uk, 2017)
<br/>
<img style="float: right;" src="/images/homelessness.jpg" width="200" alt="Homeless"/>
<br/>

BBC News has published an article in which the House key and what the plan for the future and this can affect homelessness. (BBC News, 2017)
<br/><br/>
The Independent newspaper has published an article that reflects the problem of homeless people, which has an impact on society. It is essential to take up this problem.
<br/><br/>
Homelessness is an increasing problem in Oxford. According to the Oxford Council's announcements, they warn of rough sleepers (homeless people) who may be subject to 'unreasonable' conduct. Homeless people need constant flats to overcome problems and charity urgencies.
<br/><br/>
The problem with the local government was that the objects of the homeless would damage the city's overall impact, and that fire and danger could be dangerous, and that is why they have issued a decree that can be used to remedy the problem. However, the problem of homelessness has still not been resolved. (Bulman, 2017)
<br/><br/>
Finally a summary of homeless people from the perspective of the green party, which is the goal of preventing chronic homelessness. (Greenparty.ie, 2017)
</p>

MentalHealth.html

<!DOCTYPE HTML>

<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Green Party</title>
<link href="/css/style.css" rel="stylesheet" >
</head>

Education.html

<!DOCTYPE HTML>

<head>
<meta charset="utf-8">
<title>Green Party</title>
<link href="/css/style.css" rel="stylesheet" >
</head>

References.html

<!DOCTYPE HTML>

<head>
<meta charset="utf-8">
<title>Green Party</title>
<link href="/css/style.css" rel="stylesheet" >
</head>

<body>

<div class="container">

<div class="header">

</div>

<div class="side-panel">
<h3>Menu</h3>

<ul>
<li>
<a href="/Home.html">Home</a>
</li>
<li>
<a href="/About.html">About the party/its manifesto</a>
</li>
<li>
<a href="/Membership.html">Membership benefits and costs</a>
</li>
<li>
<a href="/KeyIssues.html">Key issues</a>
<ul>
<li>
<a href="/Homelessness.html">Homelessness</a>
</li>
<li>
<a href="/MentalHealth.html">Mental Health</a>
</li>
<li>
<a href="/Education.html">Education</a>
</li>
</ul>
</li>
<li>
<a href="/References.html">References</a>
</li>
</ul>
</div>

<div class="content" id="references"> 
<h2>References</h2>

<p>
Anon, (2017). [online] Available at: • http://www.parliament.uk/mps-lords-and-offices/mps/current-state-of-the-parties/ [Accessed 31 Oct. 2017].
</p>

<p>
BBC News. (2017). At-a-glance guide: The Greens manifesto. [online] Available at: http://www.bbc.co.uk/news/election-2017-40003019 [Accessed 2 Nov. 2017].
</p>

<p>
Bulman, M. (2017). Rough sleepers face fines of £2,500 for leaving possessions in doorways. [online] The Independent. Available at: http://www.independent.co.uk/news/uk/home-news/homeless-people-sleep-rough-doorway-fines-oxford-remove-possessions-2500-a7859246.html [Accessed 2 Nov. 2017].
</p>

<p>
CFJC Today. (2017). B.C. Green Party leader calls on young people to vote in May election. [online] Available at: http://cfjctoday.com/article/565081/bc-green-leader-calls-young-people-vote-may-election [Accessed 2 Nov. 2017].
</p>

<p>
Curtis, C. and Curtis, C. (2017). YouGov | How Britain voted at the 2017 general election. [online] YouGov: What the world thinks. Available at: https://yougov.co.uk/news/2017/06/13/how-britain-voted-2017-general-election/ [Accessed 2 Nov. 2017].
</p>

<p>
Greenparty.ie. (2017). Cite a Website - Cite This For Me. [online] Available at: https://greenparty.ie/wp-content/uploads/2014/12/Green-Party-Housing-Homelessness-Policy-2016.pdf [Accessed 2 Nov. 2017].
</p>

<p>
Greenparty.org.uk. (2017). [online] Available at: https://www.greenparty.org.uk/news/2014/03/28/green-party-leader-speaks-out-against-bedroom-tax-as-she-visits-tameside-homelessness-project/ [Accessed 2 Nov. 2017].
</p>

<p>
Greenparty.org.uk. (2017). A Green Party manifesto for education 2017. [online] Available at: https://www.greenparty.org.uk/green-guarantee/education-for-all.html [Accessed 2 Nov. 2017].
</p>

<p>
Greenparty.org.uk. (2017). A Green Party manifesto for young people 2017. [online] Available at: https://www.greenparty.org.uk/green-guarantee/our-promise-to-young-people.html [Accessed 2 Nov. 2017].
</p>

<p>
Greensarecoming.org.uk. (2017). Green Party in the UK. [online] Available at: http://www.greensarecoming.org.uk/green-party-in-the-uk.html [Accessed 2 Nov. 2017].
</p>

<p>
HuffPost UK. (2017). Tory Policies Are Fuelling The Mental Health Crisis - The Green Party Has A Different Vision. [online] Available at: http://www.huffingtonpost.co.uk/jonathan-bartley/mental-health-parity_b_16531670.html [Accessed 2 Nov. 2017].
</p>

<p>
Joshi, A. (2017). Green Party manifesto 2017: key policy points. [online] The Telegraph. Available at: http://www.telegraph.co.uk/news/0/green-party-manifesto-2017-key-policy-points/ [Accessed 2 Nov. 2017].
</p>

<p>
Policy.greenparty.org.uk. (2017). Education. [online] Available at: https://policy.greenparty.org.uk/ed.html [Accessed 2 Nov. 2017].
</p>

<p>
Source of pictures [online] Available at: https://www.pexels.com/ [Accessed 2 Nov. 2017].
</p>

<p>
the Guardian. (2017). The Green party’s education policies: you ask the questions. [online] Available at: https://www.theguardian.com/education/2015/feb/10/green-party-education-policies-general-election [Accessed 2 Nov. 2017].
</p>

<p>
UK Parliament. (2017). Current State of the Parties. [online] Available at: http://www.parliament.uk/mps-lords-and-offices/mps/current-state-of-the-parties/ [Accessed 2 Nov. 2017].
</p>

<p>
Younggreens.org.uk. (2017). 30 under 30. [online] Available at: http://younggreens.org.uk/get-involved/30-under-30/ [Accessed 2 Nov. 2017].
</p>

<p>
Younggreens.org.uk. (2017). Join the Young Greens. [online] Available at: https://younggreens.org.uk/get-involved/join/ [Accessed 2 Nov. 2017].
</p>