Grid of Colors by @Jalsenem6 - Codewith.it

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

Referenze

crossoriginGestisce richieste tra documenti provenienti da origini differenti.
multipart/form-dataCodifica dei caratteri di un form
titleIndica informazioni aggiuntive riguardo un elemento HTML
animationDefinisce i parametri dell'animazione di un elemento o selettore
<embed>Tag per l'incorporamento di contenuti multimediali
requiredRende obbligatorio un campo di input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Deutsch Plus [Link]

Un Giorno a Napoli: Itinerario Det

Download 7-Zip for PC Windows

CAPPUCCETTO ROSSO

esercitazioni ipertestual

Mundane Mondays or Fantastic Frida

pianoforte.html

Product Landing Page

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"

*/