Sports Dashboard 2024 by @SoranyiL - Codewith.it

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

References

colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
animationDefinisce i parametri dell'animazione di un elemento o selettore
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
<abbr>Inserisce abbreviazioni e acronimi
<td>Definisce una cella di una tabella HTML.
<textarea>Area di testo libero espandibile per form HTML

Users

Log in to search for users

Explore

Find inspiration

Esercitazione informatica(2)

sinodo diocesano

Pizzafy - Calcolatore di Pizza

informatica 21/10 ii

Costruzione form

Esercizi 01/03/2024 es3

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