UI/UX Dashboard by @stayzin - Codewith.it

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

References

<textarea>Area di testo libero espandibile per form HTML
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
<h4>Titolo di intestazione di quarto livello
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
<link>Collega il documento corrente con una risorsa esterna
headersDetermina la relazione tra celle e celle di intestazione di una tabella.

Users

Log in to search for users

Explore

Find inspiration

Indovina il numero 1 a 10

esercizio:sito web

obbiettivi futuri

Primo laboratorio di program

esercitazione 2

poccodio inserimenti immagineee

Prova di programmazione html

Image Comparison Slider

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