-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (157 loc) · 18.1 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sunnyside</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<section class="banner">
<div class="header">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="body_1"
width="223" height="43">
<g transform="matrix(1.798387 0 0 1.7916667 0 0)">
<path
d="M5.857 18.708C 7.495 18.708 8.851999 18.348 9.927 17.628C 11.002 16.907 11.54 15.859 11.54 14.484C 11.457 12.629 10.076 11.238 7.396 10.311001L7.396 10.311001L5.956 9.714001C 5.6419997 9.614 5.4179997 9.516001 5.286 9.416C 5.286 9.002001 5.559 8.7960005 6.1049995 8.7960005C 6.7829995 8.7960005 7.2869997 9.143001 7.6179996 9.839001L7.6179996 9.839001L11.316 8.795001C 10.423 6.575001 8.702 5.466001 6.154 5.466001C 4.632 5.466001 3.3659997 5.8640013 2.3569999 6.659001C 1.15 7.08 0.645 8.116 0.645 9.39C 0.645 9.788 0.70299995 10.156 0.819 10.496C 0.935 10.836 1.109 11.134001 1.34 11.39C 1.572 11.647 1.7950001 11.87 2.01 12.061001C 2.225 12.251 2.498 12.430001 2.83 12.595001C 3.1599998 12.761002 3.412 12.881001 3.586 12.955001C 3.76 13.030001 3.996 13.117001 4.293 13.216001L4.293 13.216001L4.715 13.366L6.205 13.912001C 6.568 14.045001 6.805 14.156001 6.9119997 14.247001C 6.9119997 14.678 6.508 14.894001 5.6969995 14.894001C 4.5059996 14.894001 3.7939997 14.364001 3.5629995 13.304001L3.5629995 13.304001L0 14.509C 0.463 17.309 2.416 18.709 5.857 18.709L5.857 18.709L5.857 18.708zM17.493 18.708C 19.131 18.708 20.338 18.078001 21.116 16.82L21.116 16.82L21.116 18.435L26.227999 18.435L26.227999 5.366L21.116 5.366L21.116 12.522C 21.116 13.996 20.611 14.732 19.602 14.732C 18.576 14.732 18.063 13.996 18.063 12.522L18.063 12.522L18.063 5.366L12.951 5.366L12.951 13.019C 12.951 16.812 14.465 18.709 17.493 18.709zM33.596 18.435L33.596 11.28C 33.596 9.804999 34.100002 9.068 35.109 9.068C 36.135002 9.068 36.649002 9.805 36.649002 11.28L36.649002 11.28L36.649002 18.435L41.760002 18.435L41.760002 10.782999C 41.760002 6.989999 40.247 5.092999 37.219 5.092999C 35.581 5.092999 34.373 5.722999 33.596 6.980999L33.596 6.980999L33.596 5.366L28.483002 5.366L28.483002 18.435001L33.596 18.435001zM48.979 18.435L48.979 11.28C 48.979 9.804999 49.483 9.068 50.493 9.068C 51.518 9.068 52.031 9.805 52.031 11.28L52.031 11.28L52.031 18.435L57.143997 18.435L57.143997 10.782999C 57.143997 6.989999 55.629997 5.092999 52.601997 5.092999C 50.963997 5.092999 49.755997 5.722999 48.978996 6.980999L48.978996 6.980999L48.978996 5.366L43.865997 5.366L43.865997 18.435001L48.978996 18.435001zM64.958 24L73.247 5.365999L67.91 5.365999L65.378006 12.049999L63.120007 5.365999L57.536007 5.365999L62.97101 17.168L59.944 24L64.958 24zM78.628 18.708C 80.266 18.708 81.623 18.348 82.698 17.628C 83.773994 16.907 84.312 15.859 84.312 14.484C 84.229 12.629 82.847 11.238 80.167 10.311001L80.167 10.311001L78.727 9.714001C 78.412994 9.614 78.189995 9.516001 78.057 9.416C 78.057 9.002001 78.33 8.7960005 78.876 8.7960005C 79.554 8.7960005 80.059 9.143001 80.39 9.839001L80.39 9.839001L84.088 8.795001C 83.194 6.575001 81.474 5.466001 78.925995 5.466001C 77.40399 5.466001 76.13799 5.8640013 75.129 6.659001C 74.118996 7.454001 73.615 8.489001 73.615 9.764001C 73.615 10.162001 73.673 10.530001 73.787994 10.870001C 73.90399 11.210001 74.077995 11.508001 74.31 11.764001C 74.541 12.021001 74.765 12.244 74.979996 12.435001C 75.19499 12.625001 75.467995 12.804002 75.798996 12.969002C 76.129 13.135002 76.381996 13.255002 76.556 13.329001C 76.729 13.404001 76.966 13.491001 77.263 13.590001L77.263 13.590001L77.685 13.740001L79.173996 14.286001C 79.537994 14.419002 79.773994 14.530002 79.881 14.621001C 79.881 15.052001 79.476 15.268002 78.66499 15.268002C 77.47499 15.268002 76.76299 14.738002 76.53099 13.678001L76.53099 13.678001L72.80799 14.522001C 73.27199 17.322 75.22399 18.722 78.66499 18.722zM88.428 4.571C 89.338005 4.571 90.041 4.356 90.538 3.9250002C 91.033005 3.4950001 91.282005 2.9480002 91.282005 2.2850003C 91.282005 1.6070004 91.04201 1.0550003 90.562004 0.6340003C 90.082 0.21 89.371 0 88.428 0C 87.485 0 86.773 0.211 86.293 0.634C 85.812996 1.056 85.573 1.607 85.573 2.286C 85.573 2.948 85.822 3.495 86.318 3.926C 86.815 4.356 87.518 4.571 88.428 4.571zM90.984 18.435001L90.984 5.366L85.87 5.366L85.87 18.435001L90.983 18.435001zM98.724 18.708002C 100.461 18.708002 101.701 18.078003 102.446 16.820002L102.446 16.820002L102.446 18.435001L107.558 18.435001L107.558 0.472L102.446 0.472L102.446 7.006C 101.701 5.731 100.461 5.093 98.723 5.093C 96.97 5.093 95.509 5.735 94.343 7.019C 93.177 8.302 92.593 9.929 92.593 11.901C 92.593 13.871 93.177 15.499001 94.343 16.783C 95.509 18.066002 96.97 18.708 98.723 18.708zM100.114 14.808002C 99.385 14.808002 98.802 14.534002 98.364 13.988003C 97.924995 13.441003 97.706 12.745003 97.706 11.901003C 97.706 11.056003 97.921 10.361003 98.351 9.814003C 98.798 9.267003 99.384995 8.994003 100.113 8.994003C 100.841 8.994003 101.423996 9.267003 101.863 9.814003C 102.301 10.3600025 102.52 11.056003 102.52 11.901003C 102.52 12.745003 102.300995 13.441003 101.863 13.988003C 101.423996 14.534002 100.840996 14.808002 100.113 14.808002zM116.812 18.708002C 119.409 18.708002 121.436 17.954002 122.892 16.448002L122.892 16.448002L120.782 13.615002C 119.74 14.460002 118.564995 14.882002 117.257996 14.882002C 116.266 14.882002 115.45899 14.658002 114.838 14.212002C 114.217995 13.764002 113.908 13.333002 113.908 12.919002L113.908 12.919002L123.51199 12.919002C 123.59499 12.621001 123.635994 12.232001 123.635994 11.752002C 123.635994 9.698002 122.96199 8.075002 121.61399 6.882002C 120.26499 5.689002 118.54099 5.093002 116.43899 5.093002C 114.18899 5.093002 112.41099 5.764002 111.10399 7.106002C 109.79699 8.447001 109.14299 10.062002 109.14299 11.950002C 109.14299 13.888001 109.83299 15.4990015 111.21499 16.783C 112.596985 18.066002 114.46199 18.708 116.81199 18.708zM119.02 10.559002L113.908 10.559002C 113.940994 9.946002 114.20599 9.479002 114.701996 9.155002C 115.198 8.832002 115.785995 8.671001 116.464 8.671001C 117.142 8.671001 117.729996 8.836001 118.226 9.168001C 118.723 9.4990015 118.987 9.963001 119.02 10.559001z"
stroke="none" fill="currentColor" fill-rule="nonzero" />
</g>
</svg>
<nav class="menu">
<span>About</span>
<span>Services</span>
<span>Projects</span>
<div class="contact">CONTACT</div>
</nav>
</div>
<div class="main">
<h1 class="text">WE ARE CREATIVES</h1>
<a href="#content"><img src="./assets/icon-arrow-down.svg" class="arrow" alt="arrow button"></a>
</div>
</section>
<section id="content" class="section1">
<div class="left">
<div class="text-container">
<h1>Tranform your brand</h1>
<p>We are a full-service creative agency specializing in helping brands grow fast.
Engage your clients through compelling visuals that do most of the marketing for you.</p>
<div class="button1">
<h2>LEARN MORE</h2>
</div>
</div>
</div>
<div class="right">
<img class="container-img" src="./assets/image-gallery-egg.jpg" alt="illustration">
</div>
</section>
<section class="section2">
<div class="right">
<img class="container-img" src="./assets/image-stand-out.jpg" alt="illustraion">
</div>
<div class="left">
<div class="text-container">
<h1>Stand out to the right audience</h1>
<p> Using a collaborative formula of designers, researchers, photographers, videographers, and
copywriters, we'll build and extend your brand in digital places.
</p>
<div class="button2">
<h2>LEARN MORE</h2>
</div>
</div>
</div>
</section>
<section class="section2">
<div class="left1">
<div class="text-container-top">
<h1>Graphic Design</h1>
<p> Great design makes you memorable. We deliver artwork that underscores your brand message and
captures potential clients' attention.</p>
</div>
</div>
<div class="right1">
<div class="text-container-top">
<h1> Photography</h1>
<p>Increase your credibility by getting the most stunning, high-quality photos that improve your
business image.</p>
</div>
</div>
</section>
<section class="section3 testimonials">
<h1>CLIENT TESTIMONIALS</h1>
<div class="clients">
<div class="client">
<div class="client-image">
<img src="./assets/image-emily.jpg" alt="client picture">
</div>
<p>We put our trust in Sunnyside and they delivered, making sure our needs were met and deadlines
were always hit.</p>
<div class="details">
<h2>Emily R.</h2>
<p>Marketing Director</p>
</div>
</div>
<div class="client">
<div class="client-image">
<img src="./assets/image-thomas.jpg" alt="client picture">
</div>
<p>Sunnyside's enthusiasm coupled with their keen interest in our brand's success made it a
satisfying and enjoyable experience.</p>
<div class="details">
<h2>Thomas S.</h2>
<p>Cheif Operating Officier</p>
</div>
</div>
<div class="client">
<div class="client-image">
<img src="./assets/image-jennie.jpg" alt="client picture">
</div>
<p>Incredible end result! Our sales increased over 400% when we worked with Sunnyside. Highly
recommended!</p>
<div class="details">
<h2>Jennie F.</h2>
<p>Business Owner</p>
</div>
</div>
</div>
</section>
<section class="section4 gallery">
<div class="gallery-container">
<img src="./assets/image-gallery-milkbottles.jpg" alt="example image">
</div>
<div class="gallery-container">
<img src="./assets/image-gallery-orange.jpg" alt="example image">
</div>
<div class="gallery-container">
<img src="./assets/image-gallery-cone.jpg" alt="example image">
</div>
<div class="gallery-container">
<img src="./assets/image-gallery-sugarcubes.jpg" alt="example image">
</div>
</section>
<footer class="footer">
<div class="logo">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="body_1"
width="223" height="43">
<g transform="matrix(1.798387 0 0 1.7916667 0 0)">
<path
d="M5.857 18.708C 7.495 18.708 8.851999 18.348 9.927 17.628C 11.002 16.907 11.54 15.859 11.54 14.484C 11.457 12.629 10.076 11.238 7.396 10.311001L7.396 10.311001L5.956 9.714001C 5.6419997 9.614 5.4179997 9.516001 5.286 9.416C 5.286 9.002001 5.559 8.7960005 6.1049995 8.7960005C 6.7829995 8.7960005 7.2869997 9.143001 7.6179996 9.839001L7.6179996 9.839001L11.316 8.795001C 10.423 6.575001 8.702 5.466001 6.154 5.466001C 4.632 5.466001 3.3659997 5.8640013 2.3569999 6.659001C 1.15 7.08 0.645 8.116 0.645 9.39C 0.645 9.788 0.70299995 10.156 0.819 10.496C 0.935 10.836 1.109 11.134001 1.34 11.39C 1.572 11.647 1.7950001 11.87 2.01 12.061001C 2.225 12.251 2.498 12.430001 2.83 12.595001C 3.1599998 12.761002 3.412 12.881001 3.586 12.955001C 3.76 13.030001 3.996 13.117001 4.293 13.216001L4.293 13.216001L4.715 13.366L6.205 13.912001C 6.568 14.045001 6.805 14.156001 6.9119997 14.247001C 6.9119997 14.678 6.508 14.894001 5.6969995 14.894001C 4.5059996 14.894001 3.7939997 14.364001 3.5629995 13.304001L3.5629995 13.304001L0 14.509C 0.463 17.309 2.416 18.709 5.857 18.709L5.857 18.709L5.857 18.708zM17.493 18.708C 19.131 18.708 20.338 18.078001 21.116 16.82L21.116 16.82L21.116 18.435L26.227999 18.435L26.227999 5.366L21.116 5.366L21.116 12.522C 21.116 13.996 20.611 14.732 19.602 14.732C 18.576 14.732 18.063 13.996 18.063 12.522L18.063 12.522L18.063 5.366L12.951 5.366L12.951 13.019C 12.951 16.812 14.465 18.709 17.493 18.709zM33.596 18.435L33.596 11.28C 33.596 9.804999 34.100002 9.068 35.109 9.068C 36.135002 9.068 36.649002 9.805 36.649002 11.28L36.649002 11.28L36.649002 18.435L41.760002 18.435L41.760002 10.782999C 41.760002 6.989999 40.247 5.092999 37.219 5.092999C 35.581 5.092999 34.373 5.722999 33.596 6.980999L33.596 6.980999L33.596 5.366L28.483002 5.366L28.483002 18.435001L33.596 18.435001zM48.979 18.435L48.979 11.28C 48.979 9.804999 49.483 9.068 50.493 9.068C 51.518 9.068 52.031 9.805 52.031 11.28L52.031 11.28L52.031 18.435L57.143997 18.435L57.143997 10.782999C 57.143997 6.989999 55.629997 5.092999 52.601997 5.092999C 50.963997 5.092999 49.755997 5.722999 48.978996 6.980999L48.978996 6.980999L48.978996 5.366L43.865997 5.366L43.865997 18.435001L48.978996 18.435001zM64.958 24L73.247 5.365999L67.91 5.365999L65.378006 12.049999L63.120007 5.365999L57.536007 5.365999L62.97101 17.168L59.944 24L64.958 24zM78.628 18.708C 80.266 18.708 81.623 18.348 82.698 17.628C 83.773994 16.907 84.312 15.859 84.312 14.484C 84.229 12.629 82.847 11.238 80.167 10.311001L80.167 10.311001L78.727 9.714001C 78.412994 9.614 78.189995 9.516001 78.057 9.416C 78.057 9.002001 78.33 8.7960005 78.876 8.7960005C 79.554 8.7960005 80.059 9.143001 80.39 9.839001L80.39 9.839001L84.088 8.795001C 83.194 6.575001 81.474 5.466001 78.925995 5.466001C 77.40399 5.466001 76.13799 5.8640013 75.129 6.659001C 74.118996 7.454001 73.615 8.489001 73.615 9.764001C 73.615 10.162001 73.673 10.530001 73.787994 10.870001C 73.90399 11.210001 74.077995 11.508001 74.31 11.764001C 74.541 12.021001 74.765 12.244 74.979996 12.435001C 75.19499 12.625001 75.467995 12.804002 75.798996 12.969002C 76.129 13.135002 76.381996 13.255002 76.556 13.329001C 76.729 13.404001 76.966 13.491001 77.263 13.590001L77.263 13.590001L77.685 13.740001L79.173996 14.286001C 79.537994 14.419002 79.773994 14.530002 79.881 14.621001C 79.881 15.052001 79.476 15.268002 78.66499 15.268002C 77.47499 15.268002 76.76299 14.738002 76.53099 13.678001L76.53099 13.678001L72.80799 14.522001C 73.27199 17.322 75.22399 18.722 78.66499 18.722zM88.428 4.571C 89.338005 4.571 90.041 4.356 90.538 3.9250002C 91.033005 3.4950001 91.282005 2.9480002 91.282005 2.2850003C 91.282005 1.6070004 91.04201 1.0550003 90.562004 0.6340003C 90.082 0.21 89.371 0 88.428 0C 87.485 0 86.773 0.211 86.293 0.634C 85.812996 1.056 85.573 1.607 85.573 2.286C 85.573 2.948 85.822 3.495 86.318 3.926C 86.815 4.356 87.518 4.571 88.428 4.571zM90.984 18.435001L90.984 5.366L85.87 5.366L85.87 18.435001L90.983 18.435001zM98.724 18.708002C 100.461 18.708002 101.701 18.078003 102.446 16.820002L102.446 16.820002L102.446 18.435001L107.558 18.435001L107.558 0.472L102.446 0.472L102.446 7.006C 101.701 5.731 100.461 5.093 98.723 5.093C 96.97 5.093 95.509 5.735 94.343 7.019C 93.177 8.302 92.593 9.929 92.593 11.901C 92.593 13.871 93.177 15.499001 94.343 16.783C 95.509 18.066002 96.97 18.708 98.723 18.708zM100.114 14.808002C 99.385 14.808002 98.802 14.534002 98.364 13.988003C 97.924995 13.441003 97.706 12.745003 97.706 11.901003C 97.706 11.056003 97.921 10.361003 98.351 9.814003C 98.798 9.267003 99.384995 8.994003 100.113 8.994003C 100.841 8.994003 101.423996 9.267003 101.863 9.814003C 102.301 10.3600025 102.52 11.056003 102.52 11.901003C 102.52 12.745003 102.300995 13.441003 101.863 13.988003C 101.423996 14.534002 100.840996 14.808002 100.113 14.808002zM116.812 18.708002C 119.409 18.708002 121.436 17.954002 122.892 16.448002L122.892 16.448002L120.782 13.615002C 119.74 14.460002 118.564995 14.882002 117.257996 14.882002C 116.266 14.882002 115.45899 14.658002 114.838 14.212002C 114.217995 13.764002 113.908 13.333002 113.908 12.919002L113.908 12.919002L123.51199 12.919002C 123.59499 12.621001 123.635994 12.232001 123.635994 11.752002C 123.635994 9.698002 122.96199 8.075002 121.61399 6.882002C 120.26499 5.689002 118.54099 5.093002 116.43899 5.093002C 114.18899 5.093002 112.41099 5.764002 111.10399 7.106002C 109.79699 8.447001 109.14299 10.062002 109.14299 11.950002C 109.14299 13.888001 109.83299 15.4990015 111.21499 16.783C 112.596985 18.066002 114.46199 18.708 116.81199 18.708zM119.02 10.559002L113.908 10.559002C 113.940994 9.946002 114.20599 9.479002 114.701996 9.155002C 115.198 8.832002 115.785995 8.671001 116.464 8.671001C 117.142 8.671001 117.729996 8.836001 118.226 9.168001C 118.723 9.4990015 118.987 9.963001 119.02 10.559001z"
stroke="none" fill="currentColor" fill-rule="nonzero" />
</g>
</svg>
</div>
<div class="footer-nav">
<span>About</span>
<span>Services</span>
<span>Projects</span>
</div>
<div class="socials">
<a href="#"><img src="./assets/icon-facebook.svg" alt="facebook link"></a>
<a href="#"><img src="./assets/icon-instagram.svg" alt="instagram link"></a>
<a href="#"><img src="./assets/icon-twitter.svg" alt="twitter link"></a>
<a href="#"><img src="./assets/icon-pinterest.svg" alt="pinterest link"></a>
</div>
</footer>
</div>
</body>
</html>