Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Lab-04/index.html

Go to file
 
 
Cannot retrieve contributors at this time
105 lines (92 sloc) 5.41 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Web Design Practice</title>
<link href="styles/layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="logo">
My Food Trips
</div>
<nav>
<ul>
<li>
<a href="">Home</a>
</li>
<li>
<a href="">Food Blogs</a>
</li>
<li>
<a href="">About Me</a>
</li>
<li>
<a href="">Recipes</a>
</li>
<li>
<a href="">Work with Me</a>
</li>
</ul>
</nav>
<main class="container">
<article>
<h1>
Coffee and Croissants
</h1>
<!-- TODO 6 (7pts): explain each attribute of the img tag below
Srcset: List of images
Sizes: Determines the dimension for the image and the sizes of them
Src: The source of the image (image path)
Alt: This is alternate text for the image.
Class: This sets the class of the image object.
-->
<img
srcset="images/coffee-small.jpeg 640w"
sizes="(max-width: 700px) 60vw, 640px"
src="images/coffee-small.jpeg"
alt="coffee" class="feature" />
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, explicabo fuga est reprehenderit numquam laborum animi non nesciunt rerum veritatis itaque, nam iusto totam maxime tempora praesentium obcaecati ad cupiditate! Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, explicabo fuga est reprehenderit numquam laborum animi non nesciunt rerum veritatis itaque, nam iusto totam maxime tempora praesentium obcaecati ad cupiditate! Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, explicabo fuga est reprehenderit numquam laborum animi non nesciunt rerum veritatis itaque, nam iusto totam maxime tempora praesentium obcaecati ad cupiditate!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, explicabo fuga est reprehenderit numquam laborum animi non nesciunt rerum veritatis itaque, nam iusto totam maxime tempora praesentium obcaecati ad cupiditate!</p>
<img
srcset="images/croissant-small.jpeg 640w"
sizes="(max-width: 700px) 60vw, 640px"
src="images/coffee-small.jpeg"
alt="coffee" class="feature" />
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach
avocado daikon
napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
carrot soko.
Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion
chickpea gram
corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot
watercress.
Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, explicabo fuga est reprehenderit numquam laborum animi non nesciunt rerum veritatis itaque, nam iusto totam maxime tempora praesentium obcaecati ad cupiditate!Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, explicabo fuga est reprehenderit numquam laborum animi non nesciunt rerum veritatis itaque, nam iusto totam maxime tempora praesentium obcaecati ad cupiditate!Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, explicabo fuga est reprehenderit numquam laborum animi non nesciunt rerum veritatis itaque, nam iusto totam maxime tempora praesentium obcaecati ad cupiditate!Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, explicabo fuga est reprehenderit numquam laborum animi non nesciunt rerum veritatis itaque, nam iusto totam maxime tempora praesentium obcaecati ad cupiditate!Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, explicabo fuga est reprehenderit numquam laborum animi non nesciunt rerum veritatis itaque, nam iusto totam maxime tempora praesentium obcaecati ad cupiditate!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, explicabo fuga est reprehenderit numquam laborum animi non nesciunt rerum veritatis itaque, nam iusto totam maxime tempora praesentium obcaecati ad cupiditate!Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, explicabo fuga est reprehenderit numquam laborum animi non nesciunt rerum veritatis itaque, nam iusto totam maxime tempora praesentium obcaecati ad cupiditate!</p>
</article>
<aside>
<h2>
More articles
</h2>
<ul class="article-list">
<li>
<a href="">Article 1</a>
</li>
<li>
<a href="">Article 1</a>
</li>
<li>
<a href="">Article 1</a>
</li>
<li>
<a href="">Article 1</a>
</li>
<li>
<a href="">Article 1</a>
</li>
</ul>
</aside>
</main>
</body>
</html>