I really liked this project, and I also wanted to experiment with some perspective effect when displaying the letter, you know if you have any suggestions and how to improve my code you can tell me by commenting, happy coding.
I redid this solution because I have now come to terms with responsiveness , I loved the outcome.
Some recommendations regarding your code that could be of interest to you.
min-height: 100vh to the bodybodybody {
background: hsl(212, 45%, 89%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
max-width, the card will be responsivepadding 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%);
}
width: 100% to the imgimg {
/* width: 300px; */
width: 100%;
border-radius: 5%;
/* padding: 10px; */
}
pp {
/* padding: 20px; */
padding: 10px;
}
.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%);
} */
Hope I am helpful. :)
Some recommendations regarding your code that could be of interest to you.
max-width, the card will be responsive and you can reduce the width a bitmargin if you use flexbox in the body.qrComponent {
/* width: 370px; */
max-width: 300px;
/* margin-top: 3rem; */
/* margin-inline: auto; */
}
Hope I am helpful. :)
all feedback is welcome thank you in advance.
Some recommendations regarding your code that could be of interest to you.
min-height: 100vh to the bodybody {
background: hsl(212, 45%, 89%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
max-width, the card will be responsive and you can reduce the width a bitpadding 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; */
}
width: 100% to the imgimg {
width: 100%;
/* width: 316px; */
/* margin: 16px 0px 16px 16px; */
border-radius: 8px;
}
h2 {
/* margin: 10px 36px 10px 36px; */
margin: 20px 10px;
}
p {
/* margin: 10px 36px 10px 36px; */
margin: 10px 0 30px;
}
Hope I am helpful. :)
the only problem I had was the assets, I couldnt find a backgropund image similar. please your feedback is super important to me.
bye!!!
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.
min-height: 100vh to the bodybodybody {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: hsl(212, 45%, 89%);
}
max-width, the card will be responsive and you can increase the width a bitpadding to give a gap between the content and the border of the cardtext-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;
}
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;
}
.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;
} */
Hope I am helpful. :)
Some recommendations regarding your code that could be of interest to you.
HTML
<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>
<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
bodymin-height: 100vh to the bodybody {
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;
}
max-width, the card will be responsive.card {
max-width: 300px;
}
width: 100% to the imgimg {
/* width: 96%; */
width: 100%;
border-radius: 20px;
}
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;
}
.container and text and you can remove it/* .container {
max-width: 350px;
margin: 0 auto;
} */
/* text {
padding: 22px 10px;
} */
Hope I am helpful. :)
if I have a nested div then how can I fix both the outer div and inner div .because when I zoom out on web browser then my inner div is go out side of my outer div. how to fix it.
Some recommendations regarding your code that could be of interest to you.
min-height: 100vh to the bodybody {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: hsl(212, 45%, 89%);
}
.inner to center the cardmax-width, the card will be responsive and you can increase the width a bitpadding 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;
}
width: 100% to the img.inner img {
/* width: 210px; */
width: 100%;
border-radius: 14px;
/* margin: 10px 10px 10px; */
}
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;
}
.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;
} */
Hope I am helpful. :)
Some recommendations regarding your code that could be of interest to you.
max-width, the card will be responsive and you can reduce the width a bit.container {
/* width: 400px; */
max-width: 300px;
}
font-size of texts but it's up to you.Hope I am helpful. :)
One of my main difficulties was using the media queries and making the proper adjustments based on the width of the screens being viewed in.
I think the only area of the code that I'm unsure of would be the media queries so if you are reviewing this, please I would like to have feedback on what I can improve on. Especially over the media queries on css.
Some recommendations regarding your code that could be of interest to you.
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 bodybody {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: hsl(212, 45%, 89%);
}
margin in the .qr-code to center the cardmax-width, the card will be responsive and you can reduce the width a bittext-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;
}
width: 100% to the imgimg {
border-radius: 20px;
/* height: 400px; */
/* width: 400px; */
/* margin-top: 25px; */
width: 100%;
}
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;
}
.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;
} */
Hope I am helpful. :)
Some recommendations regarding your code that could be of interest to you.
.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);
}
justify-items: center for the .cardmax-width, the card will be responsive.card {
/* width: 300px; */
max-width: 300px;
/* justify-items: center; */
}
width: 100% to the img.card > img {
/* width: 300px; */
width: 100%;
}
Hope I am helpful. :)
Some recommendations regarding your code that could be of interest to you.
min-height: 100vh to the bodybody{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
margin-top in the main to center the cardmain {
/* width: 18%; */
max-width: 300px;
/* margin-top: 100px; */
}
width: 100% to the imgimg {
width: 100%;
/* height: 250px; */
/* width: 250px; */
border-radius: 10px;
}
Hope I am helpful. :)
Some recommendations regarding your code that could be of interest to you.
HTML
<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
min-height: 100vh to the bodybody{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
margin in the main to center the cardmain{
/* width: 350px; */
max-width: 300px;
/* margin: 200px auto 20px auto; */
}
width: 100% to the imgimg{
border-radius: 8px;
width: 100%;
}
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);
}
Hope I am helpful. :)