-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
73 lines (71 loc) · 2.85 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cantarell:ital,wght@0,400;0,700;1,400;1,700&family=Oxygen:wght@300;400;700&family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
<title>CSS Grid Header</title>
</head>
<body>
<main id="main-content">
<!-- Header Code: Start -->
<header class="header-container">
<div class="grid-container">
<div class="i1"><h1 class="brand">Innovative Designs, Printed to Perfection</h1></div>
<div class="i2"><h2 class="tagline">Transforming Digitial Art into Tangible Beauty</h2></div>
<div class="i3"></div>
<div class="i4"></div>
<div class="i5"></div>
<div class="i6"><img src="./artwork/design_events.png"></div>
<div class="i7"></div>
<div class="i8"></div>
<div class="i9"></div>
</div>
</header>
<!-- Header Code: End -->
<section></section>
<!-- Footer Code: Start -->
<footer class="footer">
<article class="footer-container">
<section class="service">
<h3>Our Services</h3>
<ul class="service-group">
<li>Graphic Design</li>
<li>Web Design</li>
<li>Print Design</li>
<li>Logo Design</li>
<li>Branding</li>
<li>Marketing</li>
</ul>
</section>
<section class="product">
<h3>Our Products</h3>
<ul class="product-group">
<li>Business Cards</li>
<li>Brochures</li>
<li>Postcards</li>
<li>Posters</li>
<li>Stickers</li>
<li>Signs</li>
</ul>
</section>
<section class="company">
<h3>Our Company</h3>
<ul class="company-group">
<li>About Us</li>
<li>Our Team</li>
<li>Our Work</li>
<li>Our Blog</li>
<li>Our Services</li>
<li>Our Products</li>
</ul>
</section>
</article>
</footer>
<!-- Footer Code: End -->
</main>
</body>
</html>