Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
7
Ambadi M P
@Soaphub

All comments

  • mark_pherz•450
    @mark-pherz
    Submitted about 2 years ago

    Simple component HTML/CSS

    2
    Ambadi M P•380
    @Soaphub
    Posted about 2 years ago

    Hello mark_pherz, great work and keep coding and have fun. I reviewed your code in GitHub. The background is not two-colour curved. It's an image placed on the background colour (--very_pale_blue: #f5f7ff) and the images are in your images folder. There are two images one for the desktop view (pattern-background-desktop.svg) and the other one for the mobile view(pattern-background-mobile.svg). You could follow the following steps in the stylesheet to get it right.

    • Move the bg colour from .wraper to the body tag. So the bg colour will be filled in the background of all elements. Even height: 100% or 100vh to take the size of the window screen.
    • Now you could add an image through .wraper div using background-image: url("the location of desktop image"), add width:100% to cover the width screen and height how much ever you want. The .card div would have displaced.
    • Finally, you could add position: absolute to .card div to make it like a popup card. Then add left: 50%, right: 50% and transform: translate(-50%, -50%) to make it in center of the page.
    • To change image in mobile view, use media queries for responsive websites. Even you can reduce card size or image size in different breakpoints and avoid content overflowing out of the screen. eg: @media (max-width: 991.98px){ .wraper{ background-image: url("the location of desktop image") } }. Check W3School to know more about media querry.
    Marked as helpful
  • jtatan17•20
    @jtatan17
    Submitted about 2 years ago

    Basic HTML and CSS

    #materialize-css
    2
    Ambadi M P•380
    @Soaphub
    Posted about 2 years ago

    Hello jtatan, great work. I would love to provide a suggestion on Google fonts. Reviewed your code in index.html. Found u have copied the link from google fonts with only a font weight of 800.

    • You can select different font-weight such as 300, 600 and 900 from the google fonts webpage. Then copy the link finally so that all font-weight is included in the same link.
    • In the style sheet, you could add the same font weights for the heading tag and para tag. Use font weight 900 for bolder text, 600 for medium text and 300 for regular text. In your code, you could use 900 or 600 for h1 tag and 300 for p tag.
    Marked as helpful
  • aimee•50
    @aimeempereira
    Submitted about 2 years ago

    Responsive card using CSS and HTML

    1
    Ambadi M P•380
    @Soaphub
    Posted about 2 years ago

    Hello Aimee, I reviewed your code you copied the HTML element <svg> from the website which could only be used in index.html. If u want to place an image through CSS, you have to download the SVG from the website. Then place it in your project folder. Then follow any of these steps.

    • You could use <imag> with atribute src="the location of svg" in index.html.
    • Add a div with class then update the file location of the image in CSS. But don't forget to add the width and height or else the image won't be displayed. eg: .class{background-image: url(location of image);} For further reference, you could refer freeCodeCamp
  • Musyoka Sila•240
    @sila254
    Submitted about 2 years ago

    QR-Code-Component

    3
    Ambadi M P•380
    @Soaphub
    Posted about 2 years ago

    Hello sila98, well done all looks good.

    • I could see a box shadow in the design. If u want any u can add them to the class .container, using property box-shadow: h-offset(px) v-offset(px) blur(px) spread(px) colour;. Look at w3schools for more details on box shadow.

    • The method you used to select the image element is correct. There are many ways and the order in which the style is prioritized as higher to lower is given below. The higher order overrides the lower one.

    1. You could add an id or class to the image tag.
    2. Use a hierarchical selector, the one you used. eg * .container img*
    3. Finally the hierarchical selector using elements i.e div > img.
    • Final suggestion, you could use media queries for responsive websites. So you can reduce size in different breakpoints and avoid content overflowing out of the screen. You have been using the same size for all screens. eg: @media (max-width: 991.98px){ add the styles here}
    Marked as helpful
  • Mudasser Khan•50
    @Mdxr
    Submitted over 2 years ago

    QR Code Card

    2
    Ambadi M P•380
    @Soaphub
    Posted over 2 years ago

    Hey Mudasser Khan, great work and keep trying for a better responsive website. The website looks good, I can add some suggestions which I am following. You can try it.

    • I reviewed your index.html page and found the use of an internal style sheet which was fine. But I highly recommend an external style sheet for an easy understanding of CSS hierarchy.
    • You could media queries for responsive websites. So you can reduce size in different breakpoints and avoid content overflowing out of the screen. You have been using the same size for all screens.
    • Add all common styles like flex-direction, text alignment etc... below screen size 991.98px where the grid pattern changes. eg: @media (max-width: 991.98px){}. Then for more specific styling like the width of image text use the below breakpoints.
    @media (max-width: 575.98px) { ... }
    // Small devices (landscape phone)
    @media (min-width: 576px) and (max-width: 767.98px) { ... }
    // Medium devices (tablet, 768px and up)
    @media (min-width: 768px)  and (max-width: 991.98px) { ... }
    // Large devices (desktops, 992px and up)
    @media  (min-width: 992px) and (max-width: 1199.98px) { ... }
    // X-Large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) and (max-width: 1399.98px) { ... }
    // XX-Large devices (large desktops, 1400px and up)
    @media (min-width: 1400px) 
    

    Hope it was helpful...

    Marked as helpful
  • Koi Hastilow•90
    @KoiHast
    Submitted over 2 years ago

    Landing Page using Flexbox

    3
    Ambadi M P•380
    @Soaphub
    Posted over 2 years ago

    Hey Koi Hastilow, great work and keep trying for a better responsive website. The website looks good, I can add some suggestions which I am following. You can try it.

    • I reviewed your index.html page and found all the icons in the <main/>, you could place that in the <footer> which makes it typical and easy to bifurcate the page. The footer can contain the address and contact info.
    • In the CSS stylesheet it is better to avoid fixing the height to 100vh. Don't worry about the height, users love scrolling.
    • In the media query I found u repeating classes .content .text .main to make the flex direction colomn. If you want a more responsive website. There are some default breakpoints below, choose which is required.
    • Add all common styles like flex-direction, text alignment etc... below screen size 991.98px where the grid pattern changes. eg: @media (max-width: 991.98px){}. Then for more specific styling like the width of image text use the below breakpoints.
    @media (max-width: 575.98px) { ... }
    // Small devices (landscape phone)
    @media (min-width: 576px) and (max-width: 767.98px) { ... }
    // Medium devices (tablet, 768px and up)
    @media (min-width: 768px)  and (max-width: 991.98px) { ... }
    // Large devices (desktops, 992px and up)
    @media  (min-width: 992px) and (max-width: 1199.98px) { ... }
    // X-Large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) and (max-width: 1399.98px) { ... }
    // XX-Large devices (large desktops, 1400px and up)
    @media (min-width: 1400px) 
    

    Hope it was helpful...

    Marked as helpful
  • Ecyla•20
    @ecy16
    Submitted over 2 years ago

    QRcode components

    4
    Ambadi M P•380
    @Soaphub
    Posted over 2 years ago

    Hello Ecyla, I reviewed your git hub repository for the project QR-code-image. There was no image folder with an image file, hence the image was not visible. You could do the following steps to get the image.

    • Add an image folder to the project and move the image file given by the frontend Mentor into it.
    • Then change the src attribute of the image tag to "image/image-qr-code.jpg".
    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub