Looking to hire developers?
@afaiz-space
@Deepali25-K
Submitted
Hello there! This is my code solution for the "Fylo Landing Page with Two Column Layout" challenge.
I would love to receive some feedback. I'm eager to learn and improve my coding skills, so any constructive criticism or suggestions for improvement would be greatly appreciated.
Thank you in advance for taking the time to review my work, and I look forward to hearing your thoughts!
@afaiz-space
Posted
@Deepali25-Kv, hi..... I noticed some issues in your design.
@cristinakellyt
Submitted
I did this project to practice some knowledge.
I am happy with the result, but it would be even more if you guys tell me how to improve it or fix something wrong!
I appreciate your time! =)
@afaiz-space
Posted
Hey @cristinakellyt .
When hovering over the button of number 2. Then the color of the button of number 1 changes. This is happening with each and every button. When you hover over the forward button, then the hover effect will be seen on the button before it.
-- I think there is a problem.
#rating-values input:hover+input {
background-color: #959eac;
color: #fff;
}
@DLMedeiro
Submitted
Looking for input on how others would style the "$29 per month" piece.
Currently I have a H3 with 2 spans, the appearance is close, but this solution doesn't feel right and I wasn't able to center the "per month" portion.
Thanks!
@afaiz-space
Posted
Hey @DLMedeiro,
display: flex; align-items: center; gap: 8px; in h3 tag for vertical center alignment.@deepaksaroha
Submitted
@afaiz-space
Posted
Hey @deepaksaroha,
height: 80%; from .container class.Marked as helpful
@KarenMascarenhasLourenco
Submitted
Is my code understandable?
Did I use the semantic HTML tags correctly, should I add more or less?
In what areas of my code can I improve on?
All feedback is greatly appreciate. It helps me to improve as a frontend developer. Thanks!
@afaiz-space
Posted
Hey, @KarenMascarenhasLourenco
@nikitabarnawal
Submitted
Please review the code and feel free to comment down on what I need to improve
@afaiz-space
Posted
hey @nikitabarnawal,
@catherineisonline
Submitted
Hello, Frontend Mentor community! This is my solution to the Intro section with dropdown navigation.
I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.
Thank you
@afaiz-space
Posted
Hey @catherineisonline,
<a href="#">Todo List</a>)line-height: normal; in the button element.min-width:1000px; with min-width:1200px; in the main element.@EndoHr
Submitted
During this challenge, I faced too many questions and problems. If you r able to answer, please help me to figure.
@afaiz-space
Posted
Hey @EndoHr, congratulation on completing the first challenge.
add
body {
/*background-color: hsl(30, 38%, 92%); */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
remove position left and top property from cart class.
.cart {
/* position: relative; */
/* left: 28%; */
/* top: 80px; */
display: flex;
border-radius: 10px;
width: 35rem;
flex-direction: row;
overflow: hidden;
}
width:21%; with width:50%; in the .perfume class.width:21%; with width:50%; in the .details class.remove top and left property from the media cart class.
@media only screen and (max-width: 600px)
.cart {
/* top: 10px; */
flex-direction: column;
/* left: 5%; */
width: 100%;
}
/* width: 90%; */ with width: 100%; in the media .perfume_mob class.@cmb347827
Submitted
This was tricky with two web pages and only one JS page. it might have been possible to do with two JS pages, but I wanted to try to solve it this way, and I did ! :)
@afaiz-space
Posted
Hey @cmb347827,
display: grid; place-items: center; min-height: 100vh; in the body element.
remove all properties from the main element.border-radius:12px; in the .container class.replace
main .container form .svg {
width: 38px;
height: 38px;
background-color: Silver;
background-color: #7c8798;
border-radius: 50%;
}
with
.svg-parent {
/* border: 2px solid red; */
width: 40px;
height: 40px;
display: grid;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f8f8f8;
}
for logo alignment appropriately.
@irfanhfzh
Submitted
Feedback welcome for everyone... made with love ❤
@afaiz-space
Posted
Hey @irfanhfzh,
ongratulation on completing the challenges. I noticed an issue in your project.
align-items: center; justify-content: space-evenly; and replace padding: 78px 121px 64px 70px; with padding: 0 30px; in the .card__content class.width: 350px; with width: 100%; and remove margin-top: auto; from the .card__socials class@catherineisonline
Submitted
Hello, Frontend Mentor community! This is my solution to the News homepage.
I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.
Thank you
@afaiz-space
Posted
@catherineisonline
box-sizing: border-box; in the ** * universal** selector;height:100vh; with the min-height:100vh; in the body element.margin-top: -0.6rem; from the .featured a element.align-items: top; with align-items: flex-start; in the .post class.(Content is overflowing by giving height of post class)@simplysabir
Submitted
@afaiz-space
Posted
Hey @simplysabir
min-height:100vh; in the body and the .container class.
-add height: 350px; in the .cards class.self-align:flex-start; in the card1.self-align:center; in the card2.self-align:flex-end; in the card3.same property used in the rating card.
Marked as helpful
@josuep723
Submitted
@afaiz-space
Posted
Hey, @josuep723
.texto {
/* width: 80%; */
padding: 10px;
}
Marked as helpful
@Souheib-Aloui
Submitted
@afaiz-space
Posted
Hey @Souheib-Aloui
@Noseriousv
Submitted
How to hover image with text in button?
@afaiz-space
Posted
Hey, @Noseriousv congratulation on the completing challenges.
. . keep it up......
Marked as helpful
@mrahmadtalha
Submitted
help me to improve my design
@afaiz-space
Posted
hey @mrahmadtalha
margin: -4rem auto 0 auto; in the .victor class.Marked as helpful
@tahseen777
Submitted
All Feedback is Welcome Thank You
@afaiz-space
Posted
Hye @tahseen777
Marked as helpful
@11Kritika11
Submitted
Changing the color of icons and Their hovering state is not working .Don't know why , I tried multiple time to solve this issue but wasn't successful and the content desktop size also bothered me a lot as you can see my commits of CSS folder on my GitHub repository. I would love to know How can I fix this problems in my Upcoming challenges! .Nevertheless I enjoyed completing and submitting my first ever challenge.
@afaiz-space
Posted
Hey, @11Kritika11 congratulation on completing the challenges. I notice many issues in your project.
@DeboraCristinaP
Submitted
What are you most proud of, and what would you do differently next time?
Me orgulho de ter terminado o desafio o mais parecido que pude. Gostaria aprender a usar o css de forma mais correta eu ainda me perco muito nesse quesito.
What challenges did you encounter, and how did you overcome them?
definitivamento o css
What specific areas of your project would you like help with?
no código css
@afaiz-space
Posted
Hey, @DeboraCristinaP congratulation on completing the challenge.
box-sizing; border-box; in the * (universal selector).min-height: 100vh; in the body element.margin:50px; from main element.. . keep it up........
@Alifkm
Submitted
Hello, this is my solution for the clipboard landing page challenge. Any feedbacks are welcome:)
@afaiz-space
Posted
Hey, @Alifkm
@media screen and (min-width: 1024px)
.header .header__title {
font-size: 2.2rem;
/* line-height: 0; */
}
@media screen and (min-width: 1024px)
.section3 .section3__title {
font-size: 1.7rem;
/* line-height: 0; */
}
@media screen and (min-width: 1024px)
.section5 .section5__title {
font-size: 1.7rem;
/* line-height: 0.5; */
}
Marked as helpful
@kiersten-c
Submitted
Hi!
Something I struggle with is going from "mobile-first" to responsive. I find myself writing code for the mobile version and then completely rewriting it when I get to the desktop version.
Does anyone have any suggestions?
@afaiz-space
Posted
hey, @kiersten-c congratulation on completing the challenge.
min-height:100vh in the body element,.align-items: center; in the .price class.. . keep it up