Skip to content
Permalink
main
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-4-Responsive-Design/index.html

Go to file
 
 
Cannot retrieve contributors at this time
119 lines (109 sloc) 5.91 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: specifies a list of image files and their respective widths
sizes: specifies a set of media conditions and corresponding image sizes helps the browser decide what to download
src: specifies the URL of the image to be displayed
alt: provides alternative text for the image and is displayed in place of the image if can't be loaded good for screen reader.
class: assign the class for styling
-->
<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>