forked from CodeYourFuture/HTML-CSS-Coursework-Week1
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
130 lines (114 loc) · 5.76 KB
/
index.html
File metadata and controls
130 lines (114 loc) · 5.76 KB
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>ART CITY WORLDWIDE!</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="images/favicon-16x16.png" />
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<main>
<header>
<div class="left-header">
<img src="images/pencils-5371454_1280.png" alt="logo picture of pencils placed in a heart shape">
</div>
<div class="right-header">
<h1>Art City</h1>
<p>Worldwide!</p>
</div>
</header>
<section class="navigation">
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#news">News</a></li>
<li><a href="#info">Information</a></li>
</ul>
</nav>
</section>
<section class="hero-image">
<div class="hero-text">
<h2>The Blog of 2021</h2>
<p>The best read of the year!</p>
<button>Contact</button>
</div>
</section>
<section>
<article id="about">
<h2 class="page-heading-style">About</h2>
<div class="two-box-text">
<div class="left-text-side">
<p class="page-text-style">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci incidunt magnam dolore
corrupti debitis temporibus! Consectetur, voluptatem. Consequuntur doloremque inventore expedita at vero ad odit
magni, recusandae omnis libero. Aspernatur. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p><br>
</div>
<div class="right-text-side">
<p class="page-text-style">Expedita lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci incidunt magnam dolore
corrupti debitis temporibus! Consectetur, voluptatem. Consequuntur doloremque inventore expedita at vero ad odit
magni, recusandae omnis libero. Aspernatur.
</p>
</div>
</div>
<br>
<blockquote>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. "Hoping I'm getting this right".</p>
<br>
<cite>A newbie developer</cite>
</blockquote>
<br>
<p class="page-text-style">Lorem, ipsum dolor sit amet consectetur adipisicing elit. From around the world, Have a look at <a href="http://globalstreetart.com/" target="_blank" class="website-link">Global Street Art</a> for different artist styles and techniques </p>
</article>
<article id="news">
<h2 class="page-heading-style">News</h2>
<p class="page-text-style">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt natus eos voluptatibus deleniti odio molestiae illum soluta suscipit quia, sed mollitia optio expedita quam obcaecati quod ea, officia ratione. Mollitia!
</p>
<br>
<p class="page-text-style">
We revisit a few of the most celebrated pieces from the festival on this episode of Colour My City.
</p>
<br>
<div class="video-link">
<iframe width="560" height="315" src="https://www.youtube.com/embed/C8vSOQ32m9c" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</article>
<article id="info">
<h2 class="page-heading-style">Information</h2>
<p class="page-text-style">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem ab nemo ducimus deserunt distinctio aut recusandae assumenda quibusdam? Ad, aspernatur ratione nam nihil quaerat expedita laudantium libero dolores quisquam. Eveniet.</p>
<p class="page-text-style">
To learn more about other street artist please visit <a href="https://mymodernmet.com/10-street-artists-you-should/" target="_blank" class="website-link">My Modern Met</a>
</p>
<h3 class="page-smaller-heading-style">How to get involved</h3>
<form action="" class="form-label">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</form>
<div class="form-btn">
<button type="submit">Submit</button>
</div>
</article>
</section>
<footer>
<p class="page-text-style">Feel free to join our social media pages</p>
<ul class="social-media">
<li><a href="https://www.facebook.com" target="_blank"><img src="images/iconfinder_1_Facebook2_colored_svg_5296500.svg" alt="Facebook icon"></a></li>
<li><a href="https://www.instagram.com/" target="_blank"><img src="images/iconfinder_Instagram_1298747.svg" alt="Instagram icon"></a></li>
<li><a href="https://www.youtube.com/" target="_blank"><img src="images/iconfinder_1_Youtube_colored_svg_5296521.svg" alt="Youtube Icon"></a></li>
</ul>
</footer>
</main>
</body>
</html>