Andrew Bantly's CSS-AirBnb Solution 2023-03-07

css/style.css

@@ -1,3 +1,144 @@
-h1 {
-  color: salmon;
+/* Set a standard style for body element to cascade down as necessary */
+body {
+  /* background color for the web page */
+  background-color: rgba(237, 239, 236, 1);
+  /* font family for web page (not AirBnB's cereal font :/) */
+  font-family: 'Open Sans', sans-serif;
 }
+/* styling for section classes, which there are two */
+.section {
+  /* justify divs within .section to center */
+  justify-content: center;
+}
+/* styling for the two headings  */
+.heading {
+  /* height of div */
+  height: 10vh;
+  /* width of div */
+  width: 50%;
+  /* centering .heading div, adding specific top margin */
+  margin: 5vh auto 0;
+  /* adding specific margin to bottom of .heading */
+  margin-bottom: 2vh;
+}
+/* adding styling to text in both .heading-copy & .subtitle-copy */
+.heading-copy, .subtitle-copy {
+  /* align text to center */
+  text-align: center;
+  /* get rid of margin because it is better applied in .heading styling (above) */
+  margin: 0;
+}
+/* specific styling for the two headings text */
+.heading-copy {
+  /* font size relative to doc standard (16px) */
+  font-size: 1.7em;
+  /* making heading a little more bold */
+  font-weight: 600;
+  /* font color  */
+  color: rgb(73, 78, 81);
+}
+/* specific styling for the two subtitle text */
+.subtitle-copy {
+  /* adding some margin to seperate from .heading-copy text */
+  margin-top: .5vh;    /* font size relative to doc standard (16px) */
+  font-size: 0.8em;
+  /* font color */
+  color: rgba(91, 95, 95, 1);
+}
+/* image gallery div */
+.gallery {
+/* display to images flexbox */
+  display: flex;
+  /* horizontally centering the gallery of images */
+  justify-content: center;
+  /* vertically centering the gallery of images */
+  align-items: center;
+  /* ensuring the flex direction is a row */
+  flex-direction: row;
+  /* ensuring the order is sequentially correct */
+  align-items: flex-start;
+  /* ensuring the images don't wrap into a second row */
+  flex-wrap: nowrap;
+}
+/* I made a invisible frame to fix the images on the web page as desired so I can later crop & reposition */
+.img-frame {
+  /* positioning the .img-frames relative to keep normal flow but allow the absolute child text-overlays (later in stylesheet) to be correctly positioned*/
+  position: relative;
+  /* height of frame */
+  height: 30vh;
+  /* aspect ratio of frame as the images don't share a consistent aspect-ratio */
+  aspect-ratio: 1/1;
+  /* hide the overflow so the frame acts like a frame */
+  overflow: hidden;
+  /* added some margin to the side of the frame to allow for some spacing between images */
+  margin: 0 1vw;
+}
+.text-overlay {
+  /* width of text overlay to fill the .img-frame*/
+  width: 100%;
+  /* positioning adjustment from the top of the frame */
+  top: 13vh;
+  /* giving the text-overlay an absolute position so it appears on the image as desired */
+  position: absolute;
+  /* aligning the text to center of the div */
+  text-align: center;
+  /* font color */
+  color: rgba(255, 255, 255, 1);
+  /* font size */
+  font-size: 1.3em;
+  /* making text a little bold */
+  font-weight: bold;
+}
+/* top images adjustments within .img-frame */
+.top-image-crop {
+  /* same height as .img-frame */
+  height: 30vh;
+  /* position relative so I can move them around as desired but as the images stay in the normal flow of the doc */
+  position: relative;
+  /* positioning the images from the right */
+  right: 5.5vw;
+  /* positioning the images from the bottom */
+  bottom: 1vh;
+  /* scaling the images a tad for framing */
+  transform:scale(105%);
+}
+/* bottom images adjustments within .img-frame. Different from top images because these images maintain a consistent aspect ratio (1:1) */
+.btm-image-crop {
+  /* same height as .img-frame */
+  height: 30vh;
+  /* position relative so I can move them around as desired but as the images stay in the normal flow of the doc */
+  position: relative;
+    /* scaling the images a tad for framing */
+  transform:scale(110%);
+}
+/* styling for the button div */
+.button-div {
+  /* some margin above the .button-div */
+  margin-top: 4vh;
+}
+/* styling for the button itself */
+.button {
+  /* the width of the button */
+  width: 20vw;
+  /* changing the button from an inline element to a block element */
+  display: block;
+  /* centering the button  */
+  margin: 0 auto;
+  /* greating some padding around the content but within the border */
+  padding: 1vh;
+  /* font size adjustment */
+  font-size: 0.9em;
+  /* make the text a little bold */
+  font-weight: 600;
+  /* background color of the button */
+  background-color: rgba(255, 255, 255, 1);
+  /* font color of the button */
+  color: rgba(98, 101, 105, 1);
+  /* border styling of the button */
+  border: 1px solid rgba(202, 202, 202, 1);
+}
+/* adding a footer to give a little padding to the bottom of the doc */
+footer {
+  /* height of the footer padding */
+  height: 3vh;
+}

index.html

@@ -4,9 +4,67 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/style.css">
-  <title>Hello Front-End</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;800&display=swap" rel="stylesheet">
+  <title>CSS-AirBnB</title>
 </head>
 <body>
-  <h1>Hello Front-End</h1>
+  <!-- started by making a section to include the heading, subtitle, image gallery and button -->
+  <div class= "section">
+    <!-- made a div for the heading copy -->
+    <div class="heading">
+      <!-- I didn't think an h1 was appropriate since the styling repeats lower in the webpage.  -->
+      <h2 class="heading-copy">Meet Guidebooks</h2>
+      <!-- p element for the subtitle -->
+      <p class="subtitle-copy">Discover hundreds of local spots recommended by AirBnB hosts</p>
+    </div>
+    <!-- div for the image gallery -->
+    <div class="gallery">
+      <!-- within the gallery I made img-frame divs for each images -->
+      <div class="img-frame">
+        <img class="top-image-crop" src="./img/san-francisco.jpg" alt="Foggy San Francisco"/>
+        <div class="text-overlay">San Francisco</div>
+      </div>
+      <div class="img-frame">
+        <img class="top-image-crop" src="./img/new-york.jpg" alt="Empire State Building in New York"/>
+        <div class="text-overlay">New York</div>
+      </div>
+      <div class="img-frame">
+        <img class="top-image-crop" src="./img/london.jpg" alt="Big Ben in London"/>
+        <div class="text-overlay">London</div>
+      </div>
+    </div>
+    <!-- I made a seperate div for the button -->
+    <div class="button-div">
+      <button class="button">See All Guidebooks</button>
+    </div>
+</div>
+<!-- Copied and pasted the above code and made the necessary adjustments to the content -->
+<div class= "section" id="section">
+  <div class="heading" id="heading">
+    <h2 class="heading-copy">Just for the weekend</h2>
+    <p class="subtitle-copy">Discover new, inspiring places close to home.</p>
+  </div>
+  <div class="gallery">
+    <div class="img-frame">
+      <img class="btm-image-crop" src="./img/napa.jpg" alt="Hot air balloons above Napa Valley"/>
+      <div class="text-overlay">Napa</div>
+    </div>
+    <div class="img-frame">
+      <img class="btm-image-crop" src="./img/sonoma.jpg" alt="A vineyard in Sonoma"/>
+      <div class="text-overlay">Sonoma</div>
+    </div>
+    <div class="img-frame">
+      <img class="btm-image-crop" src="./img/san-francisco-2.jpg" alt="Buena Vista Park in San Francisco"/>
+      <div class="text-overlay">San Francisco</div>
+    </div>
+  </div>
+  <div class="button-div">
+    <button class="button">See All Destinations</button>
+  </div>
+  <!-- created a footer to add some natural padding -->
+  <footer></footer>
+</div>
 </body>
 </html>