Sports Dashboard 2024 by @SoranyiL - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<title>Definisce il titolo della pagina web.
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
listCollega un elemento input con una lista di opzioni datalist
<input>Definisce un area di input per l'invio di dati e informazioni
_blankApre i collegamenti ipertestuali in una nuova scheda del browser

Users

Log in to search for users

Explore

Find inspiration

fontawesome-esempio

Milford momentanea

Esercitazione 3

infostrumenti.html

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<html>
  <head>
    <title>Sports Dashboard 2024</title>
  </head>

  <body>
    <div class="container">
      <header>
        <h1>Welcome To Sports News</h1>
        <div class="nav">
          <a href="https://www.nba.com/news">Home</a>
          <a href="https://www.nba.com/teams">Teams</a>
          <a href="https://www.nba.com/schedule?cal=October&region=1">Schedule</a>
        </div>
      </header>

      <div class="main">
        <div class="newsSection">
          <h2>Lastest Sports News</h2>
          <p>Stay updated with the lastest sports news,highlights and scores</p>
        </div>

        <div class="images">
          <h2>Top Stars</h2>
          <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSR4o5Xirsga2sLr41W3UCIzGOM711DZo5LL8YXH3AMNsg5DFXw" alt="lebron-james">
          <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRy2r1vrAi93rYh2x2ljRTufOK7ZL-1Fwi1dFgZ_fKPU2K09BIB" alt="stephen-curry">
          <img src="https://cdn.nba.com/headshots/nba/latest/1040x760/977.png" alt="kobe-bryant">
          <img src="https://cdn.nba.com/headshots/nba/latest/1040x760/406.png" alt="shaquille-O'Neal">
          <img src="https://people.com/thmb/wdW5htq1U-k2FIYzB3MixtVGoxw=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc():focal(854x149:856x151)/Kareem-Abdul-Jabbar-1-e467dd92f08c40b9b15b52949a348755.jpg" alt="Kareem Abdul-Jabbar">
          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZFQAqb6T--NZD3BFukLsSOSiX6r7hZRMhqA&s" alt="Wilt Chamberlain">
          <img src="https://nevadasportsnet.com/resources/media2/16x9/full/1015/center/80/2b3a77a8-87f4-42b8-83d9-d746968fd8e8-large16x9_BillRussell073122.png" alt="Bill Russell">
          <img src="https://www.usatoday.com/gcdn/authoring/authoring-images/2024/06/12/USAT/74071113007-usatsi-5266030.jpg?width=700&height=700&fit=crop&format=pjpg&auto=webp" alt="Jerry West">
          <img src="https://cdn.nba.com/headshots/nba/latest/1040x760/1449.png" alt="Larry Bird">
          <img src="https://cdn.nba.com/headshots/nba/latest/1040x760/893.png" alt="Michael Jordan">
          <img src="https://encrypted-tbn1.gstatic.com/licensed-image?q=tbn:ANd9GcTpF0Eo6_uwx-GM00o29e3d5steTOCCN8N0Laxe1BmO4E9uXR7jL5HfJWOl0_X0IpZlihneT2iO1ieljPs" alt="dennis rodman">
          <img src="https://cdn.nba.com/headshots/nba/latest/1040x760/201142.png" alt="kevin durant">
        </div>

        <div class="matches">
          <h2>Upcoming Matches</h2>
          <p>Don't miss out on upcoming matches!!!</p>
          <ul>
            <li>Lakers vs Bucks - Oct 10, 2024</li>
            <li>Hornets vs Grizzlies - Oct 10, 2024</li>
            <li>Jaz vs Mavericks - Oct 10, 2024</li>
          </ul>
        </div>

        <footer>
          <p>2024 Sports Dashboard. All rights reserved</p>
        </footer>
      </div>
    </div>
  </body>
</html>

body {
    font-family: 'Roboto', sans-serif;
    background-color: #f9fafb;
    color: #333;
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 40px auto;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

header {
    background-color: #4A90E2;
    color: #fff;
    padding: 20px;
    text-align: center;
}

header h1 {
    font-size: 3rem;
    margin-bottom: 10px;
}

header nav {
    margin-top: 10px;
}

header nav a {
    color: #fff;
    text-decoration: none;
    margin: 0 15px;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

header nav a:hover {
    color: #f0f0f0;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 15px 0;
    font-size: 0.9rem;
}

.main {
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.main h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #4A90E2;
}

.news {
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

.news:hover {
    background-color: #eaf0f8;
}

.news p {
    font-size: 1.1rem;
    color: #666;
}

img{
    width: 300px;
    height: 300px;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    object-fit: cover;
    height: 150px;
}

img:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.matches {
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

.matches:hover {
    background-color: #eaf0f8;
}

ul {
    list-style-type: none;
    padding-left: 0;
}

li {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.matches li:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
    background-color: #f9fafb;
}

.news, .matches {
    opacity: 0;
    animation: fadeIn 1.5s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}