@yashh247
Submitted
@F4YY
@yashh247
Submitted
@F4YY
Posted
Hi @yashh247,
Congratulation for successfully completing the challenge...
There's little suggestion about what you've missed to the given design. Which is when user submits their email address through the form and clicked subscribe button, then the Thank You component will be rendered, displaying the thank you message along with the user's email address
that has been inputted instead of just static text @loremcompany.com
.
To achieve the desired behavior, you might need to add JavaScript function, so that the inputted email address
is dynamically inserted into the thank you message.
Hope that could be Helpful. Above all you did very good. Keep happy coding...
@KeoLamola
Submitted
Hi All, any for of a feedback towards my solution is highly appreciated.
@F4YY
Posted
Hi @OekPhlesym,
Congratulations on successfully completing the challenge, you did very well...
There is improvement room to make it closer to the given design. Which is appearance of the eye icon
overlaying above the equilibrium image when hovering. You can set overlay component and make its absolute position, also set relative position of the image container.
Then insert it in HTML & CSS, the code snippet could be like this, you might adjust it as you like:
in HTML:
<div class="avatar">
<img src="images/image-equilibrium.jpg" alt="preview">
<img src="images/icon-view.svg" class="overlay" />
</div>
in CSS:
.avatar {
display: flex;
position: relative;
justify-content: center;
align-items: center;
height: 60%;
width: 100%;
}
.overlay{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
}
.overlay: hover{
opacity: 1;
background: hsl(178, 100%, 50%, 0.5);
}
Hope that could be Helpful. Keep happy coding...
@ArinjayBhola
Submitted
@F4YY
Posted
Hi @ArinjayBhola,
Congratulation for successfully completing your 1st challenge, you did great...
Little suggestion to make it closer to the given design, which is when user submits their email address through the form and clicked subscribe button, then the Thank You / Success component will be rendered, displaying the thank you message along with the user's email address
that has been inputted instead of just static text [email protected]
.
To achieve the desired behavior, you might need to add JavaScript function, so that the inputted email address
is dynamically inserted into the thank you message.
Hope that could be Helpful. Keep happy coding...
Any feedback is welcomed! :-)
@F4YY
Posted
Hi @peipeix2,
Congratulation for successfully completing the challenge, nicely done...
However, when on mobile screen view the image's not showing. In your code, the src attribute for the mobile screen size is specified as src="../images/image-product-mobile.jpg"
. The use of the ..
in the path indicates that the image file is located in a directory one level above the current directory.
Try using src="./images/image-product-mobile.jpg"
is the way to specify the relative path to the image file when it is located in the images folder directory within the same directory as the HTML file. By using this path, the browser will display the image-product-mobile.jpg
.
Hope that could be Helpful. Keep happy coding...
Marked as helpful
@rgap
Submitted
@F4YY
Posted
Hi @rgap,
Congratulation for successfully completing your challenge, you did very well...
Based on the CSS code you provided, it seems that the width of the .box
element is set to 20%. This means that the width of the .box
element will be 20% of its parent container's width. When displaying on a mobile screen, it can cause the .box
element to shrink and the text within it to overflow. This can result in the text not fitting within the container and appearing outside of it.
To fix this issue, you might consider using media queries to adjust the width of the .box element for different screen sizes. Such like CSS code snippet below:
@media (max-width: 480px) {
.box {
width: 80%; /* Adjust the width as per your requirement */
}
}
You can customize the styles for different screen sizes and ensure that the text fits within its parent container without overflowing.
Hope that could be Helpful. Keep happy coding...
@HatemGw
Submitted
could you give me your review it'll be helpful
@F4YY
Posted
Hi @HatemGw,
Congratulation for successfully completing the challenge...
There's suggestion to make it closer to the given design, which is when user submits their email address through the form and clicked subscribe button, then the Thank You / Success component will be rendered, displaying the thank you message along with the user's email address
that has been inputted instead of just static text [email protected]
.
To achieve the desired behavior, you might need to add JavaScript function, so that the inputted email address is dynamically inserted into the thank you message.
Hope that could be Helpful. Above all you did great. Keep happy coding...
Marked as helpful
@yzhuuuu
Submitted
how to adjust image size is kinda difficult
@F4YY
Posted
Hi @yzhuuuu,
Congratulation for successfully completing the challenge...
In your provided code, it seems that you're using min-width
for the mobile image and max-width
for the desktop image. To clarify:
The min-width
media query is used to specify styles for screen widths equal to or greater than the specified value.
The max-width
media query is used to specify styles for screen widths less than or equal to the specified value.
If you're aiming to show the mobile image for smaller screens and the desktop image for larger screens, you might want to adjust your media queries accordingly. For instance:
-> Show mobile image for screens up to 600px wide:
@media (max-width: 600px) {
.img-container img {
display: block;
max-width: 100%;
height: auto;
}
}
-> to show desktop image for screens 601px and wider:
@media (min-width: 601px) {
.img-container img {
display: block;
max-width: 100%;
height: auto;
}
}
Hope that could be helpful. Keep happy coding...
@margsoftbf
Submitted
Another solution, next will be project in React and start training on that.
@F4YY
Posted
Hi @margsoftbf,
Congratulation for successfully completing the challenge...
There're suggestions to make it closer to the given design.
user's email address
that has been inputted instead of just static text [email protected]
. To achieve the desired behavior, you might need to add JavaScript function, so that the inputted email address is dynamically inserted into the thank you message.justify-content: center
; and align-items: center
; will horizontally and vertically center the content within the <body> element.Hope that could be Helpful. Above all you did great. Keep happy coding...
Marked as helpful
@a3mxn
Submitted
@F4YY
Posted
Hi @a3mxn,
Congratulation for completing the challenge...
From user point of view, I have few suggestions that might interest you to fit app as close as to given design.
480px
which is commonly used as a breakpoint for mobile screens. Inside the media query, you might need adjusted the flex-direction to column-reverse
and set the height to auto
, allowing the content to stack vertically on smaller screens. This will help ensure a more responsive layout on mobile devices. Such CSS snippet below: @media (max-width: 480px) {
.container {
flex-direction: column-reverse;
height: auto;
}
}
Hope those could pretty much Helpful. Above all you did very great. Keep happy coding...
@pajarmuharam14
Submitted
@F4YY
Posted
Hi @pajarmuharam14,
Congratulation for successfully completing the challenge...you did very well.
However, there is recommendation to optimize screen view especially for mobile devices. For devices with varying screen sizes, there are a few common breakpoints:
Since you set @media (max-width:375px)
for mobile screen view, it will cause other mobile devices width more than that (such as iphone 12, iphone XR, iphone 6/7/8 plus, etc) are displaying same as desktop screen, flow-direction is row (by default) instead of flex-direction: column. To resolve this issue you may replace with @media (max-width:480px)
.
Hope that could be Helpful. keep happy coding...
Marked as helpful
@myj009
Submitted
@F4YY
Posted
Hi @myj009,
Congratulation for successfully completing the challenge...
There's little suggestion about what you've missed to the given design. Which is when user submits their email address through the form and clicked subscribe button, then the Thank You component will be rendered, displaying the thank you message along with the user's email address
that has been inputted instead of just static text <span class="font-bold">to your email address</span>
.
To achieve the desired behavior, you might need to add JavaScript function, so that the inputted email address is dynamically inserted into the thank you message.
Hope that could be Helpful. Above all you did very good. Keep happy coding...
Marked as helpful
@ribeiroLevi
Submitted
This was the first time that i aplied some js to a project and i coudn't figure out how do change the email in the second screen, can any one help me?
@F4YY
Posted
Hi @ribeiroLevi,
Congratulation for successfully completing the challenge, nicely done...
To displaying the second screen thank you message along with the user's email address
that has been inputted instead of just static text TESTE
, you might need to add JavaScript function, so it will dynamically be inserted into the thank you message.
If you're using react frameworks, it quite simple send user input email address value as props to it. Such like sample snippet below:
<p>
A confirmation email has been sent to `{props.value}`. Please open
it and click the button inside to confirm your subscription.
</p>
Hope that could be Helpful. Keep happy coding...