okrika.com/index.html at master · mubaraq-debug/okrika.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Okrika || Home of Quality Shirts</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="./mdi/css/materialdesignicons.min.css">

</head>
<body>
    <section class="section_one">
        <nav class="navbar">
            <h1>OKRIKA<small>.com</small></h1>

            <i class="mdi mdi-menu" id="barIcon"></i>

            <ul class="nav-list">
                <li id="nav-item"> <a href="#">Home</a> </li>
                <li id="nav-item"> <a href="#category">Categories</a> </li>
                <li id="nav-item"> <a href="#testimony">Testimonials</a> </li>
                <li id="nav-item"> <a href="#subscribe">Subscribe To Our Mail</a> </li>
            </ul>
        </nav>

        <div class="showcase_area">

            <div class="image_section">
                 <img src="./assets/woman.png" alt="woman" id="woman">

            </div>


            <div class="display_text">
                <h1>Your Favorite Plug For Used Clothes.</h1>
                <button id="btn">SHOP NOW</button>
            </div>
        </div>
    </section>

    <section class="section_two" id="category">
        <h2>CATEGORIES</h2>

        <div class="advert_section">

            <div id="shirt">
                <img src="./assets/shirt.png" alt="shirt" id="st">
                <br>
                <figcaption><a href="#">Shirts and Tees</a></figcaption>
            </div>

            <div id="trouser">
                <img src="./assets/trouser.png" alt="pants" id="st">
                <br>
                <figcaption><a href="#">Trousers</a></figcaption>
            </div>

            <div id="caps">
                <img src="./assets/cap.png" alt="cap" id="st">
                <br>
                <figcaption><a href="#">Caps</a></figcaption>
            </div>
        </div>
    </section>

    <section class="testimonial_section" id="testimony">
        <h2>Testimonials</h2>

        <div class="customer_testimonials">
            <div class="first_test">
                <img src="./assets/customerone.png" alt="man">
                <h4>Juan D. Tuten</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Rhoncus arcu senectus volutpat bibendum neque laore</p>
            </div>

            <div class="second_test">
                <img src="./assets/customertwo.png" alt="wman">
                <h4>Leila Santos A.</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Rhoncus arcu senectus volutpat bibendum neque laore</p>
            </div>

            <div class="third_test">
                <img src="./assets/customerthree.png" alt="man">
                <h4>Leon O'Neill</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Rhoncus arcu senectus volutpat bibendum neque laore</p>
            </div>
        </div>
    </section>

    <section class="video_section">
        <h2>Checkout Our Video</h2>
        <div class="video_box">
            <video src="./assets/thrift.mp4" controls></video>
        </div>
    </section>

    <section class="mail_section" id="subscribe">
        <h2>Subscribe To Our Mailing List</h2>
        <input type="email" name="sub" id="email_list" placeholder="Your email address...">
        <br>
        <button type="submit" id="email-btn" autocomplete=".com">Subscribe</button>
    </section>

    <footer>
        <p id="copyright"> <span class="mdi mdi-copyright"></span> Mubaraq Oyebisi 2022</p>
        <div class="socials">
            <a href="#"> <span class="mdi mdi-twitter" style="color: #1D9BF0; font-size: 35px;"><span><a>
            <a href="#"><span class="mdi mdi-facebook" style="color: #0165E1; font-size: 35px;"></span></a>
            <a href="#"><span class="mdi mdi-linkedin" style="color: #3f729b; font-size: 35px;"></span></a>

        </div>
    </footer>

    <script src="./main.js"></script>
</body>
</html>