more css tweaks

jasheloper · Aug 2, 2024 · bd0bc7e · bd0bc7e
1 parent 68eb67a
commit bd0bc7e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -1,6 +1,10 @@
 <!DOCTYPE html>
 <html lang="en-us">
 
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Baloo+Da+2&family=Big+Shoulders+Display:wght@100..900&display=swap');
+  </style>
+
 <head>
   <meta charset="utf-8">
 
@@ -11,7 +15,7 @@
 </head>
 
 <body>
-  <h1>Jashele's Image Gallery</h1>
+  <h1>Jashele's JS Image Gallery</h1>
 
   <div class="full-img">
     <img class="displayed-img" src="images/pic1.jpg" alt="Closeup of a human eye">

diff --git a/style.css b/style.css
@@ -1,12 +1,21 @@
 h1 {
-  font-family: helvetica, arial, sans-serif;
   text-align: center;
+  color: white;
+  font-size: 3.7em;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Example shadow */
+  font-family: "Big Shoulders Display", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 800;
+  font-style: normal;
 }
 
 body {
   width: 740px;
   margin: 0 auto;
   background-color: antiquewhite;
+  background: linear-gradient(135deg, #a44b9c, #f2c94c);
+  background-repeat: no-repeat;
+  min-height: 100vh;
 }
 
 .full-img {
@@ -18,6 +27,7 @@ body {
 
 .full-img img {
  border-radius: 8px;
+ box-shadow: 1px 1px 3px 1px #29262f;
 }
 
 .overlay {
@@ -47,7 +57,12 @@ button {
   width: 15%;
   float: left;
   cursor: pointer;
-  margin: 12px;
-  border: 2px solid black;
+  margin: 9px;
+  border: 5px solid white;
   border-radius: 10px;
+}
+
+.thumb-bar img:hover {
+  transform: scale(1.5); /* Adjust the scale value as needed */
+  transition: transform 0.3s; /* Smooth transition effect */
 }