-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
127 lines (109 loc) · 5.91 KB
/
index.html
File metadata and controls
127 lines (109 loc) · 5.91 KB
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
119
120
121
122
123
124
125
126
127
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Andre's Camera Shop</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="./css/styles.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--import jcarousel-->
<script type="text/javascript" src="./scripts/jquery.jcarousel.js"></script>
<!--import fancybox-->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.1/dist/fancybox/fancybox.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.1/dist/fancybox/fancybox.css" />
<!--import axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--import custom script-->
<script type="text/javascript" src="./scripts/camerashop.js"></script>
</head>
<body>
<!-- top nav bar -->
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4">
<div class="container-fluid">
<!-- Top Left Link -->
<a class="navbar-brand" href="#" onClick="javascript:activateLink('home');return false;">
<img class="logo" src="./images/logo.webp" alt="aperture logo"> Andre's Camera Shop
</a>
<!-- do not delete or modify the next 3 lines (button)-->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<!-- START NAV LINKS -->
<li class="nav-item">
<a class="nav-link home active" href="#" onClick="javascript:activateLink('home');return false;">Home</a>
</li>
<li class="nav-item about">
<a class="nav-link about" href="#" onClick="javascript:activateLink('about');return false;">About</a>
</li>
<li class="nav-item contact">
<a class="nav-link contact" href="#" onClick="javascript:activateLink('contact');return false;">Contact</a>
</li>
<!-- END NAV LINKS -->
</ul>
<!-- <form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>-->
</div>
</div>
</nav>
<main class="container">
<!--home page-->
<div class="page home active">
<!--slider-->
<div class="jcarousel-wrapper">
<div class="jcarousel w-100"><div>
<img src="./images/image1.jpg" alt="Slider image 1" />
<img src="./images/image2.jpg" alt="Slider image 2" />
<img src="./images/image3.jpg" alt="Slider image 3" />
<img src="./images/image4.jpg" alt="Slider image 4" />
<img src="./images/image5.jpg" alt="Slider image 5" />
<img src="./images/image6.jpg" alt="Slider image 6" />
<img src="./images/image7.jpg" alt="Slider image 7" />
<img src="./images/image8.jpg" alt="Slider image 8" />
<img src="./images/image9.jpg" alt="Slider image 9" />
<img src="./images/image10.jpg" alt="Slider image 10" />
</div></div>
<a href="#" class="jcarousel-control-prev">‹</a>
<a href="#" class="jcarousel-control-next">›</a>
</div><br>
<!--products-->
<div class="row g-2" id="products"></div>
</div>
<!--about page-->
<div class="page about">
<h1>About us</h1>
<div>
<img src="./images/logo.webp" alt="logo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<!--contact page-->
<div class="page contact">
<h1>Contact us</h1>
<form method="post" action="javascript:sendMessage();">
<!--email-->
<div class="form-group mt-1">
<label for="email">Email address</label><small class="form-text d-none"> <sup>*required</sup></small>
<input type="text" class="form-control" id="email" placeholder="jdoe@mail.com">
</div>
<div class="form-group mt-1">
<label for="subject">Subject line</label><small class="form-text d-none"> <sup>*required</sup></small>
<input type="text" class="form-control" id="subject" placeholder="RE:Hello/Goodbye">
</div>
<div class="form-group mt-1">
<label for="message">Message</label><small class="form-text d-none"> <sup>*required</sup></small>
<textarea class="form-control" id="message" rows="6" placeholder="Enter some text here."></textarea>
</div>
<button class="btn btn-primary w-100 mt-3 disabled" type="submit" id="send">Send</button>
</form>
</div>
<br>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>