Alpine/index.html at master · MrVinzi/Alpine · 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
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet"  href="css/style.css">

<link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick-theme.css"/>
    <title>Alpine</title>
</head>
<body>
    <div class="main-wrapper">
        <header>
            <ul class="header-menu">
                <li class="header-menu-logo">
                    <a class="header-menu-link logo" href="/mainpage.html">
                        alpine
                    </a>
                </li>
                <li class="header-menu-item">
                    <a class="header-menu-link" href="/aboutus.html">
                        about us
                    </a>

                        <ul class="header-menu-sublist">
                            <li> About US </li>
                            <li>offices</li>
                            <li>cases</li>
                            <li>recomendations</li>
                        </ul>
                </li>
                <li class="header-menu-item">
                    <a class="header-menu-link" href="/pricing.html">
                        pricing
                    </a>
                </li>
                <li class="header-menu-item">
                    <a class="header-menu-link" href="/mobile.html">
                        mobile
                    </a><!--empty line-->
                </li>
                <li class="header-menu-item">
                    <a class="header-menu-link" href="/blog.html">
                        Blog
                    </a><!--empty line-->
                </li>
            </ul>
        </header><!--empty line-->
        <div class="main">
            <div class="main-content">
                <h1 class="main-title"> alpine</h1>
                <h2 class="main-subtitle">
                    text text text
                </h2>
                <p class="main-info">
                    text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text
                </p>
                <form class="main-form" action="/verification.js">
                    <input class="email" placeholder="enter yr email" alt="enter your email"> <!--empty line-->
                    <button class="request-button">request access</button>
                </form>
               </div>
            <div class="main-banner">
                <div class="nav nav-left">
                    <button class="nav-button" onclick="clickPrev()">Previous</button>
                </div>
                <div class="nav nav-right">
                    <button class="nav-button" onclick="clickNext()">Next</button>
                </div>
                <ul id="banner_list" class="banner-list">
                    <li class="banner-item">
                        <img src="https://randomwordgenerator.com/img/picture-generator/sport-3365503_640.jpg">
                    </li>
                    <li class="banner-item">
                        <img src="https://randomwordgenerator.com/img/picture-generator/53e5dd464853ac14f1dc8460962e33791c3ad6e04e507749742d7cd0964fc2_640.jpg" alt="">
                    </li>
                    <li class="banner-item">
                        <img src="https://randomwordgenerator.com/img/picture-generator/5ee0d3454a56b10ff3d8992cc12c30771037dbf85257714d742d7ed5964b_640.jpg">
                    </li>
                    <li class="banner-item">
                        <img src="https://randomwordgenerator.com/img/picture-generator/black-coffee-1867753_640.jpg">
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="slick-slider">
        <div><img src="https://randomwordgenerator.com/img/picture-generator/53e5dd464853ac14f1dc8460962e33791c3ad6e04e507749742d7cd0964fc2_640.jpg" alt=""> </div>
        <div><img src="https://randomwordgenerator.com/img/picture-generator/5ee0d3454a56b10ff3d8992cc12c30771037dbf85257714d742d7ed5964b_640.jpg"></div>
        <div>your content</div>
    </div>

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.3.2.js"></script>
    <script type="text/javascript" src="node_modules/slick-carousel/slick/slick.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $('.slick-slider').slick({
                dots: true,
                infinite: true,
                speed: 300,
                slidesToShow: 1,
                adaptiveHeight: true
            });
        });

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