-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathWardrobeWizard.html
114 lines (107 loc) · 3.72 KB
/
WardrobeWizard.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wardrobe Wizard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
margin: 0;
padding: 0;
}
header {
padding: 20px;
background-color: #fff;
}
.hero {
text-align: center;
padding: 50px 0;
}
.how-it-works, .user-input, .recommendations {
padding: 30px 0;
}
.product-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
@media (max-width: 768px) {
.hero {
padding: 30px 0;
}
.how-it-works, .user-input, .recommendations {
padding: 20px 0;
}
}
</style>
</head>
<body>
<header class="container">
<h1><a href="#">Fashion Recommender</a></h1>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
</header>
<section class="hero container">
<h2>Find your perfect style</h2>
<p>Get personalized clothing recommendations tailored to your preferences.</p>
<button type="button" class="btn btn-primary" id="getStyledNow">Get Styled Now</button>
</section>
<section class="how-it-works container">
<h3>How it Works</h3>
<p>Wardrobe Wizard is here to simplify the shopping experience for users, provide them with relevant and inspiring fashion recommendations, and ultimately help them discover new styles that suit their individual tastes and preferences.</p>
</section>
<section class="user-input container">
<h3>Tell us about your style</h3>
<form>
<div class="mb-3">
<label for="preferences" class="form-label">Enter your preferences:</label>
<input type="text" class="form-control" id="preferences" placeholder="Enter your preferences">
</div>
<button type="submit" class="btn btn-primary">Get Recommendations</button>
</form>
</section>
<section class="recommendations container">
<h2>Your Recommended Outfits</h2>
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="product-card">
<!-- Example recommendation card -->
<img src="placeholder.jpg" alt="Product Image" class="img-fluid">
<h4>Stylish Summer Dress</h4>
<p>Effortlessly chic sundress with floral print and flowing silhouette that will please the eyes.</p>
<button class="btn btn-secondary">View Details</button>
</div>
</div>
</div>
</section>
<footer class="footer container">
<p>© 2024 WardrobeWizard</p>
</footer>
<script>
document.getElementById('getStyledNow').addEventListener('click', function() {
window.location.href = 'signup.html'; // Redirect to the sign-up page
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFOnpD lijXk8vDp7+JcNgzBYPtS4+BTjGtNyrWSpHDuxzWrLFOJwHvPQ" crossorigin="anonymous"></script>
</body>
</html>