@AliAhmad04
Latest solutions
Responsive REST Countries with Bootstrap, jQuery, and Flask
#bootstrap#jquery#flaskSubmitted almost 2 years agoResponsive Sunnyside Agency Landing Page using Boostrap, Sass, and JS
#sass/scss#bootstrapSubmitted almost 2 years agoResponsive Bookmark Landing Page using Sass, Bootstrap and Vanilla JS
#sass/scss#bootstrapSubmitted almost 2 years ago
Latest comments
- @arifaisal123
Good effort!
However, you can improve your solution as your image is not properly aligned. You may want to tinker with your height and gap property in your qr-code-box class and background-size (cover) property in your qr-code-design class.
Marked as helpful - @kamsirichard@arifaisal123
You can achieve the gradient/faded colors by using CSS gradient.
.circle { background-image: linear-gradient(red, yellow); }
The code above is just an example of linear gradient that you can use. Instead of red, yellow, you can use actual color values mentioned in the style guide of this challenge.
- @GuillermoBPY@arifaisal123
Why not? I have seen many submissions here where the users have taken their creativity to another level by using the designs from these challenges.
However, for this particular qr challenge, in my opinion from a user perspective, the animation is seeming a bit off with the design.
Marked as helpful - @Gowtham1802@arifaisal123
Good work! Flexbox is an important concept which you can use to center your div elements both vertically and horizontally.
In your code, instead of hardcoded value like using margin to position the box_1 element, you can put this box_1 element inside a container div element.
I have refactored your HTML as below:
<div class="container"> <div class="container"> <div class="box_1"> <div class="image"><img src="./image-qr-code.png" alt="QR_code" class="QR_img"></div> <div class="content"> <h4>Improve your front-end skills by building projects</h4> <p>Scan the QR Code to visit Frontend <br> Mentor and take your coding skills to <br> the next level</p> </div> </div> </div>Now your box element is inside the container div element. After that, add the following style code in your style element.
.container { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
This code will ensure that all its child elements are centered horizontally and vertically. Finally I removed the hardcoded margin value from your box_1 class.
Other ways of centering you can explore are "top bottom transform: translate" and "CSS grids system"
- @Anuoluwapo-dev@arifaisal123
That's a very good attempt! However, I have the following opinions on your submission that you can consider:
- For semantics, it is considered a good practice to give the most important heading as <h1> element. Try to look if there are other important headings than <h1>76</h1>.
- Generally, styles are better kept with external stylesheets which you've rightly done! Nonethless, in some of your text, you have used <b> to bold. It is a better practice to style it in your css file. Maybe, you want to add a <span> around the text. Semantically, <b> does not have any much importance, but if you want to style it using tags, you can use <strong> which semantically refers to something with strong importance.
- Additionally, you may want to add something more meaningful in your alt, inside the <img> tag. As it will be read by screen readers, you can write as "reaction icon" instead of just icon.
Happy Coding!
- @helenclx@arifaisal123
A very good effort! However, you may want to check out different devices in the mobile responsive version (using chrome developer tools) as I found white padding/margin at the top where the purple section is not completely aligned.
