Skip to content
OverviewSolutions
7
Comments
7

Artur

@arturpawlowski5145 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Artur•145
    @arturpawlowski5

    Hi Joseph,

    Your Design look really nice. I looked in your Code and I have some ideas you can make it better.

    1. Based on Style Guide size for the Desktop should be 1440px. I see in your Code .main that you used 1300px.

    2. .main can be flexbox with flex-direction: column. This way your <div class="main__top"> and <div class="main__bottom"> can be inside this flexbox.

    3. .card you use margin: 4.3rem 0; then margin: 2rem 2rem; then margin: 0 0 1rem 0;. This is little not consistent. Try to make right/left margin for each .card and extra top or bottom margin to move them. e.g. 01-margin: 0px 20px 0px;, 02-margin: 20px 20px 0px;, 03-margin: 40px 20px 0px;.

    4. On mobile this part is not centered

    <div class="asides">
          <aside class="asides__aside"><span class="asides__aside-stars"></span>Rated 5 Stars in Reviews</aside>
          <aside class="asides__aside"><span class="asides__aside-stars"></span>Rated 5 Stars in Report Guru</aside>
          <aside class="asides__aside"><span class="asides__aside-stars"></span>Rated 5 Stars in BestTech</aside>
        </div>

    Try to work with that to make Stars and Text centered on mobile.

    I hope this will help you a little with your Design.

    Happy Coding :-B

  • Artur•145
    @arturpawlowski5

    Hi Raquel,

    Really nice work. I just made this Challenge so I have some suggestions.

    1. Try to put Rating Descriptions in extra DIV

    <div class="rating__description"><p>Rated 5 Stars in Reviews</p></div>

    This way you will have more control over this Rating when you switch to Mobile. In mobile Description should be under Stars.

    1. Try to put Footer inside .Container.
    <section class="title">
<section class="reviews">
<section class="footer">

    Try too add Flexbox - with column direction to .Container after that.

    .container {
	flex-grow: 1;
	width: 88%;
        display: flex;
        flex-direction: column;
       align-items: center;
       justify-content: center;
}

    This way you will have all 3 main Sections in .Container and you can manage better how hight is each section.

    I think after that you can try to Delete this from .Body

            display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

    Right now I see your Desing on Big Screen but it is small and more to the top of Viewport.

    Try to work how your Design works on Different Sizes of Screens.

    Hope this help little with your project.

  • Artur•145
    @arturpawlowski5

    Hi Nikita,

    I just made this Challenge so I have some ideas for you.

    First

    Think about using Flexbox for all your design. This way you have much more control over how each DIV will be shown on Desktop and Mobile. Right now all designs look ok on the Desktop but when you change to Mobile it not working.

    I'm sure this will take some time to understand how Flexbox works but it is standard now to use it in Design to make it more Responsive.

    Try here to know about Flexbox:

    1. A Complete Guide to Flexbox
    2. w3school
    3. MDN

    This place helps me a lot with Flexbox :).

    Some ideas for your Code

    Background IMGs

    You use now 2 Background IMGs but you do not show where they should show.

    body {
  font-size: 12px;
  font-family: 'Spartan', sans-serif;
  background-image: url("images/bg-pattern-top-mobile.svg"), url("images/bg-pattern-bottom-mobile.svg");
  background-repeat: no-repeat;
}

    Try something like this to show position of this IMGs:

    #example1 {
   background-image: url(../images/bg-pattern-top-desktop.svg), url(../images/bg-pattern-bottom-desktop.svg);
  background-position: left top, right bottom;
  background-repeat: no-repeat, no-repeat;
}

    More here: w3school

    Look too on your IMG files - right now you use files with Mobile in the name. You should use with Desktop in name

    Your problem with text

    You use this

    .heading {
  color: hsl(300, 43%, 22%);
  text-align: center;
  font-weight: 700;
}

    If you want this text to be bigger try to add some font size e.g.

    font-size: 18px;

    Font weight you use is responsible for how "bold is text" not how big is it :)

    ** Body **

    Right now it looks like this

    body {
  font-size: 12px;
  font-family: 'Spartan', sans-serif;
  background-image: url("images/bg-pattern-top-mobile.svg"), url("images/bg-pattern-bottom-mobile.svg");
  background-repeat: no-repeat;
}

    Try to add some extra line

     margin: 0; 
 padding: 0;
 height: 100vh;

    Margin and padding will "Delete" them from the Browser file. So your www can stretch 100% in Viewport.

    Height: 100vh will make your Project 100% Height in Viewport.

    I hope this will help little with your project.

  • Artur•145
    @arturpawlowski5

    Hi,

    I'm starting too with Dev Web but I already made this Challenge so hope can help a little bit.

    To make it super simple you can try like this

    With your background image, you can try to add 2 URLs with IMG to your one DIV or another container you use. Try to look at this code:

    #example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: left top, right bottom;
  background-repeat: no-repeat, repeat;
}

    More here: w3schools

    With this code, you will have the same time 2 IMGs in the Background.

    Other way

    I made in my Challenge similar to this what you made but I used vh and vw units, not px. This way size of Circles changes when you Change the size of the Viewport.

    This is from my Challenge

    .circles .circle_01,
.circles .circle_02 {
  position: absolute;
  -webkit-animation: 2s circles forwards;
          animation: 2s circles forwards;
  opacity: 0;
  overflow: hidden;
}

.circle_01 {
  top: -50vh;
  left: -20vw;
  -webkit-transform: translate(-30vh, -10vw);
          transform: translate(-30vh, -10vw);
  width: 50vw;
}

.circle_02 {
  bottom: -50vh;
  right: -20vw;
  -webkit-transform: translate(30vh, 10vw);
          transform: translate(30vh, 10vw);
  width: 70vw;
}

    Hope this helps.

  • Artur•145
    @arturpawlowski5

    Hi,

    I'm starting too with Dev Web but I already made this Challenge so hope can help a little bit.

    With your background image, you can try to add 2 URLs with IMG to your one DIV or another container you use. Try to look at this code:

    #example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: left top, right bottom;
  background-repeat: no-repeat, repeat;
}

    More here: w3schools

    With this code, you will have the same time 2 IMGs in the Background.

    I see in your HTML that you used that but try to add too the position. Now it is:

    background-image: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg");
background-repeat: no-repeat, no-repeat;

    Hope this helps.

  • Artur•145
    @arturpawlowski5

    Hi (Cześć),

    I'm starting too with Dev Web but I already made this Challenge so hope can help a little bit.

    First please add a link to your Code - right now I see Error 404 (Page Not Found) when I click to see it.

    With your background image, you can try to add 2 URLs with IMG to your one DIV or another container you use. Try to look at this code:

    #example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

    More here: w3schools

    With this code, you will have the same time 2 IMGs in the Background.

    Hope this helps.

    Udanego kodowania ;)

View more comments