cocacola-landing-page/index.html at main · giltwizy/cocacola-landing-page · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Cocacola Landing Page</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
        <link rel="stylesheet" href="./css/styles.css">
    </head>
    <body>
        <section>
            <div class="circle"></div>
            <header>
                <a href="./index.html"><img src="./img/logo.png" alt="logo image" class="logo"></a>
                <nav>
                    <ul class="navigation">
                        <li>
                            <a href="./index.html">Home</a>
                        </li>
                        <li>
                            <a href="#">Our Menu</a>
                        </li>
                        <li>
                            <a href="#">Whats New?</a>
                        </li>
                        <li>
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </nav>
            </header>
            <div class="content">
                <div class="text-box">
                    <h2>Taste the feeling</h2>
                    <p>The main leading distributer of Coca-Cola softdrinks across Tanzania,managing large scale to small scale retailers across every inch so as to sastify the thirst of our beloved customers.As we are celebrating 128 years of our success we are giving our many giveaways.Stay tune with us</p>
                    <a href="#">Learn More</a>
                </div>
                <div
                    class="image-box">
                    <!-- Swiper -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="./img/cocacola1.png" alt="Cocacola image 1"></div>
                            <div class="swiper-slide"><img src="./img/cocacola2.png" alt="Cocacola image 2"></div>
                            <div class="swiper-slide"><img src="./img/cocacola3.png" alt="Cocacola image 3"></div>
                            <div class="swiper-slide"><img src="./img/cocacola4.png" alt="Cocacola image 4"></div>
                            <div class="swiper-slide"><img src="./img/cocacola5.png" alt="Cocacola image 5"></div>
                            <div class="swiper-slide"><img src="./img/cocacola6.png" alt="Cocacola image 6"></div>
                        </div>

                    </div>
                </div>

            </div>
            <ul class="sci">
                <li>
                    <a href="https://facebook.com/giltwizy"><img src="./img/facebook.png" alt="Facebook logo"></a>
                </li>
                <li>
                    <a href="https://instagram.com/giltwizy"><img src="./img/instagram.png" alt="Instagram logo"></a>
                </li>
                <li>
                    <a href="https://twitter.com/giltwizy"><img src="./img/twitter.png" alt="Twitter logo"></a>
                </li>
            </ul>
        </section>

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

        <!-- Initialize Swiper -->
        <script>
            var swiper = new Swiper('.swiper-container', {
                effect: 'coverflow',
                grabCursor: true,
                centeredSlides: true,
                slidesPerView: 'auto',
                coverflowEffect: {
                    rotate: 50,
                    stretch: 0,
                    depth: 200,
                    modifier: 1,
                    slideShadows: true
                },
                pagination: {
                    el: '.swiper-pagination'
                },
                loop: true
            });
        </script>
    </body>
</html>