-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·130 lines (124 loc) · 4.62 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
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.0">
<script defer src="./script.js"></script>
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<link rel="stylesheet" href="./styles/main.css">
<title>Creative single page site</title>
</head>
<body>
<header class="flex-row">
<a href="#" class="logo"><img src="./assets/desktop/logo.svg" alt="Creative"></a>
<button type="button" aria-label="Hamburger" class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
<nav>
<a href="#">About</a>
<a href="#">Service</a>
<a href="#">Projects</a>
<button type="button" class="btn btn-black" aria-label="Schedule a call">Schedule a Call</button>
</nav>
</header>
<section class="branding">
<div class="width50">
<h1>Branding & website design agency</h1>
<p>
We specialize in visual storytelling by creating cohesive brand and website design
solutions for small businesses, giving lasting impressions to audiences in a digital world.
</p>
<button type="button" class="btn btn-red" aria-label="Learn more">Learn More</button>
</div>
</section>
<section class="design flex-row">
<span class="wave"></span>
<div class="design-bg"></div>
<div class="design-text">
<h2><span>Design</span> is strategic.</h2>
<p> A well-crafted design strategy consistently produces desired outcomes and brand awareness.
We are firm believers that success lies in creative collaboration with our clients.</p>
<button type="button" class="btn-link" aria-label="Schedule a call">Schedule a Call</button>
</div>
</section>
<section class="strategy flex-row">
<div class="strategy-bg"></div>
<div class="left">
<h2>Our approach for creating a winning brand</h2>
</div>
<div class="right">
<ul>
<li>
<h1>01</h1>
<div class="strategy-text">
<p class="strategy-title">Brand strategy</p>
<p>Brand strategy is critical for long-term success. Outshining competitors and capturing
the target audience are key.</p>
</div>
</li>
<li>
<h1>02</h1>
<div class="strategy-text">
<p class="strategy-title">Brand design</p>
<p>
Keeping the brand design unique and meaningful helps in communicating the brand’s timeless
value effectively.
</p>
</div>
</li>
<li>
<h1>03</h1>
<div class="strategy-text">
<p class="strategy-title">Web design</p>
<p>
A beautifully crafted website is the best tool for brand awareness, and ultimately results
in increased revenues.
</p>
</div>
</li>
</ul>
</div>
</section>
<section class="slider flex-row">
<span class="wave"></span>
<div class="left">
<div class="slider-main-title flex-column">
<div class="slide fade"><h2>Brand naming & guidelines</h2></div>
<div class="slide fade"><h2>Brand identity & merchandise</h2></div>
<div class="slide fade"><h2>Brand identity & web design</h2></div>
<div class="buttons flex-row">
<button type="button" aria-label="left" class="slider-btn slider-btn-left"></button>
<button type="button" aria-label="right" class="slider-btn slider-btn-right"></button>
</div>
</div>
</div>
<div class="right">
<div class="slide fade" style="background: url('./assets/desktop/image-slide-1.jpg') no-repeat;">
<div class="text">
<div class="slide-title">Lean Product Roadmap </div>
<div class="slide-desc">2019 project</div>
</div>
</div>
<div class="slide fade" style="background: url('./assets/desktop/image-slide-2.jpg') no-repeat;">
<div class="text">
<div class="slide-title">New Majestic Hotel </div>
<div class="slide-desc">2018 project</div>
</div>
</div>
<div class="slide fade" style="background: url('./assets/desktop/image-slide-3.jpg') no-repeat;">
<div class="text">
<div class="slide-title">Crypto Dashboard</div>
<div class="slide-desc">2016 project</div>
</div>
</div>
</div>
</section>
<footer class="footer flex-row">
<div class="wave"></div>
<h2>Let's build something great together.</h2>
<button type="button" class="btn btn-red" aria-label="Schedule a Call">Schedule a Call</button>
</footer>
</body>
</html>