IXD/index.html at master · nosterud/IXD · 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
118
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./CSS/styles.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
    <title>SAS</title>
</head>
<body>

    <!--Header starts here -->
    <header class="header-section container-full">
        <div class="container">
            <div class="dropdown">
                <button class="btn dropdown" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </div>
            <img class="img-fluid icon-logo" src="./images/sas-white.png"/>
        </div>
        <div class="header-icons container">
            <img class="img-fluid icon-flag" src="./images/norway-flag.png"/>
            <img class="img-fluid icon-user" src="./images/user.png">
        </div>
    </header>
    <!--Header stops here -->

    <!-- Content starts here -->
    <!-- Input field -->
  <!--  <section id="booking-bar" class="container col-12 row">-->

    <div class="container">
        <div id="reicteArea">
          <div id="recite">
              here comes the recite
          </div>
          <img src="./images/bannerimg.png" class="img-fluid" />
        </div>
      <!--  <section id="booking-bar" class="container col-12 offset-1 row">
            <input class="border-left autoComplete" type="text" placeholder="Fra:"/>
            <input class="autoComplete" type="text" placeholder="Til:" />
            <input id="datepicker" type="text" placeholder="Dato:" />
            <input type="text" placeholder="Reisende"/>
            <input class="border-right" type="text" placeholder="Tillegstjenester:" />
        </section>-->
   <!-- END Input field -->
   <!-- Tabs section -->
        <section class="">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                <a class="nav-link disabled" href="#">Home</a>
                </li>
                <li class="nav-item">
                <a class="nav-link disabled" href="#">Sjekk inn</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">FAQ</a>
                </li>
                <li class="nav-item">
                <a class="nav-link active" href="#">Booking</a>
                </li>
            </ul>
    <!-- End Tabs section -->
    <!-- Progressbar -->
            <div class="wrapper">
                <h1 class="text-center">Progress Bar</h1>
               <ol class="ProgressBar">
                 <li class="ProgressBar-step">
                   <svg class="ProgressBar-icon"><use xlink:href="#checkmark-bold"/></svg>
                   <span class="ProgressBar-stepLabel">Destination</span>
                 </li>
                 <li class="ProgressBar-step">
                   <svg class="ProgressBar-icon"><use xlink:href="#checkmark-bold"/></svg>
                   <span class="ProgressBar-stepLabel">Date</span>
                 </li>
                 <li class="ProgressBar-step">
                   <svg class="ProgressBar-icon"><use xlink:href="#checkmark-bold"/></svg>
                   <span class="ProgressBar-stepLabel">Travelers</span>
                 </li>
                 <li class="ProgressBar-step">
                   <svg class="ProgressBar-icon"><use xlink:href="#checkmark-bold"/></svg>
                   <span class="ProgressBar-stepLabel">Extras</span>
                 </li>
               </ol>

               <p class="row">
                 <button class="btn btn-primary" id="previous">Previous</button>
                 <button class="btn btn-primary" id="advance">Advance</button>
               </p>

               <svg xmlns="http://www.w3.org/2000/svg">
                <symbol id="checkmark-bold" viewBox="0 0 24 24">
                  <path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/>
                </symbol>
              </svg>
    <!-- END Progressbar -->
        </section>
    </div>
    <!-- Content stops here -->

<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="./scripts/main.js"></script>
</body>
</html>