I'm about to start creating my portfolio. This project have been realized as first.
I've created this solution using Vue.js framework, tried to be pixel perfect as possible as I could, but its quite hard when you wokr on jpgs :D
I can't manage to change color of icons on hover/focus, I've used <img> tag. Can someone sent me a quick tip how to do this?
Any opinion is appreciated! Enjoy your day.
Awesome job! The animations look good, especially the cart!
So you aren't able to change the color of the tags on hover since the icons are svgs. What you're looking for is the fill or stroke attribute. Problem is, you can't access this since the picture was added using an img tag.
What you'll want to do is put the SVG markup for the image on the page. Then in your css access the path or SVG tags like so:
svg {
fill: white;
}
Or if the color is nested in a path tag:
svg path {
fill: white;
}
It could also be the stroke attribute. This is what I've used in the past. Don't know if this is standard practice. Either way, I hope it helps!
Hi, this is my first non-tutorial led project after a long period of not building anything at all, so I'm easing myself back in. I was a bit unsure of my positioning. I had a really hard time positioning my footer. It was showing up at the top of the screen, I was finally able to put it beneath the card by placing the footer inside the <main> and setting it to absolute position. Didn't seem like the best solution.
I also was unsure if there was a better way to position my qr code image.
I'm open to any suggestions at all and appreciate any feedback.
Thanks in advance for taking the time to have a look.
Hi Laurel, great job on the card! The styling looks spot on.
So to answer your question on positioning, I see that you used position: absolute; on your main tag to get the card in the middle. You can use that and transform, but what i think would help you out is to have your main tag cover the page, then use flex to position your content to the middle.
For you main tag:
main {
display: flex;
width: 100%;
height: 100vh;
position: relative;
align-items: center;
justify-content: center;
}
You would have to move the card styling of your main tag to your .card class:
.card {
display: flex;
width: 36rem;
flex-direction: column;
align-items: center;
background-color: white;
border-radius: 2.2rem;
}
And finally since your main tag is now covering the page and we've set the position of the main tag to relative, you can use absolute positioning on the footer to set the position much easier:
.attribution {
font-size: 11px;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
You worked with what you had to complete it and it's to spec so great job! Hope to see more from you.
any suggestion is welcome, in fact I don't know how to make the label buttons stay with the color change when I click, any help would be the best thing
Nice, I like the styling of the background! Personally, I would add some padding around the card to give everything a little more space to breathe.
So normally you'd want to use the :focus on the label tag to show which button was pressed last. However, the label tag is not focusable. The only thing I could suggest is adding a div around your input and adding focus to that rather than the label.
Would Love to hear any feedback on how I can better use Flexbox. This is my first real project using it and Sass. Also couldn't quite figure out why my font wasn't as bold as the design or the colored underline under the "Learn More" parts. It's not perfect but between working 50+ hours and a family at home I still call this a win!
That's awesome, I would say pretty good for your first project using flex! So in my experience, flex works really well at positioning things within a component (like a card or a navbar), but it's harder to get the elements how you want them for page layouts like this. What I think might help you out is to use grid. Grid makes these sectional layouts much easier and you can use it to clearly set columns and rows for content (then you can style the content within using flex). Here's a helpful video from fireship that I found useful: https://www.youtube.com/watch?v=uuOXPWCh-6o
I had a lot of issues with getting the fonts right too. I ended up using font-weight: 900 for the "Barlow" font. From what i've read, there's some inconsistency between browsers and what font weights are available, so the browser will just grab the closest matching one. Tested on Brave, Firefox, Chrome, and Opera. It drove me crazy!
For the colored underline under the "Learn More" parts, what i did for mine was wrap the anchor tag in a div called 'wrapper', then placed one more div right after the anchor tag. After that, I used position: relative; for the wrapper and position: absolute; on the div after the a tag. From there, I just set the background-color and width and height and used top + left to position it under LEARN MORE. This sets it so that it always positions itself relative to the parent tag (the wrapper). Also Z-index to make sure that the words showed up up front.
But congrats on finishing the project! I look forward to seeing the next one
I didn't really know where the JavaScript was needed, I just started learning JavaScript and I don't really know how to use it on the page. But I did an onclick function with the div containing number 4 to style it when clicked upon .
That's good! I would say you're pretty close.
So three things that I think would help you, you'll probably want to grab all the elements instead of one by one using querySelectorAll(). You already have them in the class .abut, so this should work for getting a list (array). document.querySelectorAll('.abut') This link should help you out if it's confusing: https://www.w3schools.com/jsref/met_document_queryselectorall.asp
Also, I see that onClick you are adding this code: document.getElementById('myClick').style.backgroundColor = "#959eac" document.getElementById('myClick').style.color = "white"
Instead of tapping into the style and adding the css that way, what you could do is put both of those styles into their own class, let's call it the .clicked class. then you toggle the class using classList.toggle('clicked'). Some more reading that would help you out: https://www.w3schools.com/howto/howto_js_toggle_class.asp
Last thing is using the innerHTML property. when you select an element, you'll need a way to get the text contained inside of it. You can also use this to set the text in an element. for example: document.getElementById('myClick').innerHTML would return '4' https://www.w3schools.com/jsref/prop_html_innerhtml.asp
I wish you luck! Hope to see the completed project soon!
