hero.css

/* Home Page with a Hero Image ⬇
---------------------------------- */
.wrapper {
   height: 100vh; /* ⬅ full vieweport height */
   line-height: 1.3; /* ⬅ can be changed */
}

img {
   max-width: 100%;
   height: auto;
}



/* Header & Navigation Bar
---------------------------------- */
header {
   background-color: #89a0ae; /* ⬅ color of header */
   padding: 1rem; /* ⬅ space inside header */
   display: flex;
   justify-content: space-between;
   align-items: center;
}

/* ⬇ Site name in the header */
header h1 { 
   font-size: 200%; 
   color: #e8e8e8; 
   letter-spacing: .09rem; 
}


header nav ul {
   display: flex;
   list-style-type: none;
   flex-wrap: wrap;
}

/* ⬇ Links in the nav bar */
header nav a {
   padding: .5rem 1.5rem; /* ⬅ space around links */
   display: block;
   text-decoration: none;
   color: #e8e8e8; /* ⬅ color of links */
   font-weight: bold;
   transition: all .5s ease; /* ⬅ speed of animation */
}

/* ⬇ Hover over links in nav bar */
header nav a:hover {
   background-color: #546880; /* ⬅ link hover color */
   border-radius: 2rem;
}

main {
   max-width: 960px;
   margin: 1rem auto;
   padding: 1rem 2rem;
   font-size: 150%;
}

footer {
   background-color: #89a0ae;
   text-align: center;
   font-style: italic;
   padding: 1rem;
}



/* Hero Image
---------------------------------- */
.hero-image {

background-image:
   /* ⬇ Optional: Adds a gradient to darken the image. This makes the text easier to read */
   linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)),

   /* ⬇ The hero image file */
   url("images/cats.jpg");

   /* ⬇ The height of the image on the page */
   height: 30%;

   /* ⬇ Positions and centers the image to scale */
   position: relative;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}


/* ⬇ Places text in the middle of the image */
.hero-text {
   text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: white;
   text-shadow: 2px 2px 5px black;
}

/* ⬇ Headings in the hero image */
.hero-text h2 {
   font-size: 200%; /* ⬅ text inside hero image */
   margin: .5rem;
}

/* ⬇ Paragraph text in the hero image */
.hero-text p {
   font-size: 120%; /* ⬅ text inside hero image */
}

/* ⬇ The "Read More" button in the hero image */
.hero-text a {
   font-size: 80%; /* ⬅ size of button */
   text-shadow: none;
   border: 1px solid silver;
   border-radius: .5rem;
   padding: .75rem 1.5rem;
   background-color: #e8e8e8;
   color: black;
   text-decoration: none;
   transition: all 1s ease; /* ⬅ animation speed */
}

/* ⬇ Changes the "Read More" button when hovering */
.hero-text a:hover {
   color: white;
   background-color: black;
   box-shadow: 2px 2px 6px black;
}




/* Columns below the Hero Image
---------------------------------- */

/* ⬇ Grid container */
.home-grid {
   margin: 3rem 0;
   display: grid;
   
   /* ⬇ Determines the number of columns */
   grid-template-columns: 1fr 1fr 1fr;

   /* ⬇ Space between columns */
   gap: 2rem;

}

/* ⬇ Each column */
.home-column {
   font-size: 70%;
}

/* ⬇ Heading in the columns */
.home-column h2 {
   font-size: 175%;
   color: #546880;
}

/* ⬇ Images in the columns */
.home-column img {
   border: 2px solid #546880;
   box-shadow: 0 8px 6px -6px black;
}