diff --git a/advice-generator-app/README.md b/advice-generator-app/README.md index d5c85be..ad56c9d 100644 --- a/advice-generator-app/README.md +++ b/advice-generator-app/README.md @@ -7,6 +7,7 @@ This is a solution to the [Advice generator app challenge on Frontend Mentor](ht - [Overview](#overview) - [The challenge](#the-challenge) - [Screenshot](#screenshot) + - [Links](#links) - [What I learned](#what-i-learned) ## Overview @@ -23,6 +24,10 @@ Users should be able to: ![](./src/images/screenshot.png) +### Links + +- Live Site URL: [Github Pages](https://alpe12.github.io/frontendMentor/advice-generator-app/) + ## What I learned Ignore cache on Fetch request: diff --git a/index.html b/index.html index 67cfc76..08f6b05 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,21 @@
+
+ + + +
+ +

Sunnyside agency landing page

+ +
    +
  • HTML
    • +
  • CSS
    • +
+ Details +
+
diff --git a/src/css/style.css b/src/css/style.css index 98f394e..325b0b5 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -32,6 +32,9 @@ img { border-radius: 1rem; overflow: hidden; outline: 1px solid darkgray; + display: flex; + flex-direction: column; + justify-content: space-between; } .cards .card .imagelink { @@ -76,7 +79,7 @@ img { } .cards .card .content > .title *, -.cards .card .content > :not(.title) { +.cards .card .content > :not(.title):not(:last-child) { margin-bottom: 1rem; } diff --git a/sunnyside-agency-landing-page/README.md b/sunnyside-agency-landing-page/README.md new file mode 100644 index 0000000..552127d --- /dev/null +++ b/sunnyside-agency-landing-page/README.md @@ -0,0 +1,132 @@ +# Frontend Mentor - Sunnyside agency landing page solution + +This is a solution to the [Sunnyside agency landing page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/sunnyside-agency-landing-page-7yVs3B6ef). Frontend Mentor challenges help you improve your coding skills by building realistic projects. + +## Table of contents + +- [Overview](#overview) + - [The challenge](#the-challenge) + - [Screenshots](#screenshots) + - [Links](#links) +- [My process](#my-process) + - [What I learned](#what-i-learned) + +## Overview + +### The challenge + +Users should be able to: + +- View the optimal layout for the site depending on their device's screen size +- See hover states for all interactive elements on the page + +### Screenshots + +![](./src/images/screenshot.png) +![](./src/images/screenshot-mobile.png) +![](./src/images/screenshot-mobile-menu.png) + +### Links + +- Live Site URL: [Github Pages](https://alpe12.github.io/frontendMentor/sunnyside-agency-landing-page/) + +## My process + +### What I learned + +Make a simple HTML+CSS hamburger. +```html + +``` +```css +header .top-nav-bar label.hamburger .line { + width: 100%; + height: 3px; + background-color: #FFF; + transition: transform 0.1s ease; +} +header .top-nav-bar label.hamburger:hover .line { + opacity: 0.7; +} +header .top-nav-bar #menu-toggle:checked~label.hamburger .line { + transition-duration: 0.3s; +} +header .top-nav-bar #menu-toggle:checked~label.hamburger .line:nth-child(1) { + transform: translateY(8px) rotate(45deg); +} +header .top-nav-bar #menu-toggle:checked~label.hamburger .line:nth-child(2) { + opacity: 0; +} +header .top-nav-bar #menu-toggle:checked~label.hamburger .line:nth-child(3) { + transform: translateY(-7px) rotate(-45deg); +} +``` + +In this particular project I opted to add the background image urls as css variables directly on the html, so that the client could easily change it or add more. +I also added a --bgColor variable to set a default background color of the element to be shown while the image is loading. +```html +
+``` +```css +body .bg { + background-color: var(--bgColor); + background-image: var(--bg); + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} +``` + +I added a text border in some places. Because depending on the window size, the text was barely visible over the background image. +```css +body .text-border-black, +body .text-border-white * { + text-shadow: 1px 0 var(--text-border-color), -1px 0 var(--text-border-color), 0 1px var(--text-border-color), 0 -1px var(--text-border-color), 1px 1px var(--text-border-color), -1px -1px var(--text-border-color), 1px -1px var(--text-border-color), -1px 1px var(--text-border-color); +} +body .text-border-black { + --text-border-color: rgba(0, 0, 0, 0.3); +} +body .text-border-white { + --text-border-color: rgba(255, 255, 255, 0.8); +} +``` + +Made the arrow bounce up and down. +```css +header .content .arrow { + animation: moveUpDown 1.2s infinite ease; +} +@keyframes moveUpDown { + 0% { + transform: translateY(0); + opacity: 0.85; + } + 50% { + transform: translateY(20px); + opacity: 1; + } + 100% { + transform: translateY(0); + opacity: 0.85; + } +} +``` + +Reduce border-radius on the testemonial photo on hover. +```css +main .testemonials .flex .testemonial .poster { + border-radius: 50%; + transition: border-radius 300ms ease; +} +main .testemonials .flex .testemonial .poster:hover { + border-radius: 25%; +} +``` \ No newline at end of file diff --git a/sunnyside-agency-landing-page/index.html b/sunnyside-agency-landing-page/index.html new file mode 100644 index 0000000..285bfe4 --- /dev/null +++ b/sunnyside-agency-landing-page/index.html @@ -0,0 +1,173 @@ + + + + + + + Frontend Mentor | Sunnyside agency landing page + + + + + + + + + + +
+
+ + + + +
+
+

We are creatives

+ +
+
+
+
+
+

Transform your brand

+

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.

+ Learn more +
+
+
+
+

Stand out to the right audience

+

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

+ Learn more +
+
+

Graphic design

+

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

+
+
+

Photography

+

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

+
+
+
+

Client testimonials

+
+
+ +

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

+
+

Emily R.

+

Marketing Director

+
+
+
+ +

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

+
+

Thomas S.

+

Chief Operating Officer

+
+
+
+ +

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

+
+

Jennie F.

+

Business Owner

+
+
+
+
+
+
+
+
+
+
+
+
+ +
+

Challenge by Frontend Mentor.

+

Coded by Douglas Pessoa.

+
+ + + \ No newline at end of file diff --git a/sunnyside-agency-landing-page/src/css/reset.css b/sunnyside-agency-landing-page/src/css/reset.css new file mode 100644 index 0000000..6961c7b --- /dev/null +++ b/sunnyside-agency-landing-page/src/css/reset.css @@ -0,0 +1,14 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +a { + color: inherit; + text-decoration: inherit; +} + +ul, ol { + list-style: none; +} \ No newline at end of file diff --git a/sunnyside-agency-landing-page/src/css/responsive.css b/sunnyside-agency-landing-page/src/css/responsive.css new file mode 100644 index 0000000..b041371 --- /dev/null +++ b/sunnyside-agency-landing-page/src/css/responsive.css @@ -0,0 +1,227 @@ +@media (min-width: 2560px) { + main .gridContent { + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 800px; + } + + main .gridImages { + grid-auto-rows: 800px; + } + + main .gridContent> :nth-child(1) { + order: 1; + } + + main .gridContent> :nth-child(2) { + order: 2; + } + + main .gridContent> :nth-child(3) { + order: 4; + } + + main .gridContent> :nth-child(4) { + order: 5; + } + + main .gridContent> :nth-child(5) { + order: 3; + } + + main .gridContent> :nth-child(6) { + order: 6; + } +} + +@media (max-width: 640px) { + body .bg { + background-image: var(--bgMobile, var(--bg)); + } + + header { + padding: 30px 22px; + } + + header .top-nav-bar .logo { + height: 24px; + } + + header .content { + text-align: center; + } + + header .content h1 { + font-size: 2.5rem; + letter-spacing: 0.18em; + } + + main .gridContent { + grid-template-columns: 1fr; + grid-template-rows: 310px 438px 310px 438px 600px 600px; + text-align: center; + } + + main .gridContent h2 { + font-size: 2rem; + } + + main .gridContent > [class$=-text] { + padding: 8%; + align-items: center; + } + + main .gridContent > [class$="-text"] p { + font-size: 1.105rem; + line-height: 1.7; + } + + main .gridContent > [class$="-text"] a { + letter-spacing: 0.039em; + } + + main .gridContent .transform-image { + order: -1; + } + + main .gridContent > .mixed { + padding-left: 6.4%; + padding-right: 6.4%; + } + + main .gridContent > .mixed h2 { + letter-spacing: 0.015em; + } + + main .gridContent > .mixed p { + letter-spacing: -0.005em; + } + + main .testemonials { + height: auto; + padding: clamp(38px, 10.134%, 200px); + gap: 64px; + } + + main .testemonials .title { + font-size: 1rem; + letter-spacing: 0.255em; + } + + main .testemonials .flex { + flex-direction: column; + gap: 70px; + } + + main .testemonials .flex .testemonial { + gap: 40px; + } + + main .testemonials .flex .testemonial .text { + letter-spacing: -0.012em; + line-height: 1.7; + } + + main .gridImages { + grid-template-columns: repeat(2, 1fr); + grid-auto-rows: 250px; + } + + header .top-nav-bar { + margin-right: 4px; + position: relative; + } + + header .top-nav-bar label.hamburger { + width: 24px; + height: 18px; + display: flex; + flex-direction: column; + justify-content: space-between; + cursor: pointer; + } + + header .top-nav-bar label.hamburger .line { + width: 100%; + height: 3px; + background-color: #FFF; + transition: transform 0.1s ease; + } + + header .top-nav-bar label.hamburger:hover .line { + opacity: 0.7; + } + + header .top-nav-bar #menu-toggle:checked~label.hamburger .line { + transition-duration: 0.3s; + } + + header .top-nav-bar #menu-toggle:checked~label.hamburger .line:nth-child(1) { + transform: translateY(8px) rotate(45deg); + } + + header .top-nav-bar #menu-toggle:checked~label.hamburger .line:nth-child(2) { + opacity: 0; + } + + header .top-nav-bar #menu-toggle:checked~label.hamburger .line:nth-child(3) { + transform: translateY(-7px) rotate(-45deg); + } + + header .top-nav-bar nav { + display: none; + } + + header .top-nav-bar #menu-toggle:checked~nav { + width: clamp(150px, calc(100% - 4px), 328px); + height: 304px; + display: flex; + position: absolute; + flex-direction: column; + right: 0; + top: calc(200% + 24px); + background-color: rgb(255,251,248); + padding-top: 8px; + color: rgb(133,133,133); + justify-content: space-evenly; + font-size: 1.2rem; + z-index: 1; + } + + header .top-nav-bar #menu-toggle:checked~nav::before { + content: ''; + position: absolute; + height: 24px; + aspect-ratio: 1; + top: -24px; + right: 0; + border-top: 24px solid transparent; + border-right: 24px solid rgb(255,251,248); + } + + header .top-nav-bar nav> :last-child { + border-radius: 2em; + background-color: rgb(250, 212, 0); + } + + footer .logo { + height: 34px; + } + + footer .bottom-nav-bar { + letter-spacing: -0.01em; + } + + .attribution { + padding: 0.2em 0; + } + + .attribution p { + display: block; + } +} + +@media (max-width: 440px) { + main .gridImages { + grid-auto-rows: 190px; + } +} \ No newline at end of file diff --git a/sunnyside-agency-landing-page/src/css/style.css b/sunnyside-agency-landing-page/src/css/style.css new file mode 100644 index 0000000..9ac5a7a --- /dev/null +++ b/sunnyside-agency-landing-page/src/css/style.css @@ -0,0 +1,348 @@ +html { + font-family: 'Barlow', sans-serif; + font-weight: 600; +} + +h1, +h2, +h3 { + font-family: 'Fraunces', serif; + font-weight: 900; +} + +body { + background-color: rgb(255,251,248); +} + +body .bg { + background-color: var(--bgColor); + background-image: var(--bg); + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +body .bg.bg-bottom { + background-position-y: bottom; +} + +body .bg.bg-top { + background-position-y: top; +} + +body .bg.bg-left { + background-position-x: left; +} + +body .bg.bg-right { + background-position-x: right; +} + +body .text-border-black, +body .text-border-white * { + text-shadow: 1px 0 var(--text-border-color), -1px 0 var(--text-border-color), 0 1px var(--text-border-color), 0 -1px var(--text-border-color), 1px 1px var(--text-border-color), -1px -1px var(--text-border-color), 1px -1px var(--text-border-color), -1px 1px var(--text-border-color); +} + +body .text-border-black { + --text-border-color: rgba(0, 0, 0, 0.3); +} + +body .text-border-white { + --text-border-color: rgba(255, 255, 255, 0.8); +} + +header .top-nav-bar nav > :last-child, +main .gridContent a, +main .testemonials .flex .testemonial .name { + font-family: 'Fraunces', serif; + font-weight: 700; +} + +header { + height: 100dvh; + display: flex; + flex-direction: column; + padding: 34px 40px; + overflow-y: hidden; +} + +header .top-nav-bar { + display: flex; + align-items: center; + color: white; + margin-right: 8px; + justify-content: space-between; +} + +header .top-nav-bar .logo, +footer .logo { + height: 38px; +} + +header .top-nav-bar .hamburger { + display: none; +} + +header .top-nav-bar nav { + display: flex; + gap: clamp(10px, 4.15%, 48px); + align-items: center; + justify-content: flex-end; + flex: 1; + font-size: 1.1rem; +} + +header .top-nav-bar nav > :last-child { + background-color: rgba(255,255,255,var(--opacity, 1)); + color: rgb(35, 48, 62); + padding: 18px 30px; + border-radius: 26px; + text-transform: uppercase; + font-size: 1rem; + letter-spacing: -0.03em; +} + +header .top-nav-bar nav > :not(:last-child):hover { + text-decoration: underline; +} + +header .top-nav-bar nav > :last-child:hover { + --opacity: 0.25; + color: white; +} + +header .content { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + text-transform: uppercase; + color: white; +} +header .content h1 { + font-size: 3rem; +} + +header .content .arrow { + animation: moveUpDown 1.2s infinite ease; +} + +@keyframes moveUpDown { + 0% { + transform: translateY(0); + opacity: 0.85; + } + + 50% { + transform: translateY(20px); + opacity: 1; + } + + 100% { + transform: translateY(0); + opacity: 0.85; + } +} + +main .gridContent { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-auto-rows: 600px; +} + +main .gridContent h2 { + font-size: 2.5rem; +} + +main .gridContent > [class$=-text] { + display: flex; + flex-direction: column; + padding: clamp(50px, 22%, 165px); + justify-content: space-around; + align-items: flex-start; +} + +main .gridContent > [class$=-text] p { + color: rgb(120, 118, 129); +} + +main .gridContent > .mixed { + display: flex; + flex-direction: column; + padding: 60px 26%; + gap: 30px; + justify-content: end; + align-items: center; + text-align: center; + max-width: 100%; +} + +main .gridContent > .mixed h2 { + font-size: 1.7rem; + text-transform: capitalize; +} + +main .gridContent > [class$=-text] a { + position:relative; + padding: 0 8px; + text-transform: uppercase; +} + +main .gridContent > [class$=-text] a::after { + content: ''; + position: absolute; + inset: 0; + z-index: -1; + border-radius: 0.8em; + top: 0.8em; + height: 0.5em; + transition: background-color 200ms ease; +} + +main .gridContent > [class$=-text] a:hover { + --opacity: 1; +} + +main .gridContent > .transform-text a::after { + background-color: rgba(250,212,0 ,var(--opacity, 0.35)); +} + +main .gridContent > .standout-text a::after { + background-color: rgba(254,120,103,var(--opacity, 0.35)); +} + +main .gridContent .graphic-design { + color: rgb(37, 86, 75); +} + +main .gridContent .photography { + color: rgb(25, 83, 107); +} + +main .testemonials { + height: 780px; + display: flex; + flex-direction: column; + padding: clamp(60px, 11.4%, 200px); + gap: 70px; +} + +main .testemonials .title { + align-self: center; + text-transform: uppercase; + color: rgb(167, 171, 174); + letter-spacing: 0.3em; + font-size: 1.25rem; +} + +main .testemonials .flex { + display: flex; + flex: 1; + justify-content: center; + gap: clamp(30px, 3.8%, 60px); +} + +main .testemonials .flex .testemonial { + display: flex; + flex: 1; + flex-direction: column; + align-items: center; + justify-content: space-between; +} + +main .testemonials .flex .testemonial .poster { + border-radius: 50%; + width: 74px; + transition: border-radius 300ms ease; +} + +main .testemonials .flex .testemonial .poster:hover { + border-radius: 25%; +} + +main .testemonials .flex .testemonial .text { + color: rgb(90, 99, 108); + text-align: center; + font-size: 1.14rem; +} + +main .testemonials .flex .testemonial > div { + text-align: center; +} + +main .testemonials .flex .testemonial .name { + color: rgb(35, 48, 62); + font-size: 1.14rem; +} + +main .testemonials .flex .testemonial .position { + color: rgb(167, 171, 174); + font-size: 0.86rem; + margin-top: 10px; +} + +main .gridImages { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 448px; +} + +footer { + height: 350px; + background-color: rgb(144,212,197); + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + color: rgb(69, 140, 126); +} + +footer a:hover { + color: white; +} + +footer .logo { + filter: invert(1) invert(39%) sepia(47%) saturate(460%) hue-rotate(116deg) brightness(90%) contrast(91%); +} + +footer .bottom-nav-bar { + display: flex; + gap: 58px; + font-size: 1.12rem; +} + +footer .social { + display: flex; + gap: 28px; +} + +footer .social a img { + filter: invert(41%) sepia(8%) saturate(2409%) hue-rotate(118deg) brightness(92%) contrast(96%); +} + +footer .social a:hover img { + filter: invert(1); +} + +.attribution { + background-color: rgb(117, 164, 182); + color: hsl(228, 45%, 44%); + text-align: center; + padding: 0.4em 0; + position: fixed; + bottom: 0; + width: 100%; +} + +.attribution p { + display: inline-block; +} + +.attribution a { + color: hsl(228, 82%, 51%); +} + +.attribution a:hover { + text-decoration: underline; +} \ No newline at end of file diff --git a/sunnyside-agency-landing-page/src/images/desktop/image-gallery-cone.jpg b/sunnyside-agency-landing-page/src/images/desktop/image-gallery-cone.jpg new file mode 100644 index 0000000..a28e852 Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/desktop/image-gallery-cone.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/desktop/image-gallery-milkbottles.jpg b/sunnyside-agency-landing-page/src/images/desktop/image-gallery-milkbottles.jpg new file mode 100644 index 0000000..2134e8e Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/desktop/image-gallery-milkbottles.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/desktop/image-gallery-orange.jpg b/sunnyside-agency-landing-page/src/images/desktop/image-gallery-orange.jpg new file mode 100644 index 0000000..0b1c3e4 Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/desktop/image-gallery-orange.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/desktop/image-gallery-sugarcubes.jpg b/sunnyside-agency-landing-page/src/images/desktop/image-gallery-sugarcubes.jpg new file mode 100644 index 0000000..9e0d490 Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/desktop/image-gallery-sugarcubes.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/desktop/image-graphic-design.jpg b/sunnyside-agency-landing-page/src/images/desktop/image-graphic-design.jpg new file mode 100644 index 0000000..14b9e79 Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/desktop/image-graphic-design.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/desktop/image-header.jpg b/sunnyside-agency-landing-page/src/images/desktop/image-header.jpg new file mode 100644 index 0000000..6a76e9c Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/desktop/image-header.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/desktop/image-photography.jpg b/sunnyside-agency-landing-page/src/images/desktop/image-photography.jpg new file mode 100644 index 0000000..4672926 Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/desktop/image-photography.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/desktop/image-stand-out.jpg b/sunnyside-agency-landing-page/src/images/desktop/image-stand-out.jpg new file mode 100644 index 0000000..cd854bd Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/desktop/image-stand-out.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/desktop/image-transform.jpg b/sunnyside-agency-landing-page/src/images/desktop/image-transform.jpg new file mode 100644 index 0000000..426adf3 Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/desktop/image-transform.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/favicon-32x32.png b/sunnyside-agency-landing-page/src/images/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/favicon-32x32.png differ diff --git a/sunnyside-agency-landing-page/src/images/icon-arrow-down.svg b/sunnyside-agency-landing-page/src/images/icon-arrow-down.svg new file mode 100644 index 0000000..abef3f3 --- /dev/null +++ b/sunnyside-agency-landing-page/src/images/icon-arrow-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/sunnyside-agency-landing-page/src/images/icon-facebook.svg b/sunnyside-agency-landing-page/src/images/icon-facebook.svg new file mode 100644 index 0000000..d29b6ae --- /dev/null +++ b/sunnyside-agency-landing-page/src/images/icon-facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/sunnyside-agency-landing-page/src/images/icon-instagram.svg b/sunnyside-agency-landing-page/src/images/icon-instagram.svg new file mode 100644 index 0000000..b4d8ffc --- /dev/null +++ b/sunnyside-agency-landing-page/src/images/icon-instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/sunnyside-agency-landing-page/src/images/icon-pinterest.svg b/sunnyside-agency-landing-page/src/images/icon-pinterest.svg new file mode 100644 index 0000000..27f766f --- /dev/null +++ b/sunnyside-agency-landing-page/src/images/icon-pinterest.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/sunnyside-agency-landing-page/src/images/icon-twitter.svg b/sunnyside-agency-landing-page/src/images/icon-twitter.svg new file mode 100644 index 0000000..ffa40b6 --- /dev/null +++ b/sunnyside-agency-landing-page/src/images/icon-twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/sunnyside-agency-landing-page/src/images/image-emily.jpg b/sunnyside-agency-landing-page/src/images/image-emily.jpg new file mode 100644 index 0000000..cd45328 Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/image-emily.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/image-jennie.jpg b/sunnyside-agency-landing-page/src/images/image-jennie.jpg new file mode 100644 index 0000000..37713db Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/image-jennie.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/image-thomas.jpg b/sunnyside-agency-landing-page/src/images/image-thomas.jpg new file mode 100644 index 0000000..768a851 Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/image-thomas.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/logo.svg b/sunnyside-agency-landing-page/src/images/logo.svg new file mode 100644 index 0000000..0857685 --- /dev/null +++ b/sunnyside-agency-landing-page/src/images/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/sunnyside-agency-landing-page/src/images/mobile/image-gallery-cone.jpg b/sunnyside-agency-landing-page/src/images/mobile/image-gallery-cone.jpg new file mode 100644 index 0000000..797a85d Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/mobile/image-gallery-cone.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/mobile/image-gallery-milkbottles.jpg b/sunnyside-agency-landing-page/src/images/mobile/image-gallery-milkbottles.jpg new file mode 100644 index 0000000..d20c195 Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/mobile/image-gallery-milkbottles.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/mobile/image-gallery-orange.jpg b/sunnyside-agency-landing-page/src/images/mobile/image-gallery-orange.jpg new file mode 100644 index 0000000..e7e7f62 Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/mobile/image-gallery-orange.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/mobile/image-gallery-sugarcubes.jpg b/sunnyside-agency-landing-page/src/images/mobile/image-gallery-sugarcubes.jpg new file mode 100644 index 0000000..06b2e29 Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/mobile/image-gallery-sugarcubes.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/mobile/image-graphic-design.jpg b/sunnyside-agency-landing-page/src/images/mobile/image-graphic-design.jpg new file mode 100644 index 0000000..b04f1e9 Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/mobile/image-graphic-design.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/mobile/image-header.jpg b/sunnyside-agency-landing-page/src/images/mobile/image-header.jpg new file mode 100644 index 0000000..fc2f5c0 Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/mobile/image-header.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/mobile/image-photography.jpg b/sunnyside-agency-landing-page/src/images/mobile/image-photography.jpg new file mode 100644 index 0000000..984b63a Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/mobile/image-photography.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/mobile/image-stand-out.jpg b/sunnyside-agency-landing-page/src/images/mobile/image-stand-out.jpg new file mode 100644 index 0000000..ea650ee Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/mobile/image-stand-out.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/mobile/image-transform.jpg b/sunnyside-agency-landing-page/src/images/mobile/image-transform.jpg new file mode 100644 index 0000000..c676f9b Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/mobile/image-transform.jpg differ diff --git a/sunnyside-agency-landing-page/src/images/screenshot-mobile-menu.png b/sunnyside-agency-landing-page/src/images/screenshot-mobile-menu.png new file mode 100644 index 0000000..891bdc6 Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/screenshot-mobile-menu.png differ diff --git a/sunnyside-agency-landing-page/src/images/screenshot-mobile.png b/sunnyside-agency-landing-page/src/images/screenshot-mobile.png new file mode 100644 index 0000000..8afd5c6 Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/screenshot-mobile.png differ diff --git a/sunnyside-agency-landing-page/src/images/screenshot.png b/sunnyside-agency-landing-page/src/images/screenshot.png new file mode 100644 index 0000000..7494a2b Binary files /dev/null and b/sunnyside-agency-landing-page/src/images/screenshot.png differ