Skip to content
OverviewSolutions
7
Comments
7
Artur
@arturpawlowski5

All comments

  • Artur•145
    @arturpawlowski5Posted over 3 years ago

    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

    0
  • Artur•145
    @arturpawlowski5Posted over 3 years ago

    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.

    0
  • Nikita•120
    @nyakitaSubmitted over 3 years ago

    That was my third project, I try to do my best in order to follow the design pattern and fill it completelly, I also used only CSS and add some design responsiveness, that wasn't so tough, but I was stuck with fonts, because I couldn't add some weight to my heading and I couldn't make text wider like in the design image. To sum up, I would say it's an awesome practise for beginners. Thank you for this opportunity.

    I try to use just CSS to add some styles

    1
    Artur•145
    @arturpawlowski5Posted over 3 years ago

    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.

    1
  • Matheus Ferreira•35
    @iammatheusSubmitted over 3 years ago

    Hi!

    I speak directly from Brazil and I'm new here. I decided to start this challenge to inaugurate the platform.

    I would like a solution to correctly position the background images. The best result I got was this, but I know it can be improved.

    If there is anything I can improve, I ask you to help me.

    Obs.: I am using google translator to translate some words, I apologize if I made a typo.

    Thanks! :)

    Profile Card Component | Pure HTML & CSS

    2
    Artur•145
    @arturpawlowski5Posted over 3 years ago

    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.

    2
  • Jade•105
    @jadetrueSubmitted over 3 years ago

    I would love some feedback on the background as I found this the most difficult and it's still not exactly how I would want it.

    Profile Card HTML & CSS

    2
    Artur•145
    @arturpawlowski5Posted over 3 years ago

    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.

    0
  • Paweł Tuczyński•10
    @LemaulSubmitted over 3 years ago

    Couldn't figure out how to make the background image look just like in the challenge. I would love some feedback on my css code, especially on the grid system, I used it for the first time and I had no idea what I was doing. Actually, any feedback would be appreciated because I am just starting with web dev in general.

    Completed using css grid

    1
    Artur•145
    @arturpawlowski5Posted over 3 years ago

    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 ;)

    1
  • Anna Lapina•125
    @ALapinaSubmitted over 3 years ago

    Project was built with maximum accessibility in mind. Go and try clicking and tabbing through buttons! You even can try voice over!

    Also, check out how I use pseudo-class :focus-visible to remove focus outline on mouse click on button, but add and make it visible on tabbing through buttons.

    I build two variations - first with simple Vanilla JS and second with React. For a small component like this React is probably overkill, but as a complete beginner for me it was challenging and I learn a lot about React with hooks!

    Repository URL for React solution: https://github.com/ALapina/FAQ-Accordion-Card-React

    Live Site URL for React solution: https://alapina.github.io/FAQ-Accordion-Card-React

    FAQ-Accordion-Card JavaScript and solution with React

    2
    Artur•145
    @arturpawlowski5Posted over 3 years ago

    Hi,

    First - thank you very much for such a good example of this Challenge.

    I based my work on your solution and I learn a lot by doing this. I hope this not break any rules - I'm new here and in Web Dev. Let me know if I break any rules.

    I have one question now that I couldn't figure out.

    _animation.scss

    .faq__desc.show-description { height: 2rem; margin-bottom: 15px; }

    index.html

    ` <dd> <p id="faq1_desc" data-qa="faq__desc" class="faq__desc"> You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan. </p>

    </dd> `

    This code in _animation.scss and index.html is responsible for line height when the Question is open. Because of that Question can have just 2 lines to not disappear on the bottom.

    How to manage this code better so there can be even 10 lines Question and this will not disappear on the bottom?

    0