When I click on a question and then click on a different one, the box (or the entire left side) doesn't move smoothly and it looks like a glitch haha. Any suggestion how to fix that?
Any other feedbacks are welcome as well.
Thanks in advance.
Hi congrats on this challenge,
I think if you add a tempo between opening and closing accordeon it may look like smoother, you con try something like this:
for(let i =0; i<questionContainers.length; i++){
questionContainers[i].addEventListener("click", (e) => {
if(prevOpen === i) {
close(i);
prevOpen = null;
}else {
if(prevOpen!== null){
close(prevOpen);
}
setTimeout(function() {
open(i);
prevOpen = i; //your code to be executed after delay
}, 300);
}
})
}
I couldn't test it as I'm currently at work :D But I think you get the idea
Hope this will help
Have a good day
I'm not sure about how to display the hero's image into my div card. Any feedback is welcome !
Hi, congrats on completing this challenge,
I usually choose to display image as a background image in an empty div on which i will force the dimension. If needed I can change background image with media querries to have mobile image or desktop image when needed. Other solution is to use image tag but i find it less conveniant to make it responsive as it will not resize automatically according box size.
Hope this will help
Have a good day :D
I used rems for margin and padding. What is the best unit to use for margin and padding rem or em?
I have given the container width in pixels. Should I use rem or % for giving it width?
hey congrats on completing this solution:
I'm not css expert but I believe rem and em are more font size units that will adapt to the end user browser settings. So if you use it for margin/padding end user will not have same result according their browser setting for font size. For padding/margin and for width/height I think it is a better practice to use unit like %, vw, vh, vmin, etc Those are all units related to browser size (except %) that will help you to have a smooth display on all screen size. It will still be necessary to use media query to adapt layout but this will help transition between breakpoint to look nicer.
Hope this will help,
Have a good day and keep up with the good work :D
Difficult for me was pixel perfect approach, do you have tips or resources to learn how to better turn design into code?
If you want a pixel perfect implementatoin I think it is better to have web browser extension that will allow you to apply your design as a mask on the website so you can see in real time implementation distances with the original design.
Also if you want it to work perfectly on all browser, learning more about each browsers specificity (webkit based or not) will allow you to deliver professional result I believe.
I couldn't get the svg images to show how they do in the design so I left them out.
Getting more practice using flex to position and layout elements
.some-element { display: flex; align-items: center; justify-content: space-around; }
Hello,
I think the following style will apply the image on the layer quite close as on the design.
background-image: url(icon-study.svg);
background-repeat: no-repeat;
background-position: right top;
If you want it to overlap the edges as on design you can try to position it with somthing like this:
background-image: url(icon-study.svg);
background-repeat: no-repeat;
background-position: calc(100% + 10px) calc(100% + 10px);
hope this will help :D
The pictures wont load for some reason, but the accordion itself works.
for the image issue you can try to use relative path like this:
<img src="images/illustration-woman-online-mobile.svg" alt="">
Hope this will help, it is always frustrating to have something working on local and having issues when going live.
Happy coding :D
How could the project be modularized?
I'm actually trying to build this using react, it is a very good one to learn react basics I think
Hi, congrats on completing that challenge.
What you can do for that is use pseudo element after or before instead of using an overlay div. If you need code sample to understand how it work you can try to translate this scss into css (I never right vanila css so I don't remember if those selector works there.
.div_img{
//insert img style
position: relative // this will help to position pseudo element
}
.div_img:hover::after{
content: ""; // this will allow you to display the pseudo element
position: absolute // this will allow you to use next property
inset: 0 // this will make the size of the pseudo element fill its parent, here the image div
// insert overlay style background color and background img
z-index: 1 // to make sure the pseudo element will display on top of its parent
}
Hope this will help, if you have any question on how it works don't hesitate to ask
Have a good day
i am unable to use javascript part properly....
Hey congrats on submitting this challenge,
From what I see you are trying to go for a very complex solution, not sure if it is really a good approach for a first try. What I could suggest is: in html: -use only class for your rating btns in css: -create a class for the selected btn style in JS: -create a funtion that toggle the selected class on an element.
add event listener on all buttons on click that will call your function that toggle the selected class.
This will be a first step on your code I think
Hope this will help you to sort out your issues
Hi comunity! Thats my first try. Did it using just HTML and CSS. Will be happy to read some response. Thx <3
Hello congrats on this challenged, as mentioned in the accessibility report you can try to wrap your code in a main landmark
Also if you want to be sure that your card is centered here is what you can do:
body {
background-color: hsl(212, 45%, 89%);
font-family: 'Outfit', sans-serif;
font-size: 15px;
width: 1440px;
min-height: 100vh;
text-align: center;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.attribution{
display: none;
}
Hope this will help :)
Have a good day
Hello, i'm finished next challenge. I spent two days on this. Things which i don't know how to implement. If someone can look for code and give me some feedback it will be great maybe gave mi some tips.
JS:
CSS
Hi congrats on this challenge, here what you can try to fix your issue:
CSS
.active .box__accordion--arrow {
position: relative;
height: 10px;
transition: 0.3s;
rotate: 180;
}
JS
function openAccordionItems() {
if (this.nextElementSibling.classList.contains('active')) {
this.nextElementSibling.classList.remove('active')
this.style.fontWeight = "400";
} else {
this.nextElementSibling.classList.add('active')
this.style.fontWeight = "700";
}
}
This will rotate only the arrow classes inside the active classes so you don't have to modify it inside the JS and you will have only one event listener. I'm not sure about this CSS selector I usually write in SCSS but it should be ok.
Hope this will help you :)
Happy coding :D
Not sure what's the best way to build the "annual plan" pricing section. I used CSS Grid to split it into 3 columns of 1fr, 2fr, 1fr. I'm sure there is a better way to do it though.
Hi congrats on this challenge,
There is always multiple ways to layout element, one way is not better than another, just use what your comfortable with in a first place. Then if you're facing perfomances issue you can try to go for efficient solution.
Here is how I did when I did that challenge: HTML:
<div class="card__item">
<div class="card__item__image">
</div>
<div class="card__item__text">
<p class="card__item__name">
Annual Plan
</p>
<p class="card__item__price">
$59.99/year
</p>
</div>
CSS
.card__item{
background-color: $veryPaleBlue;
border-radius: 10px;
padding: 24px;
display: flex;
align-items: center;
margin-bottom: 30px;
&__image{
background-image: url(icon-music.svg);
width: 48px;
height: 48px;
margin-right: 20px;
}
&__name{
color: $darkBlue;
font-weight: 600;
margin-bottom: 8px;
}
&__text{
margin-right: 90px;
}
}
I used margin and media querry to make sur it stays in good shape when window size change.
Hope this will help
Happy coding :D