Skip to content

Instantly share code, notes, and snippets.

@mikebrady0

mikebrady0/index.html

Created December 21, 2023 18:29
Show Gist options
  • Save mikebrady0/330949a718b4a7e3b5ec5dc987a5c1c3 to your computer and use it in GitHub Desktop.
Save mikebrady0/330949a718b4a7e3b5ec5dc987a5c1c3 to your computer and use it in GitHub Desktop.
Download ZIP
UFC ROSTER
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">
</head>
<body>
<div class="header">
<ul>
<li><a id="fighthub">FightHub.io</a></li>
<li><a>Athletes</a></li>
<li><a href="#rankings">Rankings</a></li>
</ul>
</div>
<div class="roster-intro">
<h2 id="rankings" class="roster-title">View The Rankings</h2>
<p class="roster-description">Dive into the heart of the action by navigating through our extensive UFC roster section. Get to know every fighter on a personal level, from seasoned veterans to rising stars, with detailed profiles showcasing their achievements, fighting styles, and career highlights. Stay up-to-date with real-time statistics, fight records, and rankings to track the pulse of the UFC landscape.
</p>
</div>
<!-- Weight Classes -->
<div class="weight-title">
<h2>Weight Classes</h2>
</div>
<section class="weight-classes">
<div id="fly-weight" class="weight-class container">
<h3>Fly Weight-125lbs</h3>
<ol start="0">
<!-- Champ -->
<li class="champion"><h4>Alexandre Pantoja</h4></li>
<li class="fighter">Brandon Moreno</li>
<li class="fighter">Brandon Royval</li>
<li class="fighter">Amir Albazi</li>
<li class="fighter">Kai Kara-France</li>
<li class="fighter">Matheus Nicolau</li>
<li class="fighter">Manel Kape</li>
<li class="fighter">Alex Perez</li>
<li class="fighter">Matt Schnell</li>
<li class="fighter">Muhammad Mokaev</li>
<li class="fighter">Tim Elliot</li>
<li class="fighter">Sumudaerji</li>
<li class="fighter">Steve Erceg</li>
<li class="fighter">Tagir Ulanbekov</li>
<li class="fighter">David Dvorak</li>
<li class="fighter">Cody Durden</li>
</ol>
</div>
<div id="bantam-weight" class="weight-class container">
<h3>Bantam Weight-135lbs</h3>
<ol start="0">
<!-- Champ -->
<li class="champion"><h4>Sean O' Malley</h4></li>
<li class="fighter">Aljamain Sterling</li>
<li class="fighter">Merab Dvalishvili</li>
<li class="fighter">Henry Cejudo</li>
<li class="fighter">Cory Sandhagen</li>
<li class="fighter">Peter Yan</li>
<li class="fighter">Marlon Vera</li>
<li class="fighter">Song Yadong</li>
<li class="fighter">Deiveson Figuerido</li>
<li class="fighter">Rob Font</li>
<li class="fighter">Dominick Cruz</li>
<li class="fighter">Pedro Munhoz</li>
<li class="fighter">Ricky Simon</li>
<li class="fighter">Jonathan Martinez</li>
<li class="fighter">Umar Nurmagomedov</li>
<li class="fighter">Chris Gutierrez</li>
</ol>
</div>
<div id="feather-weight" class="weight-class container">
<h3>Feather Weight-145lbs</h3>
<ol start="0">
<!-- Champ -->
<li class="champion"><h4>Alexander Volkanovski</h4></li>
<li class="fighter">Max Holloway</li>
<li class="fighter">Yair Rodriguez</li>
<li class="fighter">Brian Ortega</li>
<li class="fighter">Arnold Allen</li>
<li class="fighter">Ilia Topuria</li>
<li class="fighter">Josh Emmett</li>
<li class="fighter">Calvin Kattar</li>
<li class="fighter">Giga Chikadze</li>
<li class="fighter">Movsar Evldev</li>
<li class="fighter">Bryce Mitchell</li>
<li class="fighter">Edson Barbosa</li>
<li class="fighter">Sodiq Tusuff</li>
<li class="fighter">Dan Ige</li>
<li class="fighter">Lerone Murphy</li>
<li class="fighter">Alex Caceres</li>
</ol>
</div>
<div id="light-weight" class="weight-class container">
<h3>Light Weight-155lbs</h3>
<ol start="0">
<!-- Champ -->
<li class="champion"><h4>Islam Makhachev</h4></li>
<li class="fighter">Charles Olivera</li>
<li class="fighter">Justin Gaethje</li>
<li class="fighter">Dustin Porier</li>
<li class="fighter">Arman Tsarukyan</li>
<li class="fighter">Michael Chandler</li>
<li class="fighter">Mateusz Gamrot</li>
<li class="fighter">Beneil Dariush</li>
<li class="fighter">Rafael Fiziev</li>
<li class="fighter">Dan Hooker</li>
<li class="fighter">Jalin Turner</li>
<li class="fighter">Rafael Dos Anjos</li>
<li class="fighter">Benoit Saint Denis</li>
<li class="fighter">Renato Moicano</li>
<li class="fighter">Bobby Green</li>
<li class="fighter">Drew Dober</li>
</ol>
</div>
<div id="welter-weight" class="weight-class container">
<h3>Welter Weight-170lbs</h3>
<ol start="0">
<!-- Champ -->
<li class="champion"><h4>Leon Edwards</h4></li>
<li class="fighter">Kamaru Usman</li>
<li class="fighter">Belal Muhammad</li>
<li class="fighter">Colby Covington</li>
<li class="fighter">Gilbert Burns</li>
<li class="fighter">Shavkat Rakhmonov</li>
<li class="fighter">Stephen Thompson</li>
<li class="fighter">Sean Brady</li>
<li class="fighter">Geoff Neal</li>
<li class="fighter">Vicente Luque</li>
<li class="fighter">Ian Machado Garry</li>
<li class="fighter">Jack Della Maddalena</li>
<li class="fighter">Kevin Holland</li>
<li class="fighter">Neil Magny</li>
<li class="fighter">Michael Chiesa</li>
<li class="fighter">Rinat Fakhretdinov</li>
</ol>
</div>
<div id="middle-weight" class="weight-class container">
<h3>Middle Weight-185lbs</h3>
<ol start="0">
<li class="champion"><h4>Sean Strickland</h4></li>
<li class="fighter">Isreal Adesanya</li>
<li class="fighter">Dricus Du Plessis</li>
<li class="fighter">Robert Whittaker</li>
<li class="fighter">Jared Cannonier</li>
<li class="fighter">Marvin Vettori</li>
<li class="fighter">Paolo Costa</li>
<li class="fighter">Roman Dolidze</li>
<li class="fighter">Brendan Allen</li>
<li class="fighter">Khamzat Chimaev</li>
<li class="fighter">Jack Hermansson</li>
<li class="fighter">Nassourdine Imavov</li>
<li class="fighter">Paul Craig</li>
<li class="fighter">Chris Curtis</li>
<li class="fighter">Kelvin Gastelum</li>
<li class="fighter">Anthony Hernandez</li>
</ol>
</div>
<div id="lightHeavy-Weight" class="weight-class container">
<h3>Light-Heavy Weight-205lbs</h3>
<ol start="0">
<!-- Champ -->
<li class="champion"><h4>Alex Pereira</h4></li>
<!-- space -->
<li class="fighter">Jamal Hill</li>
<li class="fighter">Jiri Prochazka</li>
<li class="fighter">Magomed Ankalaev</li>
<li class="fighter">Jan Blachowicz</li>
<li class="fighter">Aleksandar Rakic</li>
<li class="fighter">Nikita Krylov</li>
<li class="fighter">Johnny Walker</li>
<li class="fighter">Anthony Smith</li>
<li class="fighter">Volkan Oezdemir</li>
<li class="fighter">Ryan Spann</li>
<li class="fighter">Khalil Rountree Jr</li>
<li class="fighter">Azamat Murzahanov</li>
<li class="fighter">Dominik Reyes</li>
<li class="fighter">Alonzo Menifield</li>
<li class="fighter">Dustin Jacoby</li>
</ol>
</div>
<div id="heavy-weight" class="weight-class container">
<h3>Heavy Weight-225lbs</h3>
<ol start="0">
<!-- Champ -->
<li class="champion"><h4>Jon Jones</h4></li>
<li class="fighter">Tom Aspinall - IC</li>
<li class="fighter">Ciryl Gane</li>
<li class="fighter">Sergei Pavlovich</li>
<li class="fighter">Stipe Miocic</li>
<li class="fighter">Curtis Blaydes</li>
<li class="fighter">Alexander Volkov</li>
<li class="fighter">Jailton Almeida</li>
<li class="fighter">Serghei Spivac</li>
<li class="fighter">Tai Tuivasa</li>
<li class="fighter">Marcin Tybura</li>
<li class="fighter">Derrick Lewis</li>
<li class="fighter">Jairzinho Rozenstruik</li>
<li class="fighter">Alexandr Romanov</li>
<li class="fighter">Rodrigo Nascimento</li>
<li class="fighter">Marcos Rogerio De Lima</li>
</ol>
</div>
</section>
<div class="center">
<iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/I9b-kh_KadE?si=iyEAeXiGm_diy9mg" title="YouTube video player&autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></iframe>
</div>
</body>
<footer>
<div class="social">
<h2>CHECK WEEKLY FOR LIVE UPDATES</h2>
<p>Updates to happen weekly or after UFC Main Events</p>
<div class="media">
</div>
<div>
<form action="email-list">
<p>Sign Up for our email list to recieve the latest updates !</p>
<input type="email" class="form-control-sm"><input type="submit" value="submit" class="btn btn-light">
</form>
<div>
</div>
<div class="bottom-bar">
<div class="event-title">
<h6 id="event-title">upcoming events :</h6>
</div>
<div class="events">
<a class="event">Fight Night 2/10/24</a>
<a class="event">Fight Night 2/3/24</a>
<a class="event">UFC-297 1/20/24</a>
<a class="event">Fight Night 1/13/24</a>
</div>
</div>
</footer>
</html>
Raw
style.css
@import url(https://fonts.googleapis.com/css?family=VT323);
@media {
scroll-behavior:smooth;
}
* {
font-family: 'VT323';
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
color: black;
}
.header {
width: 100%;
height: 40px;
color:white;
background-color: black;
position: fixed;
z-index: 4;
}
.header a {
font-size: 24px;
}
a {
color: white;
}
ul {
display: flex;
flex-direction: row;
list-style: none;
margin-bottom: 0px;
margin-top: 10px;
justify-content: space-evenly;
}
#fighthub {
font-size: 30px;
position: absolute;
float: left;
left: 0px;
margin-left: 5px;
}
.roster-intro {
padding-top: 1em;
text-align: center;
background-color: lightGrey;
color: black;
}
.roster-title {
font-size: 30px;
padding-top: 5rem;
margin-bottom: 0em;
text-align: center;
background-color: lightGrey;
color: black;
}
.roster-description {
font-size: 18px;
padding-bottom: 5em;
padding-left: 2em;
padding-right: 2em;
margin: 0px;
font-family: 'VT323';
background-color: lightGrey;
color: black;
}
.weight-title {
text-align: center;
float: center;
margin: 5px;
padding-top: 0.5em;
font-size: 20px;
}
.weight-classes {
display: flex-grid;
z-index: 0;
position: relative;
text-align: center;
padding-bottom: 5%;
margin: 5px;
}
.weight-class {
display: inline-block;
width: 300px;
height: 400px;
justify-content: evenly-spaced;
position: relative;
padding: 0;
margin: 5px;
font-size: 16px
}
.champion {
list-style: none;
font-style: italic;
font-size: 18px;
}
footer {
width: 100%;
position: static;
}
.social {
text-align: center;
padding-top: 2rem;
padding-bottom: 4rem;
margin-left: 0px;
margin-right: 0px;
width: 100%;
height 400px;
background-color: black;
color: white;
}
.social p {
padding: 10px;
text-align: center;
font-size: 18px;
}
.form p {
font-size: 12px;
}
.email-list {
display: grid;
}
input {
}
.btn {
display: flex-grid;
align-items: center;
margin-left: 2em;
margin-bottom: 7px;
padding: 5px;
}
.form-control {
width: 25%;
align-items: center;
}
.center {
text-align: center;
}
.video {
padding: 1em;
margin: 0.75em;
position: static;
width: 500px;
height: 400px;
}
.bottom-bar {
width: 100%;
bottom: 0;
background-color: #141414;
position: fixed;
overflow: hidden;
height: 5%;
}
#event-title {
color: white;
position: absolute;
float: left;
text-align: center;
bottom: 0;
font-size: 16px;
margin-right: 0;
left: 10px;
}
.event {
color: white;
bottom:0;
width: 20%;
font-size:16px;
margin-top: 5px;
margin-bottom: 5px;
positon: absolute;
float: right;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/cascade-framework/1.5.0/css/build-full.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment