UI/UX Dashboard by @stayzin - Codewith.it

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

References

requiredRende obbligatorio un campo di input
selectedPre-seleziona un elemento di input
Inserisce un commento nel codice
<map>Inserisce immagini mappa cliccabili in un documento
<table>Tag primario per la creazione di tabelle
<select>Usato per creare un menu a tendina.

Users

Log in to search for users

Explore

Find inspiration

Prova di programmazione html

Tabella matricole

Piano Distruzione pianeta terra

test js coinmarketcap

Neon Flux - Visual Design in Motio

Futura Design - Agenzia di Design

UX / Web Design Green – Progetto

STILI + IMMAGINI

Product Landing Page

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.

<!DOCTYPE html>
<html>
<head>
  <title>UI/UX Dashboard</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="img-container">
    <header>
      <h1>Top 10 most played games on steam</h1>
    </header>
    <div class="image-grid">
      <img src="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/730/header.jpg?t=1716504320" alt="Image 1">
      <img src="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/2923300/header.jpg?t=1724181871" alt="Image 2">
      <img src="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/570/header.jpg?t=1724428927" alt="Image 3">
      <img src="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/2358720/header.jpg?t=1725007201" alt="Image 4">
      <img src="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/2183900/header.jpg?t=1725898901" alt="Image 5">
      <img src="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/526870/header_alt_assets_2.jpg?t=1726146177" alt="Image 6">
      <img src="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/578080/header.jpg?t=1725501407" alt="Image 7">
      <img src="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/1086940/header.jpg?t=1725654125" alt="Image 8">
      <img src="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/1422450/header.jpg?t=1724976457" alt="Image 9">
      <img src="https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/1938090/header.jpg?t=1726180301" alt="Image 10">
    </div>
    <footer>
      <p>© 2024 Amir.H</p>
      <a href="https://store.steampowered.com/charts/mostplayed">Learn More</a>
    </footer>
  </div>
</body>
</html>

.img-container {
  max-width: 800px;
  margin: 0 auto;
  background-image: url("https://i.imgur.com/Boracp5.jpg");
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center;
    font-family: "Playfair Display", serif;
  font-size: 20px;
  font-weight: lighter;
  letter-spacing: 2px;
  text-shadow:5px 2px 5px blue;
  color: white;

}

header, footer {
  text-align: center;
  padding: 20px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

img {
  width: 100%;
  height: auto;
  justify-content: center;
}

a {
  color: white;
  text-decoration: none;
  border: solid;
  border-color: white;
}

.body {
  max-width: 800px;
  margin: 0 auto;
  background-image: url("https://i.imgur.com/Boracp5.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

img {
  border: 1mm ridge rgba(222, 228, 232, 0.6);
}

img:hover {
  transform: scale(1.1);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
   0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}