Grid of Colors by @Jalsenem6 - Codewith.it

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

Referenze

preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
formSpecifica a quale form appartiene un elemento.
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
<a>Inserisce link e collegamenti ipertestuali
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

GOAT O1200 LiDAR PRO

Generatore numeri casuali

PROVA SITO ALEX

Prova di programmazione html

La Magica Storia del Basket Moderno

Prima pagina web

test js coinmarketcap

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Grid of Colors</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<!-- DISPLAY COLORS IN MAIN TAG -->
	<main>
<div class="color-grid">
  <div class="color-item circle" style="background-color: AliceBlue;"></div>
  <div class="color-item circle" style="background-color: AntiqueWhite;"></div>
  <div class="color-item circle" style="background-color:Aqua;"></div>
  <div class="color-item circle" style="background-color:Aquamarine;"></div>
  <div class="color-item circle" style="background-color:Azure;"></div>
  <div class="color-item circle" style="background-color:Beige;"></div>
<div class="color-item circle" style="background-color:Bisque;"></div>
<div class="color-item circle" style="background-color:Black;"></div>
<div class="color-item circle" style="background-color:BlanchedAlmond;"></div>
  <div class="color-item circle" style="background-color:Blue;"></div>
  <div class="color-item circle" style="background-color:BlueViolet;"></div>
  <div class="color-item circle" style="background-color:Brown;"></div>
<div class="color-item circle" style="background-color:BurlyWood;"></div>
<div class="color-item circle" style="background-color:CadetBlue;"></div>
<div class="color-item circle" style="background-color:Chartreuse;"></div>
<div class="color-item circle" style="background-color:Chocolate;"></div>
<div class="color-item circle" style="background-color:Coral;"></div>
	</main>
</body>

</html>

.color-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  grid-auto-rows: minmax(125px, auto);
  gap: 20px;
  padding: 20px;
}

.color-item {
  width: 100%;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px black;
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}
.circle {
  /*clip-path: circle(50% at 50% 50%);*/
  border-radius: 100%;
}
.triangle{
  /*clip-path: polygon(50% 0%, 0% 100%, 100% 100%);*/
  border-radius: 100%;
}

/*

"AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige","Bisque","Black","BlanchedAlmond","Blue","BlueViolet","Brown","BurlyWood","CadetBlue","Chartreuse","Chocolate","Coral","CornflowerBlue","Cornsilk","Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenRod","DarkGray","DarkGrey","DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","Darkorange","DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray","DarkSlateGrey","DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue","DimGray","DimGrey","DodgerBlue","FireBrick","FloralWhite","ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","GoldenRod","Gray","Grey","Green","GreenYellow","HoneyDew","HotPink","IndianRed","Indigo","Ivory","Khaki","Lavender","LavenderBlush","LawnGreen","LemonChiffon","LightBlue","LightCoral","LightCyan","LightGoldenRodYellow","LightGray","LightGrey","LightGreen","LightPink","LightSalmon","LightSeaGreen","LightSkyBlue","LightSlateGray","LightSlateGrey","LightSteelBlue","LightYellow","Lime","LimeGreen","Linen","Magenta","Maroon","MediumAquaMarine","MediumBlue","MediumOrchid","MediumPurple","MediumSeaGreen","MediumSlateBlue","MediumSpringGreen","MediumTurquoise","MediumVioletRed","MidnightBlue","MintCream","MistyRose","Moccasin","NavajoWhite","Navy","OldLace","Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenRod","PaleGreen","PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue","Purple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen","SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray","SlateGrey","Snow","SpringGreen","SteelBlue","Tan","Teal","Thistle","Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke","Yellow","YellowGreen"

*/