├── images ├── desktop │ ├── image-gallery-cone.jpg │ ├── image-gallery-milkbottles.jpg │ ├── image-gallery-orange.jpg │ ├── image-gallery-sugarcubes.jpg │ ├── image-graphic-design.jpg │ ├── image-header.jpg │ ├── image-photography.jpg │ ├── image-stand-out.jpg │ └── image-transform.jpg ├── favicon-32x32.png ├── icon-arrow-down.svg ├── icon-facebook.svg ├── icon-hamburger.svg ├── icon-instagram.svg ├── icon-pinterest.svg ├── icon-twitter.svg ├── image-emily.jpg ├── image-jennie.jpg ├── image-thomas.jpg ├── logo.svg └── mobile │ ├── image-gallery-cone.jpg │ ├── image-gallery-milkbottles.jpg │ ├── image-gallery-orange.jpg │ ├── image-gallery-sugar-cubes.jpg │ ├── image-graphic-design.jpg │ ├── image-header.jpg │ ├── image-photography.jpg │ ├── image-stand-out.jpg │ └── image-transform.jpg ├── index.html └── style.css /images/desktop/image-gallery-cone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/desktop/image-gallery-cone.jpg -------------------------------------------------------------------------------- /images/desktop/image-gallery-milkbottles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/desktop/image-gallery-milkbottles.jpg -------------------------------------------------------------------------------- /images/desktop/image-gallery-orange.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/desktop/image-gallery-orange.jpg -------------------------------------------------------------------------------- /images/desktop/image-gallery-sugarcubes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/desktop/image-gallery-sugarcubes.jpg -------------------------------------------------------------------------------- /images/desktop/image-graphic-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/desktop/image-graphic-design.jpg -------------------------------------------------------------------------------- /images/desktop/image-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/desktop/image-header.jpg -------------------------------------------------------------------------------- /images/desktop/image-photography.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/desktop/image-photography.jpg -------------------------------------------------------------------------------- /images/desktop/image-stand-out.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/desktop/image-stand-out.jpg -------------------------------------------------------------------------------- /images/desktop/image-transform.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/desktop/image-transform.jpg -------------------------------------------------------------------------------- /images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/favicon-32x32.png -------------------------------------------------------------------------------- /images/icon-arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-hamburger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-pinterest.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/image-emily.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/image-emily.jpg -------------------------------------------------------------------------------- /images/image-jennie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/image-jennie.jpg -------------------------------------------------------------------------------- /images/image-thomas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/image-thomas.jpg -------------------------------------------------------------------------------- /images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/mobile/image-gallery-cone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/mobile/image-gallery-cone.jpg -------------------------------------------------------------------------------- /images/mobile/image-gallery-milkbottles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/mobile/image-gallery-milkbottles.jpg -------------------------------------------------------------------------------- /images/mobile/image-gallery-orange.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/mobile/image-gallery-orange.jpg -------------------------------------------------------------------------------- /images/mobile/image-gallery-sugar-cubes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/mobile/image-gallery-sugar-cubes.jpg -------------------------------------------------------------------------------- /images/mobile/image-graphic-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/mobile/image-graphic-design.jpg -------------------------------------------------------------------------------- /images/mobile/image-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/mobile/image-header.jpg -------------------------------------------------------------------------------- /images/mobile/image-photography.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/mobile/image-photography.jpg -------------------------------------------------------------------------------- /images/mobile/image-stand-out.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/mobile/image-stand-out.jpg -------------------------------------------------------------------------------- /images/mobile/image-transform.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tanishka-dev/Landing-Page-Challenge/dd931c3e4587354eeb29c48567212f987f84c4cb/images/mobile/image-transform.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Frontend Mentor | Sunnyside agency landing page 14 | 15 | 16 |
17 |
18 | 33 |
34 |

WE ARE CREATIVES

35 | 36 |
37 |
38 |
39 |
40 |
41 |

Transform your brand

42 |

43 | We are a full-service creative agency specializing in helping brands grow fast. Engage your clients 44 | through compelling visuals that do most of the marketing for you. 45 |

46 | LEARN MORE 47 |
48 |
49 | 50 | 51 |
52 |

Stand out to the right audience

53 |

54 | Using a collaborative formula of designers, researchers, photographers, videographers, and 55 | copywriters, we’ll build and extend your brand in digital places. 56 |

57 | LEARN MORE 58 |
59 |
60 |
61 | 62 |
63 |

Graphic Design

64 |

65 | Great design makes you memorable. We deliver artwork that underscores your brand message and 66 | captures potential clients’ attention. 67 |

68 |
69 |
70 |
71 | 72 |
73 |

Photography

74 |

75 | Increase your credibility by getting the most stunning, high-quality photos that improve your 76 | business image. 77 |

78 |
79 |
80 |
81 | 82 |
83 |

CLIENT TESTIMONALS

84 |
85 |
86 | 87 |

88 | We put our trust in Sunnyside and they delivered, making sure our needs were met and deadlines 89 | were always hit. 90 |

91 |
92 |

Emily R.

93 |

Marketing Director

94 |
95 |
96 |
97 | 98 |

99 | Sunnyside’s enthusiasm coupled with their keen interest in our brand’s success made it a 100 | satisfying and enjoyable experience. 101 |

102 |
103 |

Thomas S.

104 |

Chief Operating Officer

105 |
106 |
107 |
108 | 109 |

110 | Incredible end result! Our sales increased over 400% when we worked with Sunnyside. Highly 111 | recommended! 112 |

113 |
114 |

Jennie F.

115 |

Business Owner

116 |
117 |
118 |
119 | 120 |
121 | 122 | 123 | 124 | 125 |
126 |
127 |

sunnyside

128 | 133 | 139 |
140 |
141 | 142 | 143 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .menu-bar { 8 | display: flex; 9 | flex-direction: row; 10 | padding: 1.5rem; 11 | width: 100%; 12 | justify-content: space-between; 13 | overflow: hidden; 14 | align-items: center; 15 | } 16 | 17 | .link { 18 | display: flex; 19 | align-items: center; 20 | gap: 3rem; 21 | } 22 | 23 | .bg-img { 24 | background-image: url("./images/desktop/image-header.jpg"); 25 | min-height: 755px; 26 | background-position: center; 27 | background-repeat: no-repeat; 28 | background-size: cover; 29 | position: relative; 30 | } 31 | 32 | .creative { 33 | text-align: center; 34 | } 35 | 36 | .create-arrow { 37 | display: flex; 38 | justify-content: center; 39 | align-items: center; 40 | align-content: center; 41 | flex-direction: column; 42 | margin-top: 6rem; 43 | gap: 4rem; 44 | } 45 | 46 | h1 { 47 | color: white; 48 | font-size: 3.5em; 49 | font-weight: bolder; 50 | font-family: "Vollkorn", serif; 51 | } 52 | 53 | h2 { 54 | color: white; 55 | font-size: 2.5em; 56 | font-weight: bolder; 57 | font-family: "Vollkorn", serif; 58 | } 59 | 60 | h3 { 61 | color: white; 62 | font-family: "Vollkorn", serif; 63 | } 64 | 65 | .contact-btn { 66 | background-color: white; 67 | border-radius: 1.5rem; 68 | margin: 0.5rem; 69 | font-size: 1em; 70 | font-weight: bold; 71 | border: none; 72 | padding: 15px 28px; 73 | text-align: center; 74 | text-decoration: none; 75 | font-family: "Roboto", sans-serif; 76 | } 77 | 78 | .grid-container { 79 | display: grid; 80 | grid-template-columns: repeat(2, 1fr); 81 | } 82 | 83 | img { 84 | max-width: 100%; 85 | } 86 | 87 | .onestyle { 88 | display: flex; 89 | flex-direction: column; 90 | justify-content: center; 91 | align-items: center; 92 | text-align: center; 93 | width: 80%; 94 | margin: 0 auto; 95 | gap: 8px; 96 | } 97 | 98 | .onestyle h4 { 99 | font-size: 2em; 100 | font-family: "Russo One", serif; 101 | } 102 | 103 | .onestyle p { 104 | font-size: 1.2em; 105 | color: rgb(95, 95, 95); 106 | font-family: "Russo One", serif; 107 | } 108 | 109 | .onestyle a { 110 | font-size: 1.2em; 111 | color: black; 112 | border-bottom: rgb(160, 255, 115) 4px solid; 113 | text-decoration: none; 114 | font-weight: 1000; 115 | font-family: "Russo One", serif; 116 | } 117 | 118 | .cherry { 119 | position: relative; 120 | text-align: center; 121 | } 122 | 123 | .orange { 124 | position: relative; 125 | } 126 | 127 | .orange > img { 128 | height: 100%; 129 | object-fit: cover; 130 | } 131 | 132 | .orange > .cherry-orange { 133 | position: absolute; 134 | display: flex; 135 | flex-direction: column; 136 | justify-content: center; 137 | align-items: center; 138 | text-align: center; 139 | width: 80%; 140 | margin: 0 auto; 141 | z-index: 1; 142 | top: 0; 143 | bottom: 0; 144 | right: 0; 145 | left: 0; 146 | } 147 | .cherry-orange { 148 | font-family: "Russo One", serif; 149 | } 150 | 151 | .cherry-orange h4 { 152 | font-size: 1.5em; 153 | color: #ffffff; 154 | font-weight: bolder; 155 | } 156 | 157 | .cherry-orange p { 158 | font-size: 1.3em; 159 | color: #ffffff; 160 | } 161 | 162 | .main3 > .Testimonals { 163 | font-family: "Fraunces", serif; 164 | font-size: 28px; 165 | text-align: center; 166 | color: #818498; 167 | margin: 4rem 0; 168 | } 169 | 170 | .people { 171 | display: grid; 172 | grid-template-columns: repeat(3, 1fr); 173 | width: 80%; 174 | margin: 0 auto; 175 | gap: 2rem; 176 | margin-bottom: 4rem; 177 | } 178 | 179 | .people > .person { 180 | display: flex; 181 | flex-direction: column; 182 | align-content: center; 183 | text-align: center; 184 | gap: 1rem; 185 | } 186 | 187 | .people > .person { 188 | margin-top: auto; 189 | } 190 | .people img { 191 | height: 70px; 192 | margin: 0 auto; 193 | width: 70px; 194 | border-radius: 50%; 195 | } 196 | 197 | .people p { 198 | display: block; 199 | justify-content: center; 200 | font-weight: 350; 201 | 202 | font-size: 1em; 203 | font-family: "Fraunces", serif; 204 | } 205 | 206 | .people h2 { 207 | font-size: 1.2em; 208 | color: #25564b; 209 | align-items: center; 210 | text-align: center; 211 | } 212 | 213 | .people h3 { 214 | font-size: 0.9em; 215 | font-weight: 900; 216 | color: #818498; 217 | align-items: center; 218 | text-align: center; 219 | } 220 | 221 | .photos { 222 | display: grid; 223 | flex-direction: row; 224 | align-items: center; 225 | overflow: hidden; 226 | grid-template-columns: repeat(4, 1fr); 227 | } 228 | 229 | .photos img { 230 | max-width: 100%; 231 | } 232 | .green { 233 | background-color: #6bd4bf; 234 | } 235 | 236 | .green h2 { 237 | justify-content: center; 238 | display: flex; 239 | font-family: 20px "Fraunces", serif; 240 | font-weight: bolder; 241 | color: #25564b; 242 | font-size: 2.1em; 243 | justify-content: center; 244 | } 245 | 246 | .bar { 247 | margin-top: 4%; 248 | display: flex; 249 | gap: 5rem; 250 | flex-direction: row; 251 | padding: 1.5rem; 252 | color: #25564b; 253 | justify-content: center; 254 | } 255 | 256 | .contact { 257 | margin-top: 2%; 258 | display: flex; 259 | gap: 3rem; 260 | flex-direction: row; 261 | padding: 1.5rem; 262 | justify-content: center; 263 | } 264 | 265 | .bar h3:hover { 266 | color: white; 267 | } 268 | 269 | .hamburger { 270 | width: 30px; 271 | height: 30px; 272 | display: flex; 273 | flex-direction: column; 274 | justify-content: space-between; 275 | display: none; 276 | } 277 | 278 | .hamburger > div { 279 | height: 4px; 280 | background: #ffffff; 281 | width: 100%; 282 | border-radius: 20px; 283 | } 284 | 285 | @media only screen and (max-width: 730px) { 286 | .grid-container { 287 | grid-template-columns: 1fr; 288 | } 289 | 290 | .onestyle { 291 | margin: 8rem auto; 292 | width: 95%; 293 | } 294 | 295 | .link { 296 | display: none; 297 | } 298 | 299 | .people { 300 | grid-template-columns: 1fr; 301 | } 302 | 303 | .bar { 304 | margin-top: 2rem; 305 | display: flex; 306 | gap: 1rem; 307 | flex-direction: row; 308 | padding: 0; 309 | color: #25564b; 310 | justify-content: center; 311 | } 312 | 313 | .hamburger { 314 | display: flex; 315 | } 316 | } 317 | --------------------------------------------------------------------------------