Skip to content

Commit

Permalink
Merge pull request #18 from amaydixit11/main
Browse files Browse the repository at this point in the history 
	modified:   style.css
  • Loading branch information
@Asp-Codes
Asp-Codes authored May 28, 2024
2 parents 9f6f2f8 + 3333247 commit 1368604
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 69 deletions.
36 changes: 17 additions & 19 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>First Contributors Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Git Started With Us</h1>
<h1>Git Started With Us</h1>
</header>

<div id="pixel-art-container"></div>

<footer>
Made with ♥ by
<a href="https://github.com/OpenLake">
Openlake
</a>
Made with ♥ by
<a href="https://github.com/OpenLake"> Openlake </a>
</footer>

<script>
const container = document.getElementById('pixel-art-container');
const container = document.getElementById("pixel-art-container");

for (let i = 0; i < 400; i++) { // 20 x 20 grid
const cell = document.createElement('div');
cell.classList.add('cell');
container.appendChild(cell);
}
for (let i = 0; i < 400; i++) {
// 20 x 20 grid
const cell = document.createElement("div");
cell.classList.add("cell");
container.appendChild(cell);
}
</script>

</body>
</body>
</html>
113 changes: 63 additions & 50 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,108 +1,122 @@
body {
display: flex;
flex-direction: column;
justify-content:space-between;
align-items:center;
height: 100vh;
margin: 0;
background-color: #EEEEEE;
padding: 0 10vw;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100vh;
margin: 0;
background-color: #eeeeee;
padding: 0 10vw;
}

h1 {
text-align: left;
font-size: 1vh;
color: white;
padding-left: 3vw;

text-align: left;
font-size: 1vhvh;
color: white;
padding-left: 3vw;
}

header {
background-color: #474747;
height: 10vh;
width: 100vw;
background-color: #474747;
height: 10vh;
width: 100vw;
}

footer {
text-align: center;
background-color: #252323;
color: white;
height: 10vh;
width: 100vw;
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding-top: 2vh;
text-align: center;
background-color: #252323;
color: white;
height: 10vh;
width: 100vw;
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding-top: 2vh;
}

#pixel-art-container {
background-color: black;
display: grid;
grid-template-columns: repeat(20, 1fr); /* 20 columns, each taking 1 fraction of the available space */
grid-template-rows: repeat(20, 1fr); /* 20 rows, each taking 1 fraction of the available space */
gap: 1px;
width: 80vmin; /* Use vmin to ensure square grid */
height: 80vmin; /* Use vmin to ensure square grid */
border: 1px solid black; /* Optional: add border to the grid */
margin: 2vh;
background-color: black;
display: grid;
grid-template-columns: repeat(
20,
1fr
); /* 20 columns, each taking 1 fraction of the available space */
grid-template-rows: repeat(
20,
1fr
); /* 20 rows, each taking 1 fraction of the available space */
gap: 1px;
width: 80vmin; /* Use vmin to ensure square grid */
height: 80vmin; /* Use vmin to ensure square grid */
border: 1px solid black; /* Optional: add border to the grid */
margin: 2vh;
}

.cell {
width: calc((80vmin - 19px) / 20); /* Adjust cell width to fit perfectly, subtracting gap spaces */
height: calc((80vmin - 19px) / 20); /* Adjust cell height to fit perfectly, subtracting gap spaces */
background-color: white; /* Default background color */
width: calc(
(80vmin - 19px) / 20
); /* Adjust cell width to fit perfectly, subtracting gap spaces */
height: calc(
(80vmin - 19px) / 20
); /* Adjust cell height to fit perfectly, subtracting gap spaces */
background-color: white; /* Default background color */
}

a {
text-decoration: none; /* Remove underline from links */
color: inherit; /* Ensure link color matches surrounding text ---- (optional) */
text-decoration: none; /* Remove underline from links */
color: inherit; /* Ensure link color matches surrounding text ---- (optional) */
}

/* Customize colors for individual cells */
#pixel-art-container .cell:nth-child(1) {
background-color: red;
background-color: red;
}

#pixel-art-container .cell:nth-child(2) {
background-color: blue;
background-color: blue;
}

#pixel-art-container .cell:nth-child(3) {
background-color: green;
background-color: green;
}

#pixel-art-container .cell:nth-child(4) {
background-color: yellow;
background-color: yellow;
}

#pixel-art-container .cell:nth-child(4) {
background-color: red;
background-color: red;
}

#pixel-art-container .cell:nth-child(7) {
background-color: orange;
background-color: orange;
}
#pixel-art-container .cell:nth-child(5) {
background-color: purple;
background-color: purple;
}
#pixel-art-container .cell:nth-child(10) {
background-color: black;
background-color: black;
}
#pixel-art-container .cell:nth-child(69) {
background-color: orange;
background-color: orange;
}
#pixel-art-container .cell:nth-child(191) {
background-image: radial-gradient(rgb(206, 255, 253), rgb(91, 255, 255));
background-image: radial-gradient(rgb(206, 255, 253), rgb(91, 255, 255));
}
#pixel-art-container .cell:nth-child(20) {
background-color: Aqua;
background-color: Aqua;
}
#pixel-art-container .cell:nth-child(19) {
background-color:DodgerBlue;
background-color: DodgerBlue;
}

#pixel-art-container .cell:nth-child(123) {
background-color:#aa6f73;

#pixel-art-container .cell:nth-child(399) {
background-color:beige;
background-color: beige;
}
#pixel-art-container .cell:nth-child(317) {
background: linear-gradient(to top right, #4568dc, #b06ab3);
}

#pixel-art-container .cell:nth-child(398) {
Expand All @@ -121,4 +135,3 @@ a {
/* test */
/* Add more colors for other cells as needed */
/* add */

0 comments on commit 1368604

Please sign in to comment.