Day 162

Finally got it to work!  Now to figure out the calendar / booking system...
#CodingPhase #TheCodingWay #365CodingPhaseChallenge

**********

<style>
body {
  background-image: linear-gradient(#f2f5f9, #deeafc, #f2f7ff);
}
#sdc-galery {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto 23em;
  grid-gap: 10px;
}
#sdc-pic1 {
  grid-column: 1 / 3;
}
#sdc-pic1 > img {
  width: 100%;
  height: 100%;
}
#sdc-pic2 {
  grid-column: 3 / 5;
  grid-row: 1 / 3;
}
#sdc-pic2 > img {
  width: 100%;
  height: 100%;
}
#sdc-pic3 {
  grid-column: 1 / 3;
}
#sdc-pic3 > img {
  width: 100%;
  height: 100%;
}
/* #sdc-pic4 {
 
} */
#sdc-pic4 > img {
  width: 100%;
  height: 100%;
}
/* #sdc-pic5 {
 
} */
#sdc-pic5 > img {
  width: 100%;
  height: 100%;
}
#sdc-pic6 {
  grid-column: 3 / 5;
}
#sdc-pic6 > img {
  width: 100%;
  height: 100%;
}
.button {
  display: block;
  background: white;
  color: black;
  width: 200px;
  height: 35px;
  text-decoration: none;
  text-align: center;
  line-height: 12px;
  font-weight: 600;
  margin: 50px auto;
  border: 1px solid black;
  border-radius: 10px;
  cursor: pointer;
}
</style>

<section id="sdc-galery">
  <div class="photo" id="sdc-pic1"><img src="/img/IMG_0105-2.jpg"></div>
  <div class="photo" id="sdc-pic2"><img src="/img/IMG_7694-4.jpg"></div>
  <div class="photo" id="sdc-pic3"><img src="/img/MG_5190-2-2.jpg"></div>
  <div class="photo" id="sdc-pic4"><img src="/img/MG_5200-2.jpg"></div>
  <div class="photo" id="sdc-pic5"><img src="/img/IMG_0336.jpg"></div>
  <div class="photo" id="sdc-pic6"><img src="/img/MG_6092.jpg"></div>
</section>

<div>
  <a href="https://freshfeaturephoto.com/booking/"><button class="button">Let's Hang Out</button></a>
</div>
<div>
  <a href="mailto:freshfeaturephoto@gmail.com"><button class="button">Let's Chat</button></a>
</div>