-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
184 lines (180 loc) · 11.2 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
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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<link rel="stylesheet" href="style.css">
<title>Internet For All</title>
</head>
<body>
<!-- floating background image -->
<div class="floating-background-image">
<img src="img/dash.jpg" alt="background">
</div>
<!-- header -->
<header class="header">
<nav class="nav container">
<a href="./index.html" class="logo">Internet For All</a>
<div class="nav-mobile">
<ul class="list">
<li class="list-item">
<a href="./index.html" class="list-link current">Home</a>
</li>
<li class="list-item">
<a href="./index.html" class="list-link">Our Impact</a>
</li>
<li class="list-item">
<a href="./index.html" class="list-link">Company</a>
</li>
<li class="list-item dropdown">
<button class="list-link dropdown-btn place-items-center">Get Involved <i class="fa-solid fa-angle-right"></i></button>
<ul class="list dropdown-menu">
<li class="list-item">
<a href="./index.html" class="list-link">Volunteering</a>
</li>
<li class="list-item">
<a href="./index.html" class="list-link">Corporate Partnerships</a>
</li>
<li class="list-item">
<a href="./index.html" class="list-link">Fundraise</a>
</li>
</ul>
</li>
</ul>
<button class="icon-btn menu-toggle-btn menu-toggle-close place-items-center">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="align-right">
<button class="icon-btn menu-toggle-btn menu-toggle-open place-items-center">
<i class="fa-solid fa-bars"></i>
</button>
<button class="icon-btn theme-toggle-btn place-items-center">
<i class="fa-solid fa-sun theme-light-icon"></i>
<i class="fa-solid fa-moon theme-dark-icon"></i>
</button>
<button class="icon-btn place-items-center">
<i class="fa-solid fa-user"></i>
</button>
</div>
</nav>
</header>
<!-- hero -->
<section class="welcome-message">
<div class="container">
<h2 class="title independent-title">Creating Confidence in the Connected World</h2>
<div class="card">
<header class="card-header">
<small>Make the most of the internet</small>
<h2 class="title">Getting started on the internet
</h2>
</header>
<div class="card-body d-grid">
<div class="card-image">
<img src="img/internet.png" alt="internet secure image">
</div>
<div class="card-information">
<h1 class="title main-title">New on the internet? Let's learn how to take advantage of what the intenrnet has to offer in a <span>SECURE</span> way!</h1>
<p class="card-description">You might be surprised at how much you're able to do on the internet. You can connect with friends and family, carry out tasks like shopping and banking, and access services such as the GP surgery and the local council. The internet can also be a great source of entertainment and education.</p>
</div>
</div>
</div>
</div>
</section>
<!--main content / Left Column -->
<section class="management-area">
<div class="management-area-container container d-grid">
<div class="card">
<header class="card-header">
<h2 class="title">Resources for other related topics</h2>
<small>Access frequently visited places quicker</small>
</header>
<div class="card-body">
<a href="#" class="card-body-link">
<i class="fa-solid fa-tv"></i>Watching TV and Movies online
</a>
<a href="#" class="card-body-link">
<i class="fa-solid fa-radio"></i>Listening to Radio and Music online
</a>
<a href="#" class="card-body-link">
<i class="fa-regular fa-newspaper"></i>News online
</a>
<a href="#" class="card-body-link">
<i class="fa-regular fa-hashtag"></i>Social networking and blogs
</a>
<a href="#" class="card-body-link">
<i class="fa-solid fa-user-doctor"></i>Doctors Appointment and Prescriptions online
</a>
<a href="#" class="card-body-link">
<i class="fa-solid fa-plane-departure"></i>Plan trips
</a>
<a href="#" class="card-body-link">
<i class="fa-solid fa-graduation-cap"></i>Learn something new
</a>
</div>
</div>
<!-- main content / right group -->
<div class="card-group d-grid">
<div class="card border-green">
<div>
<h2 class="title"><i class="fa-solid fa-envelope"></i> Email Account</h2>
<p class="card-description">One of the first things you should do online is set up an email (electronic mail) account. It's a free and easy way to stay in touch with family and friends, and it's the main way that organisations and companies will communicate with you.<br><br>
Goods can be delivered directly to your house (usually for a small fee), or you can also use a service called 'click and collect', where you order online but collect items in store, or even from a local convenience store or newsagents.</p>
<a href="#" class="read-more">Find out more about setting up an email account and making the most of email.</a>
</div>
<button class="list-link group-link">Upgrade now</button>
</div>
<div class="card border-yellow">
<div>
<h2 class="title"><i class="fa-solid fa-cart-shopping"></i> How to shop online?</h2>
<p class="card-description">Shopping online is quick and convenient and can be done from home. You can shop online from most major supermarkets and high street shops, as well as smaller independent shops.<br><br>
Goods can be delivered directly to your house (usually for a small fee), or you can also use a service called 'click and collect', where you order online but collect items in store, or even from a local convenience store or newsagents.</p>
<a href="#" class="read-more">Read our information about online shopping safely and securely.</a>
</div>
<button class="list-link group-link">Upgrade now</button>
</div>
<div class="card border-orange">
<div>
<h2 class="title"><i class="fa-solid fa-piggy-bank"></i> How to bank online?</h2>
<p class="card-description">Using online banking means you can keep control of your finances from home or whilst you're out and about, using your bank's website or smartphone app. With most banks, you can use online banking to check your balance any time of day or night, transfer money between your bank accounts, send money to people you know and more.</p>
<a href="#" class="read-more">Read our information to find out how to access online banking, and keep your money and identity secure.</a>
</div>
<button class="list-link group-link">Upgrade now</button>
</div>
<div class="card border-pink">
<div>
<h2 class="title"><i class="fa-solid fa-file-invoice-dollar"></i> Can I manage my household bills online?</h2>
<p class="card-description">Most utility companies or services like council tax allow you to manage your accounts online. You'll need to set up an account via their website with a username and password, and you may need additional information like your account number.<br><br>
If you manage your household bills or your banking online, you can opt for paperless billing. This means you'll get your bills over email, which not only saves paper but also means you know where your bills are stored.<br><br>
Direct debits give a company permission to take money from your account on a certain date, for example for paying your energy bills each month. The amount may differ each time, so companies need to tell you in advance how much they'll take and when. You might even get a discount by paying bills by direct debit. <br><br>
You can compare tariffs across a range of suppliers and find the best deal by using a price comparison website, such as uSwitch, Go Compare or Compare the Market.</p>
<a href="#" class="read-more">Read more about making payments online.</a>
</div>
<button class="list-link group-link">Upgrade now</button>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer class="footer">
<div class="footer-container container">
<span class="copyright-information">© 2022 Internet For All - Project. All rights reserved</span>
<ul class="list">
<li class="list-item">
<a href="#" class="list-link">Contact</a>
</li>
<li class="list-item">
<a href="#" class="list-link">Privacy policy</a>
</li>
<li class="list-item">
<a href="#" class="list-link">Terms and conditions</a>
</li>
</ul>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>