update all the images from the project to the homepage

archeana · Feb 7, 2024 · f3e89be · f3e89be
1 parent 3cc59ba
commit f3e89be
Show file tree

Hide file tree

Showing 33 changed files with 500 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -1,22 +1,9 @@
 ### JavaScript30
 
 I'm participating in the 30-Day Vanilla JS for the Women Who Code's Days of Code Challenge 2024.
+- 8th of January to 6th of February 2024 - 
 
 The code source is from Wes Bos and you can join the challenge <a href="https://javascript30.com/" target="_blank">here</a>. <br>
 
 I design this <a href="https://archeana.github.io/JS30/" target="_blank">homepage</a> to put all the projects in one place.
 
-Day 1: <a href="https://archeana.github.io/JS30/Day_1/index.html" target="_blank">JavaScript Drum Kit</a><br>
-Day 2: <a href="https://archeana.github.io/JS30/Day_2/index.html" target="_blank">JS and CSS Clock </a><br>
-Day 3: <a href="https://archeana.github.io/JS30/Day_3/index.html" target="_blank">CSS variables and Js </a><br>
-Day 4: <a href="https://archeana.github.io/JS30/Day_4/index.html" target="_blank">Array Exercises I </a><br>
-Day 5: <a href="https://archeana.github.io/JS30/Day_5/index.html" target="_blank">Flex Panels Image Gallery </a><br>
-Day 6: <a href="https://archeana.github.io/JS30/Day_6/index.html" target="_blank">Ajax Type ahead </a><br>
-Day 7: <a href="https://archeana.github.io/JS30/Day_7/index.html" target="_blank">Array Exercises II</a><br>
-Day 8: <a href="https://archeana.github.io/JS30/Day_8/index.html" target="_blank">Draw on Canvas </a><br>
-Day 9: <a href="https://archeana.github.io/JS30/Day_9/index.html" target="_blank">DEV Tools - console </a><br>
-Day 10: <a href="https://archeana.github.io/JS30/Day_10/index.html" target="_blank">JS To Do List </a><br>
-Day 11: <a href="https://archeana.github.io/JS30/Day_11/index.html" target="_blank">HTML Video Player</a><br>
-Day 12: <a href="https://archeana.github.io/JS30/Day_12/index.html" target="_blank">Key Sequence detection (secret code) </a><br>
-Day 13: <a href="https://archeana.github.io/JS30/Day_13/index.html" target="_blank">Slide in on scroll </a><br>
-Day 14: <a href="https://archeana.github.io/JS30/Day_14/index.html" target="_blank">arrays and object reference and copy </a><br>
diff --git a/images/Day16.png b/images/Day16.png
diff --git a/images/Day29.png b/images/Day29.png
diff --git a/images/day.19.png b/images/day.19.png
diff --git a/images/day1.png b/images/day1.png
diff --git a/images/day10.png b/images/day10.png
diff --git a/images/day11.png b/images/day11.png
diff --git a/images/day12.png b/images/day12.png
diff --git a/images/day13.png b/images/day13.png
diff --git a/images/day14.png b/images/day14.png
diff --git a/images/day15.png b/images/day15.png
diff --git a/images/day17.png b/images/day17.png
diff --git a/images/day18.png b/images/day18.png
diff --git a/images/day2.png b/images/day2.png
diff --git a/images/day20.png b/images/day20.png
diff --git a/images/day21.png b/images/day21.png
diff --git a/images/day22.png b/images/day22.png
diff --git a/images/day23.PNG b/images/day23.PNG
diff --git a/images/day24.jpg b/images/day24.jpg
diff --git a/images/day25.jpg b/images/day25.jpg
diff --git a/images/day26.jpg b/images/day26.jpg
diff --git a/images/day27.jpg b/images/day27.jpg
diff --git a/images/day28.jpg b/images/day28.jpg
diff --git a/images/day3.png b/images/day3.png
diff --git a/images/day30.png b/images/day30.png
diff --git a/images/day4.png b/images/day4.png
diff --git a/images/day5.png b/images/day5.png
diff --git a/images/day6.png b/images/day6.png
diff --git a/images/day7.png b/images/day7.png
diff --git a/images/day8.png b/images/day8.png
diff --git a/images/day9.png b/images/day9.png
diff --git a/index.html b/index.html
diff --git a/style.css b/style.css
@@ -5,7 +5,7 @@
      font-family: sans-serif;
  }
 
- h1 {
+ h1, h2, h3, p {
      display: flex;
      align-items: center;
      justify-content: center;
@@ -103,7 +103,75 @@
  }
 
 
+ /* Projects show case */
+ .container-projects {
+     margin: 2%;
+     display: flex;
+     align-items: center;
+ }
+
+ .projects {
+     display: grid;
+     grid-template-columns: repeat(5, 1fr);
+     grid-template-rows: repeat(5, 1fr);
+     grid-column-gap: 15px;
+     grid-row-gap: 15px;
+ }
 
+ .projects-cards{
+    background-color:#DED7F2;
+    border-radius: 15px; 
+}
+ img {
+     overflow-clip-margin: content-box;
+     display: block;
+     width: 100%;
+ }
+
+
+ /* text */
+ h4 {
+    text-align: center;
+ }
+
+ .tags{
+    color: blue;
+    font-style: italic;
+    line-height: auto;
+    font-size: 12px;
+    text-align: center;
+    text-wrap:balance;
+ }
+
+ /* to make the tags it is using the list property and then set it to display inline */
+ li{ 
+    padding: 1%;
+    background-color: aliceblue;
+    border-radius: 20px;
+    padding: 10px;
+    list-style: none;
+    display: inline-block;
+ }
+
+
+ /* button for projects */
+.buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+ button{
+    background-color: #A2748B;
+    color: #ffffff;
+    border:transparent;
+    padding: 9px;
+    margin:5%;
+    align-items: center;
+    border-radius: 10px;
+    cursor:pointer;
+
+ }
  footer {
      margin: 2%;
      display: flex;
@@ -115,4 +183,4 @@
  a {
      text-decoration: none;
 
- }
+ }