CRKNO• 50
@CriKno
Submitted
Please tell me how I can improve, whatever it is fine! Thank you so much!
Radasin
@Radasin
All comments
- Radasin• 620
@Radasin
Posted
Place an image inside an image: html
<img class="img"><img class="overlay" /></img>css
.overlay { display: none; width: 100%; height: 100%; position: relative; z-index: 2; } .img:hover .overlay { display:block; } ``` this should work i haven't tested it but it should work.1 - Fran Domitrović• 250
@frandomitrovic
Submitted
Radasin• 620@Radasin
Posted
Looks good. CSS Line 16
- -fs-16: font-size: 16px;is an error. Correct is--fs-16: 16px;. But you don't need a custom property for font size of 16px because 16px = 1rem and its the default font size for browsers.Marked as helpful
1 - Radasin• 620
@Radasin
Submitted
This is a solution to the Sunnyside agency landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
How to make a menu with CSS only.
.nav-bar__menu { position: relative; } .nav-bar__list { position: absolute; display: none; list-style: none; background-color: var(--WHITE); color: var(--DARK-MODERATE-CYAN); background-color: var(--WHITE); top: 200%; right: 10%; padding: 4rem 50%; flex-direction: column; justify-content: flex-start; align-items: center; gap: 3rem; } :is(.nav-bar__menu:hover, .nav-bar__menu:focus-within) .nav-bar__list { display: flex; width: 90vw; border-right: 20px solid transparent; border-top: 20px solid #3ebfff; }- Frontend Mentor - @Radasin
Radasin• 620@Radasin
Posted
I will try to fix it.
0 - Nino Khurtsidze• 400
@Ninunutsi
Submitted
feedbacks are welcome
Radasin• 620@Radasin
Posted
Id's should be unique, you can remove id from clone by using
clone.removeAttribute("id");. Use rem, em or % instead of px. Don't style sections, or any element that you can have more then once in html, give them a class. You can use the fetch function to get the data from json:fetch("./data.json").then((response) => { return response.json(); }).then( (data) => { //read the parsed json data ));Marked as helpful
0 - Nann Ei Ei Win• 140
@neew18
Submitted
At first, I found it difficult to position the images. But after a few researches and readings, I solved it. Please review my code and leave some feedbacks about what I can improve more. Thank you!
Radasin• 620@Radasin
Posted
Marked as helpful
0 - Nann Ei Ei Win• 140
@neew18
Submitted
At first, I found it difficult to position the images. But after a few researches and readings, I solved it. Please review my code and leave some feedbacks about what I can improve more. Thank you!
Radasin• 620@Radasin
Posted
Its better to put the css file in a folder css then src, because most developers use a css folder (we get confused when the css style is in a folder who is named differently). You don't need to set height to auto its the default. The :root is for custom properties, if you want to set font size to 62.5% use html selector here is a video about css units at 1:44 is the font size set to 62.5% so the rem would be 10px. Lastly use alt attribute in img elements, its use when the img can't be showed and for screen readers.
Marked as helpful
0 - Joachim van der Pol• 60
@JoachimvdP
Submitted
This is my solution to the Frontend Mentor QR component coding challenge. I initially started a junior project, but felt like it would be more appropriate to start smaller as I have very little experience.
Most of the challenge was pretty straightforward, but I struggled to get the component centered vertically. I wanted to use flexbox to do this, but I wasn't able to get it to work. Eventually I found a solution: setting the display on the body to flex, and centering it from there. In order to properly center it however, I did need to give the body a height of 100vh. It feels counterintuative to specify a height for the body. Are other solutions that are less complicated?
Radasin• 620@Radasin
Posted
That is the simplest solution to center something in the browser viewport. The body like any other element has a height set to auto by default, so when you set it to 100vh it has the full height of the browser viewport and the flex display can then center the content in the middle. You can use position relative or absolute to place items in center, but that is more complex.
Marked as helpful
0
