fixed image scaling problems on initial site (index.html) and added h…

…over effect on images, added hover effect on main logo (BIH TRAVEL SPOTS), replaced some px values with rem for flexibility
IbroRebronja · May 5, 2024 · c9fa5f9 · c9fa5f9
1 parent a20034c
commit c9fa5f9
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 31 deletions.
diff --git a/images/icons/insta.png → images/icons/instagram.png b/images/icons/insta.png → images/icons/instagram.png
diff --git a/index.html b/index.html
@@ -10,13 +10,13 @@
     rel="stylesheet" />
   <link rel="stylesheet" href="styles/shared.css" />
   <link rel="stylesheet" href="styles/styles.css" />
-  <title>Travel Spots</title>
+  <title>BiH Travel Spots</title>
 </head>
 
 <body>
   <header>
     <div id="page-logo">
-      <a href="index.html">Travel Spots</a>
+      <a href="index.html">BiH Travel Spots</a>
     </div>
     <nav>
       <ul>
@@ -52,8 +52,8 @@ <h2>Highlights</h2>
 
   <footer>
     <ul>
-      <li><a href="https://www.instagram.com"><img src="images/icons/insta.png" alt="Instagram Logo"></a></li>
-      <li><a href="https://www.facebook.com"><img src="images/icons/facebook.png" alt="facebook Logo"></a></li>
+      <li><a href="https://www.instagram.com/p/CxxeivYMPpC/"><img src="images/icons/instagram.png" alt="Instagram Logo"></a></li>
+      <li><a href="https://www.facebook.com/groups/121884106451487/"><img src="images/icons/facebook.png" alt="facebook Logo"></a></li>
     </ul>
   </footer>
 

diff --git a/places.html b/places.html
@@ -10,13 +10,13 @@
     rel="stylesheet" />
   <link rel="stylesheet" href="styles/shared.css" />
   <link rel="stylesheet" href="styles/places.css" />
-  <title>Travel Spots</title>
+  <title>BiH Travel Spots</title>
 </head>
 
 <body>
   <header>
     <div id="page-logo">
-      <a href="index.html">Travel Spots</a>
+      <a href="index.html">BiH Travel Spots</a>
     </div>
     <nav>
       <ul>

diff --git a/styles/places.css b/styles/places.css
@@ -23,7 +23,7 @@ header nav a:hover {
 
 main ul{
   width: 1200px;
-  margin: 0 auto 48px auto;
+  margin: 0 auto 3rem auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px 20px;

diff --git a/styles/shared.css b/styles/shared.css
@@ -13,7 +13,7 @@ header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 15px 60px;
+  padding: 0.9375rem 3.75rem;
   position: absolute;
   width: 100%;
   top: 0;
@@ -22,28 +22,34 @@ header {
 }
 
 #page-logo a {
-  padding: 10px;
+  padding: 0.625rem;
   font-family: "Oleo Script", sans-serif;
   color: rgb(245, 243, 160);
-  font-size: 50px;
+  font-size: 3.125rem;
   text-decoration: none;
   text-transform: uppercase;
   text-shadow: 1px 1px 2px rgb(0, 0, 0);
+  transition: transform 0.5s ease; 
+  display: inline-block;
+}
+
+#page-logo a:hover {
+  transform: scale(1.03);
 }
 
 header ul {
   display: flex;
 }
 
 header li {
-  margin-left: 20px;
+  margin-left: 1.25rem;
 }
 
 header a {
   color: rgb(255, 251, 0);
   text-decoration: none;
-  font-size: 20px;
-  padding: 12px;
+  font-size: 1.25rem;
+  padding: 0.75rem;
   text-shadow: 1px 1px 2px rgba (0, 0, 0, 0.2);
   border-radius: 6px;
 }
@@ -55,7 +61,7 @@ header nav a:hover {
 
 footer {
   background: linear-gradient(70deg, rgb(24, 24, 24), rgb(25, 29, 29));
-  padding: 36px 0;
+  padding: 2.25rem 0;
 }
 
 footer ul {
@@ -66,7 +72,7 @@ footer ul {
 footer li {
   width: 80px;
   height: 80px;
-  margin: 0 50px;
+  margin: 0 3.125rem;
 }
 
 footer img {

diff --git a/styles/styles.css b/styles/styles.css
@@ -8,10 +8,10 @@
 #hero-content {
   width: 900px;
   background-color: rgba(51, 47, 47, 0.8);
-  box-shadow: 2px 4px 8px rgb(68, 67, 67);
+  box-shadow: 2px 4px 8px rgb(68,67,67);
   border-radius: 8px;
   text-align: center;
-  padding: 50px 0;
+  padding: 3.125rem 0;
   margin: 0px auto;
   position: relative;
   top: 200px;
@@ -20,25 +20,25 @@
 #hero-content h1 {
   color: white;
   text-transform: uppercase;
-  font-size: 50px;
+  font-size: 3.125rem;
   font-family: "Raleway", sans-serif;
   margin: 0;
 }
 
 #hero-content p {
   color: white;
   text-transform: uppercase;
-  font-size: 24px;
+  font-size: 1.5rem;
   font-weight: 300;
-  margin-bottom: 32px;
+  margin-bottom: 2rem;
 }
 
 #hero-content a {
   text-decoration: none;
   background-color: rgb(255, 251, 0);
-  padding: 12px 24px;
+  padding: 0.75rem 1.5rem;
   color: black;
-  font-size: 24px;
+  font-size: 1.5rem;
   font-weight: bold;
   border-radius: 8px;
   box-shadow: 2px 4px 8px rgb(68,67,67);
@@ -49,44 +49,49 @@
 }
 
 #highlights {
-  padding: 24px;
+  padding: 1.5rem;
   background: linear-gradient(0deg,rgb(185, 238, 177),rgb(202,243,240));
 }
 
 #highlights h2 {
   text-transform: uppercase;
   text-align: center;
-  font-size: 40px;
+  font-size: 2.5rem;
   color: rgb(59,65,64);
-  margin: 24px 0;
+  margin: 1.5rem 0;
 }
 
 #destinations {
   display: flex;
   width: 90%;
   margin: auto;
-  margin-bottom: 40px;
+  margin-bottom: 2.5rem;
   justify-content: center;
 }
 
 .destination {
-  margin: 0 20px;
+  margin: 0 1.25rem;
 }
 
 .destination img {
-  height: 200px;
-  width: 100%;
+  height: 220px;
+  width: 310px;
   box-shadow: 2px 4px 8px rgb(68,67,67);
   border-radius: 10px;
   object-fit: cover;
 }
 
+.destination img:hover {
+  transform: scale(1.1);
+  transition: transform 0.3s ease;
+}
+
 .destination p {
   text-align: center;
   text-transform: uppercase;
-  font-size: 24px;
+  font-size: 1.5rem;
   color: rgb(124,123,123);
-  margin: 20px;
+  margin: 1.25rem;
 }
 
 .destination strong {