3 CORNERSTONE OF SUCCESS

By on

 

Basic but important things you need to do to have success in life:

-         Thankful and Grateful to God (TAG):

Try as much as possible to give alms to people in need, sharing with people based on what God has given you

-         Obeying and Trusting God (OAT)

-         Praying and Praising God (PAP)


case 1: simple navigation bar and webpage header with ul tag (non responsive)

output


code impl.

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- font  -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />

 

    <title>dmac portfolio</title>

 

    <style>

        :root{

            --primarycolor: #0076de;

            --white: #fff;

            --black: #333;

            --deepblack: #000;

            --grey: #f6f8fa;

            --labelcolor: #64b1f5;

            --yellow: #ffd723;

        }

        *{

            margin: 0; padding: 0;

            outline: none;

            font-family: sans-serif;

        }

        /* body{

            width: 100%;

            height: auto;

        } */

      

        /* make nav bar straight */

        .container{

            width: 100%;

            height: 100vh;

            background-image: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url(images/bkg3.jpg);

            background-position: center;

            background-size: cover;

            /* adjust space on the left and right on the webpage */

            padding-left: 8%;

            padding-right: 8%;

            box-sizing: border-box;

 

        }

        .navbar{

            height: 12%;

            display: flex;

            align-items: center;

        }

        /* change logo size */

        .logo{

            width: 50px;

            cursor: pointer;

        }

        /* hamburger icon */

        .menu-icon{

            width: 30px;

            cursor: pointer;

            margin-left: 40px;

        } 

        /* style nav links */

        nav{

            flex: 1;

            text-align: right;

 

        }

        nav ul li{

            list-style: none;

            display: inline-block;

            margin-left: 60px;

        }

        nav ul li a{

            text-decoration: none;

            color: #fff;

            font-size: 13px;

            text-transform: uppercase;

        }

 

        /* style row --container */

        .row{

            display: flex;

            height: 88%;

            align-items: center;

        }

        /* style left column */

        .col{

            /* resize the text into smaller box */

            flex-basis: 50%;

        }

        h1{

            color: var(--white);

            font-size: 100px;

        }

        p{

            color: var(--white);

            font-size: 12px;

            line-height: 15px;

            margin-top: 15px;           

        }

      

        button{

            width: 180px;

            color: var(--deepblack);

            font-size: 13px;

            padding: 12px 0;

            background: var(--white);

            border: 0;

            border-radius: 20px;

            outline: none;

            margin-top: 30px;

        }

        /* set the height and width for the card */

        .card{

            width: 200px;

            height: 230px;

            display: inline-block;

            border-radius: 12px;

            padding: 12px 15px;

            box-sizing: border-box;

            cursor: pointer;

            margin: 10px 15px;

            background-image: url(images/bkg2.jpg);

            background-position: center;

            background-size: cover;

            transition: transform .5s;

        }

        /* the extra card1 will help us make image for each information */

        .card1{

            background-image: url(images/bkg1.jpg);

        }

        .card2{

            background-image: url(images/bkg4.png);

        }

        .card3{

            background-image: url(images/bkg5.jpg);

        }

        .card4{

            background-image: url(images/bkg1.jpg);

        }

        .card:hover{

            transform: translateY(-10px);

        }

        h5{

            color: var(--primarycolor);

            text-shadow: 0 0 2px red;

            font-size: 16px;

        }

        .card p{

            text-shadow: 0 0 12px #000;

            font-size: 13px;

        }

 

 

    </style>

</head>

 

<body>

   

       <div class="container">

            <div class="navbar">

                <img src="images/location.png" alt="" class="logo">

                <nav>

                    <ul>

                        <li><a href="#home">home</a></li>

                        <li><a href="#services">services</a></li>

                        <li><a href="#about">about</a></li>

                        <li><a href="#contact">contact</a></li>

                    </ul>

                </nav>

                <img src="images/location.png" alt="" class="menu-icon">

            </div>

 

 

            <div class="row">

                <div class="col">

                    <h1>Tutoring</h1>

                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, distinctio consectetur! Earum rerum accusantium,

                        cum aliquam eos odio eius impedit quos praesentium, sit unde illo ipsa, atque reprehenderit voluptatibus error.</p>

                        <button type="button">Explore</button>

                </div>

 

                <div class="col">

 

                    <div class="card card1">

                        <h5>Mathematics</h5>

                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, distinctio consectetur! Earum rerum accusantium,

                            cum aliquam eos odio eius impedit quos praesentium, sit unde illo ipsa, atque reprehenderit voluptatibus error.</p>

                    </div>

 

                    <div class="card card2">

                        <h5>Further Mathematics</h5>

                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, distinctio consectetur! Earum rerum accusantium,

                            cum aliquam eos odio eius impedit quos praesentium, sit unde illo ipsa, atque reprehenderit voluptatibus error.</p>

                    </div>

 

                    <div class="card card3">

                        <h5>Machine Learning using Python</h5>

                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, distinctio consectetur! Earum rerum accusantium,

                            cum aliquam eos odio eius impedit quos praesentium, sit unde illo ipsa, atque reprehenderit voluptatibus error.</p>

                    </div>

 

                    <div class="card card4">

                        <h5>Web Design</h5>

                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, distinctio consectetur! Earum rerum accusantium,

                            cum aliquam eos odio eius impedit quos praesentium, sit unde illo ipsa, atque reprehenderit voluptatibus error.</p>

                    </div>

 

                </div>

            </div>           

       </div>

   

</body>

</html>

 

phase 1a: simple navigation bar without ul tag (preferred)

We will create color variables using root for the CSS

output



code 

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- font  -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />

 

    <title>dmac portfolio</title>

 

    <style>

        :root{

            --primarycolor: #0076de;

            --white: #fff;

            --black: #333;

            --grey: #f6f8fa;

            --labelcolor: #64b1f5;

            --yellow: #ffd723;

        }

        *{

            margin: 0; padding: 0;

            box-sizing: border-box;

            outline: none;

            font-family: sans-serif;

        }

        body{

            width: 100%;

            height: auto;

        }

      

        /* make nav bar straight */

        .navbar{

            width: 100%;

            height: 60px;

            display: flex;

            justify-content: space-between;

            position: fixed;

            top: 0; left: 0;

            padding: 1rem 2.5rem;

            z-index: 10;

            color: var(--white);

            background: var(--black);

        }

        .navbar-logo > a{

            letter-spacing: 2.5;

            text-decoration: none;

            color: var(--white)

        }

        .navbar-menu{

            width: 400px;

            display: flex;

            justify-content: space-between;

            margin: 5px 5px;

        }

        .navbar-menu > a{

            color: var(--white);

            text-decoration: none;

        }

        .menu-toggle{

            /* if we use display: block the nav bars will be at mniddle */

            display: none;

        }

        .menu-toggle .bar{

            width: 15px;

            height: 2px;

            margin: 3px auto;

            transition: all 0.3s ease-in-out;

            cursor: pointer;

        }    

    </style>

</head>

 

<body>

    <nav class="navbar">

        <h2 class="navbar-logo"><a href="#">DMAC</a></h2>

 

        <div class="navbar-menu">

            <a href="#home">home</a>

            <a href="#services">services</a>

            <a href="#about">about</a>

            <a href="#contact">contact</a>

            <a href="#">sign in</a>

        </div>

 

        <div class="menu-toggle">

            <span class="bar"></span>

            <span class="bar"></span>

            <span class="bar"></span>

        </div>

    </nav>

   

</body>

</html>

job portal replace
            <a href="#jobs">jobs</a>
            <a href="#companies">companies</a>
            <a href="#testimonials">testimonials</a>
            <a href="#blogs">blogs</a>
            <a href="#">sign in</a>


phase 1b: COMLETE CODE Responsive Job Portal (links on a single page)

output



SECTION: home
section: job listing
section: start job
section: featured companies
section: testimonials
section: career advice
section: footer

Using cdn
google search: swiper js 
visit: swiperjs.com
click get started
scroll to --use swiper from CDN
copy and paste the link tag within head tag
copy and paste the script tag within script tag

code implementation

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- font CDN  -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />


    <!-- swiper CDN -->

    <link rel="stylesheet" href="https://unpkg.com/swiper@10/swiper-bundle.min.js"/>


    <link rel="stylesheet" href="https://code.jquery.com/jquery-2.2.4.min.js">


    <title>dmac portfolio</title>


    <style>

        :root{

            --primarycolor: #0076de;

            --white: #fff;

            --black: #333;

            --grey: #f6f8fa;

            --labelcolor: #64b1f5;

            --yellow: #ffd723;

        }

        *{

            margin: 0; padding: 0;

            box-sizing: border-box;

            outline: none;

            font-family: sans-serif;

        }

        body{

            width: 100%;

            height: auto;

        }

       

        /* make nav bar straight */

        .navbar{

            width: 100%;

            height: 60px;

            display: flex;

            justify-content: space-between;

            position: fixed;

            top: 0; left: 0;

            padding: 1rem 2.5rem;

            z-index: 10;

            color: var(--white);

            /* background: var(--black); */

            background: transparent;

        }

        .navbar-logo > a{

            letter-spacing: 2.5;

            text-decoration: none;

            color: var(--white)

        }

        .navbar-menu{

            width: 400px;

            display: flex;

            justify-content: space-between;

            margin: 5px 5px;

        }

        .navbar-menu > a{

            /* color: var(--primarycolor); */

            color: var(--white);

            text-decoration: none;

            /* background: var(--white); */

            border-radius: 20%;

            text-transform: uppercase;

        }

        .navbar-menu .signin{

            color: var(--yellow);

        }

        .menu-toggle{

            /* if we use display: block -- the nav bars will be at mniddle */

            display: none;

        }

        .menu-toggle .bar{

            width: 15px;

            height: 2px;

            margin: 3px auto;

            transition: all 0.3s ease-in-out;

            cursor: pointer;

        }


        /* header style */

        

        h1{

            line-height: 1.5;

        }

        header{

            width: 100%; height: 80%;

            /* background-image: url(images/bkg3.jpg); */

            background-image: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url(images/bkg3.jpg);

            background-repeat: no-repeat;

            background-position: center;

            background-size: cover;

            position: relative;

        }

        .header-title{

            position: absolute;

            top: 7rem; left: 3rem;

            letter-spacing: 3;

            font-weight: bolder;

            font-size: 52px;

            color: var(--white);

            text-shadow: 4px 2px 0px rgba(0,0,0,0.2);

        }

        .header-title > span{

            color: var(--primarycolor);

        }


        /* search bar style */

        .search-wrapper{

            width: 60%;

            margin: auto;

            min-width: 300px;

            height: 3.5rem;

            position: relative ;

        }

        .search-box{

            width: 100%;

            position: absolute;

            background-color: var(--grey);

            box-shadow: rgba(2,11,20,0.3) 0px 5px 15px;

            top: -45%;

            width: 100%; height: 100%;

        }

        .search-card{

            display: flex;

            justify-content: space-between;

            height: 100%;

            padding: 0.5rem;

        }

        .search-input{

            width: 100%; height: 100%;

            border: none;

            padding: 0.5rem;

        }

        .search-button{

            width: 200px;

            background: var(--primarycolor);

            border: none;

            color: var(--white);

            cursor: pointer;

        }


        /* style filter*/

        .filter-box{

            width: 100%;

            height: auto;

            font-size: .8rem;

            width: 60%;

            min-width: 300px;

            margin: auto;

        }

        .filter-dropdown{

            width: 100%;

            border-bottom: 1px solid var(--labelcolor);

            display: flex;

            justify-content: flex-start;

            flex-wrap: wrap;

            gap: .3rem;

        }

        .filter-select{

            border: none;

            padding: .2rem

        }

        .filter-select:hover{

            background: var(--grey);

        }

        .filter-chosen{

            width: 100%;

            padding: .3rem;

            display: flex;

            flex-wrap: wrap;

            gap: .5rem;

        }

        .chosen-card{

            background: var(--primarycolor);

            padding: .2rem .5rem;

            border-radius: 20px;

            color: var(--white);

            cursor: pointer;

        }


        /* style section of job list */

        .job-list{

            margin: 5%;

            padding: 1rem;

            background-color: var(--grey);            

        }

        .job-card{

            display: flex;

            justify-content: space-between;

            padding: 1rem;

            margin: 1rem;

            min-height: 100px;

            align-items: center;

            background-color: var(--white);

            box-shadow: rgba(0,0,0,.15) 0px 1px 4px;

            cursor: pointer;

        }

        .job-card:hover{

            box-shadow: rgba(0,0,0,.1) 0px 4px 12px;            

        }

        .job-name{

            display: flex;

        }

        .job-profile{

            width: 60px;

            height: 60px;

            margin: .5rem;

        }

        .job-detail{

            padding: 0 10px;

        }

        .job-detail > h4{

            color: var(--primarycolor);

            font-size: .9rem;

        }

        .job-detail > p{

            display: -webkit-box;

            overflow: hidden;

            -webkit-line-clamp: 2;

            -webkit-box-orient: vertical;

        }

        .job-label{

            display: flex;

            flex-wrap: wrap;            

        }

        .job-label > a{

            padding: 0 1rem;

            margin: .2rem;

            color: var(--white);

            text-decoration: none;

            border-radius: 20px;

            font-size: .8rem;

        }

        .label-a{

            background-color: var(--yellow);

        }

        .label-b{

            background-color: var(--primarycolor);

        }

        .label-c{

            background-color: var(--black);

        }

        .job-posted{

            font-size: .8rem;

        }

        .job-more{

            display: block;

            padding: .3rem 2rem;

            margin: 20px auto;

            width: 250px;

            background-color: transparent;

            color: var(--primarycolor);

            border: 1px solid var(--primarycolor);

            border-radius: 20px;

            cursor: pointer;

        }

        .job-more:hover{

            background-color: var(--primarycolor);

            color: var(--white);

        }


        /* style join */

        .join{

            width: 100%;

            height: 350px;

            background-image: url(images/bkg5.jpg);

            background-position: center;

            background-repeat: no-repeat;

            background-size: cover;

            color: var(--white);

            display: flex;

            flex-wrap: wrap;

            justify-content: space-between;

            padding: 1rem 3rem;

            align-items: center;

            position: relative;

        }

        .join::before{

            content: "";

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: linear-gradient(180deg, rgba(0,85,177,.6) 0%, rgba(0,122,255,.5)100%);

            background: linear-gradient(180deg, rgba(0,122,255,.65) 0%, transparent 100%);

            z-index: 1;

        }

        .join-detail{

            min-width: 280px;

            width: 50%;

            z-index: 2;

            margin-bottom: 1rem;

        }

        .join-detail > h1{

            font-size: 36px;

            letter-spacing: 2;

        }

        .join-button{

            width: 200px;

            padding: 1rem;

            border: none;

            color: var(--black);

            background-color: var(--grey);

            box-shadow: rgba(0,0,0,.35) opx 5px 15px;

            z-index: 2;

            cursor: pointer;

        }

        .join-button:hover{

            background: transparent;

            border: 2px solid var(--yellow);

            color: var(--primarycolor);

        }


        /* style featured */

        .featured{

            width: 100%;

            height: auto;

            text-align: center;

            padding: 5rem 1rem;

            background-color: var(--grey);            

        }

        .section-title{

            margin-bottom: .5rem;

            letter-spacing: 1.5;

            font-size: 36px;

        }

        .featured-wrapper{

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

            gap: 2rem;

            align-items: center;

            width: 100%;

            padding: 2% 10%;

        }

        .featured-card{

            display: flex;

            flex-direction: column;

            align-items: center;

            padding: 1rem;

            background-color: var(--white);

            box-shadow: rega(0,0,0,.16) 0px 1px 4px;

        }

        .featured-card:hover{

            box-shadow: rgba(100,100,111,.2) 0px 7px 29px 0px;

        }

        .featured-image{

            height: 30px;

            margin-bottom: .2rem;

        }

        .featured-button{

            border: 1px solid var(--primarycolor);

            background-color: transparent;

            margin-top: .5rem;

            padding: 3px 10px;

            cursor: pointer;

            color: var(--primarycolor);

        }

        .featured-button:hover{

            background-color: var(--primarycolor);

            color: var(--white);

        }


        /* style testimonial */

        .testimonial{

            width: 100%;

            text-align: center;

            padding: 5rem 1rem;

            background-color: var(--primarycolor);

            color: var(--white);

        }

        .swiper{

            width: 80%; height: 400px;

            margin-top: 2rem;

        }



        /* by dmac */

        .swiper-wrapper{

            /* background: green; */

            display: flex;

            flex-direction: row;         

        }




        .swiper-slide{

            background: var(--white);

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            padding: 2rem 1rem;

            box-shadow: rgba(50,50,93,.25) 0px 13px 27px -5px, rgba(0,0,0,.3) 0px 8px 16px -8px;

            color: var(--black);

        }

        .swiper-slide i{

            font-size: 40px;

            color: var(--yellow);

            margin-bottom: 1rem;

        }


        .swiper-slide h3{

            font-family: sans-serif;

        }

        .testimonial-pic{

            padding: 1rem;

        }

        .testimonial-pic img{

            display: block;

            margin: 1rem auto;

            width: 50px; height: 50px;

            object-fit: cover;

            border-radius: 50%;

        }


        /* style blog */

        .blog{

            width: 100%; height: auto;

            text-align: center;

            padding: 5rem 1rem;

        }

        .blog-wrapper{

            display: flex;

            flex-wrap: wrap;

            justify-content: center;

            width: 100%;

            padding: 1rem;

        }

        .blog-card{

            width: 300px; height: auto;

            margin: 1rem;

            box-shadow: 0 1px 6px 0 rgba(49 53 59 / 12%);

            cursor: pointer;

        }

        .blog-card:hover{

            box-shadow: rgba(100,100,111,.2) 0px 7px 27px 0px;

        }

        .blog-image{

            width: 100%; height: 150px;

            object-fit: cover;

        }

        .blog-detail{

            padding: 20px;

        }

        .blog-detail span{

            color: var(--yellow);

            font-size: .7rem;

        }

        .blog-detail h4{

            padding: 10px 0;

        }

        .divider{

            margin: 1rem 0;

            border: .5px solid var(--grey);

        }

        .blog-more{

            color: var(--primarycolor);

            text-decoration: none;

            font-size: .9rem;

        }


        /* style footer */

        footer{

            width: 100%;

            display: flex;

            flex-wrap: wrap;

            justify-content: space-between;

            align-items: flex-start;

            background: var(--primarycolor);

            color: var(--white);

            padding: 3rem;

        }

        .footer-wrapper{

            display: flex;

            flex-direction: column;

            padding: .5rem;

            justify-content: flex-start;

            align-items: flex-start;

        }

        .footer-wrapper h3,

        .footer-wrapper h4{

            line-height: 3;

            color: var(--yellow);            

        }

        .footer-wrapper p{

            max-width: 400px;

            line-height: 1.5;

        }

        .social-media{

            margin-top:  1rem;

        }

        .social-media a{

            text-decoration: none;

            color: var(--grey);

            margin-right: 10px;

        }

        .footer-wrapper a{

            text-decoration: none;

            color: var(--grey);

            line-height: 2;

        }

        .footer-wrapper a:hover{

            text-decoration: underline;

        }


        /* got this from stack overflow for hamburger icon */

        .bar {

            display: block;

            width: 25px;

            height: 3px;

            margin: 5px auto;

            -webkit-transition: all 0.3s ease-in-out;

            transition: all 0.3s ease-in-out;

            background-color: var(--white);

        }


        /* media query for mobile screen */

        @media screen and (max-width: 600px){

            .menu-toggle,

            .bar{

                display: block;

                /* z-index: 3; */

            }

            .menu-toggle.is-active .bar:nth-child(2){

                opacity: 0;

            }

            .menu-toggle.is-active .bar:nth-child(1){

                transform: translateY(5px) rotate(45deg);

            }

            .menu-toggle.is-active .bar:nth-child(3){

                transform: translateY(-5px) rotate(-45deg);

            }

            .navbar-menu{

                flex-direction: column;

                position: absolute;

                top: 0; bottom: 0;

                width: 70%;

                height: 100vh;

                text-align: center;

                background-color: var(--black);

                display: none;

                padding: 5rem;

            }

            .navbar-menu.active {

                display: flex;

            }

            .navbar-menu a{

                color: var(--white);

                padding: 1.5rem;

            }

            .header-title{

                font-size: 30px;

            }

        }




    </style>

</head>


<body>

    <!-- navigation menu bar starts -->

    <nav class="navbar">

        <h2 class="navbar-logo"><a href="#">DMAC</a></h2>


        <div class="navbar-menu">

            <a href="#jobs">jobs</a>

            <a href="#companies">companies</a>

            <a href="#testimonial">testimonial</a>

            <a href="#blog">blogs</a>

            <a href="#" class="signin">sign in</a>

        </div>


        <div class="menu-toggle">

            <span class="bar"></span>

            <span class="bar"></span>

            <span class="bar"></span>

        </div>

    </nav>


    <!-- header starts -->

    <header>

        <h1 class="header-title">

            FIND YOUR <br> <span>PERFECT JOB</span> <br> WITH EASE

        </h1>

    </header>


    <!-- search start -->

    <div class="search-wrapper">

        <div class="search-box">

            <div class="search-card">

                <input type="text" placeholder="job title or keywords" class="search-input">

                <button class="search-button">Search</button>

            </div>

        </div>

    </div>


    <!-- filter box start -->

    <div class="filter-box">

        <div class="filter-dropdown">            

            <select name="job-level" id="job-level" class="filter-select" name="job-level">

                <option value="">job level</option>

                <option value="">entry</option>

                <option value="">mid senior</option>

                <option value="">director</option>

            </select>


            <select name="" id="job-function" class="filter-select" name="job-function">

                <option value="">job function</option>

                <option value="">IT</option>

                <option value="">management</option>

                <option value="">education</option>

            </select>


            <select name="" id="employment" class="filter-select" name="employment">

                <option value="">employment type</option>

                <option value="">internship</option>

                <option value="">part time</option>

                <option value="">full time</option>

            </select>


            <select name="" id="location" class="filter-select" name="location">

                <option value="">locations</option>

                <option value="">remote</option>

                <option value="">ghana</option>

                <option value="">south africa</option>

            </select>


            <select name="" id="education" class="filter-select" name="education">

                <option value="">education</option>

                <option value="">high school</option>

                <option value="">bachelor's degree</option>

                <option value="">master's degree</option>

            </select>

        </div>        


        <div class="filter-chosen">

            <div class="chosen-card">

                Remote <i class="fas fa-times-circle"></i>

            </div>


            <div class="chosen-card">

                full time <i class="fas fa-times-circle"></i>

            </div>


            <div class="chosen-card">

                financial tech <i class="fas fa-times-circle"></i>

            </div>


            <div class="chosen-card">

                entry level <i class="fas fa-times-circle"></i>

            </div>

        </div>

    </div>


    <!-- link job listing starts -->

    <section class="job-list" id="jobs">


        <div class="job-card">

            <div class="job-name">

                <img src="images/location.png" alt="" class="job-profile">

                <div class="job-detail">

                    <h4>toyota</h4>

                    <h3>electrical engineer</h3>

                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima, quibusdam quas itaque tempore et 

                        necessitatibus consequuntur doloremque modi rem, natus quae praesentium ea perspiciatis quaerat dolore voluptates, ipsam repudiandae nobis.</p>

                </div>

            </div>

            <div class="job-label">

                <a href="#" class="label-a">HTML</a>

                <a href="#" class="label-b">CSS</a>

                <a href="#" class="label-c">JAVASCRIPT</a>

            </div>


            <div class="job-posted">

                Posted 2 mins ago

            </div>

        </div>


        <div class="job-card">

            <div class="job-name">

                <img src="images/location.png" alt="" class="job-profile">

                <div class="job-detail">

                    <h4>amazon</h4>

                    <h3>business developer</h3>

                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima, quibusdam quas itaque tempore et 

                        necessitatibus consequuntur doloremque modi rem, natus quae praesentium ea perspiciatis quaerat dolore voluptates, ipsam repudiandae nobis.</p>

                </div>

            </div>

            <div class="job-label">

                <a href="#" class="label-a">HTML</a>

                <a href="#" class="label-b">CSS</a>

                <a href="#" class="label-c">JAVASCRIPT</a>

            </div>


            <div class="job-posted">

                Posted 2 mins ago

            </div>

        </div>


        <div class="job-card">

            <div class="job-name">

                <img src="images/location.png" alt="" class="job-profile">

                <div class="job-detail">

                    <h4>instagram</h4>

                    <h3>digital marketer</h3>

                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima, quibusdam quas itaque tempore et 

                        necessitatibus consequuntur doloremque modi rem, natus quae praesentium ea perspiciatis quaerat dolore voluptates, ipsam repudiandae nobis.</p>

                </div>

            </div>

            <div class="job-label">

                <a href="#" class="label-a">HTML</a>

                <a href="#" class="label-b">CSS</a>

                <a href="#" class="label-c">JAVASCRIPT</a>

            </div>


            <div class="job-posted">

                Posted 2 mins ago

            </div>

        </div>


        <div class="job-card">

            <div class="job-name">

                <img src="images/location.png" alt="" class="job-profile">

                <div class="job-detail">

                    <h4>youtube</h4>

                    <h3>UX/UI designer</h3>

                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima, quibusdam quas itaque tempore et 

                        necessitatibus consequuntur doloremque modi rem, natus quae praesentium ea perspiciatis quaerat dolore voluptates, ipsam repudiandae nobis.</p>

                </div>

            </div>

            <div class="job-label">

                <a href="#" class="label-a">HTML</a>

                <a href="#" class="label-b">CSS</a>

                <a href="#" class="label-c">JAVASCRIPT</a>

            </div>


            <div class="job-posted">

                Posted 30 mins ago

            </div>

        </div>


        <div class="job-card">

            <div class="job-name">

                <img src="images/location.png" alt="" class="job-profile">

                <div class="job-detail">

                    <h4>tiktok</h4>

                    <h3>software engineer</h3>

                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima, quibusdam quas itaque tempore et 

                        necessitatibus consequuntur doloremque modi rem, natus quae praesentium ea perspiciatis quaerat dolore voluptates, ipsam repudiandae nobis.</p>

                </div>

            </div>

            <div class="job-label">

                <a href="#" class="label-a">HTML</a>

                <a href="#" class="label-b">CSS</a>

                <a href="#" class="label-c">JAVASCRIPT</a>

            </div>


            <div class="job-posted">

                Posted an hour ago

            </div>

        </div>


        <button class="job-more">More List</button>

    </section>


    <!-- join starts -->

    <section class="join">

        <div class="join-detail">

            <h1 class="section-title">START YOUR NEW JOB WITH US</h1>

            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima, quibusdam quas itaque tempore et 

                necessitatibus consequuntur doloremque modi rem, natus quae praesentium ea perspiciatis quaerat dolore voluptates, ipsam repudiandae nobis.</p>

        </div>

        <button class="join-button">Join Now</button>

    </section>


    <!-- link featured company starts -->

    <section class="featured" id="companies">

        <h1 class="section-title">Featured Companies</h1>

            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima, quibusdam quas itaque tempore et 

                necessitatibus consequuntur doloremque modi rem, natus quae praesentium ea perspiciatis quaerat dolore voluptates, ipsam repudiandae nobis.</p>    

            <div class="featured-wrapper">


                <div class="featured-card">

                    <img src="images/location.png" alt="" class="featured-image">

                    <p>toyota</p>

                    <button class="featured-button">View 2 jobs</button>

                </div>


                <div class="featured-card">

                    <img src="images/location.png" alt="" class="featured-image">

                    <p>amazon</p>

                    <button class="featured-button">View 3 jobs</button>

                </div>


                <div class="featured-card">

                    <img src="images/location.png" alt="" class="featured-image">

                    <p>instagram</p>

                    <button class="featured-button">View 1 jobs</button>

                </div>


                <div class="featured-card">

                    <img src="images/location.png" alt="" class="featured-image">

                    <p>youtube</p>

                    <button class="featured-button">View 8 jobs</button>

                </div>


                <div class="featured-card">

                    <img src="images/location.png" alt="" class="featured-image">

                    <p>tiktok</p>

                    <button class="featured-button">View 13 jobs</button>

                </div>


                <div class="featured-card">

                    <img src="images/location.png" alt="" class="featured-image">

                    <p>whatsapp</p>

                    <button class="featured-button">View 13 jobs</button>

                </div>






                <div class="featured-card">

                    <img src="images/location.png" alt="" class="featured-image">

                    <p>youtube</p>

                    <button class="featured-button">View 8 jobs</button>

                </div>


                <div class="featured-card">

                    <img src="images/location.png" alt="" class="featured-image">

                    <p>tiktok</p>

                    <button class="featured-button">View 13 jobs</button>

                </div>


                <div class="featured-card">

                    <img src="images/location.png" alt="" class="featured-image">

                    <p>whatsapp</p>

                    <button class="featured-button">View 13 jobs</button>

                </div>



            </div>

    </section>


    <!-- link testimonials start -->

    <section class="testimonial" id="testimonial">

        <h1 class="section-title">Testimonials</h1>

        <p>Let's see what our clients say about us</p>

        <div class="swiper myswiper">

            <div class="swiper-wrapper">


                <div class="swiper-slide">

                    <i class="fas fa-quote-left"></i>

                    <h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima, quibusdam quas itaque tempore et 

                        necessitatibus consequuntur doloremque modi rem, natus quae praesentium ea perspiciatis quaerat dolore voluptates, ipsam repudiandae nobis.</h3>

                    <div class="testimonial-pic">

                        <img src="images/bkg2.jpg" alt="">

                        <p>Bayo Akorede</p>

                        <span>School Consultant</span>

                    </div>

                </div>


                <div class="swiper-slide">

                    <i class="fas fa-quote-left"></i>

                    <h3>type some text here</h3>

                    <div class="testimonial-pic">

                        <img src="images/location.png" alt="">

                        <p>Martin Remi</p>

                        <span>Photographer</span>

                    </div>

                </div>


                <div class="swiper-slide">

                    <i class="fas fa-quote-left"></i>

                    <h3>type some text here</h3>

                    <div class="testimonial-pic">

                        <img src="images/location.png" alt="">

                        <p>Agboola Biodun</p>

                        <span>Computer Engineer</span>

                    </div>

                </div>


            </div>


            <div class="swiper-pagination"></div>


        </div>

    </section>


    <!-- link blog start -->

    <section class="blog" id="blog">

        <h1 class="section-title">Career Advice</h1>

        <p>Learn more career tips from our company as a JOB RECRUITER</p>

        <div class="blog-wrapper">

            <div class="blog-card">

                <img src="images/bkg4.png" alt="" class="blog-image">

                <div class="blog-detail">

                    <span>20 August 2023</span>

                    <h4>How to enjoy your work</h4>

                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima, quibusdam quas itaque tempore et 

                        necessitatibus consequuntur doloremque modi rem, natus quae praesentium ea perspiciatis quaerat dolore voluptates, ipsam repudiandae nobis.</p>

                    <hr class="divider">

                    <a href="#" class="blog-more">Read more</a>

                </div>

            </div>


            <div class="blog-card">

                <img src="images/bkg4.png" alt="" class="blog-image">

                <div class="blog-detail">

                    <span>16 June 2023</span>

                    <h4>Tips for technical interview</h4>

                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima, quibusdam quas itaque tempore et 

                        necessitatibus consequuntur doloremque modi rem, natus quae praesentium ea perspiciatis quaerat dolore voluptates, ipsam repudiandae nobis.</p>

                    <hr class="divider">

                    <a href="#" class="blog-more">Read more</a>

                </div>

            </div>


            <div class="blog-card">

                <img src="images/bkg4.png" alt="" class="blog-image">

                <div class="blog-detail">

                    <span>20 August 2023</span>

                    <h4>Managing time effectively</h4>

                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima, quibusdam quas itaque tempore et 

                        necessitatibus consequuntur doloremque modi rem, natus quae praesentium ea perspiciatis quaerat dolore voluptates, ipsam repudiandae nobis.</p>

                    <hr class="divider">

                    <a href="#" class="blog-more">Read more</a>

                </div>

            </div>

        </div>

    </section>


    <!-- footer start -->

    <footer>

        <div class="footer-wrapper">

            <h3>DMAC</h3>

            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima, quibusdam quas itaque tempore et 

                necessitatibus consequuntur doloremque modi rem, natus quae praesentium ea perspiciatis quaerat dolore voluptates, ipsam repudiandae nobis.</p>

            <div class="social-media">

                <a href="#"><i class="fab fa-facebook-f"></i></a>

                <a href="#"><i class="fab fa-twitter"></i></a>

                <a href="#"><i class="fab fa-linkedin-in"></i></a>

                <a href="#"><i class="fab fa-youtube"></i></a>

            </div>

        </div>


        <div class="footer-wrapper">

            <h4>Explore</h4>

            <a href="#">Top Companies</a>

            <a href="#">Terms of Services</a>

            <a href="#">Careers</a>

            <a href="#">Podcast</a>

        </div>


        <div class="footer-wrapper">

            <h4>About</h4>

            <a href="#">FAQ</a>

            <a href="#">Get Inspired</a>

            <a href="#">Blog</a>

        </div>


        <div class="footer-wrapper">

            <h4>Support</h4>

            <a href="#">Customer Service</a>

            <a href="#">Trust & Safety</a>

            <a href="#">Partnership</a>

        </div>


        <div class="footer-wrapper">

            <h4>Community</h4>

            <a href="#">Community</a>

            <a href="#">Invite a Friend</a>

            <a href="#">Event</a>

        </div>

    </footer>



    <!-- script section -->

    <!-- <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script> -->

    <script src="https://unpkg.com/swiper@10/swiper-bundle.min.js"></script>

    <!-- <script src="jquery-3.6.4.min.js"></script> -->

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

    

    <!-- <script src="scriptjob.js"> </script> -->


    <script>

           //swiper to move testimonial cards

   var swiper = new Swiper(".myswiper",

   {

       loop:true,

       autoplay:{

           delay: 2500,

           disableOnInteraction: false,

       },

       slidesPerView: 1,

       spaceBetween: 10,

       pagination:{

           el: ".swiper-pagination",

           clickable: true,

       },

       breakpoints:{

           640:{

               slidesPerView: 2,

               spaceBetween: 20,

           },

           768:{

               slidesPerView: 3,

               spaceBetween: 40,

           },

           1024:{

               slidesPerView: 3,

               spaceBetween: 50,

           }

       }

   })



//    change navbar background color from transparent 

//to black when user scroll up or down


$(document).ready(function(){

    $(window).scroll(function(){

        var scroll = $(window).scrollTop();

        if(scroll>150){

            $(".navbar").css("background", "#222");

            $(".navbar").css("box-shadow", "rgba(0,0,0,.1) 0px 4px 12px");

        }

        else{

            $(".navbar").css("background", "transparent");

            $(".navbar").css("box-shadow", "none");

        }

    })

});



//smooth scroll instead of fast jumping scroll

var navbarheight = $(".navbar").outerHeight();

$(".navbar-menu a").click(function(e){

    var targethref = $(this).attr("href");

    $("html, body").animate({

        scrollTop: $(targethref).offset().top - navbarheight

    }, 1000)

    e.preventDefault();

});



// navbar mobile version

const mobile = document.querySelector(".menu-toggle");

const mobilelink = document.querySelector(".navbar-menu");


mobile.addEventListener("click", function(){

    //this reference the css style in   media query

    mobile.classList.toggle("is-active");

    mobilelink.classList.toggle("active");

})


mobilelink.addEventListener("click", function(){

    const menubars = document.querySelector(".is-active");

    if(window.innerWidth <=768 && menubars){

        mobile.classList.toggle("is-active");

        mobilelink.classList.remove("active");

    }

})


    </script>



</body>

</html>

 


NEXT

Comments

Post a Comment

Popular posts from this blog

Basic Web Page - phase 1

By on
Objective: -learn how to set up browser and editor for coding (to view window on both sides, let first window be active, hold down window key + right or left arrow) -learn the basic structure of html -learn structure of project files -learn tags like h1-h6, p, a, img, ul, ol, hr, br -learn css selectors class (dot), id (hash symbol) NB: At least, one of your project files must have index.html -to go on multiple pages, create the file name for index.html, services.html, about.html, contact.html -paste the same code of index.html into other files, then edit the content you want it to have Basic structure of HTML < !DOCTYPE  html > < html > < head > < title > Page Title < /title > < /head > < body > < h1 > My First Heading < /h1 > < p > My first paragraph. < /p > < /body > < /html >  <html>     <head> <title> Intro to Web Design</title> <!--<link rel="stylesheet" href=&quo
Read more
By on
Image
   DATA STRUCTURE WITH C++ PROGRAMMING USING VECTOR An array is of fixed size, C++ doesn't have inbuilt function to add elements to or delete element from an array (Except you use cin and declare variable to store elements to be added to the end (rear) of the existing elements), and array cannot handle data dynamically. Vector comes into the picture to solve the deficiency of array. A vector is a dynamic array that can change in size during runtime, hence vector  has dynamic/heap memory allocation and handles memory management. You need to add the header file of a vector to your program: #include<vector> Vector operations The following are the basic functions we can perform on a vector: add, access, change and remove elements Vector Inbuilt functions  The following are functions that can be used to perform several operations on a vector which are obtained from C++ STL (Standard Template Library) front() returns the first element of the vector back() returns the last element o
Read more
By on
Image
 CGPA CALCULATOR & BASIC HTML WEB DEV PROJECT Introduction: In this cgpa calculator, user will enter the gp for each semester, then click on the submit button to see the cgpa user can also click the reset button to begin a new input for calculation In this mini project we will be using HTML CSS JAVASCRIPT to develop a cgpa calculator NB:   With a querySelector statement, you can select an element based on a CSS selector. This means you can select elements by ID, class, or any other type of selector. Using the getElementById method, you can only select an element by its ID. Generally, you should opt for the selector that most clearly gets the job done. PHASE 1a:  PROTOTYPE (final product) PHASE 1b:  PROTOTYPE (rought sketch) Let's sketch with our hand how the cgpa calculator will look like PHASE 2: Html (for structuring the webpage content) Shortcut for div and class for css: type dot followed by the name you want e.g .cgpatitle Shortcut for div and id for css: type ha
Read more