★ stargirl ★ Comments - Answer Overflow

@font-face {
  font-family: Varela Round;
  src: url("VarelaRound-Regular.ttf");
}

::-moz-selection {
  /* Code for mozila based web browesers */
  background-color: #f7e7ce;
  color: #0f0f0f;
}

::selection {
  /* Code code for every other web browesers */
  background-color: #f7e7ce;
  color: #0f0f0f;
}

html {
  margin: 0px;
  padding: 0px;
  background-color: #0f0f0f;
  color: #f7e7ce;
  font-family: "Varela Round", sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.section1 {
  font-size: 8vw;
  height: 100svh;
  width: 100svw;
  text-align: center;
}

.maincontent {
  height: 90svh;
  width: 100svw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo1 {
  height: 8vw;
  margin: 1vmax;
}



.Notoriety-Title {
  margin: 48px;
  width: 100%;
  border-radius: 16px;
  max-width: 800px;
  display: block;
}

.smalltext {
  font-size: 16px;
}

.smalltext2 {
  font-size: 5px;
}

.bottom-text {
  font-size: 32px;
}

.hidden {
  opacity: 0;
  transition: all 1s;
  transform: translateY(-100%);
}

.show {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion) {
  .hidden {
    transition: none;
  }
}

@media screen and (max-width: 1000px) {
  .section2 {
    width: 100%;
    height: 100svh;
  }

  .picture1 {
    display: flex;
  justify-content: center;
    align-items: center;
    display: none;
    margin: 0px;
    width: 100%;
  }
  .Notoriety-Thumb{
    width: 100%;
    height: 100%;
  }

  .text {
    width: 100%;
    display: none;
    margin: 0px;
  }
}

.section2 {
  width: 100%;
  height: 100svh;
}

.picture1 {
  display: inline-block;
  width: 100%;
}

.text {
  display: inline-block;
  width: 100%;
  margin: 16px;
}

.Notoriety-text {
  font-size: 24px;
}
.Notoriety-title {
  font-size: 5svw;
}

.Notoriety-Thumb {
  margin: 32px;
  width: 100%;
  height: 50svh;
  max-width: fit-content;
  max-height: fit-content;
  object-fit: cover;
  border-radius: 16px;
}

@font-face {
  font-family: Varela Round;
  src: url("VarelaRound-Regular.ttf");
}

::-moz-selection {
  /* Code for mozila based web browesers */
  background-color: #f7e7ce;
  color: #0f0f0f;
}

::selection {
  /* Code code for every other web browesers */
  background-color: #f7e7ce;
  color: #0f0f0f;
}

html {
  margin: 0px;
  padding: 0px;
  background-color: #0f0f0f;
  color: #f7e7ce;
  font-family: "Varela Round", sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.section1 {
  font-size: 8vw;
  height: 100svh;
  width: 100svw;
  text-align: center;
}

.maincontent {
  height: 90svh;
  width: 100svw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo1 {
  height: 8vw;
  margin: 1vmax;
}



.Notoriety-Title {
  margin: 48px;
  width: 100%;
  border-radius: 16px;
  max-width: 800px;
  display: block;
}

.smalltext {
  font-size: 16px;
}

.smalltext2 {
  font-size: 5px;
}

.bottom-text {
  font-size: 32px;
}

.hidden {
  opacity: 0;
  transition: all 1s;
  transform: translateY(-100%);
}

.show {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion) {
  .hidden {
    transition: none;
  }
}

@media screen and (max-width: 1000px) {
  .section2 {
    width: 100%;
    height: 100svh;
  }

  .picture1 {
    display: flex;
  justify-content: center;
    align-items: center;
    display: none;
    margin: 0px;
    width: 100%;
  }
  .Notoriety-Thumb{
    width: 100%;
    height: 100%;
  }

  .text {
    width: 100%;
    display: none;
    margin: 0px;
  }
}

.section2 {
  width: 100%;
  height: 100svh;
}

.picture1 {
  display: inline-block;
  width: 100%;
}

.text {
  display: inline-block;
  width: 100%;
  margin: 16px;
}

.Notoriety-text {
  font-size: 24px;
}
.Notoriety-title {
  font-size: 5svw;
}

.Notoriety-Thumb {
  margin: 32px;
  width: 100%;
  height: 50svh;
  max-width: fit-content;
  max-height: fit-content;
  object-fit: cover;
  border-radius: 16px;
}

38 replies

KPCKevin Powell - Community

•Created by ★ stargirl ★ on 11/4/2023 in #front-end

A simple responsible layout

i set all the width values that were svw to %

38 replies

KPCKevin Powell - Community

•Created by ★ stargirl ★ on 11/4/2023 in #front-end

A simple responsible layout

ok so i set it to 100% but now it looks like this?

38 replies

KPCKevin Powell - Community

•Created by ★ stargirl ★ on 11/4/2023 in #front-end

A simple responsible layout

oh ye right

38 replies

KPCKevin Powell - Community

•Created by ★ stargirl ★ on 11/4/2023 in #front-end

A simple responsible layout

38 replies

KPCKevin Powell - Community

•Created by ★ stargirl ★ on 11/4/2023 in #front-end

A simple responsible layout

also i have js but i dont thik thats the cause

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    console.log(entry);
    if (entry.isIntersecting){
        entry.target.classList.add('show')
    } else {
        entry.target.classList.remove('show')
    }
  });
});

const hiddenElements = document.querySelectorAll(".hidden");
hiddenElements.forEach((el) => observer.observe(el))

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    console.log(entry);
    if (entry.isIntersecting){
        entry.target.classList.add('show')
    } else {
        entry.target.classList.remove('show')
    }
  });
});

const hiddenElements = document.querySelectorAll(".hidden");
hiddenElements.forEach((el) => observer.observe(el))

38 replies

KPCKevin Powell - Community

•Created by ★ stargirl ★ on 11/4/2023 in #front-end

A simple responsible layout

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <script defer src="main.js"></script>
  <title>Moonstone Games</title>
</head>

<body>
  <div class="section1">
    <div class="maincontent">
      <img class="logo1" src="Logo.svg"
        alt="Moonstone Logo - a crescent moon fractured into five equal triangular pieces" />
      <p>Moonstone Games</p>
      <br />
    </div>
    <p class="bottom-text hidden">Scroll for more</p>
  </div>
  <div class="section2">
    <div class="picture1"><img class="Notoriety-Thumb" src="Notoriety.png"
        alt="Three masked men are shooting at police officers. The three masked men are probably robbing a bank in which this photo was taken.">
    </div>
    <div class="text">
      <h1 class="Notoriety-title">Notoriety</h4>
        <p class="Notoriety-text">Notoriety was a co-op FPS game on Roblox, where you and friends planned daring heists
          with missions, weapons, gadgets, and disguises. It was created by Brick_man. It was previously named Payday 2, and
          had 227.3 million visits, 1,330,000 favorites, and a 91% approval rating.
        </p>
    </div>
  </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <script defer src="main.js"></script>
  <title>Moonstone Games</title>
</head>

<body>
  <div class="section1">
    <div class="maincontent">
      <img class="logo1" src="Logo.svg"
        alt="Moonstone Logo - a crescent moon fractured into five equal triangular pieces" />
      <p>Moonstone Games</p>
      <br />
    </div>
    <p class="bottom-text hidden">Scroll for more</p>
  </div>
  <div class="section2">
    <div class="picture1"><img class="Notoriety-Thumb" src="Notoriety.png"
        alt="Three masked men are shooting at police officers. The three masked men are probably robbing a bank in which this photo was taken.">
    </div>
    <div class="text">
      <h1 class="Notoriety-title">Notoriety</h4>
        <p class="Notoriety-text">Notoriety was a co-op FPS game on Roblox, where you and friends planned daring heists
          with missions, weapons, gadgets, and disguises. It was created by Brick_man. It was previously named Payday 2, and
          had 227.3 million visits, 1,330,000 favorites, and a 91% approval rating.
        </p>
    </div>
  </div>
</body>

</html>

38 replies

KPCKevin Powell - Community

•Created by ★ stargirl ★ on 11/4/2023 in #front-end

A simple responsible layout

@font-face {
  font-family: Varela Round;
  src: url("VarelaRound-Regular.ttf");
}

::-moz-selection {
  /* Code for mozila based web browesers */
  background-color: #f7e7ce;
  color: #0f0f0f;
}

::selection {
  /* Code code for every other web browesers */
  background-color: #f7e7ce;
  color: #0f0f0f;
}

html {
  margin: 0px;
  padding: 0px;
  background-color: #0f0f0f;
  color: #f7e7ce;
  font-family: "Varela Round", sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.section1 {
  font-size: 8vw;
  height: 100svh;
  width: 100svw;
  text-align: center;
}

.maincontent {
  height: 90svh;
  width: 100svw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo1 {
  height: 8vw;
  margin: 1vmax;
}
.Notoriety-Title {
  margin: 48px;
  width: 100%;
  border-radius: 16px;
  max-width: 800px;
  display: block;
}

.smalltext {
  font-size: 16px;
}

.smalltext2 {
  font-size: 5px;
}

.bottom-text {
  font-size: 32px;
}

.hidden {
  opacity: 0;
  transition: all 1s;
  transform: translateY(-100%);
}

.show {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion) {
  .hidden {
    transition: none;
  }
}

@media screen and (max-width: 1000px) {
  .section2 {
    width: 100svw;
    height: 100svh;
  }

  .picture1 {
    display: flex;
  justify-content: center;
    align-items: center;
    display: none;
    margin: 0px;
    width: 100svw;
  }
  .Notoriety-Thumb{
    width: 100svw;
    height: 100%;
  }

  .text {
    width: 100%;
    display: none;
    margin: 0px;
  }
}

.section2 {
  width: 100svw;
  height: 100svh;
}

.picture1 {
  display: inline-block;
  width: 48%;
}

.text {
  display: inline-block;
  width: 48%;
  margin: 16px;
}

.Notoriety-text {
  font-size: 24px;
}
.Notoriety-title {
  font-size: 5svw;
}

.Notoriety-Thumb {
  margin: 32px;
  width: 100%;
  height: 50svh;
  max-width: fit-content;
  max-height: fit-content;
  object-fit: cover;
  border-radius: 16px;
}

@font-face {
  font-family: Varela Round;
  src: url("VarelaRound-Regular.ttf");
}

::-moz-selection {
  /* Code for mozila based web browesers */
  background-color: #f7e7ce;
  color: #0f0f0f;
}

::selection {
  /* Code code for every other web browesers */
  background-color: #f7e7ce;
  color: #0f0f0f;
}

html {
  margin: 0px;
  padding: 0px;
  background-color: #0f0f0f;
  color: #f7e7ce;
  font-family: "Varela Round", sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.section1 {
  font-size: 8vw;
  height: 100svh;
  width: 100svw;
  text-align: center;
}

.maincontent {
  height: 90svh;
  width: 100svw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo1 {
  height: 8vw;
  margin: 1vmax;
}
.Notoriety-Title {
  margin: 48px;
  width: 100%;
  border-radius: 16px;
  max-width: 800px;
  display: block;
}

.smalltext {
  font-size: 16px;
}

.smalltext2 {
  font-size: 5px;
}

.bottom-text {
  font-size: 32px;
}

.hidden {
  opacity: 0;
  transition: all 1s;
  transform: translateY(-100%);
}

.show {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion) {
  .hidden {
    transition: none;
  }
}

@media screen and (max-width: 1000px) {
  .section2 {
    width: 100svw;
    height: 100svh;
  }

  .picture1 {
    display: flex;
  justify-content: center;
    align-items: center;
    display: none;
    margin: 0px;
    width: 100svw;
  }
  .Notoriety-Thumb{
    width: 100svw;
    height: 100%;
  }

  .text {
    width: 100%;
    display: none;
    margin: 0px;
  }
}

.section2 {
  width: 100svw;
  height: 100svh;
}

.picture1 {
  display: inline-block;
  width: 48%;
}

.text {
  display: inline-block;
  width: 48%;
  margin: 16px;
}

.Notoriety-text {
  font-size: 24px;
}
.Notoriety-title {
  font-size: 5svw;
}

.Notoriety-Thumb {
  margin: 32px;
  width: 100%;
  height: 50svh;
  max-width: fit-content;
  max-height: fit-content;
  object-fit: cover;
  border-radius: 16px;
}