CSS Grid

Community feedback

• 

  Marzia Jalili•8,410

  @MarziaJalili

  Posted 5 months ago

  Hi there,

  For the challenge using grid is the most concise approach.

  Here's how you can set the grid for this project:

  • First, take the code below as an example for html:

  <main>
      <img src="./images/image-qr-code.png" alt="image-qr-code" />
      <h1>
        Improve your front-end skills by building projects
      </h1>
  
      <p>
        Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
      </p>
  </main>
  

  • Then, you can apply this code in the css:

  /* css variables */
  :root {
      /* colors */
  
      --white: hsl(0, 0%, 100%);
      --slate-300: hsl(212, 45%, 89%);
      --slate-500: hsl(216, 15%, 48%);
      --slate-900: hsl(218, 44%, 22%);
  }
  
  * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
  }
  
  body {
      font-family: "Outfit", sans-serif;
      display: grid;
      place-items: center;
      min-height: 100vh;
      background-color: var(--slate-300);
  }
  
  main {
      max-width: 310px;
      background-color: white;
      border-radius: 20px;
      display: grid;
      gap: 1rem;
      padding: 1.2rem;
      text-align: center;
  }
  
  img {
      max-width: 100%;
      border-radius: 10px;
  }
  
  h1 {
      font-size: 1.3rem;
      color: var(--slate-900)
  }
  
  p {
      color: var(--slate-500);
      margin-bottom: 1rem;
  }
  

  In case you find any difficulties, let me know.

  😎😎😎

  00

  Marked as helpful