I recently did some coding for a school project and needed some help with the layout.
Here are my questions:
- What do I do on my css to change how the text "NRL 15/07/18 looks?
- How do I move the text saying "World Cup" next to the second picture? ( I need to save a little space so I can put Soccer 16/07/18 above the "World Cup" text but beside the picture. See what I did with the NRL; same thing but
- How do I fix up the website layout and how it looks in general? (colour, background colour, font-size, what improvements should I make to get more marks?)
This is my coding for the website.
Here is my html:
<DOCTYPE html>
<head>
<title> GWS News- Home</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
<header>
<div class="container">
<h1> Grass World Sport News</h1>
<img src=img/logo.jpg class="logo">
<ul class="nav">
<li class="active"><a href="file:///Users/rarichenjoseph/Desktop/GWS%202/Website.html">Home</a></li>
<li><a href="#">World Cup</a> </li>
<li><a href="#">Sports</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div class="banner">
<img class="banner-image" src=img/banner1.jpeg>
</div>
</header>
<div class="body">
<h1> Latest Sport News</h1>
</div>
<div class="pics">
<img class="nrl-image" src="img/dvw.jpg">
<p3> NRL 15/07/18</p3>
<h2> Can St George Illawarra Dragons keep their place on top of the ladder?</h2>
<p1> West Tigers beat St George Illawarra Dragons, 20-16. Robbie Farah stuns all of Dragons with a match-winning performance that leads to Dragons first loss at their home ground. Farah carried the tigers by running 42 metres to go with two linebreak assists, two try assist and 42 tackles in a complete performance. This win for the Tigers allow them to stay in top 8 and possibly have a chance to win the finals. The Dragons were disappointing in front of their home crowd and now faces the possibility of dropping out of the top place on the ladder, with the Panthers and Sharks right behind them. They did produce some good plays second half and closed the gap, but it proved to be not enough. </p1>
</div>
<div>
<div style="clear: both;"></div>
<div style="margin-top:20px"></div>
<img class="world-cup" src="img/wcf.jpg"
</div>
<div>
<h1> World Cup</h1>
</div>
</body>
</DOCTYPE html>
Here is my css:
html,body{
background-color: #ffffff;
margin: 0;
padding: 0;
font-family: sans-serif;
}
div.container{
margin: 0;
padding: 0 30px;
}
header{
background-color: #000000;
float: left;
width: 100%;
}
header h1{
color: #ffffff;
text-transform: uppercase;
float: left;
font-size: 50px;
}
.logo{
margin: 10px 50px;
height: 120px;
float: left;
}
.nav {
float: right;
list-style-type: none;
list-style: none;
padding: 10px 100px;
margin: 20px;
}
.nav li {
display: inline-block;
margin: 10px 5px;
}
ul.nav li a{
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
font-size: 20px;
font-family: "Roboto", sans-serif;
margin-bottom: inherit;
padding: 5px 10px;
letter-spacing: 2px;
border: 1px solid #ffffff;
}
.nav li a:hover{
background: #fff;
transition: .4s;
color: #000000
}
.nav li.active a{
border: 2px solid white;
background: #ffffff;
color: #000;
}
.banner-image {
width: 100%;
}
.body{
border: 1px solid black;
background: #000000;
color: #ffffff;
font-size: 20px;
}
.nrl-image{
float: left;
}
0 Answer(s)