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">
</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>