I tried SASS for the first time and I love it! Nesting is awesome, but I don't know how to do @medias with SASS, I created new @media for almost every class..
I have a bug in a code, and I don't know how to fix it... On the mobile screen, the testimonials section has a big gap without margins or paddings, and the last testimonials card is cut off the screen.
Any feedback on how to do that is more than welcome! <3
Hi!
Sass is really awesome. The problem that you had with media queries is easy solved with mixins. Check out this tutorial (about media queries from 1:50:00) . This will help you to understand and get used to Sass pretty fast.
About gap issue - I can't help here, but the card is cut off because of your .container class has overflow: hidden.
Hope, this will help you.
P.s I loved the animations!
Мне бы хотелось услышать отзыв о моей работе. Готов выслушать любую критику. Это один из моих первых сайтов, поэтому любой отзыв будет проанализирован и учтен. Спасибо за уделенное внимание!
Здравствуй, Владимир!
Отличная работа, чистый, понятный код. Так держать!
Единственное, стоило бы дольше поиграться с цифрами если есть желание максимально приблизиться к дизайну - например, border-radius и др., так же добавить box-shadow.
Чтобы разделяющая линия была не такой темной, можно добавить прозрачности цвету, примерно #7474743b.
Хорошего дня!
I could use help on the javascript for this. My approach was going to be to change the innerHTML when the checkbox became inactive, but it did not work and it all went downhill from there. I ended up spending the next couple of hours trying to fix it and decided it wasn't worth the hassle. I figured I would submit what I got and seek help. Any suggestions?
Hi Matthew, Great work with HTML and CSS!
For javascript - I've seen your code, here are some suggestions:
1.Select element, not its property because element can emit events. let checkBox = document.querySelector('#myonoffswitch');
Input, in this case checkbox, has special event - change when element is checked/unchecked.
checkBox.addEventListener('change', myFunction());
In myFunction check checkbox.checked and change innerHTML of elements.
function myFunction(){ if(checkbox.checked) { //change prices to year} else {//change prices to month} }
Hope this helps, If you have more questions I'll try to answer. Happy coding!
I feel like I wrote a lot of code in CSS. If you know how could I shrink it please let me know. Also any tip is very grateful.
Hi! It's okay about amount of CSS :D
You can read about CSS shortcuts, these allow you to write
background: url(../assets/images/bg-desktop.svg) no-repeat, var(--violet) instead of background-image: url(../assets/images/bg-desktop.svg); background-color: var(--violet); background-repeat: no-repeat; or margin: 3rem 0 5rem 4.5rem instead of margin-top: 3rem; margin-left: 4.5rem; margin-bottom: 5rem;
Happy coding and have a nice day!
mobile version has those long scroll bars, i'm not sure what how i should fix that. Send me your tips please :D thanks
Hi!
That scroll bars issue is because of svgs height is 978px.. Set it through background property in body styles.
In my solution I use background: url('../img/bg-pattern-top.svg') 125% 200% no-repeat, url('../img/bg-pattern-bottom.svg') -20% -120% no-repeat, $dark-cyan;
Hope this helps.. Happy coding!
Hi everyone, this is my first project in HTML, CSS and vanilla JS, as a beginner i've srtuggled a lot, especially the design has been a hard challenge. I've tried my best but due to my lack of experience i don't know if CSS structure is ok, i've started from smaller width and then i've added 5 more media queries. Is that correct?
There are some issues i couldn't fix:
I can't split the subtitle text in the header (mobile version) exactly as is shown in the picture.
The line inside the card has space left and right, so it doesn't fit the whole card width.
The arrows that move the slider are too big i don't know how can i adjust them.
I can't resize the circles (header background image) for desktop screen width.
I've simulated the subscrition when the button is clicked but the body background image gets smaller when the page is empty (only desktop). Why?
You may find more mistakes, thank you in advance for taking the time and see my solution.
Hi Davide,
It's a great result for first project!
I'll try to answer some of your questions:
2. It has spaces because you card element has paddings, to fix that try setting margins and paddings to its children elements instead of setting padding for card element.
4. Circles size depends on header height, because you set background-size:contain. Try playing around with the height.
After the subscription your body has only header element, so it's height and width are the same as header's. body{height:100vh, width:100vw} will fix this.
Hope this helps. Happy coding!
Create responsive site with animation, if you find any issues, give me to know, thanks! :)
Hi! I really like animations you did. But there are issues with background patterns - there is a problem with paths to svg files in your styles.
Keep coding and have a nice day!
There are no questions now but I need a whole lot of feedback. Thanks.
Hi!
If your question is about card background - create div with height and width you need and set background: url("path to your svg"). You can set it's border-radius so there will be no need to change your svg.
Happy coding! :)
I know there are way more simpler methods to complete this challenge. Did my best as a noob. So feel free to suggest simpler methods and alternatives. Thanks in advance!
Hi! Great job!
I would recommend you to investigate about flexbox for positioning, this makes life much more easier. Flexboxfroggy is a great tool to learn it fast through practice.
Have a nice day!
Rate my work please and give me feedback to improve it!
Hello! I wanted to see your solution, but there is 404 page instead :(
My main issue here is after i did a translateY on the profile picture theres a big gap between the name and age information and the profile picture
Hi! Great job!
To fix that gap issue try putting your card-header class to position:relative, and picture class to position: absolute and play around with top and left properties instead of transform. I don't know if it's a correct way to fix that, but I use that trick a lot.
Have a nice day!
hi, i have a problem in making the circle around the icon to change its color when the cursor is hovering above them. i'd be so thankful if anyone can help me:)
#i also dont know why frontendmentor cant show the icon in the bottom eventhough the vercel app is working just fine with showing the icon
Hi! You are changing color on hover in .fab:hover {color: hsl(300, 69%, 71%);} adding there border: hsl(300, 69%, 71%) 0.08rem solid; should work.
