Skip to content
OverviewSolutions
12
Comments
6
Thomas
@Tsiolis

All comments

  • Thomas•370
    @TsiolisPosted almost 3 years ago

    Hi Mhien

    Great job on the project! I tried to check your code but it looks like to Github repo has been deleted?

    0
  • Pawel•50
    @urasinskipawelSubmitted almost 3 years ago

    Hello, This is my second challenge. Please leave some words in comments. Every feedback and code review teach me and improve my skills.

    Profile card component challenge hub

    1
    Thomas•370
    @TsiolisPosted almost 3 years ago

    Hi Pawel

    Great job on completing the challenge.

    I noticed when resizing the page, the card becomes quite narrow at around 900px down to 600px. This is because your media query sets the max-width to be 25% when the viewport is more than 600px wide.

    A good way around this would be to set the card width to 90% as you have, then set the max-width to the largest px value width you would like the card to be. This means the card would be the correct size on larger screens, but will also resize correctly for smaller screens.

    Here is the code I would suggest:

    Add a max-width to .card .card { height: 55%; width: 90%; max-width: 360px; background-color: #fff; border-radius: 15px; border-color: transparent; overflow: hidden; }

    Remove .card styling in the media query @media screen and (min-width: 600px) { body { background-position: -300px -600px, 650px 275px; } }

    I hope this helps, If you have any questions just ask.

    Happy coding!

    Thomas

    Marked as helpful
    0
  • Thomas•370
    @TsiolisPosted almost 3 years ago

    Hi Jimmy

    Good job on the challenge!

    You can add a smooth transition by addition a CSS transition to your .main::after styling like this:

    .main::after{ content: ""; position: absolute; top: 0; left: 0; bottom: 240px; right: 0; border-radius: 0 0 30px 30px; background-color: var(--bg-top); z-index: -2; transition: background 1s; }

    Just change the number of seconds you want the transition to last if you want it to be faster or slower.

    Happy coding!

    Thomas

    Marked as helpful
    1
  • Thomas•370
    @TsiolisPosted about 3 years ago

    First you will need to create a Netlify account, you can register at https://www.netlify.com/.

    Then you can deploy your site very quickly, I have attached a video tutorial below. Any problems just let me know!

    https://youtu.be/etZ9HSUoTPU

    Marked as helpful
    0
  • Thomas•370
    @TsiolisPosted about 3 years ago

    Hi Youssef, are you able to host your site on a free platform like Netlify? This would mean you can include the images in your code. I can explain how to do it if you need me to.

    0
  • Thomas•370
    @TsiolisPosted about 3 years ago

    Hi Shahzaib

    Good job on completing the challenge!

    One way to improve your code would be to give each accordion question a class name and add an event listener to show the answer, ill paste a code example to this below.

    HTML

    	<button class="accordion">Section 1</button>
<div class="panel">
	<p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
	<p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
	<p>Lorem ipsum...</p>
</div>

    CSS

    .accordion { background-color: cadetblue; color: black; font-weight: bold; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; }

    .panel { padding: 0 18px; background-color: white; display: none; overflow: hidden; }

    JS

    const acc = document.getElementsByClassName("accordion"); let i;

    for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { /* Toggle between adding and removing the "active" class, to highlight the button that controls the panel */ this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
const panel = this.nextElementSibling;
if (panel.style.display === "block") {
  panel.style.display = "none";
} else {
  panel.style.display = "block";
}

    }); }

    I learned how to do this by reading the tutorial at https://www.w3schools.com/howto/howto_js_accordion.asp (I have updated some of the syntax to ES6).

    I would also recommend reading about the HMTL <detail> element, which provides an accordion-type feature without having to use any Javascript.

    If you have any questions about this I will do my best to answer.

    Happy coding!

    Marked as helpful
    0