/sunnyside-group19

This is the group project of Group 19 of the Side Hustle Week 2 Capstone Project

Primary LanguageCSS

Frontend Mentor - Sunnyside agency landing page solution

This is a solution to the Sunnyside agency landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Note: Delete this note and update the table of contents based on what sections you keep.

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

Screenshot

Design-desktop-preview from frontend mentor

Design-mobile-preview from frontend mentor

-mobile design -desktop preview

Links

My process

Built with

What I learned

I learnt how to use more css properties and html elements. I also learnt how to design a drop down menu using CSS.

.dropdown{
        position: relative;
        float: right;
        display: inline;
        align-self: center;
    }

    .menu {
        cursor: pointer;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: white;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        right: 0;
        text-align: center;
        padding: 20px 20px 30px;
        font-size: 16px;
    }

    .dropdown-content a {
        color: hsl(210, 4%, 67%);
        padding: 12px 18px;
        text-decoration: none;
        display: block;
        font-family: 'Barlow', sans-serif;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .menus:hover{
        fill: #6FCFFF;
    }

    #contact-menu{
        background-color: hsl(51, 100%, 49%);
        font-family: 'Fraunces', serif;
        text-transform: uppercase;
        color: hsl(212, 27%, 19%);
        border-radius: 30px;
        font-size: 12px;
        margin-top: 15px;
    }

    nav{
        display: none;
    }

Continued development

  • I'm still interested in learning more CSS properties in order to add more styles to my work.

  • Adding tailwindcss to my work in future works will be great. So I will also develop my skills in that area as well

Useful resources

w3Schools. This site enhanced my CSS and HTML understanding CSS tricks

Author

Acknowledgments

  • I want to thank my mentor in SideHustle internship who showed me this site frontendmentor. He has really supported me in learning HTML and CSS.
  • I aslo want to thank frontend mentor for this opportunity
  • Thanks to w3Schools for helping me improve my knowledge on HTML and CSS