“Media Queries and Responsive Design” Assessment

[943623021 (JinxKing)]

I just finished the responsive layout assignment. Is there a standard version case for reference, I can modify the shortcomings

My code is below

Responsive Web Design Task: Task

<style>
  * {
    box-sizing: border-box;
  }

  html {
    font: 1.2em/1.4 Arial, Helvetica, sans-serif;
  }

  body {
    padding: 0 0 1em;
  }

  header {
    background-color: #333;
    color: #fff;
    border: 5px solid #000;
  }

  header ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  header a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 0.5em 1em;
    border-top: 1px solid #999;
  }

  header .title {
    font-size: 150%;
    font-style: italic;
    font-weight: bold;
    padding: 1em;
  }

  main {
    padding: 0 1em;
  }

  .cards {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .cards li {
    border: 5px solid #000;
    margin-bottom: 1em;
  }

  .cards h2 {
    background-color: #333;
    color: #fff;
    margin: 0;
    padding: 0.5em 1em;
  }

  .cards .inner {
    padding: 0.5em 1em;
  }

  .sidebar {
    background-color: #333;
    border: 5px solid #000;
    padding: 0.5em 1em;
    color: #fff;
  }
  @media screen and (min-width:500px){
    nav a{
    border:none;
  }
  nav li:nth-child(1){
    position:absolute;
    top:50px;
    right:220px;
  }
  nav li:nth-child(2){
    position:absolute;
    top:50px;
    right:120px;
  }
  nav li:nth-child(3){
    position:absolute;
    top:50px;
    right:20px;
  }
  main{
    display:flex;
  }	
  article{
    flex:4;
  }
  aside{
  flex:1;
  margin:10px 5px 0px 10px;
  }
  .cards{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  }
  }
  }
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">

My Website

• Link 1
• Link 2
• Link 3

</header>

<main>
  <article>
    <h1>This is the main heading</h1>
    <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh 

onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot 

courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame

tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    <ul class="cards">
      <li>
        <h2>Card One</h2>
        <div class="inner">
          <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea 

lettuce kohlrabi amaranth water spinach avocado.

Card Two

Daikon napa cabbage asparagus winter purslane kale. Celery potato

scallion desert raisin horseradish spinach carrot soko.

Card Three

Lotus root water spinach fennel kombu maize bamboo shoot green

bean swiss chard seakale pumpkin onion chickpea gram corn pea.

Card Four

Lotus root water spinach fennel kombu maize bamboo shoot green

bean swiss chard seakale pumpkin onion chickpea gram corn pea.

Card Five

Nori grape silver beet broccoli kombu beet greens fava bean potato

quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens

parsnip.

    </ul>
  </article>
  <aside class="sidebar">
    <p>Have you discovered all of the other excellent content on this website?

  </aside>
</main>