Skip to content
OverviewSolutions
31
Comments
10
Radasin
@Radasin

All comments

  • Radasin•620
    @RadasinPosted over 1 year ago

    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
  • Radasin•620
    @RadasinPosted over 1 year ago

    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
    @RadasinPosted over 1 year ago

    Done some fixing.

    0
  • Radasin•620
    @RadasinPosted over 1 year ago

    You can use the output element for the form output. Here is a link for that MDN

    0
  • Radasin•620
    @RadasinSubmitted over 1 year ago

    Frontend Mentor - Sunnyside agency landing page solution

    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.

    Table of contents

    Note: Delete this note and update the table of contents based on what sections you keep.

    Overview

    The challenge

    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

    Screenshot

    firefox firefox

    Links

    My process

    Built with

    • Semantic HTML5 markup
    • CSS custom properties
    • Flexbox
    • CSS Grid
    • Mobile-first workflow

    What I learned

    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;
}

    Author

    CSS ONLY MENU

    3
    Radasin•620
    @RadasinPosted over 1 year ago

    I will try to fix it.

    0
  • Radasin•620
    @RadasinPosted over 1 year ago

    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
    @neew18Submitted over 1 year ago

    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!

    Nft preview card

    3
    Radasin•620
    @RadasinPosted over 1 year ago

    HTML & CSS for Beginners Part 7: File Structure

    Marked as helpful
    0
  • Nann Ei Ei Win•140
    @neew18Submitted over 1 year ago

    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!

    Nft preview card

    3
    Radasin•620
    @RadasinPosted over 1 year ago

    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
  • Radasin•620
    @RadasinPosted over 1 year ago

    Thanks. I will change the code.

    0
  • Joachim van der Pol•60
    @JoachimvdPSubmitted over 1 year ago

    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?

    QR component challenge

    2
    Radasin•620
    @RadasinPosted over 1 year ago

    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