-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathweb-design.html
164 lines (149 loc) · 5.79 KB
/
web-design.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
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/media-tablet.css" />
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500&display=swap" rel="stylesheet">
<title>Frontend Mentor | Designo Agency Website Challenge</title>
</head>
<body>
<nav id="navBar">
<a href="index.html"><img src="assets/shared/desktop/logo-dark.png" /></a>
<ul id="navLinks" class="links">
<li><a class="caps" href="about.html">Our Company</a></li>
<li><a class="caps" href="locations.html">Locations</a></li>
<li><a class="caps" href="contact.html">Contact</a></li>
</ul>
<img src="assets/shared/mobile/icon-hamburger.svg" id="hamburger">
</nav>
<div class="container">
<div class="pHeaderDiv bgP mgb-100">
<img src="assets/web-design/desktop/bg-pattern-intro-web.svg" />
<h2>Web design</h2>
<p>We build websites that serve as powerful marketing tools and bring memorable brand experiences.</p>
</div>
<div class="cards mgb-100">
<div class="card">
<div class="cardPad">
<img src="assets/web-design/desktop/image-express.jpg">
<div class="cardsText bgLP">
<h2 class="fcPeach">EXPRESS</h2>
<p>A multi-carrier shipping website for ecommerce businesses</p>
</div>
</div>
</div>
<div class="card">
<div class="cardPad">
<img src="assets/web-design/desktop/image-transfer.jpg">
<div class="cardsText bgLP">
<h2 class="fcPeach">TRANSFER</h2>
<p>Site for low-cost money transfers and sending money within seconds</p>
</div>
</div>
</div>
<div class="card">
<div class="cardPad">
<img src="assets/web-design/desktop/image-photon.jpg">
<div class="cardsText bgLP">
<h2 class="fcPeach">PHOTON</h2>
<p>A state-of-the-art music player with high-resolution audio and DSP effects</p>
</div>
</div>
</div>
<div class="card">
<div class="cardPad">
<img src="assets/web-design/desktop/image-builder.jpg">
<div class="cardsText bgLP">
<h2 class="fcPeach">BUILDER</h2>
<p>Connects users with local contractors based on their location</p>
</div>
</div>
</div>
<div class="card">
<div class="cardPad">
<img src="assets/web-design/desktop/image-blogr.jpg">
<div class="cardsText bgLP">
<h2 class="fcPeach">BLOGR</h2>
<p>Blogr is a platform for creating an online blog or publication</p>
</div>
</div>
</div>
<div class="card">
<div class="cardPad">
<img src="assets/web-design/desktop/image-camp.jpg">
<div class="cardsText bgLP">
<h2 class="fcPeach">CAMP</h2>
<p>Get expert training in coding, data, design, and digital marketing</p>
</div>
</div>
</div>
</div>
<div id="home__imgLinks" class="mgb-300">
<a href="app-design.html">
<div class="image-links__container two__image-links__container" id="image-links__appDesign">
<div class="image-links__text vertCenter__flex">
<h1>APP DESIGN</h1>
<h3>VIEW PROJECTS
<img class="inlineTextArrow" src="assets/shared/desktop/icon-right-arrow.svg" />
</h3>
</div>
</div>
</a>
<a href="graphic-design.html">
<div class="image-links__container two__image-links__container" id="image-links__graphicDesign">
<div class="image-links__text vertCenter__flex">
<h1>GRAPHIC DESIGN</h1>
<h3>VIEW PROJECTS
<img class="inlineTextArrow" src="assets/shared/desktop/icon-right-arrow.svg" />
</h3>
</div>
</div>
</a>
</div>
</div>
<footer class="bgB">
<div class="callToAction container bgP">
<img src="assets/shared/desktop/bg-pattern-call-to-action.svg" />
<div id="callToActionText" class="vertCenter__flex">
<h2>Let’s talk about your project</h2>
<p>Ready to take it to the next level? Contact us today and find out how our expertise can help your business
grow.</p>
<a href="contact.html"><button id="ctaButton" class="buttonDark">GET IN TOUCH</button></a>
</div>
</div>
<div id="navContFooter" class="container">
<img src="assets/shared/desktop/logo-light.png">
<ul>
<li><a class="fcWhite" href="about.html">OUR COMPANY</a></li>
<li><a class="fcWhite" href="locations.html">LOCATIONS</a></li>
<li><a class="fcWhite" href="contact.html">CONTACT</a></li>
</ul>
</div>
<div class="container">
<div class="footerContactText">
<p>Designo Central Office</p>
<p>3886 Wellington Street</p>
<p>Toronto, Ontario M9C 3J5</p>
</div>
<div class="footerContactText">
<p>Contact Us (Central Office)</p>
<p>P : +1 253-863-8967</p>
<p>M : [email protected]</p>
</div>
</div>
<div id="iconContainer" class="container">
<img src="assets/shared/desktop/icon-facebook.svg">
<img src="assets/shared/desktop/icon-youtube.svg">
<img src="assets/shared/desktop/icon-twitter.svg">
<img src="assets/shared/desktop/icon-pinterest.svg">
<img src="assets/shared/desktop/icon-instagram.svg">
</div>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>