/* MOBILE AND GLOBAL STYLES */
/* applies to screens smaller than 500px (first breakpoint) */
/* and above unless overwritten below */
body {
background: grey;
margin: 0;
font-family: Arial;
}
header {
grid-area: header;
background: darkblue;
color: white;
margin: 0;
font-family: rockwell;
font-size: 450%;
text-align: center;
height: 100%;
}
main{
color: black;
font-family: rockwell;
font-size: 150%;
margin-left: 50px;
margin-right: 50px;
}
p{
margin-left: 35px;
}
h1{
text-decoration: underline;
text-align: center;
}
h2{
text-decoration: underline;
text-align: center;
}
h3{
text-align: center;
text-decoration: underline;
}
nav {
grid-area: menu;
display: none;
clear: both;
justify-content: center;
background: black;
flex-direction: column;
}
nav a {
padding: 1.25em 1.5em;
color: black;
background: #A09C9C;
text-decoration: none;
transition: all 1.5s;
width: 100%;
text-align: center;
font-size: 130%;
font-family: fantasy;
border-right: 1px solid white;
border-top: 5px solid white;
border-bottom: 5px solid white;
}
.devs{
text-align: center;
}
nav a:hover {
color: white;
background: grey;
}
.menu {
background: #555;
text-align: center;
color: grey;
line-height: 2em;
}
.menu-toggle {
display: flex;
}
.fa {
padding: 20px;
font-size: 30px;
width: 70px;
text-align: center;
text-decoration: none;
margin: 8px 8px;
border-radius: 50%;
transition: .6s
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-youtube {
background: #dd4b39;
color: white;
}
.fa-instagram {
background: #007bb5;
color: white;
}
.media{
position: sticky;
}
.image{
position: sticky;
}
.apibox {
background-color: lightgrey;
width: 800px;
border: 5px solid black;
padding: 25px;
margin-left: 30%;
margin-top: 3%;
}
.vance {
border: 0;
width: 560px;
height: 315px;
align: left;
margin-left: 15%;
margin-bottom: 2%;
}
.vancevideo {
width: 560px;
height: 315px;
margin-left: 7%;
align: left;
margin-bottom: 2%;
}
.superbowl {
border: 0;
width: 560px;
height: 315px;
align: left;
margin-left: 15%;
margin-bottom: 2%;
}
.superbowlvid{
width: 560px;
height: 315px;
margin-left: 7%;
align: left;
margin-bottom: 2%;
}
.news1 {
background-color: lightgrey;
width: 1250px;
border: 5px solid black;
padding: 25px;
margin-left: 15%;
margin-top: 3%;
}
.animation {
position: absolute;
/* comment out 'top' and 'left' and see what happens */
top: 176px;
left: 550px;
box-sizing: border-box;
width: 105px;
height: 62px;
padding: 0 1em;
background-color: #e5e5e5;
animation-name: movingBox;
animation-duration: 30s;
animation-iteration-count: infinite; /* infinite */
animation-direction: alternate;
animation-timing-function: ease-in-out;
font-size: 100%;
text-align: center;
}
.animation2 {
position: absolute;
/* comment out 'top' and 'left' and see what happens */
top: 176px;
left: 550px;
box-sizing: border-box;
width: 87px;
height: 62px;
padding: 0 1em;
background-color: #e5e5e5;
animation-name: movingBox;
animation-duration: 30s;
animation-iteration-count: infinite; /* infinite */
animation-direction: alternate;
animation-timing-function: ease-in-out;
font-size: 100%;
text-align: center;
}
.animation3 {
position: absolute;
/* comment out 'top' and 'left' and see what happens */
top: 176px;
left: 550px;
box-sizing: border-box;
width: 87px;
height: 70px;
padding: 0 1em;
background-color: #e5e5e5;
animation-name: movingBox;
animation-duration: 30s;
animation-iteration-count: infinite; /* infinite */
animation-direction: alternate;
animation-timing-function: ease-in-out;
font-size: 110%;
text-align: center;
}
.animation4 {
position: absolute;
/* comment out 'top' and 'left' and see what happens */
top: 190px;
left: 550px;
box-sizing: border-box;
width: 87px;
height: 70px;
padding: 0 1em;
background-color: #e5e5e5;
animation-name: movingBox;
animation-duration: 30s;
animation-iteration-count: infinite; /* infinite */
animation-direction: alternate;
animation-timing-function: ease-in-out;
font-size: 110%;
text-align: center;
}
.mail {
width: 70px;
height: 70px;
}
.gamepass {
width: 150px;
height: 80px;
}
.footballamerica {
width: 150px;
height: 80px;
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: white;
font-size: 30px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
font-family: Cooper Black;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: white;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes movingBox {
0% { background-color:#e5e5e5; left: 523px; top: 190px;}
25% { background-color:#e5e5e5; left: calc(78% - 200px); top: 190px;}
50% { background-color:#e5e5e5; left: calc(38% - 200px); top: 190px; }
75% { background-color:#e5e5e5; left: calc(78% - 200px); top: 190px; }
100% { background-color:#e5e5e5; left: 523px; top: 190px; }
}
/* comment in for CSS-only solution: */
.menu:hover + nav,
nav:hover {
display: flex;
}
.team-wiki {
text-align: center;
margin-left: 25%;
}
/* TABLET STYLES */
.menu{
color: white;
}
@media screen and (min-width: 500px) {
/* applies to screens wider than 499px */
body {
background: grey;
}
.menu {
display: none;
min-width:500px;
}
nav {
display: flex;
flex-direction: row;
}
nav a {
padding: 1.25em 0.5em;
color: white;
background: darkred;
text-decoration: none;
transition: all 1.5s;
}
/* just change the menu colours on hover above mobile widths */
nav a:hover {
color: white;
background: darkred;
opacity: 0.7;
}
}
/* DESKTOP STYLES */
@media screen and (min-width: 1000px) {
/* applies to screens wider than 999px */
body {
background: #e5e5e5;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NFL News</title>
<link rel="icon" type="image/png" href="nfl.png">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
</head>
<header><img border="0" alt="NFL Logo" src="nfl.png" width="80" height="80"
align="left">NFL FANSITE <img border="0" alt="NFL Logo" src="nfl.png"
width="80" height="80" align="right"></header>
<body class="grid">
<div id="wrapper"></div>
<div class="menu" id="menu-toggle">MENU</div>
<nav id="menu-nav">
<a href="index.html">HOME</a>
<a href="news.html">NEWS</a>
<a href="teamhistory.html">TEAM HISTORY</a>
<a href="#">DISCUSSIONS</a>
<a href="gallery.html">GALLERY</a>
</nav>
<div class="animation2">
<a href="https://www.footballamerica.co.uk/en/"><img
class="footballamerica" src="footballamerica.jpg" alt="Link to the football
america website"/></a>
</div>
<a href="https://www.facebook.com/NFL/" class="fa fa-facebook"</a>
<a href="https://twitter.com/NFL?
ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" class="fa fa-
twitter"></a>
<a href="https://www.youtube.com/user/NFL" class="fa fa-youtube"></a>
<a href="https://www.instagram.com/nfl/?hl=en" class="fa fa-instagram"></a>
<main>
<h1>
NFL News
</h1>
<h3>
Vance Joseph Fired
</h3>
<img class="vance" alt="Picture of developers" src="Vance.jpg">
<iframe class="vancevideo" src="https://www.youtube.com/embed/nny6aUi4lg8"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-
picture" allowfullscreen></iframe>
</iframe>
<div class="news1">
John Elway has fired Vance Joseph after two consecutive season losses
without any playoff chances. The 2017 season that Vance Joseph first coached
ended in a 5-11 record for the Denver Broncos and the 2018 season ending
with a 6-10 record. Before the period of Vance Joseph as head coach, Gary
Kubiak had led the Broncos to a SuperBowl victory in 2015 against the
Panthers. In an interview John Elway said "I spoke with Vance this morning
and thanked him for all of his hard work as our head coach". Elway also said
that "Vance made a lot of strides and deserves credit for how hard and
competitively the team played this season". Many of the fans of the Broncos
were very unhappy, especially towards the back-end of the 2018 season
because of the downward spiral that happened after the first few weeks of
the season and also because of the lack of competitiveness in important
games. Vance Joseph still expressed how appriciative he was for his
opportunity in Denver by saying "I want to thank John Elway, Joe Ellis and
the organisation for the opportunity to serve as the head coach of the
Denver Broncos" and "It's disappointing not being able to finish what we
started, but I'm incredibly proud of the players and coaches for how they
fought and worked every week".
</div>
<br>
<br>
<br>
<br>
<h3>
SuperBowl Odds
</h3>
<img class="superbowl" alt="superbowl image" src="SuperBowl.jpg">
<iframe class="superbowlvid" src="https://www.youtube.com/embed/sog0CFGH-_4"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-
picture" allowfullscreen>
</iframe>
<br>
Clearly with the NFL, anything can happen, however it is interesting to look
at the predictions that people have made about the playoffs and who will
ultimately win the SuperBowl. Many sources are labelling the New Orleans
Saints as having the highest chance of winning the Super Bowl with
PaddyPower, Bet365, WilliamHill and Betfair all posted 13/5 odds on this
happening. Next, with no surprises, is the Kansas City Chiefs who have 9/2
odds on Bet365, Ladbrokes, WilliamHill and Betfair. It is not surprising
that these two teams are the top two in this situation due to how impressive
their seasons have been so far this year. Closely matching or following the
Chiefs are the Rams who have the same odds of 9/2 on Bet365, BetVictor and
Boyle Sports, however they also have some 11/2 odds on betting sites such as
SkyBet, WilliamHill and 10Bet which makes us think that their chances aren't
just as great as the Chiefs. Finally in the 4th position is the New England
Patriots who have 6/1's on the likes of WilliamHill, Betfair, PaddyPower and
Betway to name a few. The New England Patriots are always great contenders
in the playoffs and always seem to be a team that can clutch victories in
important situations. The video displayed here, shows the NFL's predictions
of the probability of some of the different teams chances of winning the
Super Bowl. They go as follows: New Orleans Saints - 17.1% | Los Angeles
Rams - 11.4% | Chicago Bears - 10.3% | Baltimore Ravens - 6.8% | Dallas
Cowboys - 6.0%. Either way, this year in the NFL has been very unpredictable
so any of the teams that have reached the playoffs are viable to be Super
Bowl 2019 winners.
<br>
<br>
<br>
</main>
<script src="js/scripts.js"></script>
</body>
</html>