-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
141 lines (127 loc) · 6.35 KB
/
about.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
<!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">
<section class="pageHeader__imageSplit vertCenter__flex bgP mgb-100">
<img class="pageHeader__imageSplit-circle" src="assets/about/desktop/bg-pattern-hero-about-desktop.svg" />
<div id="home__main-text">
<h1 class="fcWhite">About us</h1>
<p class="fcWhite">Founded in 2010, we are a creative agency that produces lasting results for our clients.
We’ve partnered with many startups, corporations, and nonprofits alike to craft designs
that make real impact. We’re always looking forward to creating brands, products, and
digital experiences that connect with our clients' audiences.</p>
</div>
<img id="aboutPage__headerImage" class="headerImg__fixright" src="assets/about/desktop/image-about-hero.jpg" />
</section>
<section class="pageHeader__imageSplit vertCenter__flex bgLP paddingLeft">
<img class="pageHeader__imageSplit-circle" src="assets/shared/desktop/bg-pattern-two-circles.svg" />
<img class="headerImg__fixleft" src="assets/about/desktop/image-world-class-talent.jpg" />
<div id="home__main-text">
<h1 class="fcPeach">World-class talent</h1>
<p class="fcBlack">We are a crew of strategists, problem-solvers, and technologists. Every design is
thoughtfully
crafted from concept to launch, ensuring success in its given market. We are constantly updating
our skills in a myriad of platforms.
</p>
<p class="fcBlack">
Our team is multi-disciplinary and we are not merely interested in form — content and meaning
are just as important. We give great importance to craftsmanship, service, and prompt delivery.
Clients have always been impressed with our high-quality outcomes that encapsulates their
brand’s story and mission.</p>
</div>
</section>
<div id="home__illustration-section" class="mgb-100">
<div class="home__illustration-container">
<img src="assets/shared/desktop/illustration-canada.svg" />
<h3 class="fcBlack pdb-20">canada</h3>
<a href="locations.html#canada"><button class="buttonLight">See Location</button></a>
</div>
<div class="home__illustration-container">
<img src="assets/shared/desktop/illustration-australia.svg" />
<h3 class="fcBlack pdb-20">Australia</h3>
<a href="locations.html#australia"><button class="buttonLight">See Location</button></a>
</div>
<div class="home__illustration-container">
<img src="assets/shared/desktop/illustration-united-kingdom.svg" />
<h3 class="fcBlack pdb-20">England</h3>
<a href="locations.html#uk"><button class="buttonLight">See Location</button></a>
</div>
</div>
<section class="pageHeader__imageSplit vertCenter__flex bgLP mgb-300">
<img class="pageHeader__imageSplit-circle" src="assets/shared/desktop/bg-pattern-two-circles.svg" />
<img class="headerImg__fixright" src="assets/about/desktop/image-real-deal.jpg" />
<div id="home__main-text">
<h1 class="fcPeach">The real deal</h1>
<p class="fcBlack">As strategic partners in our clients’ businesses, we are ready to take on any challenge as
our
own.
Solving real problems require empathy and collaboration, and we strive to bring a fresh perspective to every
opportunity. We make design and technology more accessible and give you tools to measure success.
</p>
<p class="fcBlack">
We are visual storytellers in appealing and captivating ways. By combining business and marketing strategies,
we inspire audiences to take action and drive real results.</p>
</div>
</section>
</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>