Ecem Gokdogan

@ecemgo

All comments

Ezequiel•1,250
@3eze3
Submitted about 2 years ago
Interactive Card Rating (Scss/Js) 🧡
#accessibility#jss#sass/scss
3
Ecem Gokdogan•9,380
@ecemgo
Posted about 2 years ago
The animation is awesome! 🤩
Andrewwangari•110
@Andrewwangari
Submitted about 2 years ago
Flexbox , Box-model Bootstrap
3
Ecem Gokdogan•9,380
@ecemgo
Posted about 2 years ago
Some recommendations regarding your code that could be of interest to you.
- If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
- You can add the recommended color for the screen to the body
```
body {
  background: hsl(212, 45%, 89%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
```
- If you use max-width, the card will be responsive
- You'd better update padding to give a gap between the content and the border of the card
```
.box3 {
  /* padding: auto; */
  padding: 15px;
  /* border: 1px solid hsl(212, 35%, 85%); */
  border-radius: 10px;
  /* width: 300px; */
  max-width: 300px;
  /* height: 500px; */
  background-color: hsl(0, 0%, 100%);
}
```
- In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
```
img {
  /* width: 300px; */
  width: 100%;
  border-radius: 5%;
  /* padding: 10px; */
}
```
- You'd better update the padding of the p
```
p {
  /* padding: 20px; */
  padding: 10px;
}
```
- You don't need to define .box2 and you can remove it
```
/* .box2 {
    border: 1px solid hsl(212, 35%, 85%);
    margin: 150px auto;
    width: 1500px;
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: hsl(219, 71%, 75%);
} */
```
- Finally, the solution will be responsive if you follow the steps above
Hope I am helpful. :)
Jonah Ssegawa•240
@devjhex
Submitted about 2 years ago
Qr code component using basic CSS
#bem#sass/scss
1
Ecem Gokdogan•9,380
@ecemgo
Posted about 2 years ago
Some recommendations regarding your code that could be of interest to you.
- If you use max-width, the card will be responsive and you can reduce the width a bit
- You don't need to use margin if you use flexbox in the body
```
.qrComponent {
  /* width: 370px; */
  max-width: 300px;
  /* margin-top: 3rem; */
  /* margin-inline: auto; */
}
```
- After updating like above, you don't need to use media queries for this solution because the solution will be responsive if you follow the steps above
Hope I am helpful. :)
Marked as helpful
Rafael Nunes•30
@RafaelNunesg
Submitted about 2 years ago
qr-code-component-main solution using HTML and css
3
Ecem Gokdogan•9,380
@ecemgo
Posted about 2 years ago
Some recommendations regarding your code that could be of interest to you.
- If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
```
body {
  background: hsl(212, 45%, 89%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
```
- If you use max-width, the card will be responsive and you can reduce the width a bit
- You'd better update padding to give a gap between the content and the border of the card
```
.container {
  padding: 16px;
  /* margin: 6% auto 38% auto; */
  max-width: 300px;
  /* width: 348px; */
  /* height: 545px; */
}
```
- In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
```
img {
  width: 100%;
  /* width: 316px; */
  /* margin: 16px 0px 16px 16px; */
  border-radius: 8px;
}
```
- You'd better update the margin of the texts
```
h2 {
  /* margin: 10px 36px 10px 36px; */
  margin: 20px 10px;
} 
```
```
p {
  /* margin: 10px 36px 10px 36px; */
  margin: 10px 0 30px;
}
```
- Finally, the solution will be responsive if you follow the steps above
Hope I am helpful. :)
Marked as helpful

Emilio•180

@emilioQuilodran

Submitted about 2 years ago

responsive qrcode using sass

Ecem Gokdogan•9,380

@ecemgo

Posted about 2 years ago

Some recommendations regarding your code that could be of interest to you.

When you download the starter, there is a style-guide.md in the folder. You can use that reference for color, font-size, font-family etc.

If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
For the background, you can use the recommended color in the body

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: hsl(212, 45%, 89%);
}

If you use max-width, the card will be responsive and you can increase the width a bit
You'd better update padding to give a gap between the content and the border of the card
You can add text-align: center to center texts

.main .card {
  /* width: 240px; */
  max-width: 300px;
  border-radius: 10px;
  margin: 0 auto;
  background-color: white;
  /* padding: 10px; */
  padding: 15px;
  text-align: center;
}

You can add font-size to the .card-title and update it in the card-text

.main .card .card-title {
  font-size: 20px;
}

.main .card .card-text {
  font-weight: 300;
  /* font-size: 12px; */
  font-size: 16px;
}

You don't need to use .main and .main .block and you can remove them

/* .main {
  position: relative;
  background-color: #DFDBE5;
  background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82.42 180h-1.415L0 98.995v-2.827L6.167 90 0 83.833V81.004L81.005 0h2.827L90 6.167 96.167 0H98.996L180 81.005v2.827L173.833 90 180 96.167V98.996L98.995 180h-2.827L90 173.833 83.833 180H82.42zm0-1.414L1.413 97.58 8.994 90l-7.58-7.58L82.42 1.413 90 8.994l7.58-7.58 81.006 81.005-7.58 7.58 7.58 7.58-81.005 81.006-7.58-7.58-7.58 7.58zM175.196 0h-25.832c1.033 2.924 2.616 5.59 4.625 7.868C152.145 9.682 151 12.208 151 15c0 5.523 4.477 10 10 10 1.657 0 3 1.343 3 3v4h16V0h-4.803c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6s-6-2.686-6-6c0-1.093.292-2.117.803-3h10.394-13.685C161.18.938 161 1.948 161 3v4c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.76 0 5 2.24 5 5v2h4v-4h2v4h4v-4h2v4h2V0h-4.803zm-15.783 0c-.27.954-.414 1.96-.414 3v2.2c-1.25.254-2.414.74-3.447 1.412-1.716-1.93-3.098-4.164-4.054-6.612h7.914zM180 17h-3l2.143-10H180v10zm-30.635 163c-.884-2.502-1.365-5.195-1.365-8 0-13.255 10.748-24 23.99-24H180v32h-30.635zm12.147 0c.5-1.416 1.345-2.67 2.434-3.66l-1.345-1.48c-1.498 1.364-2.62 3.136-3.186 5.14H151.5c-.97-2.48-1.5-5.177-1.5-8 0-12.15 9.84-22 22-22h8v30h-18.488zm13.685 0c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 148h8.01C21.26 148 32 158.742 32 172c0 2.805-.48 5.498-1.366 8H0v-32zm0 2h8c12.15 0 22 9.847 22 22 0 2.822-.53 5.52-1.5 8h-7.914c-.567-2.004-1.688-3.776-3.187-5.14l-1.346 1.48c1.09.99 1.933 2.244 2.434 3.66H0v-30zm15.197 30c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 32h16v-4c0-1.657 1.343-3 3-3 5.523 0 10-4.477 10-10 0-2.794-1.145-5.32-2.992-7.134C28.018 5.586 29.6 2.924 30.634 0H0v32zm0-2h2v-4h2v4h4v-4h2v4h4v-2c0-2.76 2.24-5 5-5 4.418 0 8-3.582 8-8s-3.582-8-8-8V3c0-1.052-.18-2.062-.512-3H0v30zM28.5 0c-.954 2.448-2.335 4.683-4.05 6.613-1.035-.672-2.2-1.16-3.45-1.413V3c0-1.04-.144-2.046-.414-3H28.5zM0 17h3L.857 7H0v10zM15.197 0c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6S4 6.314 4 3c0-1.093.292-2.117.803-3h10.394zM109 115c-1.657 0-3 1.343-3 3v4H74v-4c0-1.657-1.343-3-3-3-5.523 0-10-4.477-10-10 0-2.793 1.145-5.318 2.99-7.132C60.262 93.638 58 88.084 58 82c0-13.255 10.748-24 23.99-24h16.02C111.26 58 122 68.742 122 82c0 6.082-2.263 11.636-5.992 15.866C117.855 99.68 119 102.206 119 105c0 5.523-4.477 10-10 10zm0-2c-2.76 0-5 2.24-5 5v2h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-2c0-2.76-2.24-5-5-5-4.418 0-8-3.582-8-8s3.582-8 8-8v-4c0-2.64 1.136-5.013 2.946-6.66L72.6 84.86C70.39 86.874 69 89.775 69 93v2.2c-1.25.254-2.414.74-3.447 1.412C62.098 92.727 60 87.61 60 82c0-12.15 9.84-22 22-22h16c12.15 0 22 9.847 22 22 0 5.61-2.097 10.728-5.55 14.613-1.035-.672-2.2-1.16-3.45-1.413V93c0-3.226-1.39-6.127-3.6-8.14l-1.346 1.48C107.864 87.987 109 90.36 109 93v4c4.418 0 8 3.582 8 8s-3.582 8-8 8zM90.857 97L93 107h-6l2.143-10h1.714zM80 99c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm20 0c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
  width: 100%;
  height: 100vh;
  padding-top: 5%;
} */

/* .main .block {
  box-shadow: 0 10px 20px #bbbbbb;
  background-color: rgb(148, 188, 214);
  width: 75%;
  margin: 0 auto;
  padding: 5% 0;
  text-align: center;
} */

Finally, you can remove media queries because the solution will be responsive if you follow the steps above

Hope I am helpful. :)

Marked as helpful

Rodrigo Oliveira Silva•10

@RodrigooliveiraBRPR

Submitted about 2 years ago

HTML CSS

Ecem Gokdogan•9,380

@ecemgo

Posted about 2 years ago

Some recommendations regarding your code that could be of interest to you.

HTML

The html structure should be like that:

<body>
  <main class="card">
   <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>
   <footer class="atribuition"Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://github.com/RodrigooliveiraBRPR">Rodrigo De Oliveira Silva</a>.
  </div>
</body>

If you want to use the recommended font-family for this project, you can add the following between the <head> tags in HTML file:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">

CSS

After adding them to the HTML, you can add this font-family to the body
If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

body {
  background-color: hsl(212, 45%, 89%);
  min-height: 100vh;
  align-items: center;
  font-size: 15px;
  /* font-family: "Marck Script", cursiva; */
  /* font-family: "Outfit", sem serifa; */
  /* display: flexbox; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: "Outfit", sans-serif;
}

If you use max-width, the card will be responsive

.card {
  max-width: 300px;
}

In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

img {
  /* width: 96%; */
  width: 100%;
  border-radius: 20px;
}

You'd better update texts in this way:

h1 {
  color: hsl(218, 44%, 22%);
  margin: 20px 0;
  font-size: 20px;
  line-height: 1.3;
}

p {
  color: hsl(220, 15%, 55%);
  margin-bottom: 20px;
  line-height: 1.3;
}

You don't need to define .container and text and you can remove it

/* .container {
  max-width: 350px;
  margin: 0 auto;
} */

/* text {
  padding: 22px 10px;
} */

Finally, if you follow the steps above, the solution will be responsive.

Hope I am helpful. :)

Tufan Chandra Pandu•10

@Tufanpondu

Submitted about 2 years ago

QR Code

Ecem Gokdogan•9,380

@ecemgo

Posted about 2 years ago

Some recommendations regarding your code that could be of interest to you.

If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: hsl(212, 45%, 89%);
}

When you use flexbox in the body, you don't need to use flexbox in the .inner to center the card
If you use max-width, the card will be responsive and you can increase the width a bit
You'd better add padding to give a gap between the content and the border of the card

.inner {
  /* height: 380px; */
  /* width: 230px; */
  max-width: 300px;
  background-color: hsl(0, 0%, 100%);
  border-radius: 14px;
  /* display: inline; */
  /* align-items: center; */
  /* justify-content: center; */
  padding: 15px;
}

In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

.inner img {
  /* width: 210px; */
  width: 100%;
  border-radius: 14px;
  /* margin: 10px 10px 10px; */
}

You'd better update font-size of texts

.inner h1 {
  /* font-size: 0.9rem; */
  font-size: 1.4rem;
  text-align: center;
  padding: 10px 0;
}

.inner p {
  font-size: small;
  text-align: center;
  padding: 10px;
  /* margin: 10px; */
  margin-bottom: 20px;
  color: gray;
}

You don't need to use .hero and .outer and you can remove them

/* .hero {
  height: 100vh;
  max-width: 1440px;
  background-color: hsl(175, 43%, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
} */

/* .outer{
    display: flex;
    position: relative;
    height: 80vh;
    width:90vw;
    background-color: hsl(212, 45%, 89%);
    align-items: center;
    justify-content: space-between;
} */

Finally, you can remove media queries because the solution will be responsive if you follow the steps above

Hope I am helpful. :)

Alex•110
@JackNotro
Submitted about 2 years ago
QR Code Challenge Solution
#contentful#web-components
2
Ecem Gokdogan•9,380
@ecemgo
Posted about 2 years ago
Some recommendations regarding your code that could be of interest to you.
- If you use max-width, the card will be responsive and you can reduce the width a bit
```
.container {
  /* width: 400px; */
  max-width: 300px;
}
```
- Then, you'd better reduce the font-size of texts but it's up to you.
Hope I am helpful. :)
Marked as helpful
Fidel A Hernandez Jr•130
@FHernandez08
Submitted about 2 years ago
QR Code Responsive Website
3
Ecem Gokdogan•9,380
@ecemgo
Posted about 2 years ago
Some recommendations regarding your code that could be of interest to you.
- You can add body to the CSS. Additionally, if you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
```
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: hsl(212, 45%, 89%);
}
```
- When you use flexbox in the body, you don't need to use flexbox and margin in the .qr-code to center the card
- If you use max-width, the card will be responsive and you can reduce the width a bit
- You'd better update padding to give a gap between the content and the border of the card
- You add text-align: center here to center the texts
```
.qr-code {
  /* width: 450px; */
  /* height: 700px; */
  /* margin-top: 30%; */
  /* margin-bottom: 25%; */
  max-width: 300px;
  padding: 15px;
  text-align: center;
}
```
- In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
```
img {
  border-radius: 20px;
  /* height: 400px; */
  /* width: 400px; */
  /* margin-top: 25px; */
  width: 100%;
}
```
- You'd better update font-size of texts
```
.bold-text {
  font-weight: 700;
  /* font-size: 30px; */
  font-size: 20px;
}

.min-text {
  font-weight: 300;
  /* font-size: 20px; */
  font-size: 16px;
}
```
- You don't need to use .container and p and you can remove them
```
/* .container {
  display: grid;
  justify-content: center;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  background-color: hsl(212, 45%, 89%);
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
} */

/* p {
  text-align: center;
  margin: 40px;
} */
```
- Finally, you can remove media queries because the solution will be responsive if you follow the steps above
Hope I am helpful. :)
Abbaz•80
@abbashcs18
Submitted about 2 years ago
QR-Component-using-CSS-Flexbox
2
Ecem Gokdogan•9,380
@ecemgo
Posted about 2 years ago
Some recommendations regarding your code that could be of interest to you.
- You don't need to use .container and you can remove it. You'd better add the background color for the screen to the body, thus you don't lose the color.
```
/* .container {
  display: flex;
  height: 700px;
  justify-content: center;
  align-items: center;
  background-color: var(--light-gray);
  width: 1440px;
  box-shadow: 5px 10px 50px rgba(0, 0, 0, 0.3);
} */
```
```
body{
   background-color: var(--light-gray);
}
```
- You don't need to use justify-items: center for the .card
- If you use max-width, the card will be responsive
```
.card {
  /* width: 300px; */
  max-width: 300px;
  /* justify-items: center; */
}
```
- In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
```
.card > img {
  /* width: 300px; */
  width: 100%;
}
```
- Finally, you don't need to use media queries because the solution will be responsive if you follow the steps above.
Hope I am helpful. :)
Vishakha Roy•100
@VishRoy
Submitted about 2 years ago
QR code challenge
3
Ecem Gokdogan•9,380
@ecemgo
Posted about 2 years ago
Some recommendations regarding your code that could be of interest to you.
- If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
```
body{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
}
```
- When you use flexbox in the body, you don't need to use flexbox and margin-top in the main to center the card
- If you use max-width, the card will be responsive
```
main {
  /* width: 18%; */
  max-width: 300px;
  /* margin-top: 100px; */
}
```
- In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
```
img {
  width: 100%;
  /* height: 250px; */
  /* width: 250px; */
  border-radius: 10px;
}
```
- Finally, if you follow the steps above, the solution will be responsive.
Hope I am helpful. :)
Marked as helpful
ABDULAZIZ NOREDIN QADMOR•60
@azeezqad
Submitted about 2 years ago
QR code component challenge on Frontend Mento
1
Ecem Gokdogan•9,380
@ecemgo
Posted about 2 years ago
Some recommendations regarding your code that could be of interest to you.

HTML
- You'd better update the <main> structure in the html to prevent the deterioration
```
<main>
      <img src="./images/image-qr-code.png" alt="QR code image">
      <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>
```
CSS
- If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
```
body{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
}
```
- When you use flexbox in the body, you don't need to use flexbox and margin in the main to center the card
- If you use max-width, the card will be responsive and you can reduce the width a bit
```
main{
   /* width: 350px; */
   max-width: 300px;
   /* margin: 200px auto 20px auto; */
}
```
- In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
```
img{
  border-radius: 8px;
   width: 100%;
}
```
- You'd better update texts in this way
```
h1{
   /* font-size: 28px; */
   font-size: 20px;
   font-weight: bold;
   color: var(--dark-blue);
}
```
```
p{
   /* font-size: 20px; */
   font-size: 16px;
   color: var(--grayish-blue);
}
```
- Finally, if you follow the steps above, the solution will be responsive.
Hope I am helpful. :)
Marked as helpful
devAelo•30
@devAelo
Submitted about 2 years ago
Qr code components solution
4
Ecem Gokdogan•9,380
@ecemgo
Posted about 2 years ago
Some recommendations regarding your code that could be of interest to you.
- If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
- You can use the recommended background color for the screen
```
body {
  /* background-color: whitesmoke; */
  font-family: 'Outfit', sans-serif;
  background-color: hsl(212, 45%, 89%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
```
- If you use max-width, the card will be responsive and you can reduce the width a bit
```
.card {
  /* max-width: 350px; */
  max-width: 300px;
}
```
- You don't need to use the styles below for the img
```
.image {
   /* margin-top: 0px; */
   /* text-align: center; */
   /* display: block; */
 }
```
- Also, you don't need to use .container in order to center the card and you can remove it
```
 /* .container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top:100px;
} */
```
- Finally, you don't need to use media queries because the solution will be responsive if you follow the steps above. I recommend you don't use the styles that don't work.
Hope I am helpful. :)
Marked as helpful
Ayakhaled0197•180
@Ayakhaled0197
Submitted about 2 years ago
challenge solved successfully using some HTML & css , check it out
#express#accessibility
2
Ecem Gokdogan•9,380
@ecemgo
Posted about 2 years ago
Some recommendations regarding your code that could be of interest to you.

In order to fix the accessibility issues:
- You need to replace <div class="box"> with the <main class="box"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
- Each main content needs to include at least h1 element so you should use one <h1> element in the <main> tag. You can replace your <h2>Improve your front-end skills by building projects</h2> element with the <h1>Improve your frontend skills by building projects</h1> element.
After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

Hope I am helpful. :)
Marked as helpful
chanchala-amar•160
@chanchala-amar
Submitted about 2 years ago
Mobile first responsive page using CSS grid
2
Ecem Gokdogan•9,380
@ecemgo
Posted about 2 years ago
Some recommendations regarding your code that could be of interest to you.

HTML

In order to fix the accessibility issues:
- You need to replace <div class="container"> with the <main class="container"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
- Each main content needs to include at least h1 element so you should use one <h1> element in the <main> tag. You can replace your <p class="headline-text">Improve your frontend skills by buiding projects</p> element with the <h1 class="headline-text">Improve your frontend skills by buiding projects</h1> element.
- The <img> tag should include alt ="" attribute. You can apply like this:
```
<img src="./images/image-qr-code.png" class="qr-code-img" alt="qr-code"/>
```
After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

CSS
- In order to center texts, you'd better add text-align: center to the .container
```
.container{
    text-align: center;
}
```
Hope I am helpful. :)
Marked as helpful
akdhiman358•30
@akdhiman358
Submitted about 2 years ago
Used simple css rules and flexbox to complete this project.
1
Ecem Gokdogan•9,380
@ecemgo
Posted about 2 years ago
Some recommendations regarding your code that could be of interest to you.

HTML

In order to fix the accessibility issues:
- You need to replace <div class="container"> with the <main class="container"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
- Each main content needs to include at least h1 element so you should use one <h1> element in the <main> tag. You can replace your <p class="heading">Improve your frontend skills by buiding projects</p> element with the <h1 class="heading">Improve your frontend skills by buiding projects</h1> element.
After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

CSS
- If you want, you can use this recommended background color in the body
```
body {
   /* background-color: rgb(206, 231, 253);  */
   background-color: hsl(212, 45%, 89%);
}
```
Hope I am helpful. :)
Marked as helpful
Dominic Ewe•10
@sneakynicky
Submitted about 2 years ago
QR-Code-Component Challenge
5
Ecem Gokdogan•9,380
@ecemgo
Posted about 2 years ago
Some recommendations regarding your code that could be of interest to you.
- If you use max-width, the card will be responsive and you can increase the width a bit
- You'd better update padding to give a gap between the content and the border of the card
- You don't need to use flexbox here. If the styles don't work, I recommend you don't use them
```
 .card {
  /* width: 220px; */
  /* height: 350px; */
  max-width: 300px;
  /* padding: .5em; */
  padding: 15px;
  /* display: flex; */
  /* flex-direction: column; */
}
```
- In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
```
img {
   width: 100%;
   /* width: 200px; */
   /* height: 200px; */
   border-radius: 10px;
   /* margin-top: .25rem; */
}
```
- You'd better update and add font-size and margin for the texts
```
p.header {
  font-size: 20px;
  margin: 10px 0;
}
```
```
p.content-text {
  /* font-size: 12px; */
  font-size: 16px;
  margin-bottom: 20px;
}
```
- You don't need to use .card--title and .card--text and you can remove them
```
/* .card--title {
  padding: .5em;
} */

/* .card--text {
  padding: 0 .5em;
} */
```
- Finally, if you follow the steps above, the solution will be responsive.
Hope I am helpful. :)
ytsai4•20
@ytsai4
Submitted about 2 years ago
QR code component solution using Flexbox
3
Ecem Gokdogan•9,380
@ecemgo
Posted about 2 years ago
Some recommendations regarding your code that could be of interest to you.

In order to fix the accessibility issues:
- You need to replace <div class="container"> with the <main class="container"> tag and <div class="attribution"> with the <footer class="attribution"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
- Each main content needs to include at least h1 element so you should use one <h1> element in the <main> tag. You can replace your <p class="title">Improve your frontend skills by buiding projects</p> element with the <h1 class="title">Improve your frontend skills by buiding projects</h1> element.
After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

Hope I am helpful. :)

Ecem Gokdogan

All comments

Interactive Card Rating (Scss/Js) 🧡

Flexbox , Box-model Bootstrap

Qr code component using basic CSS

qr-code-component-main solution using HTML and css

responsive qrcode using sass

HTML CSS

QR Code

QR Code Challenge Solution

QR Code Responsive Website

QR-Component-using-CSS-Flexbox

QR code challenge

QR code component challenge on Frontend Mento

Qr code components solution

challenge solved successfully using some HTML & css , check it out

Mobile first responsive page using CSS grid

Used simple css rules and flexbox to complete this project.

QR-Code-Component Challenge

QR code component solution using Flexbox