Skip to content
OverviewSolutions
21
Comments
8
🦊[Shadow]🦊
@Shadow-IO-oI

All comments

  • 🦊[Shadow]🦊•420
    @Shadow-IO-oI

    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. 🦊

    Marked as helpful
  • 🦊[Shadow]🦊•420
    @Shadow-IO-oI

    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.🦊👍

    Marked as helpful
  • 🦊[Shadow]🦊•420
    @Shadow-IO-oI

    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! 🦊👍

  • 🦊[Shadow]🦊•420
    @Shadow-IO-oI

    こんにちは

    I looked at your code and have some ideas to resolve some issues.

    1. There are several ways to solve the hover issue for the button:
    /* 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.

    Marked as helpful
  • 🦊[Shadow]🦊•420
    @Shadow-IO-oI

    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!🦊

  • 🦊[Shadow]🦊•420
    @Shadow-IO-oI

    🦊^_^🦊👍

  • 🦊[Shadow]🦊•420
    @Shadow-IO-oI

    I like the dark mode option. 🦊👍

  • 🦊[Shadow]🦊•420
    @Shadow-IO-oI

    Your solution and redesign are awesome. Do you mind if I make my own variant based on your suggestions?