-
Notifications
You must be signed in to change notification settings - Fork 0
/
visuals.html
74 lines (63 loc) · 3.29 KB
/
visuals.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Feast and Wonder</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div class="skip-to-main">
<a href="#main">Skip to main content</a>
</div>
<nav class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="seoul.html">Seoul</a></li>
<li><a href="paris.html">Paris</a></li>
<li><a href="visuals.html">Visuals</a></li>
<li><a href="prototypes.html">Prototypes</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<nav class="breadcrumbs"> <!--installing breadcrumbs for usability and accessibility purposes.-->
<ul>
<li><a href="index.html">Home</a></li>
<li>Visuals</li>
</ul>
</nav>
</header>
<main id="main">
<section class="grid-second">
<h1 class="city-name">Visual Design Assignment 1</h1>
<p>Submission</p>
<div class="flexbox-container-2"> <!--Creating a div to style the layout in css-->
<div class="image-container-2"> <!--providing width and height for loading space and alt text for accessibility-->
<img src="images/book1.jpg" width="2400" height="1700" alt="Book Cover Mockup, L'elegance du Herisson">
<img src="images/cover1.jpg" width="3037" height="1971" alt="Book Cover layout, L'elegance du Herisson">
<img src="images/book2.jpg" width="2400" height="1700" alt="Book Cover Mockup, Lonely Castle in the Mirror">
<img src="images/cover2.jpg" width="1269" height="810" alt="Book Cover layout, Lonely Castle in the Mirror">
<img src="images/book3.jpg" width="2400" height="1700" alt="Book Cover Mockup, Convenience Store Woman">
<img src="images/cover3.jpg" width="1269" height="810" alt="Book Cover layout, Convenience Store Woman">
</div>
</div>
<div>
<div class="resources">
<p>External resources</p>
<a href="https://graphicburger.com/hardcover-book-mockup/">Book Cover Mockup</a>
<a href="https://www.solosophie.com/wp-content/uploads/2016/04/IMG_20160411_234449-1024x684.jpg.webp">Parisian Facade before image</a>
<a href="https://www.pexels.com/photo/aerial-view-of-a-city-on-a-shore-under-blue-sky-11756748/ ">Lonely Castle in the Mirror background image</a>
</div>
<p>Original sketches</p>
<div class="sketches">
<img src="images/building-sketch.jpg" width="2555" height="3814" alt="Building sketch">
<img src="images/logo1.svg" width="2481" height="3508" alt="Shelves Logo">
<img src="images/magical castle.png" width="2048" height="2048" alt="Castle digital drawing">
<img src="images/store-items.png" width="1668" height="2224" alt="Convenience store products and items digital drawing">
</div>
</div>
</section>
</main>
</body>
</html>