Submitted
NadiaFr
@NadiaFrShLm
All solutions
Submitted
So exciting to make more and more complex layout.
In this one I struggled with changing svg icons colour on :hover. Finally found out filter: brightness(0) and invert(1) to make them white
Submitted
First time use sass architecture for a bigger project than a simple card, so there are sass files for each sections.
Media queries applied with @mixin and 3 breakpoints.
Still can't understand how to work properly with get tools in Chrome, what I noticed that dimensions (with and heigh of a screen) when you choose "responsive" isn't the same if you just drag the window till the width you need (375px of 1440px). Font-size is not correct.
Submitted
It looked very simple at the first sight. The main problem was how to add media query into the sass files.
Apparently not every property works like at the simple css. I used mixin with Breakpoint value=>
@mixin mobile-only { @media (max-width:#{$breakpoint-mobile}) { @content; } }
and for examples : width: 95%; // doesn't work flex-direction: column; //works
The only way I found how to apply it is to write at the EVERY selector (that I need to change for the mobile layout)
@include mobile-only {...}
It's definitely wrong, there are a lot of repetitions, but it works.
If you know how to make it more compact I would appreciate your advice
Submitted
Still problems with form.
And how to position popup error messages due to email input in desktop and mobile layout.
Probably it would be more compact to use "this" word in javascript but I'm not sure how to apply it right. Still my js file seems to be huge
Submitted
That was challenging for me.
Still not sure is it useful to split all the components to several files (typography, layout, breakpoints, variables...)
Sure the JS code could be more compact, but for now I'm proud of my result.
Submitted
Nothing to be proud of. Huge difficulty with inputs and error messages, and still I'm sure my version is farm from the good one. And I also didn't add the regex for email input
Submitted
Difficulties:
- error message with "!" i added using setInterval() for 2sec. But interval works only once, then it appeares for milliseconds.
- again problems with background for the left half (with text)
Finally I managed to copy both mobile and desktop version using Grid and ::after element to cover it with background pattern. All that give the sentiments of dissapointmen, looks like I regress
Submitted
One question bothers me. Every project there is a strict instruction for the paragraph font-size. I do the project comparing with the disign pictures, comparing proportions. And it's never the font-size from instructions
Submitted
Sure my code is a mess. The difficulty was where to position the block with sociall media icons. In a desktop version it should be placed like a child of an arrow icon to chain it with absolute position. BUT in a mobile version logically it should be at the end of the html code (to let it take the whole width of a card container). So my code works BUT it's a total mess
Submitted
I strugled with this chalenge a lot: first I challenged myself to study sass, and as a result this is my first sass project.
And secondly that was a headache to place all 3 images with corect dimention and position. The problematic was how to make one (box) overlaping the card and main image with pattern put inside the container.
Thirdly, SASS questions: do I need apply sass architecture on such a little project or just 1-2 files would be enough (just a layout and the other components). And should I put the sass folder in .gitignore file as far as style.css already compiled
Submitted
OMG! That's my first ever JS component made just by myself. For now I dont care much if the code is "clean", I'm just proud of myself it WORKS!
Submitted
Still have a problem with applying a pattern to the page. This time I added a <div> with one <img> , as a first <body> child ans possitioned it absolutely to the body.
Also, looks like fontawesome changed the applying method. As far as I remember later we had to add the specific link to the <head> and add the icon Ex: <i class="far fa-nom-icone"></i> in a code. Now it doesn't work
Submitted
With 2 given width of a screen, how should I develop the component? Just looking approximately to the example or in a dev tool make the dimensions : responsive and 1440px screen width?
Thanks in coaching in coding
Submitted
Thats not clear where should I fix max-width:1440px. Is it in a container (first child of the body, that contains the whole card?).
And for the first time I used CSS variables (just for the text-color and header-color), I'm not sure to apply it right. Are there any list of variables names or we can invent them according to some rules?
Submitted
I used a lot flexbox and grid to place layout. Not sure if my choise was correct.
Submitted
Placing 2 bg-patterns was a nightmare. Finally I placed them in a <body> as a background-image with 2 url() , and positioned them with percentages. So it looks well only with 1440 screen with. Real nightmare
Submitted
I'm still a newbie, dont judge me stricktly :) I stucked with some questions here. scema of the body: "body" "div.container" "main.card" "div.copyright" "/ div.container" "/ body" First of all, width and height to make the card component right in the center of the screen (+ "div.copyright" always at the bottom). So, am I right to give the "div.container" (that is a only child of a <body>) hight of 100vh. In this case whole contains will take 100 screen height, and with "display: flex" I cant disperse 2 child ("main.card" itself and "div.copyright") on the screen. In the other hand, I have to add "margin: 0 auto" and to the "div.container" and to it's first child "main.card" to center vertically.
Second, CSS variables. I gave button { background: hsl(31, 77%, 52%); /* to apply the background color*/ --class-item-bg: hsl(31, 77%, 52%); /* to reuse this color later at the :hover state*/ it works but I'm sure there is an other much more clewer way to do it.
Third, I add all the parameters of all the component at the top of the .css file. Is it useful/ necessary in a real life project?
Submitted
It looks like my css file is huge, still can't understand how to minimise css proprieties.
Submitted
Submitted
Submitted
