[🎄]
[🔰] Responsive
[🌎] With
[💖] I will be very happy to read your feedback!
Hello, @KayloPortal!
First of all, I want to say that your code is very well-written, clear, and responsive. I really like it 🦊👍.
I have a few suggestions that might help improve the look of your site. At a width of 800px, there is still enough space to set the benefit row and feed row to 2 columns. Then, at 600px, you could set them to one column.
Additionally, the footer looks quite big. Perhaps you could consider setting the footer-links to three columns instead of one. On mobile devices, you could set it to two navigation columns and one social-links row.
Finally, I noticed that there are no hover effects on the address link, phone number, and email link. Maybe underlining or changing the color to white would look nice.
I hope these suggestions are helpful for you. 🦊
Hi, I noticed that you wrote '<' and '>' before and after the <div class="container">HTML tag. I think this may be a mistake, but the rest of the code appears to be written correctly.🦊👍
👋Hello, Frontend Mentor coding community.
👨🏼💻This is my solution for the Time tracking App.
🎨 I added some custom features:
Hover EffectsCSS AnimationsClickable 3 dotsI'll be happy to hear any feedback and advice!🤗
Hey there! 👋
Congrats on successfully completing the challenge! 🎉
I wanted to share some suggestions with you regarding your code that I think you'll find helpful. Specifically, with regards to the CSS🖼️:
It looks like there is a problem with the hover effect on the items when the focus is on the rear decoration image and not on the "main-box". One solution to this issue is to add an additional class for each item, for example, "item-hover". Then, you can rewrite the ".main-box:hover" line in CSS to target the ".item-hover:hover .main-box" selector, which will solve the hover effect problem:
.item-hover:hover .main-box {
top: -10px;
background-color: var(--dbl);
cursor: pointer;
}
With this updated code, the hover effect issue should be resolved.
I trust that you'll find this recommendation useful, and once again, congratulations on your fantastic solution! Keep up the great work and enjoy coding! 🦊👍
Hey, guys! I would appreciate some advice.
こんにちは
I looked at your code and have some ideas to resolve some issues.
/* 1 */
button {
margin-top: 2.5625rem;
width: 18rem;
height: 3.5rem;
border-radius: 8rem;
font-style: normal;
font-weight: 700;
font-size: 1.125rem;
line-height: 1.4375rem;
text-align: center;
color: #FFFFFF;
background: linear-gradient(180deg, #303B59, transparent), #303B59;
transition: background-color 1s;
}
button:hover {
cursor: pointer;
background: linear-gradient(180deg, #7755FF, transparent), #2F2CE9;
background-color: #2F2CE9;
color: #fff;
}
The second way to solve the issue is by creating a pseudo-object.
/* 2 */
button {
margin-top: 2.5625rem;
width: 18rem;
height: 3.5rem;
border-radius: 8rem;
font-style: normal;
font-weight: 700;
font-size: 1.125rem;
line-height: 1.4375rem;
text-align: center;
color: #FFFFFF;
position: relative;
z-index: 2;
background: #303B59;
overflow: hidden;
}
button::after{
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 100%;
left: 0%;
background: linear-gradient(180deg, #7755FF, transparent), #2F2CE9;
z-index: -1;
transition: all 0.3s ease 0s;
}
button:hover{
cursor: pointer;
}
button:hover::after{
top: 0%;
}
2 To solve other issues, it is necessary to rewrite the code a bit.
Write to me if you're interested.
Happy coding!
I wrote こんにちは because I saw <html lang="ja"> in your code. So, I apologize if I offended you.
You can find MY ANIMATION TUTORIAL HERE
🔥 I've implemented my own custom design on top the original fem design and used GSAP to animate all elements in a timeline sequence. For optimum animation experience, recommended viewing dimensions: 1440x800. On desktop, after a while background image fades into a new one infinitely.
It is also responsive for mobile. There might be some slight issues for tablet still.
This time I've also added a little email validation using REGEX.
[PS. If you have set prefers-reduced-motion to true - it wont animate]
I'm not sure how else to contact you, so I'll just ask here.
I saw your Base Apparel coming soon page redesign and thought it was pretty cool. So, I took your design, animations, and images and rewrote it using common JavaScript, CSS, and HTML.
Before I publish it, I just wanted to check with you first. Can I share my version with the world?
Let me know what you think.
Thanks!🦊
You can find MY ANIMATION TUTORIAL HERE
🔥 Another challenge with my own custom design on top the original fem design.
For optimum animation experience, recommended viewing dimensions: 1440x800
It is also responsive for mobile.
And finally with this submission, i've officially completed all newbie challenges 🔥
What is your opinion on "Patrick Abrams"s background color on the dark theme? I wanted to retain the contrast in the design, but is it too bright for a dark theme? I would love to hear your opinions on this, and any other comment is also appreciated.
You can find MY ANIMATION TUTORIAL HERE
🔥 I've implemented my own custom design on top the original fem design and used GSAP to animate all elements in a timeline sequence. For optimum animation experience, recommended viewing dimensions: 1440x800. On desktop, after a while background image fades into a new one infinitely.
It is also responsive for mobile. There might be some slight issues for tablet still.
This time I've also added a little email validation using REGEX.
[PS. If you have set prefers-reduced-motion to true - it wont animate]
Your solution and redesign are awesome. Do you mind if I make my own variant based on your suggestions?
