Add 'sunnyside-agency-landing-page/'

alpe12 · Oct 15, 2023 · 3885309 · 3885309
1 parent 701d474
commit 3885309
Show file tree

Hide file tree

Showing 39 changed files with 924 additions and 1 deletion.
diff --git 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
@@ -8,6 +8,21 @@
 </head>
 <body>
     <main class="cards">
+        <div class="card">
+            <a class="imagelink" href="./sunnyside-agency-landing-page/index.html">
+                <img src="./sunnyside-agency-landing-page/src/images/screenshot.png" alt="">
+            </a>
+            <div class="content">
+                <a class="title" href="./sunnyside-agency-landing-page/index.html">
+                    <h2>Sunnyside agency landing page</h2>
+                </a>
+                <ul class="tags">
+                    <li>HTML</li>
+                    <li>CSS</li>
+                </ul>
+                <a href="./sunnyside-agency-landing-page/README.html" class="readme">Details</a>
+            </div>
+        </div>
         <div class="card">
             <a class="imagelink" href="./advice-generator-app/index.html">
                 <img src="./advice-generator-app/src/images/screenshot.png" alt="">

diff --git 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
@@ -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
+<label class="hamburger" for="menu-toggle">
+    <div class="line"></div>
+    <div class="line"></div>
+    <div class="line"></div>
+</label>
+```
+```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
+<div class="bg" style="
+    --bg:url(../images/desktop/image-gallery-sugarcubes.jpg);
+    --bgMobile:url(../images/mobile/image-gallery-sugarcubes.jpg);
+    --bgColor: rgb(255,124,120);
+"></div>
+```
+```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%;
+}
+```
diff --git a/sunnyside-agency-landing-page/index.html b/sunnyside-agency-landing-page/index.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Frontend Mentor | Sunnyside agency landing page</title>
+    <link rel="shortcut icon" href="./src/images/favicon-32x32.png" type="image/x-icon">
+    <link rel="stylesheet" href="./src/css/reset.css">
+    <link rel="stylesheet" href="./src/css/style.css">
+    <link rel="stylesheet" href="./src/css/responsive.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@600&family=Fraunces:opsz,[email protected],700;9..144,900&display=swap" rel="stylesheet">
+</head>
+
+<body>
+    <header class="bg bg-bottom" style="
+        --bg:url(../images/desktop/image-header.jpg);
+        --bgMobile:url(../images/mobile/image-header.jpg);
+        --bgColor: rgb(62,191,255);
+    ">
+        <div class="top-nav-bar">
+            <img src="./src/images/logo.svg" alt="" class="logo">
+            <input class="hamburger" id="menu-toggle" type="checkbox"/>
+            <label class="hamburger" for="menu-toggle">
+                <div class="line"></div>
+                <div class="line"></div>
+                <div class="line"></div>
+            </label>
+            <nav>
+                <a href="#">About</a>
+                <a href="#">Services</a>
+                <a href="#">Projects</a>
+                <a href="#">Contact</a>
+            </nav>
+        </div>
+        <div class="content">
+            <h1 class="text-border-black">We are creatives</h1>
+            <img src="./src/images/icon-arrow-down.svg" alt="" class="arrow">
+        </div>
+    </header>
+    <main>
+        <div class="gridContent">
+            <div class="transform-text">
+                <h2>Transform your brand</h2>
+                <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>
+                <a href="#">Learn more</a>
+            </div>
+            <div class="bg transform-image" style="
+                --bg:url(../images/desktop/image-transform.jpg);
+                --bgMobile:url(../images/mobile/image-transform.jpg);
+                --bgColor: rgb(255,211,2);
+            "></div>
+            <div class="bg standout-image" style="
+                --bg:url(../images/desktop/image-stand-out.jpg);
+                --bgMobile:url(../images/mobile/image-stand-out.jpg);
+                --bgColor: rgb(254,127,110);
+            "></div>
+            <div class="standout-text">
+                <h2>Stand out to the right audience</h2>
+                <p>Using a collaborative formula of designers, researchers, photographers, videographers, and copywriters, we’ll build and extend your brand in digital places.</p>
+                <a href="#">Learn more</a>
+            </div>
+            <div class="bg bg-top graphic-design mixed text-border-white" style="
+                --bg:url(../images/desktop/image-graphic-design.jpg);
+                --bgMobile:url(../images/mobile/image-graphic-design.jpg);
+                --bgColor: rgb(152,216,200);
+            ">
+                <h2>Graphic design</h2>
+                <p>Great design makes you memorable. We deliver artwork that underscores your brand message and captures potential clients’ attention.
+                </p>
+            </div>
+            <div class="bg bg-top photography mixed text-border-white" style="
+                --bg:url(../images/desktop/image-photography.jpg);
+                --bgMobile:url(../images/mobile/image-photography.jpg);
+                --bgColor: rgb(98,204,254);
+            ">
+                <h2>Photography</h2>
+                <p>Increase your credibility by getting the most stunning, high-quality photos that improve your business image.</p>
+            </div>
+        </div>
+        <div class="testemonials">
+            <h2 class="title">Client testimonials</h2>
+            <div class="flex">
+                <div class="testemonial">
+                    <img src="./src/images/image-emily.jpg" alt="" class="poster">
+                    <p class="text">We put our trust in Sunnyside and they delivered, making sure our needs were met and deadlines were always hit.</p>
+                    <div>
+                        <p class="name">Emily R.</p>
+                        <p class="position">Marketing Director</p>
+                    </div>
+                </div>
+                <div class="testemonial">
+                    <img src="./src/images/image-thomas.jpg" alt="" class="poster">
+                    <p class="text">Sunnyside’s enthusiasm coupled with their keen interest in our brand’s success made it a satisfying and enjoyable experience.</p>
+                    <div>
+                        <p class="name">Thomas S.</p>
+                        <p class="position">Chief Operating Officer</p>
+                    </div>
+                </div>
+                <div class="testemonial">
+                    <img src="./src/images/image-jennie.jpg" alt="" class="poster">
+                    <p class="text">Incredible end result! Our sales increased over 400% when we worked with Sunnyside. Highly recommended!</p>
+                    <div>
+                        <p class="name">Jennie F.</p>
+                        <p class="position">Business Owner</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="gridImages">
+            <div class="bg" style="
+                --bg:url(../images/desktop/image-gallery-milkbottles.jpg);
+                --bgMobile:url(../images/mobile/image-gallery-milkbottles.jpg);
+                --bgColor: rgb(64,178,238);
+            "></div>
+            <div class="bg bg-top bg-right" style="
+                --bg:url(../images/desktop/image-gallery-orange.jpg);
+                --bgMobile:url(../images/mobile/image-gallery-orange.jpg);
+                --bgColor: rgb(254,153,0);
+            "></div>
+            <div class="bg bg-bottom" style="
+                --bg:url(../images/desktop/image-gallery-cone.jpg);
+                --bgMobile:url(../images/mobile/image-gallery-cone.jpg);
+                --bgColor: rgb(77,201,253);
+            "></div>
+            <div class="bg" style="
+                --bg:url(../images/desktop/image-gallery-sugarcubes.jpg);
+                --bgMobile:url(../images/mobile/image-gallery-sugarcubes.jpg);
+                --bgColor: rgb(255,124,120);
+            "></div>
+        </div>
+    </main>
+    <footer>
+            <img src="./src/images/logo.svg" alt="" class="logo">
+            <nav class="bottom-nav-bar">
+                <a href="#">About</a>
+                <a href="#">Services</a>
+                <a href="#">Projects</a>
+            </nav>
+            <ul class="social">
+                <li>
+                    <a href="">
+                        <img src="./src/images/icon-facebook.svg" alt="">
+                    </a>
+                </li>
+                <li>
+                    <a href="">
+                        <img src="./src/images/icon-instagram.svg" alt="">
+                    </a>
+                </li>
+                <li>
+                    <a href="">
+                        <img src="./src/images/icon-twitter.svg " alt="">
+                    </a>
+                </li>
+                <li>
+                    <a href="">
+                        <img src="./src/images/icon-pinterest.svg" alt="">
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </footer>
+    <div class="attribution">
+        <p>Challenge by <a href="https://www.frontendmentor.io/challenges/sunnyside-agency-landing-page-7yVs3B6ef" target="_blank">Frontend Mentor</a>.</p>
+        <p>Coded by <a href="https://github.com/alpe12">Douglas Pessoa</a>.</p>
+    </div>
+</body>
+
+</html>
diff --git a/sunnyside-agency-landing-page/src/css/reset.css 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;
+}