Grid of Colors by @Jalsenem6 - Codewith.it

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

Referenze

autofocusAttiva un elemento al caricamento della pagina.
<h6>Titolo di intestazione di sesto livello
<ol>Crea liste ordinate o numerate.
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

BuzzTech.it - Eccellenza nel Giorn

Proposta di Matrimonio Assurda

Esercizi 05/03/2024 es9

Lola Harrel Project 2

JS Esercizio Concetti Gen es1

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"

*/