P

drallas

@Drallasdrallas
Planet Earth
375Points

I like to πŸŠβ€β™‚οΈπŸš΄β€β™‚οΈπŸƒβ€β™‚οΈtrying to be active at least an hour each day. Currently I'm also learning modern Web-Development technologies here on Frontend Mentor!

I'm currently learning...

CSS / SASS / Javascript / React

All Comments

    • HTML
    • CSS

    Typemaster page - HTML/SASS

    3
    P
    drallas375 | Posted 7 months agocommented on Rayane's "Typemaster pre-launch landing page" solution

    Hello Rayane

    Congrats on finishing this Challenge! πŸ‘

    I think your solution looks pretty close to the Figma design with a nice transition between when you switch over to / from desktop layout. Not sure if shrinking the images itself is the best solution, i opted myself to keep them 'static'.

    I finished this one yesterday evening and used your solution as an inspiration to refactor mine. The tip for the 'mix-blend-mode property to get the "orange" effect' was very helpful since i struggled to get that right and with a linear-gradient I couldn't get it look as the Figma design. I also refactored to get rid of @import using @use now. Btw I noticed that your SCSS is showing in FF Inspector, mine isn't; how does that work?

    I used SASS for the first time this challenge and went 'all in' on structure; perhaps too much when i look at your SASS folder structure that's a bit simpler. I think it's ok to split up the SASS CSS into small components, not having to search so much to find a specific piece of code.

    I hope it helps!

    Enjoy coding the next one.

    Greetings, Drallas

    2
    • HTML
    • CSS

    Profile card component

    4
    P
    drallas375 | Posted 7 months agocommented on Zuhair.N's "Profile card component" solution

    Well done Zuhair it looks good and a nice attribution twist! :)

    0
    • HTML
    • CSS

    Movile first using pure HTML and CSS

    5
    P
    drallas375 | Posted 7 months agocommented on Diego De TomΓ‘s's "Profile card component" solution

    Hello Diego

    Nice card implementation!

    I also used absolute to place the image. You could try with margin left & top.. I Just opened my project for this and i get the picture in the center like that too. Perhaps you could give it a try and see if it works for you.

    0
    • HTML
    • CSS
    • JS

    Pod-request-access-landing-page

    2
    P
    drallas375 | Posted 7 months agocommented on Mohammad Abu-Odeh's "Pod request access landing page" solution

    He Mohammad

    You're Desktop site looks good, but your Tablet and Mobile are not showing up nice. It's easier to start Mobile first and then apply CSS exceptions for Tablet and Desktop. https://zellwk.com/blog/how-to-write-mobile-first-css/

    0
    • HTML
    • CSS
    • JS

    Using Grid

    1
    P
    drallas375 | Posted 7 months agocommented on Sven's "Pod request access landing page" solution

    Hi Sven

    Good work, I'm working on this one at the moment.

    I just flexbox (space-around) on the parent div with the logo img files. And then for each logo nth-child i set a height. Those values are all in the Figma file.

    You mobile version seems to have no BG image set!

    I hope it helps..

    Greetings. Drallas

    1
    • HTML
    • CSS

    four-card-feature-section with Flexbox

    3
    P
    drallas375 | Posted 7 months agocommented on Hachi's "Four card feature section" solution

    Hello Hachi

    Well done Hachi mostly it looks pretty much like the design, but 'the devil is in the details'! It's also recommended to use rem and not px value for accessibility On my 38" screen the card grow really big when I take it fullscreen. Perhaps limit the max size of the cards a bit..

    Greetings... Drallas

    1
    • HTML
    • CSS

    Social-proof-section - css grid

    6
    P
    drallas375 | Posted 7 months agocommented on YusufWebDev's "Social proof section" solution

    Hey Yusuf

    Just completed this one myself too.

    • Your CSS structure is very nice, but too many !importants! (i used 0 importants) :)
    • Your BG images are not showing up, the url for GH pages is without fw slash!
    • Your Sizing is a bit off / bigger than the design.
    • Also the positioning is a bit off.

    I hope it helps and you can refactor it a bit..

    Greetings.

    0
    • HTML
    • CSS

    Profiles-card-component-card using Flexbox

    4
    P
    drallas375 | Posted 7 months agocommented on Max's "Profile card component" solution

    Hello Max

    It's just a big too big and did you noticed that the mobile card is slighty smaller than the desktop one?

    I don't think two divs are needed!

        <div class="bg-body-1"></div>
        <div class="bg-body-2"></div>
    

    You can be set multiple background images on one div, positioning is tricky..

    background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
        background-position: ???;
        background-repeat: no-repeat, no-repeat;
    

    It's hard and requires tweaking the values. left -??rem top -??rem, right -??rem bottom -??rem the exact values I leave for you to figure out, that's part of the fun!

    0
    • HTML
    • CSS

    desktop solution with html and css

    2
    P
    drallas375 | Posted 7 months agocommented on Aquiroot { damian colaneri}'s "Profile card component" solution

    Hello Damian

    Seems very good to me, very nice and clean code too. Card size is only a bit bigger than the design, but I'm sure you can refactor it to be closer to the design.

    0
    • HTML
    • CSS

    Profile-Card-Component

    2
    P
    drallas375 | Posted 7 months agocommented on Laxmi's "Profile card component" solution

    Hello Laxmi

    I'd recomment using background-image and background-position to set to images correctly.

    background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
        background-position: ???;
        background-repeat: no-repeat, no-repeat;
    

    It's hard and requires tweaking the values. left -??rem top -??rem, right -??rem bottom -??rem the exact values I leave for you to figure out, that's part of the fun!

    Card design is also a bit bigger then design!

    0
    • HTML
    • CSS

    Single price grid component

    4
    P
    drallas375 | Posted 7 months agocommented on Grady's "Single price grid component" solution

    Hello Grady

    It's an component but you built it as page.. sizing is off your component is too big. Did this one myself today i tried to make it into an component that could be fit into a bigger page. Perhaps consider refactoring it into an component (Single price grid component)!

    0
    • HTML
    • CSS

    CSS FlexBox and SASS (re-created using Flexbox)

    6
    P
    drallas375 | Posted 7 months agocommented on Go Ushiyama's "Huddle landing page with a single introductory section" solution

    Hello

    I think your responsive design still deserves some consideration to make it a more seamless transition. Layout is a bit off, it might be better to tweak it a bit to closer to the design!

    1
    • HTML
    • CSS

    Responsive HTML using CSS Grid

    8
    P
    drallas375 | Posted 7 months agocommented on Antonio TS's "Single price grid component" solution

    Hello Antonio

    Nice solution... I'm working on this one at the moment, also using grid layout...

    I noticed a view things border-radius: 0.4375rem 0.4375rem 0.4375rem 0.4375rem; could be shortened to border-radius: 0.4375rem; The mobile version keeps on expanding vertically if i increase the viewport, i think it would be better to fix it like the desktop version.

    • better to use rem over px unless you have good reason for px!
    • box shadow code is a bit long 0px 15px 30px 0px rgba(0,81,171,0.15); will do fine. I'm a bit lazy so used a cssboxshadow generator with the values from the Figma file, just aplied it on the grid container.

    I hope it helps.

    1
    • HTML
    • CSS

    Just learned after and before pseudo

    2
    P
    drallas375 | Posted 7 months agocommented on Herbras's "Four card feature section" solution

    Hello Ibrahim

    On a wide screen over around 1535 px the four cards end up horizontally aligned. i think a max width on .section can prevent that. There are 2 more 'breaks' going from desktop to mobile, i don't know if i like them, myself i opted for just one break since a tablet layout was not required. https://drallas.github.io/Four-card-feature-section/.

    Good look with the refactoring this solution..

    1
    • HTML
    • CSS

    Responsive Hudle Landing Page - Attempt 2

    6
    P
    drallas375 | Posted 7 months agocommented on YusufWebDev's "Huddle landing page with a single introductory section" solution

    Hello Yusuf

    While switching from Desktop to Mobile the mockup image and text are falling outside the visible range on the right. Try to slowly decrease their size and then switch over at a better moment. Perhaps my (imperfect) solution helps. https://drallas.github.io/Huddle-Landing-Page/

    Mobile the design is off-centre to the right, 'perhaps' you have somewhere set a bigger width that the mobile viewport!? (Hint .page-grid). Mobile is also not showing the bg-mogile.svg.

    You can also use the Pesticide extension to make borders quickly visible, then those issues show up easier.

    I prefer the social icons from the design, your pop a bit too much for my taste. Perhaps looks at other solution what icons to use.

    Also consider when you are using px or rem..

    Good luck making it better!

    1
    • HTML
    • CSS

    Huddle Landing Page HTML+CSS 1440px & 375px

    2
    P
    drallas375 | Posted 7 months agocommented on orlandoriski's "Huddle landing page with a single introductory section" solution

    Hello Orlando

    When i compare the design it a bit off compared to the original, looking at that are enough things you could visually improve. Mobile you're showing the bg-mobile.svg in a different position that the design....

    To be consistent convert the remaining px values also to rem..

    But overall i think it's good and solid work.

    0
    • HTML
    • CSS
    • JS

    Invoice App | React, Next.js, styled-components, Formik, Framer Motion

    35
    P
    drallas375 | Posted 7 months agocommented on ApplePieGiraffe's "Invoice app" solution

    Hello APG

    This is a great version of the Invoice App, i couldn't find big issues playing with the invoices and testing the responsive layouts.

    Only thing i noticed is that the new invoice animation vs edit invoice animation are at different speeds. To open and close an existing invoice takes a bit long... but the animations are sweet! :)

    Looking forward to solve this challenge myself someday.

    1
    • HTML
    • CSS

    Profile Card Component with HTML, CSS and Sass

    1
    P
    drallas375 | Posted 7 months agocommented on Jed Salmon's "Profile card component" solution

    Hello Jed

    I think it's better to apply the background circles using background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg); directly in CSS.

    You can find my solution on my GitHub. https://github.com/Drallas

    I hope it helps!?

    1
    • HTML
    • CSS

    Flexbox and vanilla css

    4
    P
    drallas375 | Posted 7 months agocommented on Martin's "Huddle landing page with a single introductory section" solution

    Hello Martin

    The social media icons are a bit small.

    The logo is a bit bigger than the design, but doesn't matter it looks good.

    Resizing to mobile your image gets very small, after the switch to mobile its increasing in size again. I tried to make it more seamless, https://drallas.github.io/Huddle-Landing-Page/ perhaps it helps.

    I see you got the background size / placement almost right, I will redactor my own solution after seeing this!

    1
    • HTML
    • CSS

    four-card-feature-section-flexbox

    5
    P
    drallas375 | Posted 7 months agocommented on Mehmet Can BOZ's "Four card feature section" solution

    Hi Mehmet

    I was also on this one today, just finished it. As Mesut wrote you should check color, font-weight, font-size of texts, currently it looks a bit to far off the original.

    I noticed you used Flexbox, personally this seemed a perfect one to for CSS Grid, Flexbox could be used too of-course.

    Shrinking card could be prevented by giving them a fixed width, i don't think that they only need to resize on breakpoint for this challenge.

    0
    • HTML
    • CSS

    Social proof section

    2
    P
    drallas375 | Posted 7 months agocommented on Bruna Barros's "Social proof section" solution

    Hello Bruna

    Nice solve of the challenge. I think that the breakpoint for Mobile at 13xx is a bit early and the cards look enormous after the switch. Perhaps first letting the cards properly shrink more and then jump to mobile at a lower value.

    see : https://frontend-mentor-social-proof-section-beta.vercel.app/

    0
    • HTML
    • CSS

    The Profile Card Component (HTML & CSS only)

    6
    P
    drallas375 | Posted 7 months agocommented on drallas's "Profile card component" solution

    Hi Tom

    Thank you for your feedback on BEM.

    My class="card-top" has background-image(s) background-image: url(./images/bg-pattern-card.svg); I'm not sure how i could replicated that with a 'linear gradient' or a :before pseudo element; but I'm learning so i will do some research it a bit, perhaps it opens my eyes.

    The margin-right value is removed, this was the first time that i used transform so I'm still figuring out what works best.

    1
    • HTML
    • CSS

    whoIsBeto card-component

    3
    P
    drallas375 | Posted 7 months agocommented on Roberto CortΓ©s Monroy's "Profile card component" solution

    The background images could also be set via background-image:

    background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
        background-position: ????? ;
        background-repeat: no-repeat, no-repeat;
    
    0