-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
72 lines (68 loc) · 2.92 KB
/
index.html
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
<!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>Explore Art Institute</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<nav>
<div class="nav-wrapper">
<a class="" id="nav-bar-text">Explore Artwork from the Art Institute of Chicago</a>
</div>
</nav>
<div class="row">
<div class="col s12 m4 l3">
<div class="row">
<div class="col s12">
<div class="card darken-1">
<div class="card-content black-text">
<span class="card-title">Search for Artwork!</span>
<input type="text" id="usersearch" class="required">
<button class="btn waves-effect waves-light" type="submit" name="action" id="search-button">Search
</button>
<a class='dropdown-trigger btn' href='#' data-target='historyBtns'>Previous Searches</a>
<ul id="historyBtns" class="dropdown-content"></ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card darken-1">
<div class="card-content black-text">
<span class="card-title">About Us!</span>
<p>Use the search bar above to look up an artist or a work of art. You will be guided to the image of the
artwork and information about the work. You can also click on any image in the carousel to see images similar to them.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col s12 m8 l9">
<div class="carousel carousel-slider center">
<div class="carousel-item" href="#one!">
<img src="./assets/images/artwork6.jpeg" alt="Rest on the Flight into Egypt">
</div>
<div class="carousel-item" href="#two!">
<img src="./assets/images/artwork5.jpeg" alt="Portrait of an Artist">
</div>
<div class="carousel-item" href="#three!">
<img src="./assets/images/artwork4.jpeg" alt="Picture of Dorian Gray">
</div>
<div class="carousel-item" href="#four!">
<img src="./assets/images/artwork 3.jpeg" alt="American Gothic">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="./assets/js/script.js"></script>
</body>
</html>