-
Notifications
You must be signed in to change notification settings - Fork 0
/
clothing.html
158 lines (144 loc) · 9.77 KB
/
clothing.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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cost Of Living Helper || Clothing</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nixie+One&family=Parisienne&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid text-center">
<!--Banner-->
<div id="banner" class="row">
<div class="col-3"><img class="w-75" src="./images/CoLlogo.png" alt="cost of living logo"/></div>
<div class="col-6"><h1 id="banner-text" class="display-1 mt-5">Clothing</h1></div>
<div class="col-3"><img class="w-75" src="./images/logophone.png" alt="call us logo"/></div>
</div>
<!--Navbar-->
<div class="row">
<nav class="navbar navbar-expand-lg ">
<div class="container-fluid" style="background-color: #dfd8d8">
<!-- <a class="navbar-brand"></a> -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="benefits.html">Benefits</a></li>
<li class="nav-item"><a class="nav-link" href="calculator.html">Calculator</a></li>
<li class="nav-item"><a class="nav-link" href="charities.html">Charities</a></li>
<li class="nav-item"><a class="nav-link" href="clothing.html">Clothing</a></li>
<li class="nav-item"><a class="nav-link" href="education.html">Education</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Food
</a>
<ul class="dropdown-menu" style="background-color: #dfd8d8">
<li><a class="dropdown-item dropdown-style" href="buying.html">Buying food</a></li>
<li><a class="dropdown-item dropdown-style" href="making.html">Making food</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="health.html">Health</a></li>
<li class="nav-item"><a class="nav-link" href="kids.html">Kids</a></li>
<li class="nav-item"><a class="nav-link" href="money.html">Make money</a></li>
<li class="nav-item"><a class="nav-link" href="pets.html">Pets</a></li>
<li class="nav-item"><a class="nav-link" href="travel.html">Travel</a></li>
<li class="nav-item"><a class="nav-link" href="utilities.html">Utilities</a></li>
</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" onClick="searchFunction()">Search</button>
</form>
</div>
</div>
</nav>
</div>
<!--Main body-->
<div class="row pt-5 main-body mb-2">
<div class="cols-sm-6 col-md-4 main-body">
<img class="w-75 img-fluid" src="./images/clothing.png" alt="clothing graphic"/>
<!--carousel of tips-->
<div id="tipsCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active main-body">
<div class="rounded border border-dark p-3 m-2">
<h3>Clothing Tip 1:</h3>
<p class="fs-5">Have you ever considered having indoor and outdoor clothes? Save your more expensive clothing
for when you are going out somewhere special or even just popping to the shops. Have clothes specifically for
wearing when at home that you can wear for longer. T-shirt have a stain, hole or is just looking a bit threadbare?
Keep it as an indoor t-shirt rather than getting rid of it.</p></div>
</div>
<div class="carousel-item main-body">
<div class="rounded border border-dark p-3 m-2">
<h3>Clothing Tip 2:</h3>
<p class="fs-5">See whether the retailer has any kind of special offers avaialble. Sometimes
signing up to their newsletter can save you 10% on your order! Some shops offer loyalty cards that will also save you money either by having special discounts or by saving up points every time you shop.</p>
</div>
</div>
<div class="carousel-item main-body">
<div class="rounded border border-dark p-3 m-2">
<h3>Clothing Tip 3:</h3>
<p class="fs-5">Look for a discount voucher, type into your search engine the name of the shop you want to by from and the words voucher code. So for example
"Joules voucher code". Alternatively install the browser extension <a class="link-success link-underline-success" href="https://www.joinhoney.com/" target="blank">honey</a> which will automatically detect and apply discounts for you.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#tipsCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#tipsCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="col-sm-6 col-md-8 main-body">
<p class="main-body fs-4">Money is tight right now, there will always be a need for new clothing. You don't always have to buy new from a
shop though! There are many pre-loved online sites as well as bricks and mortar shops. Check out your local high street
to see what charity shops there are and have a browse, you may find a bargain with the added bonus of helping a worthy cause. </p>
<p class="main-body fs-4 pt-4">Some online shops that sell pre-loved clothing include;
</p>
<div class="row main-body">
<div class="col-4 main-body"><a href="https://www.ebay.co.uk" target="blank"><img src="./images/ebay.png" class="w-75" alt="ebay logo"/></a></div>
<div class="col-4 main-body"><a href="https://www.vinted.co.uk" target="blank"><img src="./images/vinted.png" class="w-75" alt="vinted logo"/></a></div>
<div class="col-4 main-body"><a href="https://www.depop.com " target="blank"><img src="./images/depop.png" class="w-75" alt="depop logo"/></a></div>
</div>
<p class="main-body fs-4">You can also find brand new clothing for a very low cost from what are called fast-fashion retailers.*</p>
<div class="row main-body">
<div class="col-4 main-body"><a href="https://www.shein.co.uk" target="blank"><img src="./images/shein.png" class="w-75" alt="shein logo"/></a></div>
<div class="col-4 main-body"><a href="https://www.primark.com" target="blank"><img src="./images/primark.png" class="w-75" alt="primark logo"/></a></div>
<div class="col-4 main-body"><a href="https://uk.romwe.com" target="blank"><img src="./images/romwe.png" class="w-75" alt="romwe logo"/></a></div>
</div>
<p class="main-body">*These companies are well known for low cost clothing which is great for your wallet but it is not so great for the environment and there are many ethical and moral
issues when it comes to fast-fashion but we understand when you have next to nothing you sometimes have to compromise</p>
</div>
</div>
<!--carousel tips-->
<!--Footer-->
<div id="footer" class="row pt-2 text-center">
<div class="col-sm-5 col-md-4 float-start">
<p>Registered charity number 897564231</p>
<p>© Copyright Cost Of Living Helper <span id="year"></span></p>
</div>
<div class="col-sm-2 col-md-4">
<img src="./images/facebook.png" class="social-media img-fluid" alt="facebook logo"/>
<img src="./images/twitter.png" class="social-media img-fluid" alt="twitter logo"/>
<img src="./images/instagram.png" class="social-media img-fluid" alt="instagram logo"/>
</div>
<div class="col-sm-5 col-md-4 float-end">
<p>Tel: 01223 344 556</p>
<p>Email: help@colhelper.com</p>
</div>
</div>
</div>
<script src="main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
</body>
</html>