Artur

Pro
@arturpawlowski5
125Points

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

  • Desktop design screenshot for the Article preview component coding challenge
    • HTML
    • CSS
    • JS

    βœ” Article Preview Component 5️⃣th Challenge - HTML SCSS Javascript

    P
    Artur125Submitted

    Hi All Coders.

    It's my 5th Challenge here. I tried to make this Article Component as much close look to the Figma file I download. I think it is very close.

    I had some problems with Javascript to open Socials. If you have any better solution let me know.

    Happy coding to everyone πŸ±β€πŸπŸŽ‰

    View Solution
  • Desktop design screenshot for the Pod request access landing page coding challenge
    • HTML
    • CSS
    • JS

    Pod Request Access Landing Page HTML SCSS Javascript

    P
    Artur125Submitted

    Hi,

    It's my 4th Challenge Here.

    I tried my best with Javascript in this challenge to make Form - email working. Let me know if you have any suggestions for this part?

    I tried to work a lot about making this Design Responsive as much as possible. I struggle with some parts because can't easily use here Flexbox or Grid. Let me know maybe you have some ideas on how to manage this Design with Flexbox or Grid?

    Happy Coding to everyone B-)

    View Solution
  • Desktop design screenshot for the Social proof section coding challenge
    • HTML
    • CSS

    Social Proof Section - SCSS HTML

    P
    Artur125Submitted

    My Third Challenge Here.

    I tried to work with Flex in this challenge. Right now I'm not sure if I used it enough well.

    Maybe someone can look at the source code and let me know how to improve Flex in this Project?

    I tried my best with Flex to be Responsive. So I made an extra @media section to transform for smaller Viewports. I copy there almost all SCSS from other files to make changes to Mobile Phones. But I think this is not exactly how I should manage it.

    Maybe someone has a better idea of how to manage SCSS files and use @media for Responsive?

    View Solution
  • Desktop design screenshot for the FAQ accordion card coding challenge
    • HTML
    • CSS
    • JS

    FAQ-Accordion-Card HTML CSS JavaScript

    P
    Artur125Submitted

    My Second Challenge Here.

    I make the final look a little different from Challenge Files.

    • add a border around Card
    • make different shadows
    • change arrows color
    • add some other little changes

    All the work I based on Anna Lapina FAQ Accordion Card. Learn a lot by doing this.

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

    _animation.scss

    .faq__desc.show-description { height: 4rem; }

    index.html

    `

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

    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 3 lines to not disappear on the bottom.

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

    View Solution
  • Desktop design screenshot for the Profile card component coding challenge
    • HTML
    • CSS

    My Solution to Profile Card Component Challenge HTML SCSS

    P
    Artur125Submitted

    Hi All,

    I am really new to coding and would appreciate any feedback!

    This is my First Challenge Here.

    I try to make this Challenge as close to the original but finally, I change some CSS to: 1. Add borders, 2. Add shadows, 3. Make some small animations.

    Right now I would like to make this project responsive.

    Can you tell me: 1. How to keep background circles in the same position when the viewport is changed to mobile?

    Hope someone will be able to assist or point out the problem!

    Thank you!

    View Solution

Latest Comments

  • Artur has commented on Joseph's "Social Proof Section using HTML and SASS (SCSS)" solution

    0

    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 has commented on Raquel Gruppi's "Social proof section | HTML CSS" solution

    0

    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 has commented on Nikita's "I try to use just CSS to add some styles" solution

    1

    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 has commented on Matheus Ferreira's "Profile Card Component | Pure HTML & CSS" solution

    2

    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 has commented on Jade's "Profile Card HTML & CSS" solution

    0

    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.