|
Server IP : 172.16.15.8 / Your IP : 3.148.106.49 Web Server : Apache System : Linux zeus.vwu.edu 4.18.0-553.27.1.el8_10.x86_64 #1 SMP Wed Nov 6 14:29:02 UTC 2024 x86_64 User : apache ( 48) PHP Version : 7.2.24 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON Directory (0755) : /home/akimiavi/public_html/ |
| [ Home ] | [ C0mmand ] | [ Upload File ] |
|---|
<!-- FootyFanatic REAL MADRID PLAYERS (madridPlayers.html) -->
<HEAD>
<meta charset="UTF-8">
<title>Footy Fanatic: Real Madrid</title>
<STYLE>
<!-- STYLING LINKS/IMAGES/BUTTONS -->
a:link {
color: black;
background-color: transparent;
text-decoration: underline;
text-transform: uppercase;
}
a:visited {
color: black;
background-color: transparent;
text-decoration: underline;
text-transform: uppercase;
}
body {
font-family: 'American Typewriter', serif;
background-color: hsl(0, 100%, 100%);
color: black;
font-size: 20px;
}
h1 {
font-family: 'luminari', fantasy;
text-transform: uppercase;
color: black;
font-size: 36px;
}
h2 {
font-family: 'luminari', fantasy;
text-transform: uppercase;
color: black;
font-size: 30px;
}
h3 {
font-family: 'luminari', fantasy;
text-transform: uppercase;
color: black;
font-size: 24px;
}
h4 {
font-family: 'luminari', fantasy;
text-transform: uppercase;
color: black;
font-size: 18px;
}
button {
text-transform: uppercase;
text-align: center;
color: black;
width: 100px;
height: 100px;
border-radius: 50%;
display: inline-block;
box-shadow: 10px 10px 5px;
border: 5px solid #000000;
}
button:hover {
transform: scale(1.2);
}
nav {
display: flex;
position: fixed;
width: 120px;
justify-content: space-around;
flex-direction: column;
color: black;
opacity: 0.7;
box-shadow: 10px 10px 5px;
height: 100vh;
}
.content{
margin-left: 120px;
padding: 20px;
width: calc(100% - 120px); /* account for nav section */
text-align: center;
align-items: center;
padding-right: 30px;
padding-left: 30px;
}
.container {
display: flex;
min-height: 100vh;
}
img {
border: 5px solid #000000;
box-shadow: 5px 5px 2px;
float: left;
width: 45%;
height: auto;
}
.item {
width: calc(100% - 120px);
margin-bottom: 20px;
flex-wrap: wrap;
display: flex;
}
.text {
border: 5px solid #000000;
box-shadow: 5px 5px 2px;
width: 45%;
display: flex;
flex-direction: column;
justify-content: center;
}
.text p,
.text h3 {
padding 10px;
margin: 0;
}
.zigzag-section {
display: grid;
justify-content: spcae-between;
gap: 20px;
margin-top: 20px;
}
.item:nth-child(even) {
flex-direction: row-reverse;
}
</STYLE>
</HEAD>
<BODY>
<HEADER>
<h1>Footy Fanatic</h1>
<!-- ADD IMAGE -->
<HR>
</HEADER>
<div class="container">
<NAV>
<button onclick="location.href='madridPlayers.html'" style="background-color:hsl(0, 100%, 100%)">LEGENDS</button>
<button onclick="location.href='madridStats.php'" style="background-color:hsl(0, 100%, 100%)">RECORDS</button>
<button onclick="location.href='madridQuiz.html'" style="background-color:hsl(0, 100%, 100%)">QUIZ</button>
<button onclick="location.href='footyFanatic.html'" style="background-color:hsl(0, 100%, 100%)">HOME</button>
</NAV>
<div class="content">
<h1>REAL MADRID Legend Profiles</h1>
<div class="zigzag-section">
<div class="item">
<img src="https://assets.goal.com/images/v3/blt2a4922279a854094/64d1851271dee180d80752f97d9dcdca6fd120e2.jpg?auto=webp&format=pjpg&width=3840&quality=60" title="Cristiano Ronaldo">
<div class="text">
<h3>Cristiano Ronaldo</h3>
<h4>(2009-2018)</h4>
<p>Cristiano Ronaldo text</p>
</div>
</div>
<div class="item">
<img src="https://images2.minutemediacdn.com/image/upload/c_crop,w_2250,h_1265,x_0,y_220/c_fill,w_1440,ar_16:9,f_auto,q_auto,g_auto/images/GettyImages/mmsport/90min_en_international_web/01hewmw3s7yba3vyyc3d.jpg" title="Zinedine Zidane">
<div class="text">
<h3>Zinedine Zidane</h3>
<h4>(2001-2006)</h4>
<p>Zinedine Zidane text</p>
</div>
</div>
<div class="item">
<img src="https://cdn.vox-cdn.com/thumbor/FImbhrmdaYC_Lo5PCj74Y-09bDA=/0x0:2358x3000/1200x800/filters:focal(1051x819:1427x1195)/cdn.vox-cdn.com/uploads/chorus_image/image/69463101/493758547.0.jpg" title="Sergio Ramos">
<div class="text">
<h3>Sergio Ramos</h3>
<h4>(2005-2021)</h4>
<p>Sergio Ramos text</p>
</div>
</div>
<div class="item">
<img src="https://www.madridistanews.com/assets/admin/news/toni-kroos-to-stay-at-madrid-till-2024.jpg" title="Toni Kroos">
<div class="text">
<h3>Toni Kroos</h3>
<h4>(2014-2024)</h4>
<p>Toni Kroos text</p>
</div>
</div>
</div>
<HR>
<CENTER>
<a href='footyFanatic.html'>HOME</A> | <a href='footyMadrid.html'>REAL MADRID HOME</A>
</CENTER>
</div>
</div>
</BODY>