3
\$\begingroup\$

I've made a section of my site to have two grids side by side. On the left-hand side is one big static (sticky in my case) image, on the right-hand side is a (grid) long column of several other images, that is scrollable. So as the user scrolls the grid on the right-hand side of the page, the grid on the left remains 'stuck' until the user has reached the end of the grid on the right.

My code below works, but I was wondering if there a more elegant way of doing this?

html,
body,
p,
ol,
ul,
li {
  background-color: #1A1A1A;
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  width: 95%;
  margin: auto;
  position: relative;
}

#tattoos {
  width: 95%;
  display: flex;
  justify-content: space-between;
  height: 2000px;
  position: relative;
}

#sectionOne {
  display: grid;
  height: 100vh;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 15px;
  width: 60%;
  position: sticky;
  top: 0;
}

.gallery-item {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  text-transform: uppercase;
  font-family: 'Lora';
  font-weight: 700;
  color: white;
  font-size: 9vw;
}

#image-one {
  background-image: url("https://i.ibb.co/HXfG735/tattoo.jpg");
  background-size: cover;
  background-position: 0% 80%;
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.8);
  margin: 4% 0;
}

.sectionTwo {
  width: 37%;
  display: grid;
  height: 1940px;
  grid-template-rows: repeat(7, 1fr);
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 30px;
  margin: 2.5% 0;
}

#image-two {
  background-image: url("https://i.ibb.co/kBJrryt/7ab34470-9318-4fc1-a6da-656ca31399c5.jpg");
  background-size: cover;
  background-position: 0% 80%;
}

#image-three {
  background-image: url("https://i.ibb.co/SKCnT4d/b19aaf2a-84cf-42b4-9ccd-6205ca1be395.jpg");
  background-size: cover;
  background-position: 0% 50%;
}

#image-four {
  background-image: url("https://i.ibb.co/xF4Qv50/b5d6695b-2142-42cc-8eef-2963311edfd6.jpg");
  background-size: cover;
  background-position: 0% 60%;
}

#image-eight {
  background-image: url("https://i.ibb.co/0nY3VDG/d1ecf205-6b1b-4a1a-b94b-7d75aa177464.jpg");
  background-size: cover;
  background-position: 0% 60%;
}

#image-nine {
  background-image: url("https://i.ibb.co/QYf6vDY/48a63fe2-066b-42d1-9211-040c6977ceff.jpg");
  background-size: cover;
  background-position: 0% 40%;
}

#image-ten {
  background-image: url("https://i.ibb.co/7RdJqgP/ce30fff2-1679-403f-8431-c6be4f8b1466.jpg");
  background-size: cover;
  background-position: 0% 80%;
}

#image-twelve {
  background-image: url("https://i.ibb.co/BtJxDc7/24b54530-710f-4173-a32a-36bd24a496e0.jpg");
  background-size: cover;
  background-position: 0% 50%;
}
<div id="tattoos" class="container">
  <section id="sectionOne">
    <div id="image-one" class="gallery-item">
      tatujes
    </div>
  </section>
  <section class="sectionTwo">
    <div id="image-two" class="gallery-item"></div>
    <div id="image-three" class="gallery-item"></div>
    <div id="image-four" class="gallery-item"></div>
    <div id="image-eight" class="gallery-item slide"></div>
    <div id="image-nine" class="gallery-item slide"></div>
    <div id="image-ten" class="gallery-item slide"></div>
    <div id="image-twelve" class="gallery-item slide"></div>
  </section>
</div>

\$\endgroup\$
  • \$\begingroup\$ Why did you decide to make sectionOne an ID and sectionTwo a class? Does it have any specific reason or was it by accident. I think as a naming convention this is a bit confusing. \$\endgroup\$ – Dennis Fink Jul 16 at 12:01
1
\$\begingroup\$

Although this is not a full answer It will shorten your code, You could remove 'background-size:cover;' & replace it with a class of bGCov, (As your declaring this multiple times & if your application grows larger With many more Images, this will save many, many lines of code) Aswell as Use Bitly URL shortener, to shorten all of your Image URL links, make sure to name them something farely short but related to the actual image as it makes keeping track of them easier later on. Also if you started using scss background-position and a few other things could be made into variables. this would shorten you code for a few lines...

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.