Skip to content
OverviewSolutions
16
Comments
8
Julien Kombora
@JulienK94

All comments

  • Julien Kombora•230
    @JulienK94

    first hi seeing your solution the first thing is you have to center the main container horizontally and vertically. To do it you set display flex to the body : ex: body { height: 100vh; set the height of the body to 100% of the viewport meaning 100% of the screen which helps aligns at the center vertically display: flex; justify-content: center; here align horizontally align-items: center; here vertically } SEcondly you need to align the element to the left, you have 2 possibilities first: text-align: left; second: with Flexbox using justify-content: flex-start; here i assume it's the basics flexbox meaning row so on mobile side you'll need to change also certain things . to help i have also a video you can watch: https://www.youtube.com/watch?v=3YW65K6LcIA&t=742s

    Marked as helpful
  • Julien Kombora•230
    @JulienK94

    hi your site is good on desktop side need also a mobile side so it can be responsive. for your background image you can use background-size: cover; so it takes all the viewport. the element containing the content must have a max-width depending on screen size. for your social icon u forget to give them a color depending if hover or not

    Marked as helpful
  • Julien Kombora•230
    @JulienK94

    I personally submit he same project this morning i had the same problem but i pass it not great but cool. you must give the body a background-color of cyan; and a position: relative; after that you must have a main who is not a container just here to align the container of content with display flex, justify-content and align-items; main { position: absolute; background: url(link of top bg-pattern) no-repeat left 50% top 50%, url(link of bottom bg-pattern) no-repeat right 50% bottom 50%; } here values use near top left right and bottom are just examples just the exact values to well place this bg-pattern and you're not forced to use%. i wish that it will help you and happy coding.

  • Julien Kombora•230
    @JulienK94

    i don't speak english i have seen your site it's pretty good. first when we pass on mobile preview the border-radius side of the element must change :

    • border-radius can be used to define different radius for each specific side of the same element border-radius: 10px 0px 0px 10px; here the first value is for top-left, the 2nd top-right, the third for bottom-right and the last for bottom left
    Marked as helpful
  • Julien Kombora•230
    @JulienK94

    your doc has not been correctly uploaded here so i recommend you this youtube video so you can do it the next time https://www.youtube.com/watch?v=RxJP-uJ_QmQ&t=3s

    Marked as helpful
  • Julien Kombora•230
    @JulienK94

    your project is good perhaps just add padding on the text part (right side )

    Marked as helpful
  • Julien Kombora•230
    @JulienK94

    hi i recommend you this video to introduce you how to well drop your project on frontend mentor challenge https://www.youtube.com/watch?v=RxJP-uJ_QmQ

  • Julien Kombora•230
    @JulienK94

    i don't want to give you the answer but here the element you're working on is central in a body. so to center it you need to set the height of the body (height: 100vh; /vh meaning here viewport height) after that you set display:flex on the element containing pic and text and try to align it. just do some research. i don't speak english very well so be cool. wish you the best