Sports Dashboard 2024 by @SoranyiL - Codewith.it

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

References

<embed>Tag per l'incorporamento di contenuti multimediali
minImposta il valore numerico o temporale minimo per un elemento input
downloadConsente di scaricare file al click di collegamento ipertestuale.
<canvas>Tag per disegnare grafica dinamica su pagine web.
getDefinisce un metodo di invio di dati al server
<q>Indica una parte di testo come citazione breve

Users

Log in to search for users

Explore

Find inspiration

Proposta di Matrimonio

Dottor Jakyll e Mr Hyde

Costruzione form

Livia e la foresta incantata

Heads Or Tails Random Tally 2

Heads Or Tails Random Tally

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;
    }
}