Skip to content
OverviewSolutions
12
Comments
9

Gregg Christofferson

@gchristoffersonWindsor California295 points

Web Developer & UI/UX Designer.

I’m currently learning...

UI/UX Design, HTML, CSS, and JavaScript.

Latest solutions

View more solutions

Latest comments

  • Gregg Christofferson•295
    @gchristofferson

    Hi @KurtGonzales!

    One way to do it is with absolute positioning. You need to move the .community class div inside your footer, then set position: relative on the footer. Next, edit your .community class with these rules:

    .community {
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    top: -140px;
    background-color: #fff;
    color: black;
    text-align: center;
    width: 50%;
    /* margin: 100px; */
    /* margin-top: 90px; */
    /* margin-bottom: 10px; */
    /* margin-left: 300px; */
    border-radius: 10px;
    box-shadow: 0 5px 10px 10px rgba(0, 0, 0, 0.1),
    0 3px 6px 0 rgba(0, 0, 0, 0.05);
}

    This will get it in the ballpark but you'll have to probably make a few adjustments to your margins on the section above the footer and the top value of .community. Let me know if that helps!

    Marked as helpful
  • Gregg Christofferson•295
    @gchristofferson

    Hey @Shannerella 🙋‍♂️,

    Great job, very well done!

    Here's a suggestion to get the hue right on the picture.

    • on .right-picture change the background color to hsl(277, 60%, 61%);
    • on your image change the opacity to 0.75 and add mix-blend-mode: multiply.

    That should get your image looking closer to the design. I hope that helps!

  • Gregg Christofferson•295
    @gchristofferson

    Hey @Theguydev ✋

    Your scroll bar is because of this media query:

    @media only screen and (min-width: 800px)
body {
    min-width: 100%;
}

    Just remove that and your scroll bar will disappear.

    To make the card on the far right take the length of the whole container, you need to add min-height: 100% to .Testimonial-5.

    I hope that helps! Keep up the great effort!!

    Marked as helpful
  • Gregg Christofferson•295
    @gchristofferson

    Hey @fraserwat 🙋‍♂️

    Nice job! Practically pixel perfect.

    What I would do to fix your orange filter is remove all the styles associated with image-filter::before. Then on .image-filter I would add the orange background color and the same border radius as your image. Then on your image I would add mix-blend-mode: multiply. You might add some opacity, maybe .75 to lighten the image up a bit too for a better match. Here's an example:

    https://codepen.io/Gregg-Christofferson/pen/qBXapGJ

    Hope that helps!

  • Gregg Christofferson•295
    @gchristofferson

    Hey @guztrillo! ✋

    Excellent job! Looks really good!

    I had a similar approach to the border-top as @markup-mitchell but instead of adding another level to the card markup, I opted for using the ::before pseudo-element. Thanks to @markup-mitchell codepen example, I figured out what was wrong with mine. I needed to add overflow: hidden to the card. Here's my example ->

    Marked as helpful
  • Gregg Christofferson•295
    @gchristofferson

    Hey @KaskaS-O ✋

    Great job, it looks really good!!

    I looked at your code and the reason your testimonial boxes are overflowing the grid-container is because of transform: translateY(10%) on your .opinions:nth-child(2) and transform: translateY(%20) on your .opinions:nth-child(3).

    Instead try selecting .opinions:nth-child(1) and setting `transform: translateY(-20%)'

    Then select .opinions:nth-child(2) and set transform: translateY(-10%). Then adjust your row-gap accordingly. This way you are moving the elements inside the grid and not outside of it. Let me know if that works for you.

    Marked as helpful
View more comments