-
Notifications
You must be signed in to change notification settings - Fork 0
/
csspage.html
261 lines (242 loc) · 14.6 KB
/
csspage.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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<title>WebElites - CSS</title>
</head>
<body>
<!-- navigation -->
<nav class="navbar navigation navbar-expand-lg w-75 m-auto navbar-light">
<div class="container-fluid">
<a class="navbar-brand fw-bolder fs-3 " href="index.html"><img src="logo2.png" height="80" /></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 w-100 " id="navbarSupportedContent">
<ul class="navbar-nav mb-2 w-100 justify-content-end mb-lg-0 ">
<li class="nav-item">
<a class="nav-link active hover text-white" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link hover text-white " href="about.html">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link hover text-white dropdown-toggle " href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Topics
</a>
<ul class="dropdown-menu " style="background:#0E2A47;" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item text-primary" href="htmlpage.html">HTML</a></li>
<li><a class="dropdown-item text-primary" href="csspage.html">CSS</a></li>
<li><a class="dropdown-item text-primary" href="jspage.html">Javascript</a></li>
<li><a class="dropdown-item text-primary" href="bootstrappage.html">Bootstrap</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link text-white hover" href="contact.html">Contact Us</a>
</li>
<li class="nav-item">
<a data-bs-toggle="modal" data-bs-target="#loginModal" class="nav-link text-white hover" href="" >Login</a>
</li>
<li class="nav-item">
<a data-bs-toggle="modal" data-bs-target="#SignupModal" class="nav-link text-white hover" href="" >Sign-up</a>
</li>
<!-- login modal -->
<div class="modal fade " id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content" style="background-color:#0E2A47;">
<div class="modal-header">
<h5 class="modal-title text-primary" id="loginModalLabel">Login to WebElites</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember Me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Signup Modal -->
<div class="modal fade" id="SignupModal" tabindex="-1" aria-labelledby="SignupModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="background-color:#0E2A47;">
<div class="modal-header">
<h5 class="modal-title text-primary" id="SignupModalLabel">Create Account On WebElites</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3">
<label for="cexampleInputPassword1" class="form-label">ConfirmPassword</label>
<input type="password" class="form-control" id="cexampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Create account</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-Primary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<main>
<div class="px-4 py-5 my-5 text-center w-100 csspic">
<div class="col-lg-6 mx-auto mt-3" >
<image src="cssicon.svg" alt="css icon" width="300" />
</div>
</div>
<div class="container-fluid" style="max-width:100%;min-height:70vh; background:#4A90E2;">
<div class="heading text-center px-md-3 pt-5 mx-auto border-bottom border-danger w-50">
<h1 class="fw-bolder display-4 mx-auto">CSS</h1>
</div>
<div class="content mx-auto p-md-1 p-1 " style="max-width:100%; margin:0 auto">
<div class="left col-8 mx-auto my-3 m-1"> <img src="./css.jpg" alt="" width="100%"> </div>
<div class="right fs-5 col-8 mx-auto p-1 mb-5">
If you currently have a website or plan to build a website, CSS is definitely a term that you’ve come across. But for those of you who don’t know how to code and don’t have any development experience, it can be a little confusing.<br><br>
Let me start with the basics.
<br><br>
<div class="definition bg-dark fs-5 p-2">
CSS stands for cascading style sheets. It’s a stylesheet language that describes the appearance or presentation of a website. Essentially, CSS tells web browsers how each element in an HTML document should be displayed.
</div>
<br><br>
Along with JavaScript and HTML, CSS is a crucial component to every web page on the Internet.
<br><br><br>
The main benefit of CSS is the ability to separate website content from the design elements, simply by changing rules in a CSS file.
<br><br>
Before CSS was used, nearly every attribute related to how HTML documents were displayed was written in HTML markup. This means that so many rules had to be repeated throughout the HTML code.
<br><br>
But CSS makes it possible for developers to move that information into a style sheet, which simplifies the HTML.
<br><br>
As a result, the HTML is shorter, lighter, and less prone to errors. It also makes your HTML much easier to maintain.
<br><br>
In this guide, I’ll give you some common use cases for CSS and show you my favorite ways to learn CSS online.
<br><br>
CSS common uses
There are lots of different ways to use CSS on your website. But I want to show you some of the more basic and common applications so you can get familiar with how CSS works.
<br><br>
Once you’re able to master these common principles and use cases, you’ll be able to tackle more complex CSS elements in the future.
<br><br>
Font styling
You can use CSS to create a font style. Write properties for elements like:
<br><br>
Font type
Color
Weight
Size
Alignment
Case
Line height
CSS can also be used to add effects like underlining and strikethroughs. Let me give you an example to show you how this works.<br><br>
You want the design to reflect the look and feel of your brand. You want to have the functionality required to meet the needs of your visitors without going over budget. And you want to create responsive layouts that display elements like buttons and forms consistently, no matter what device or browser the visitor is using.
<br><br>
<h1>Responsive web design with CSS</h1>
<br><br>
Today, we have hundreds, if not thousands, of different screens available on the market. This means that people who visit your website can be doing so from countless variations of devices, screen sizes, display sizes, and resolutions.
<br><br>
Having a full-size website with just one additional design for a smaller device is no longer an option. So you need to use CSS to create a responsive design.
<br><br>
In order for this to happen, there are certain principles that you need to follow to ensure that your CSS is responsive on any screen from any device.
<br><br>
Your entire layout and grid needs to be fluid. You need to make sure that images automatically resize to render aesthetically from any screen.
<br><br>
One of the most popular ways to tackle a responsive web design is with a mobile-first approach. This means that the design is made with the smallest screens in mind first, and then styles are added as the size gets larger. <br><br>
By building with Bootstrap, you can check that last item off your list. Bootstrap is an open-source framework for quickly building responsive websites and mobile-first web projects. Because it offers a collection of reusable code, you won’t have to build a site from scratch.
<br><br>
</div>
</div>
</div>
</main>
<!-- footer -->
<footer class="pt-4 p-md-5">
<div class="row">
<div class="col-6 col-md-2">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="index.html">Home</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="about.html">About Us</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="contact.html">Contact Us</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Support us</a></li> </div>
<div class="col-6 col-md-2">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.W3Schools.com">W3Schools</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.youtube.com">Youtube</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.html.com">HTML</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.tutorialspoint.com">Tutorials Point</a></li>
</ul>
</div>
<div class="col-6 col-md-3">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="about.html">Team</a></li>
</ul>
</div>
<div class="col-sm-8 col-md-5">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1839.0654296076443!2d86.13339449123092!3d22.79761453566654!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39f5e4e282a14223%3A0x32402bfcb5217629!2sAdityapur%20Auto%20Cluster!5e0!3m2!1sen!2sin!4v1630593067597!5m2!1sen!2sin" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy"></iframe></div>
</div>
<div class="container">
<div class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
</a>
<span class="text-muted">© 2021 WebElites, Inc</span>
</div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="text-muted" href="#"><img src="instagram.svg" height="30px" width="30px" alt="instagram"/></a></li>
<li class="ms-3"><a class="text-muted" href="#"><img src="facebook.svg" height="30px" width="30px" alt="instagram"/></a></li>
<li class="ms-3"><a class="text-muted" href="#"><img src="github.svg" height="30px" width="30px" alt="instagram"/></a></li>
</ul>
</div>
</div>
</footer>
<script src="scroll.js"></script>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>