about.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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=Oswald:wght@200..700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.2.0/css/all.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

<title>Dry Fish Shop</title>
</head>
<body>

    <!-- ========================================= Landing area ==================================== -->

    <div class="landing">
        <nav>
            <div class="navContent wrap flex">
                <a href="index.html"><img src="images/logo-03.png" alt="logo"></a>
                <div class="burgerButton"><span id="menuButton" class="material-symbols-outlined">
                    menu
                    </span></div>
                <div  class="navItems font2 linka">
              
                <a href="index.html">Home</a>
                <a href="about.html">About</a>
                <a href="contact.html">Contact</a>
                <a href="privacy.html">Privacy Policy</a>
                </div>
            </div>
            <div id="mobileNav" class="mobileNav font2">
                <div id="close">
                    X
                </div>
                    <a class="mobileNavItem" href="index.html">Home</a>
                    <a class="mobileNavItem" href="about.html">About</a>
                    <a class="mobileNavItem" href="contact.html">Contact</a>
                    <a class="mobileNavItem" href="privacy.html">Privacy Policy</a>
            </div>
        </nav>
       </div>
    
    <main class="wrap">
        <div class="team">
            <h1 class="centerFont">Meet Out Team</h1>
            <p class="centerFont">Unwavering Commitment, Unmatched Excellence<br>Our Dedicated Team in Action.</p>
            <img src="images/about/team.jpg" alt="Team Image">
            <h1> Who we are..</h1>
        </div>
        <div class="whoWeAre wrap flex wrap-flex">
            <div class="personCard">
                <img src="images/about/z.jpg" alt="Person">
                <h3>Jems Watt</h3>
                <p>CEO</p>
            </div>
            <div class="personCard">
                <img src="images/about/person (2).jpg" alt="Person">
                <h3>Alina Croso</h3>
                <p>Sales Executive</p>
            </div>
            <div class="personCard">
                <img src="images/about/person (1).jpg" alt="Person">
                <h3>Charls Babege</h3>
                <p>Admin Manager</p>
            </div>
            <div class="personCard">
                <img src="images/about/person (4).jpg" alt="Person">
                <h3>Jhone Nikolla</h3>
                <p>Marketing Executive</p>
            </div>
            
            
        </div>
    </main>


       <footer>
        <div class="footer wrap">
            <div class="footerItem">
                <a href="index.html"><img src="images/logo-03.png" alt=""></a>
                <a href="mailto:shehanmaleesha4884@gmail.com">shehanmaleesha4884@gmail.com</a>
                <a href="tel:0729763093">0729763093</a>
                <p>494/4/A, <br>PalahelaWatta, <br>Kalagedihena</p>
            </div>
            <div class="footerItem">
                <a href="index.html">Home</a>
                <a href="about.html">About</a>
                <a href="contact.html">Contact</a>
                <a href="privacy.html">Privacy Policy</a>
            </div>
            <div class="footerItem">
                <p><b>Subscribe for news letter </b></p>
                    <div class="subscribeinput">
                        <input type="email" placeholder="Email here">
                        <a id="subscribe" href="#">subscribe</a> </div>
                        <div class="socialLinks">
                            <div class="blue iconHolder">
                            <i class="fa-brands fa-facebook-f fa-sm white"></i></div>
                            <div class="darkgreen iconHolder">
                            <i class="fa-brands fa-whatsapp fa-sm white"></i></div>
                            <div class="red iconHolder">
                            <i class="fa-brands fa-youtube fa-sm white"></i></div>
                            <div class="lightblue iconHolder">
                            <i class="fa-brands fa-linkedin fa-sm white"></i></div>
                            <div class="lightblue iconHolder">
                            <i class="fa-brands fa-twitter fa-sm white"></i></div>
                        </div>
                   
            </div>
        </div>
    
    
    </footer>
    <div class=" final font2">
        <p>Designed by <a href="#">Shehan</a> as a sample website</p>
    </div>
    </body>
<!-- =====================================   C S S    S T A R T E D   ============================= -->
    <!-- Team area styles -->
    <style>
        .team img{
            width: 100%;
        }
        .team h1{
            padding-top: 25px;
            font-size: 6vmin;
            color: var(--brown);
        }
        .team p{
            display: block;
            font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            color: var(--brownHover);
            padding-bottom: 20px;
            font-size: 3vmin;
        }

        .whoWeAre{ justify-content: space-between;}
        @media (max-width:1200px) {
            .whoWeAre{ justify-content: center;
           }
            
        }
        .personCard img{
            max-width:290px;
        }
        .personCard h3 {font-family: var(--font2);
        padding-top: 7px;}
        .personCard p{font-family: var(--font2);
        padding-bottom: 7px;}
        .personCard{ padding-top: 5vmin; margin: 0 5px;}
    </style>
    <!-- Nav bar content -->
    <style>
        .navContent{
            display: flex;
            justify-content: space-between;
            align-items: center;
            
        }
        .navContent a {
            height: 40px;
            margin: 10px 0 10px 10px;
        }
        .navContent a img{
            height: 40px;
        }

        .navItems a{
            color: white;
            margin-right: 20px;
            font-weight: 500;
        }
        .navItems a:hover{
           color: var(--link-Hover-Blue)
        }

        .burgerButton , .mobileNav{
            display: none;
        }

        .mobileNavDisplay{
            display: flex;
            flex-direction:column;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 100vw;
        }
      
        #close{
            position: absolute;
            top: 20px;
            left: 20px;
            background-color: antiquewhite;
            border: 1px solid black;
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
        }


        @media (max-width:600px) {
            .navItems{
            display: none;}
            .burgerButton{
                display: inline-block;
                font-variation-settings:
                'FILL' 0,
                'wght' 400,
                'GRAD' 0,
                'opsz' 24;
            color: white;
            padding-right: 20px;
            } 

            .mobileNav{
                background-color: aliceblue;
                color: black;
                height: 100vh;
                width: 100vh;
                position: absolute;
                top: 0;
                z-index: 2;
            }

            .mobileNav a{
                width: 100%;
                text-align: center;
                font-weight: 500;
                text-decoration: none;
                font-size: 20px;
                padding:10px 0 10px 0;
                font: var(--font2);
            }
            .mobileNav a:hover{
                background-color: var(--brownHoverLight)
            }

        
        }
        
    </style>
    <!-- final area -->
    <style>
        .final{
            background-color: rgb(49, 49, 49);
           
        }
        .final p{
            padding: 10px;
            text-align: center;
            font-weight: 500;
            color: white;
        }
        .final a{
            color: rgb(158, 210, 255);
        }
        .final a:hover{
            color: var(--link-Hover-Blue);
        }
    </style>
    <!-- footer -->
    <style>
        footer{
            background-color: var(--brown);
        }
        .footer{
            display: flex;
            flex-wrap: wrap;
        }
        .footerItem{
            height: 250px;
            flex-grow: 1;
            min-width: 300px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 20px;
            color: white;
    
        }
        .footerItem a, .footerItem p{
            padding-top: 10px;
            font-family:Arial, Helvetica, sans-serif;
            text-decoration: none;
            color: white;
            text-align: center;
        }
        .footerItem a:hover{
           color: var(--link-Hover-Blue);
        }
        .socialLinks{
            margin-top: 20px;
            display: flex;
        }
        .footer input{
            background-color: var(--brown);
            border-radius: 15px;
            outline: none;
            padding: 3px 3px 3px 10px;
            border: 1px solid black;
            color: antiquewhite;

        }
        .footer input::placeholder{
           color: rgb(200, 172, 135);
           
        }
       
        .iconHolder{
            height: 30px;
            width: 30px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 10px;
            
        }
        #subscribe{
            background-color: green;
            display: inline-block;
            height: 30px;
            padding: 5px 10px 0 10px;
            border-radius: 20px;
        }
    </style>
    <!-- Landing  -->
    <style>
       
        .home{
            padding-top: 20px;
        }
        
        
        .text{
            padding-left: 20px;
            padding-right: 20px;
        }
        body{
            background-color: white;
        }

        nav{
            background-color: var(--brown);
            /* height: 50px; */
        }

        .mainButton{
            display: inline-block;
            padding-top: 5px;
            padding-bottom: 5px;
            width: 200px;
            /* border: 2px solid black; */
            border-radius: 15px;
            text-align: center;
            text-decoration: none;
            font-weight: 700;
            margin-top:10px ;
            background-color: var(--brown);
            color: white;
        }
        .mainButton:hover{
            background-color: var(--brownHover);
        }

       
    </style>
    <!-- Common -->
    <style>
        html{
            scroll-behavior:initial;
        }
       .linka a{
            text-decoration: none;
            font-weight: 400;
        }
        :root{
            --brown : rgb(133, 127, 15);
            --brownHoverLight : rgb(223, 219, 128);
            --brownHover : rgb(177, 169, 15);
            --link-Hover-Blue:rgb(44, 152, 246);
            --font2: "Rubik", sans-serif;
        }
        .blue{
            background-color: blue;
        }
        .darkgreen{
            background-color: rgb(76, 106, 11);
        }
        .red{
            background-color: rgb(255, 0, 0);
        }
        .lightblue{
            background-color: rgb(0, 158, 207);
        }
      
         .check{
            border: 1px solid red;
        }
        .font1 {
            font-family: "Oswald", sans-serif;
            font-optical-sizing: auto;
            font-style: normal;
        }
        .size40{
            font-size: 40px;
        }
        .font2{
           
            font-family:var(--font2);
            font-optical-sizing: auto;
            font-style: normal;
        }

        .wrap{
            max-width: 1200px;
            margin: auto;
        }
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .flex{
            display: flex;
        }
        .center{
            align-items: center;
            justify-content: center;
        }
        .centerFont{
            text-align: center;
        }
        .spaceB{
            justify-content: space-between;
        }
        .wrap-flex{
            flex-wrap: wrap;
        }

        .subHeader{
            padding-top: 20px;
        }
        .column{
            flex-direction: column;
        }
        
        @media (max-width: 620px){
            .landingBanner{
                display: none;
            }
        }
    </style>


<!-- ===================================================SCRIPT======================================== -->


<script>
    var menuButton = document.getElementById("menuButton");
    var mobileNav = document.getElementById("mobileNav");
    var mobileNavItems = document.getElementsByClassName("mobileNavItem");
    var close = document.getElementById("close");


    Array.from(mobileNavItems).forEach(element => {
    element.addEventListener('click', () => {
        mobileNav.classList.remove("mobileNavDisplay");
        });
    });


    menuButton.addEventListener('click', (e)=>{
        console.log("clicked on menu...")
        mobileNav.classList.toggle("mobileNavDisplay");
    })

    close.addEventListener('click', (e)=>{
        mobileNav.classList.remove("mobileNavDisplay");
    })
</script>
</html>