Skip to content
OverviewSolutions
16
Comments
8
Julien Kombora
@JulienK94

All comments

  • Julien Kombora•230
    @JulienK94Posted about 2 years ago

    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
    0
  • Julien Kombora•230
    @JulienK94Posted about 2 years ago

    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
    0
  • Julien Kombora•230
    @JulienK94Posted over 2 years ago

    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.

    0
  • Julien Kombora•230
    @JulienK94Posted over 2 years ago

    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
    0
  • Julien Kombora•230
    @JulienK94Posted over 2 years ago

    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
    0
  • Julien Kombora•230
    @JulienK94Posted over 2 years ago

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

    Marked as helpful
    0
  • Julien Kombora•230
    @JulienK94Posted over 2 years ago

    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

    0
  • Julien Kombora•230
    @JulienK94Posted over 2 years ago

    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

    0