<meta charset="utf-8"/>
<title>Responsive Web Design Task: Task</title>
<link rel="stylesheet" href="../styles.css"/>
<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:30em){
header {
display: flex;
justify-content: space-around;
}
header a {
border: none;
}
.title {
align-self: flex-start;
}
nav {
align-self: center;
}
nav ul {
display: flex;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 0 auto;
padding: 10px;
}
article {
flex: 3;
}
aside {
margin: 10px;
padding: 10px;
flex: 1;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(100px, auto);
gap: 20px;
}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<header>
<div class="title">My Website</div>
<nav>
<ul>
<li>
<a href="">Link 1</a>
</li>
<li>
<a href="">Link 2</a>
</li>
<li>
<a href="">Link 3</a>
</li>
</ul>
</nav>
</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>
<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.</p>
<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.</p>
</div>
</li>
<li>
<h2>Card Two</h2>
<div class="inner">
<p>Daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
</div>
</li>
<li>
<h2>Card Three</h2>
<div class="inner">
<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p>
</div>
</li>
<li>
<h2>Card Four</h2>
<div class="inner">
<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p>
</div>
</li>
<li>
<h2>Card Five</h2>
<div class="inner">
<p>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.</p>
</div>
</li>
</ul>
</article>
<aside class="sidebar">
<p>Have you discovered all of the other excellent content on this website?</p>
</aside>
</main>
