Matthew Pierce
@shake88junt
All solutions
Submitted
I think it looks mostly okay. Had some issues spacing the left side as you can see.
Submitted
Seems close enough to me.
Submitted
Not perfect, but whatever. Tried to do a navbar animation (new to animations). I think it looks alright.
Submitted
Pretty easy challenge for the most part. To position the basic/professional/master plans. I just used
display:grid; grid-template-areas:'left middle right'
I then set each grid to their corresponding area (Ex. left/middle/right)grid-area:left
Then I set the selected plan (middle one) toheight:110%; position:relative; top:-5%;
Submitted
Insure Landing Page using Flex
- HTML
- CSS
- JS
Let me know if any errors/improvements. Still trying to cut down on css lines.
Submitted
I used `document.document.style.setProperty('--background-color', 'red');' to change the colors if you're curious.
Submitted
Coding Bootcamp Testimonials Slider
- HTML
- CSS
- JS
Submitted
Submitted
Submitted
Submitted
Crowdfunding Product Page
- HTML
- CSS
- JS
I had some trouble figuring out the grey background at first, but it was an easy fix after I finally got to solving it. At first glance I thought this website would be very hard to make, but it wasn't too bad. It just made me realize how I should focus more on organizing my code. Next time I will create more reusable classes. Any tips on organization?
Submitted
Blogr Landing Page using Sass
- HTML
- CSS
- JS
Submitted
In the mobile version of the site I used a <img> tag with the desktop image below. I would hide the desktop image in mobile view (and vice-versa). I would set the image `visibility=hidden' and set the background image to the corresponding image. This seemed to be the only way to get scale-able images as the background while keeping the dimensions the same ratio. Any tips appreciated.
Submitted
Intro Component using Flex-box
- HTML
- CSS
- JS
If you have any alternative ways to do the Javascript/input fields interactivity. Please let me know.
Submitted
My css file is really bloated, had to end up doing lots of tinkering around to make it work in the end. Specifically, using fixed heights/margins/padding to absolutely position my "share popups". Furthermore, I had to find a solution for displaying my "share popups". I opted to use inline css
display:"none"
and javascript to change the lnline css todisplay:"flex"
. I had used media queries to hide the mobile "share popup" on desktop (vice-versa). To do this I useddisplay:"none" !important;