Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions22Comments236

All comments

  • Vanza Setia• 27,855

    @vanzasetia

    Submitted

    Hello Everyone! 👋

    It has been a while since I submitted the last solution. That's because I had an exam and my internet connection was down. 😅

    Anyway, it feels good to be able to submit another solution. This is my first challenge for doing a two-page website. It's also the first time I create a map. Luckily, the Leaflet quick start guide is easy to follow.

    I have several questions:

    • On the location page, there's a map image. The alternative text for it is "Map of Modern Art Gallery". I don't know that it is enough for screen reader users. Maybe, I should explain the location in great detail like "Modern Art Gallery map. It's located at 99 King Street near International Tennis Hall of Fame..." (?). I think that would be overly descriptive. So, is telling the screen reader users that it is a map of "someplace" enough?
    • Still on the location page, I am not sure about the HTML markup. There are these texts, "99 King Street", "Newport", "RI 02840", and "United States of America". So, my question is, should I put each text as its own paragraph or I wrap the text with one paragraph element and then use span to move each text to seat on its own line? (Or am I just overthinking about this 😆)
    Like this?

<div class="area__wrapper">
  <p class="area__street">99 King Street</p>
  <div class="area__details">
    <p class="area__city">Newport</p>
    <p class="area__state">RI 02840</p>
    <p class="area__country">United States of America</p>
  </div>
</div>

Or like this?

<p class="area__wrapper">
  <span class="area__street">99 King Street</span>
  <div class="area__details">
    <span class="area__city">Newport</span>
    <span class="area__state">RI 02840</span>
    <span class="area__country">United States of America</span>
  </div>
</p>
    • To simplify my second question, is it should be read as one sentence? (Or it doesn't matter 😆)

    I have created the site without Leaflet JS. The map is an image that has been provided by Frontend Mentor. Here's the link: https://noleaflet.netlify.app/. This might be useful to understand my first question.

    Any questions on the technique that I'm using are welcome! 😁

    Also, if you have finished this challenge and would like me to give feedback on it, please include a link to your solution. I would be glad to help you! 😀

    Thanks!

    Art Gallery Website | Leaflet JS

    #accessibility#bem#sass/scss#lighthouse

    3

    Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi, Vanza! Another excellent job! 🙌

    To your questions:

    • I think the alt text is fine, especially since the all the location information is in the next section.
    • When it comes to the HTML on the location page, I think using p tags, as you've done here is just fine. You could change the .area__wrapper div to an address element for slight semantic improvement, but I'm not sure it's necessary.

    Hope your exams go/went well! Looking forward to your next solution!

    Marked as helpful

    1
  • P
    The Burrito Doggie• 1,260

    @BurritoDoggie

    Submitted

    Hello everyone.

    I am a kid in 7th grade trying to learn code.

    I finally uploaded my second project!!!!!! ^^

    (On my last project APG helped me, but this time I did this challenge by myself)

    I'm also not a Pro at coding so I'm expecting a lot of correction! 😆

    Feedback will be appreciated!!!

    My second project on Frotend Mentor

    4

    Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi Alyssa! 👋

    It’s so awesome to see you finally submit another solution! Sorry I’m a bit late to comment (been ill, but better now!). You’ve already gotten some great advice from Tesla Ambassador & Shashree. I agree that instead of the two margins on the image, you could simply add margin: 15px to the card, and then add any extra needed margin/padding for the text to the .paras div. Semantically the first paragraph should be some sort of heading (h1, h2, etc.) rather than a p tag, as Shashree already mentioned.

    The only "new" piece of advice I have is typically it's best not to have a set height for elements, letting the content determine height instead. This helps to avoid overflow issues. For example, try adding more text to the second paragraph, and you'll see that the text will soon overflow the card. However, if you remove the height from the card or switch it to min-height, the card will expand with the text.

    Again, great to see you submit another solution and looking forward to the next one! 😄

    Marked as helpful

    1
  • P
    Fluffy Kas• 7,735

    @FluffyKas

    Submitted

    Hey guys,

    This is my first React project. Well... there are some part I'm satisfied with and others, less so >.< I'm quite happy with an overall layout, especially the mobile and tablet view. The backdrop filter also looks super pretty (too bad Firefox still doesn't have support for it).

    What I'm not happy out is the layout shifts. Especially in the Crew tab, the content "jumps around" a fair bit. It only happens on the initial load. Tried to find a way around it with some animations but I'm still a bit clueless how to solve it, so if anyone has any idea, I'd be happy to hear it.

    I'd love to hear other feedbacks too on how to improve my work, as usual ^^ Have a great day!

    Space tourism - with React and Framer Motion

    #react#react-router#framer-motion

    2

    Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi, Fluffy Kas! I’m a bit late to this party, but…

    I struggled with a similar issue in the tabbed section of my Dine solution. Although we used different tools (React & Framer Motion vs. Svelte), hopefully I’ll be able to help a little here.

    The shifting happens worst on initial load on the technology and crew pages, and unfortunately it also occurs to a lesser degree with every tab change on the crew page.

    For the crew page, I believe the text is shifting due to the change in container height caused by the images all being different sizes. Setting a min-height on the container equal to the height of the tallest image should help prevent this. The crew image shifting looks to be caused by the image flex container changing to the the size of the new image before the old one leaves the DOM. Is there a way you could change your animation to have the old one fade out before the new one loads? I apologize, as I’m not familiar with framer motion. Perhaps you can use a setTimeout function to give the old content time to leave the DOM before the new content enters? Again, another option might be to set a min-height and min-width on the image container so the size isn’t shifting with each tab change.

    To prevent the initial flashing, you have to find a method to pre-load your images. For me this resulted in a major refactor, putting all the content in the DOM (rather than dynamically loaded as you have done here), and toggling display: none along with some animations. However, given your img srcsets are pretty simple, you might be able to use preload or do something similar to this method in React.

    Why do tabbed sections have to be such pain? 😭 Your solution overall is fantastic, though - and the animations on the destination page are great! I really like the subtle rotation of the moons (and Mars!). 🙌

    Marked as helpful

    1
  • Karol Binkowski• 1,640

    @GrzywN

    Submitted

    Hey!

    I'm really happy with the result :)

    I turned my spaghetti JavaScript code into cleaner and more maintainable OOP import/export module based code. Animations are made using GSAP and ScrollTrigger plugin. If you know SOLID principles or some design patterns and you think I could have done something better - let me know, since it's my first OOP JS project after all. I'll probably code the next one in TypeScript.

    The solution isn't pixel perfect, but it's not that bad. I spent some time working on it, but I thought it wasn't worth it, especially improving "partners" section was hard. (I didn't want to make a modifier class for every image and then compare it to the design, since this section is broken in Figma).

    Feel free to test out things and check out my code. I might have missed something, like I always do. Any helpful feedback is appreciated!

    Mobile-first solution with SCSS && GSAP / ScrollTrigger animations

    #accessibility#bem#gsap#parcel#sass/scss

    3

    Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi, Karol! 👋 Great job on this challenge! The GSAP animations fun, and I can confirm that the prefers-reduced-motion query does work. Your HTML semantics are solid, and overall it responds great. 👍

    The only thing I noticed is that the logos from 400 - 900px get very stretched and pixelated. I suggest removing flex: 1 from .partners__logo and then adding justify-content: center to .partners. You could then play around with your existing gap property on .partners to get the spacing how you want. At the very least this will prevent the logos from getting HUGE on large mobile and tablet screens.

    Again, nice job on this one!

    Marked as helpful

    1
  • turtlecrab• 550

    @turtlecrab

    Submitted

    My first landing page, I really tried to make it very very close to the design in both desktop and mobile view, I think I did well. Tried Figma for the first time, just used the free jpegs inside it, and it went like a breeze! It's so much easier to measure all the stuff there than in Krita(which I used previously).

    Questions:

    • What are the best practices of making a burger button and a menu? I think the method I used is fine, but maybe there are others?
    • I made the tip of the mobile menu and links' bold underlines with ::before css alchemy. Maybe there are better ways?
    • For widths between 375px and 1440px I used my judgements about how the design should respond, does it feel good?
    • I also set max-width of the whole page to 1700px, not sure, maybe should've set wider?

    I'd also appreciate any feedback on html and css, I spent a bunch of time on this simple project and not sure whether it turned good or not, maybe I should've gone for simpler approach with fewer @media queries?

    Responsive landing page using mobile first, sass

    #sass/scss

    1

    Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi turtlecrab! You’ve done a great job making an essentially pixel-perfect solution! 🙌

    As for your questions:

    • For the hamburger menu, I would defintely change the .burger div to a button. While the ul is still visible for screenreaders (or it seems to be), the div is not focusable for keyboard users and will only open on click. Using a button will allow the menu to open both on click and when pressing "enter" or "space" if focused. Much more accessible.
    • I think ::before and/or ::after pseudo-elements were definitely the way to go for both the mobile menu menu triangle and the link underlines. Great job. 👍
    • I honestly think it responds great overall, which was definitely not easy for this project. The only thing I noticed is that the egg and glass images start getting cut off from 650px - 767px. Responsiveness is a little easier in this section if you put the images in the DOM (in an img or picture tag) rather than as a background image in an empty div. Another good option might be to make the height of the divs responsive using clamp().
    • I set my max-width even lower than yours. It looks good to me. 👍

    Again, nice job on this one!

    Marked as helpful

    0
  • P
    Christopher Adolphe• 580

    @christopher-adolphe

    Submitted

    Hello frontend friends! 👋

    This was long overdue but I finally completed my 2nd challenge on Frontend Mentor. 🎉 This project was an opportunity for me to test new approaches on the way I write my CSS.

    Major challenge(s):

    • I started using Sass maps with @each rules to generate helper classes easily. It is not perfect but I think is a good start.
    • I started using custom CSS properties to better organise my CSS and reduce repetition.
    • Getting the grid as per the design was more challenging than I thought. I initially started with by defining the height of each row for the main content for different viewport widths but I soon realised that this was difficult to maintain. I finally found an efficient solution by using the minmax() function with the grid-template-columns and grid-template-rows properties.

    Your feedback would be much appreciated, especially if you have other ideas about how to better implement custom CSS properties in your workflow.

    Thanks in advance. 🙏

    Art gallery website | HTML, CSS, JS

    #sass/scss#typescript#webpack#gsap

    5

    Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi, Christopher - Awesome job on this solution! 🙌 The GSAP animations on this are simply fantastic! Between you and ApplePieGiraffe, I think I'm finally convinced to start using it rather than just keyframes. 😄

    The only small thing I noticed is that from 769-800px the text in the header overflows and gets cut off. Tweaking the transform: translateX() might be the simplest solution. 🤔

    Again, great job on this one - looking forward to seeing your next solution!

    Marked as helpful

    0
  • Trevor Merrick• 150

    @tmerrick17

    Submitted

    I was pretty happy with this one.

    The only thing is I wanted the mobile menu to go back up after I scroll down a little first. Right now, when you push the hamburger, the menu comes down, but when you scroll down, right away it goes back up, I wanted to scroll down say 200px and THEN it goes back up.

    Anyway super fun to replicate and used CSS flex and CSS grid a lot.

    Responsive landing page with mobile menu animation

    #sass/scss

    1

    Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi, Trevor! Congrats on completing another solution!

    If you use window.scrollY>=400 rather than window.scrollY=400 in your scroll event listener, it should work. Remember, one equals sign is not "equality" in JS. While using "===" should also work, the behavior you're really going for is to have the mobile menu move back up if the user has scrolled up to or past 400, so I think >= is better used here.

    Marked as helpful

    0
  • Misiu• 50

    @misiucodes

    Submitted

    Hi FEM community,

    Who thought what looks like a simple landing page could be so difficult! Some of the areas I struggled with that I would love advice/words of wisdom on are:

    • I coded this using React - any advice on how to structure my files/best practices for this would be great as I continue learning
    • Are there any rule of thumbs for when to use flexbox vs. grid?
    • When it came to making this design mobile-responsive, I really struggled and had to make a lot of media queries. How could I have structured my code better so that I only need to do minimal media queries?
    • What's the best way to have coded the underline styling for the "learn more" buttons so that no matter what screen size, it remains responsive?
    • Not sure about the code for my drop down menu - how can I make it ease out more smoothly when a user exits the drop-down menu?

    Thanks all,

    newbie coder

    Sunnyside Agency Landing Page

    #react

    2

    Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi, Misiu! Congrats on completing another challenge! 🎉

    To your questions:

    • While I’ve been learning Svelte rather than React, I did find Josh W Comeau’s guide to React file/directory structure helpful.
    • Here's a decent article on Flexbox vs Grid. Personally, I tend to abuse Grid and use it for most things. 😂
    • When it comes to media queries, I try to stick to two “sets” (base styling for mobile, 1 query for tablet, 1 for desktop), but sometimes you’ll have certain elements that need a little extra. 🤷‍♀️ Responsiveness for this one is really tricky, and media queries are definitely needed.
    • For the underline styling on the “learn more” links, I find the best way is to use ::before or ::after pseudo-elements. I see you're already utilized a pseudo-element in your mobile menu, so won't get into full instructions. Although if you have trouble getting it to work, please let me know, and I'll be happy to help you out. 😄
    0
  • Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi Pablo! 👋 Congrats on submitting another solution! 🎉

    That image is tricky. There's a few different ways you could do it. Working with your existing code, you could try increasing the image width percentage. Then add a max-width, so it doesn't get too big on larger screens. For positioning, you could use transform: translateX() with a negative value in order to shift the image left. Something like the code below could work. Note: the vaules I've used are just for the sake of example and would need to be changed to match the design.

    .computer-image {
width: 125%;
max-width: 1000px;
transform: translateX(-300px);
}

    Marked as helpful

    2
  • Marta• 630

    @martam90

    Submitted

    Hello,

    I do not know why share image does not show up when I want to share the link to my page for example on Facebook. Do you have any idea what might be wrong in my code?

    I will be glad for your answer feedback concerning my project. Thank you.

    Space travel project (Gatsby.js)

    #accessibility#gatsby#sass/scss#bem

    2

    Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi, Marta! So good to see you submit another solution! I like the loading animation you added. 😄

    I’m unsure what is causing the issue on Facebook, since the preview from the link you posted on Slack is working fine. 🤔

    However, I think the quotations in the font-family of your body are causing your fonts to show up incorrectly. Switching font-family: "Barlow Condensed', sans-serif”; to font-family: "Barlow Condensed", sans-serif; should fix it.

    Marked as helpful

    2
  • Vanza Setia• 27,855

    @vanzasetia

    Submitted

    I've done another challenge! 🎉

    It's hard to find the exact RegEx that I want to validate user inputs. For the email RegEx, I already created by myself so I did just copy-paste from previous solution. For the name RegEx, I created a RegEx where the user's first name and last name should have at least a vowel letter and two characters long. Password RegEx that I wanted was difficult to find. However, I finally found a gist that contains the password RegEx that I wanted.

    I added two new features such as

    • Users are able to toggle the password visibility so they can see what they've typed.
    • Users can see the password length so they don't have to count it by themselves.

    These features were added based on my users' stories.

    I have no questions however, any feedback is appreciated.

    Any questions on the technique that I'm using are welcome! 😁

    Also, if you have finished this challenge and would like me to give feedback on it, please include a link to your solution. I would be glad to help you! 😀

    Thanks!

    Intro Component with Signup Form | HTML CSS Sass JS

    #accessibility#bem#lighthouse#sass/scss

    4

    Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi, Vanza! 👋

    I have no helpful, constructive feedback for you. Just wanted to drop in and let you know that your solution is fantastic! I really love the added features and like how you styled the attribution like the form. Thank you for the link to the password RegEx. 🙌 I also appreciate all the effort you put into your README files (my own are rather shabby...😅).

    As always, look forward to your next solution! Hopefully, one of these times I'll actually have some useful input. 😄

    4
  • Patrik• 110

    @Pjurak123

    Submitted

    I had some trouble with the border-bottom on navigation items (links), for some reason, the linear gradient on the border-bottom does not work.

    If anyone knows how to fix that I would appreciate it. :)

    Responsive Easy-bank app in React

    #react

    1

    Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi, Patrik! 👋

    I believe you need border-image in order to use a gradient (see code below). You're also only having the border apply to screens 1440px and higher, so you could probably drop that media query down to min-width: 960px, when it changes over from the mobile menu.

    border-bottom: 3px solid transparent;
border-image: linear-gradient(to right, var(--clr-primary-lime-green), var(--clr-primary-bright-cyan));
border-image-slice: 1;
    0
  • Cody Kelly• 60

    @CodyKelly

    Submitted

    For this project, I used SCSS with CUBE CSS methodology in mind. My goal was to build out the larger composition of the site first, then style any parts that needed special attention after.

    My questions:

    Is the SCSS code easy to follow?

    Are there any glitches on your browser?

    Does my site respond well when you resize your browser?

    Any other tips that come to mind will be appreciated as well :)

    Clipboard landing page

    #sass/scss#lighthouse

    1

    Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi, Cody. Congrats on submitting another solution. 🎉 Overall, good job on this one. I don’t see any glitches, and it responds great - even on large screens (1920+), which sometimes gets overlooked. 👍

    A few suggestions:

    • .content could be changed to a main element rather than a div for improved semantics.
    • Speaking of semantics, the links ul in the footer could be wrapped in a nav.
    • One last thing - I’m unsure why you used empty divs between sections to add space when you could just put margins on the sections themselves. 🤔

    Marked as helpful

    1
  • Nakoya Wilson• 1,530

    @nakoyawilson

    Submitted

    For this project I had difficulties changing the color of the four podcast logo svgs. Changing the value of the fill properties seemed to do nothing and I'm unsure how else to change the color of an svg.

    Mobile First Pod request access landing page

    1

    Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi, Nakoya! 👋 You've done a fantastic job on this pixel-perfect solution. It responds beautifully as well. 🙌

    The svgs also have a filter applied to them, which is what is making them light grey. To manually change the color you would have to either change the filter color (I couldn't figure out how to do that properly for my solution), or remove the filters and also change the fill values.

    Marked as helpful

    0
  • P
    Grog the Frog• 480

    @GregLyons

    Submitted

    I tried to do this solely using HTML and CSS, but I found that I needed JavaScript because, even if I set 'minlength="1"' on the <input> element, it still accepts empty inputs as valid (even with 'type="email"'). Does anyone know how to make the min length work for length 0? I've gotten it working for, e.g. 'minlength="4"'...

    Any other feedback is also welcome!

    E-mail validation using HTML5 and :invalid pseudo-element

    1

    Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi, Grog! 🐸 Congrats on submitting another solution. 🎉 It looks great and responds nicely.

    As for your question, adding HTML attribute "required" to your email input should prevent empty submissions. 👍

    Marked as helpful

    1
  • Faris P• 2,810

    @FarisPalayi

    Submitted

    • Added simple Intro transition animation
    • Shows a snackbar on request failure
    • Shows a simple loader while loading for advices
    • Fluidly responsive text
    • Keyboard accessible
    • Screen reader accessible
    • Progressively enhanced

    Advice Generator App - HTML | CSS | JS

    #accessibility#fetch#lighthouse

    2

    Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi, Faris! Awesome job on this solution! I really like the animations you've added, and the loader is a great touch. 🙌

    My only suggestion for improvement would be to have the advice h2 and blockquote animate on every new quote not just the first time the page loads. In vanilla JS, I believe the only way to do this would be to put your animations in classes. Then in showRandomAdvice() you would first remove the animation classes from adviceElm & adviceElmID. After the rest of the function had finished, you would then re-add the classes so that the animations would run again.

    Example for clarity:

    adviceElm.classList.remove("animation");

getRandomAdvice()
// rest of your function, adding innerText, etc.

adviceElm.classList.add("animation");

    Might be worth trying out just for fun. Again, great job on this one and looking forward to seeing your next solution! 😄

    Marked as helpful

    1
  • Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi, Wendy! 👋 Nice job on this one! It responds great, which I know was definitely tricky. 👍

    I know next to nothing about Tailwind and Alipine, so I can't comment on your use there. However, poking around the layout I managed to find a few minor things to improve on:

    • I believe the desktop nav links have a gradient on the bottom in the design - not just green. Although there are a few ways to achieve this, I suggest looking into the border-image property in combo with a linear-gradient.
    • The article titles should be links with a green hover state.

    Like I said, very minor stuff. Again, great job on this one! 😄

    Marked as helpful

    1
  • Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi, Claude! Congrats on submitting another solution. 🎉

    When it comes to Sass/SCSS architecture, the 7-1 pattern seems to be considered the standard. However, it can be a bit overkill for smaller projects, so there are some simpler organization methods - like the 5-1 pattern. Hopefully these will give you an idea of how you can better organize your files. 😄

    A few other suggestions to make your solution even better:

    • ::before and ::after pseudo-elements are very handy for decorative image placement like the swirl patterns in the intro.
    • For better semantics, .footer__links could be a nav element with an aria-label with something like “footer menu” in order to distinguish it from the nav in the header. The link headers and links themselves might also be better suited as a ul with links inside li tags like you did in the header menu.
    • From about 620px ~ 1100px, the style is very cramped. I suggest adding another media query to account for tablet widths so that your solution looks good on all screen sizes.

    Marked as helpful

    0
  • renko7• 50

    @renko7

    Submitted

    Hello,

    I had difficulty adding border to the image. I kept trying to add the border but the circle would be uneven. Any help with that along with CSS formatting would be appreciated

    NFT Preview Component with Cube CSS

    1

    Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi, renko7! 👋 Congrats on submitting another solution!

    In order to create a circle, a border-radius of 50% (or higher) is needed. To add the border to the profile image on the bottom of the card, try adding the following to .footer img:

    border: 1px solid white;
border-radius: 50%;

    Marked as helpful

    1
  • Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi, Jeremiah! 👋

    Adding overflow-x: hidden; to your main should fix your white space issue on mobile.

    0
  • Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi, Lasha! Congrats on submitting your first solution! 🎉

    When it comes to your HTML, you did a very good job overall. Just a few suggestions:

    • Adding a visually hidden heading to your .section-img to describe to screen readers what that section is - something like “Used by the the following companies”. Here’s an article that describes different methods to add text just for screen readers. Adding alt text descriptions of each logo would be a good idea in this section too, so that screen readers will know what companies are using the product.
    • The .footer-nav can be a nav element instead of a div to give it more semantic meaning.

    For responsiveness, your paragraphs get quite stretched out before switching to the desktop layout. You may want to consider adding max-widths to them. Using ch units for this might be handy.

    Marked as helpful

    1
  • Imran08• 10

    @Imranshah90

    Submitted

    I tried to implement "CSS clamp() for font-size", but for some reason it was not working. I also checked the browser compatibilty on "can I use?", may be someone can direct me to the right resourse for learn more about clamp() or tell me a way to implement fuild font sizing technique.

    Huddle landing page with a single introductory section

    2

    Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi, Imran! Congrats on submitting your first solution! 🎉

    Here's a pretty in-depth article about using clamp() for fluid typography, which hopefully you'll find useful. 😄

    Marked as helpful

    0
  • Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi, GregsGrog! Congrats on completing another challenge! 🎉

    The way you have done the speech bubble works, but alternatively the triangle could have been created as a ::before or ::after pseudo-element of .info-box.

    A few other suggestions:

    • To better match the design for mobile, I suggest changing background-size on the .background div to cover rather than set dimensions. Getting rid of height and replacing it with min-height: 100vh will also make it more responsive.
    • Browsers automatically apply a bit of margin to body, which is preventing your background images from filling the whole page. Adding margin: 0 will fix this. Because browsers have some default styling, many web developers will use a “css reset” on their projects. Here’s a good article about it if you’re curious. 😄
    • Kudos to you for using a progress bar here. When I did this challenge about a year ago, I tried to use both a progress bar and a meter element, but could get neither to style correctly across all browsers. Not sure if much has changed, but they are a NIGHTMARE to style. If you wanted to match the design, you could try it out with just some plain divs for practice.

    Marked as helpful

    0
  • Parvathy Vazhoor• 880

    @parvathyvd

    Submitted

    My font Kumbh Sans was not taken in effect even though I have added it in the style sheet. If anyone can find out what's wrong I will greatly appreciate it.

    Thanks

    Profile card HTML CSS

    1

    Anna Leigh• 5,135

    @brasspetals

    Posted

    Hi Parvathy,

    In order for the font to load, you need to go to Google Fonts and select the font weights you need for this project. Then in the sidebar, you should find the code you need to embed in the head of your HTML.

    Edit: If needed, here is a guided walkthrough as well as a link to the official documentation.

    0