Football goal list
How do I make an football goal list?
Stylized list of top English football goal scorers. Straightforward list in HTML dressed up in more attractive CSS packaging. Also responsive.. What is a football goal list? How do you make a football goal list? This script and codes were developed by Peter Lewicki on 03 January 2023, Tuesday.
Football goal list - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Football goal list</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<html> <head> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+Slab:700|Roboto+Condensed|Roboto:900,400"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Football Goals</title> </head> <body> <header> <h1>Top Goal Scorers</h1> <p>Top Five All-time English Top Level goal scorers</p> </header> <ol class="players"> <li><em>Alan Shearer</em><strong>260</strong>Southampton | Blackburn Rovers | Newcastle United</li> <li><em>Wayne Rooney</em><strong>198</strong>Everton | Manchester United</li> <li><em>Andrew Cole</em><strong>187</strong>Arsenal | Newcastle United | Blackburn Rovers | Fulham | Manchester City | Portsmouth | Sunderland</li> <li><em>Frank Lampard</em><strong>177</strong>West Ham | Swansea | Chelsea | Manchester City</li> <li><em>Thierry Henry</em><strong>175</strong>Arsenal</li> </ol> </body>
</html>
</body>
</html>Football goal list - Script Codes CSS Codes
body { font-family: 'Roboto Condensed', sans-serif; font-size: 16px; color: #fff; background-color: #0099cc; margin: 0; padding: 0; } header { background: #0060aa url(wembley.jpg) no-repeat right top; padding: 1px; margin: 0 0 35px 0; min-height: 165px; } header h1 { font-family: 'Roboto Slab', serif; font-size: 2.3em; text-transform: uppercase; margin: 50px 0 5px 30px; text-align: center; } header p { line-height: 20px; font-size: 1.2em; margin: 0; padding: 0px 30px 15px 30px; color: rgba(255,255,255,.6);
text-align: center;} p.source { font-size: .8em; font-style: italic; margin: 0 0 0 30px; color: rgba(255,255,255,.5); } p.source a { color: rgba(255,255,255,.75); padding-left: 7px; } ol.players { list-style-type: none; margin: 0 0 0 30px; } ol.players li { counter-increment: myCounter; margin: 0 0 45px 0; padding: 13px 0 0 65px; position: relative; color: #ccffff; font-size: .9em; }
ol.players li::before { content: counter(myCounter, decimal-leading-zero); display: inline-block; text-align: center; font-size: 4em; line-height: 1.3em; background-color: #fff; color: #0099cc; font-family: 'Roboto', sans-serif; font-weight: 900; padding: 10px; position: absolute; top: 0; left: -40px; border-radius: 5px;
}
ol.players li em { display: block; font-family: 'Roboto', sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #fff; margin: 0 0 -5 0;
}
ol.players li strong { display: block; font-family: 'Roboto Slab', serif; font-weight: 900; font-size: 2em;
}
| Developer | Peter Lewicki |
| Username | peterlewicki |
| Uploaded | January 03, 2023 |
| Rating | 3 |
| Size | 2,475 Kb |
| Views | 12,144 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
| Name | Size |
| Boilerplate WebForm | 1,948 Kb |
| Javascript Welcome | 1,573 Kb |
| TIC TAC TOE GAME | 1,546 Kb |
| A Pen by Peter Lewicki | 1,512 Kb |
| Basic JS rock paper scissors games | 1,597 Kb |
| GetElementById exercise | 1,717 Kb |
| Typing Test | 3,371 Kb |
| HTML5 Canvas exercise | 1,803 Kb |
| Udemy Bootstrap Grid System Exercise | 1,504 Kb |
| Minimalist CSS Blog | 2,066 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
| Name | Username | Size |
| CSS Bot Confusion | Jpod | 3,456 Kb |
| Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 Kb |
| CSS Grid Test | Ajaykarwal | 2,377 Kb |
| Parallax with only CSS | Thulioph | 2,297 Kb |
| Material Design-Layout-Principles Practice | Fraina | 2,331 Kb |
| Tile Animation Thing | Frxnz | 4,332 Kb |
| Android Logo with HTML and CSS | Wifi | 2,000 Kb |
| CSS Link Zoom On Click | Bryce | 1,960 Kb |
| Weird glowy CSS3 game | Toneworm | 3,684 Kb |
| Mega Menu by Joni | Asakasinsky | 3,171 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!