EnnyMeeny Comments - Answer Overflow

.text {
  grid-area: text;
  padding: 16px;
  margin: 0px;
}
.cardTitle{
  font-size: 48px;
}

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

@media screen and (max-width: 1200px) {

  .card {
    padding: 16px;
    display: block;
    height: 600px;
    width: 100%;
  }
  .articles {
    padding: 0px;
  }
  .image {
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .imageImage{
    max-width: 500px;
    width: 100%;
  }
  h1 {
    font-size: 48px;
  }
  .cardTitle{
    font-size: 24px;
  }
  .main-section {
    font-size: 48px;
  }
  .bottom-text {
    font-size: 16px;
  }
  .maincontent {
    height: 80svh;
  }
}

@media screen and (max-width: 600px) {
  h1 {
    font-size: 48px;
  }

.text {
  grid-area: text;
  padding: 16px;
  margin: 0px;
}
.cardTitle{
  font-size: 48px;
}

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

@media screen and (max-width: 1200px) {

  .card {
    padding: 16px;
    display: block;
    height: 600px;
    width: 100%;
  }
  .articles {
    padding: 0px;
  }
  .image {
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .imageImage{
    max-width: 500px;
    width: 100%;
  }
  h1 {
    font-size: 48px;
  }
  .cardTitle{
    font-size: 24px;
  }
  .main-section {
    font-size: 48px;
  }
  .bottom-text {
    font-size: 16px;
  }
  .maincontent {
    height: 80svh;
  }
}

@media screen and (max-width: 600px) {
  h1 {
    font-size: 48px;
  }

Second part

12 replies

KPCKevin Powell - Community

•Created by EnnyMeeny on 11/16/2023 in #front-end

Hello!

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

body {
  font-family: "Poppins", sans-serif;
  justify-content: center;
  height: 100vh;
  color: #fff;
  background-color: #202020;
}

html, body {
    margin: 0px; padding: 0px
}

html {
  scroll-behavior: smooth;
}

a {
  color: #fff;
  cursor: pointer;
}

h1 {
  font-size: 64px;
}

button {
  all: unset;
}

button:focus {
  outline: revert;
}

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

.main-section {
  font-weight: 600;
  margin: auto;
  font-size: 10vmin;
  height: 100svh;
  width: 100%;
  text-align: center;
}

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

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

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

.readButton {
  font-size: 16px;
  padding: 16px;
  border-radius: 32px;
  color: #181818;
  background-color: #fff;
  transition: 350ms;
  min-width: 64px;
  text-align: center;
}
.readButton:hover {
  color: #fff;
  background-color: #181818;
  cursor: pointer;
}
.readButtonWrapper{
  text-decoration: none;
}

.articles {
  width: calc(100%-64px);
  min-height: 100svh;
  padding: 32px;
}

.articlesTitle {
  text-align: center;
}

.card {
  margin-block: 32px;
  width: 100%;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  grid-template-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 0px 0em;
  grid-auto-flow: row;
  grid-template-areas: "image text";
}

.imageImage{
  border-radius: 32px;
  max-width: 100%;
  max-height: 250px;
  vertical-align: auto;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}

.image {
  margin: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-area: image;
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

body {
  font-family: "Poppins", sans-serif;
  justify-content: center;
  height: 100vh;
  color: #fff;
  background-color: #202020;
}

html, body {
    margin: 0px; padding: 0px
}

html {
  scroll-behavior: smooth;
}

a {
  color: #fff;
  cursor: pointer;
}

h1 {
  font-size: 64px;
}

button {
  all: unset;
}

button:focus {
  outline: revert;
}

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

.main-section {
  font-weight: 600;
  margin: auto;
  font-size: 10vmin;
  height: 100svh;
  width: 100%;
  text-align: center;
}

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

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

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

.readButton {
  font-size: 16px;
  padding: 16px;
  border-radius: 32px;
  color: #181818;
  background-color: #fff;
  transition: 350ms;
  min-width: 64px;
  text-align: center;
}
.readButton:hover {
  color: #fff;
  background-color: #181818;
  cursor: pointer;
}
.readButtonWrapper{
  text-decoration: none;
}

.articles {
  width: calc(100%-64px);
  min-height: 100svh;
  padding: 32px;
}

.articlesTitle {
  text-align: center;
}

.card {
  margin-block: 32px;
  width: 100%;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  grid-template-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 0px 0em;
  grid-auto-flow: row;
  grid-template-areas: "image text";
}

.imageImage{
  border-radius: 32px;
  max-width: 100%;
  max-height: 250px;
  vertical-align: auto;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}

.image {
  margin: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-area: image;
}

First part of the css code

12 replies

KPCKevin Powell - Community

•Created by EnnyMeeny on 11/16/2023 in #front-end

Hello!

<!DOCTYPE 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="logo-light.png" />
    <title>Školní noviny ZŠ Poláčkova</title>
    <script defer src="main.js"></script>
  </head>
  <body>
    <section class="main-section">
      <div class="maincontent">
        <p>Školní noviny ZŠ Poláčkova</p>
      </div>
      <a href="#články" class="bottom-text hidden">Sjeďte dolů pro více</a>
    </section>

    <section id="články" class="articles">
      <h1 class="articlesTitle">Články</h1>
      <div class="card">
        <div class="image">
          <img class="imageImage" src="uspech-ve-sportovni-soutezi/bg.jpg" />
        </div>
        <div class="text">
          <h1 class="cardTitle">Úspěch ve sportovní soutěži</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elitar. Dolorem
            quisquam nihil odio quasi, molestias reprehenderit incidunt ratione
            accusamus est atque, quibusdam culpa in iste minima totamin nisi.
          </p>
          <!--Max lenght: 200 characters-->
          <a
            class="readButtonWrapper"
            href="uspech-ve-sportovni-soutezi/index.html"
          >
            <button class="readButton">Číst</button>
          </a>
        </div>
      </div>
    </section>
  </body>
</html>

<!DOCTYPE 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="logo-light.png" />
    <title>Školní noviny ZŠ Poláčkova</title>
    <script defer src="main.js"></script>
  </head>
  <body>
    <section class="main-section">
      <div class="maincontent">
        <p>Školní noviny ZŠ Poláčkova</p>
      </div>
      <a href="#články" class="bottom-text hidden">Sjeďte dolů pro více</a>
    </section>

    <section id="články" class="articles">
      <h1 class="articlesTitle">Články</h1>
      <div class="card">
        <div class="image">
          <img class="imageImage" src="uspech-ve-sportovni-soutezi/bg.jpg" />
        </div>
        <div class="text">
          <h1 class="cardTitle">Úspěch ve sportovní soutěži</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elitar. Dolorem
            quisquam nihil odio quasi, molestias reprehenderit incidunt ratione
            accusamus est atque, quibusdam culpa in iste minima totamin nisi.
          </p>
          <!--Max lenght: 200 characters-->
          <a
            class="readButtonWrapper"
            href="uspech-ve-sportovni-soutezi/index.html"
          >
            <button class="readButton">Číst</button>
          </a>
        </div>
      </div>
    </section>
  </body>
</html>

12 replies

KPCKevin Powell - Community

•Created by EnnyMeeny on 11/16/2023 in #front-end

Hello!

ill send the code in a moment

12 replies

Gaming

Programming