Skip to content
OverviewSolutions
1
Comments
2
tdenis29
@tdenis29

All comments

  • tdenis29•45
    @tdenis29Posted about 3 years ago

    Hey man it looks good but the inverted svg is giving a 400 error when I click on the tabs.

    I just did this for another challenge on this site. I used the <details> and <summary> tags built into html because it's more accessible from what I read, i dont actually know.

    I used an event listener on the summary element container then just inverted the svg and changed the color with combo classes. I had to give unique id to each summary element though.

    summary.addEventListener('click', (e) => { if(e.target.id === "details1"){ document.getElementById('detail1arrow').classList.toggle('flippy'); }

    svg.flippy { transform: rotate(180deg); }

    .flippy path { stroke: #fa5757; }

    0
  • tdenis29•45
    @tdenis29Posted about 3 years ago

    Hey Midnith,

    Im bored so I wrote alot.

    I got some fixes. First of all it does look really good and you're so close! I debugged all this in Chrome Dev Tools it's very useful and I use it all day everyday.

    I like to do mobile first, I write all my base styles then use a single media query to write the rest. Trust me you end up saying flex-direction: row a bunch but its way better, for me anyways.

    @media (min-width: 768px){

    }//Tablet

    @media (min-width: 1086px){

    }//Desktop

    The min width, is the minimum width the viewport needs for those styles to take affect. So I write all the mobile first then, all nested in those queries, I do the desktop and tablet styles

    Ok so for your site I made some changes: I removed display grid and the grid declarations on body. grid-template-areas is better for what you are thinking (i think)because vh is based on the height of the users screen in the browser not the height of the whole page. I also took off the padding declaration on the body.

    Your code is good and I'm jealous, I wish mine looked that good when I started out. I had a clearfix on every element I did for months. Here's what I did to your site.

    body{ height: 100%; }

    .container{ width: 100% margin: 5rem 0 5rem 0; (top,right,bottom,left) }

    .image{ width: 50% //replaced 24vw }

    .main-content{ width: 50% //replaced 24vw }

    removed center center from the background so we couldn't see the circle.

    .main-content h1{ width: 90% //90%of .main-content width! font-size: 2.7rem; }

    .register{ font-size: 1.2rem; }

    footer{ display: flex; justify-content: flex-end; //desktop //center for mobile }

    this was formatted nicely until i posted this

    Marked as helpful
    0