-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
259 lines (223 loc) · 8.47 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<style>/*
body{
background-color: aqua;
}*/
h3{
text-align: center;
color: rgb(29, 28, 28);
}
p{
color:goldenrod;
}
.para1{
color: red;
text-align: center;
}
p.para1{
color:brown;
}
#para2{
color: blue;
/* background-color: rgb(238, 148, 12); */
/* background-color: rgba(250, 42, 5, 0.5) */
background-color:rgba(255, 99, 71, 0.2);
border: 2px solid red;
}
/*
*{
text-align: end;
color: black;
}*/
div{
}
div#first{
background-color: green;
opacity: 0.1;
}
div#second{
background-color: green;
opacity:0.3;
}
div#third{
background-color: green;
opacity:0.6;
}
/* background image ki */
.bi{
background-image: url("papergif.jpg");
/* background-repeat: repeat-x; */
/* background-repeat: no-repeat; */
background-position: right ;
}
.tree{
background-image: url("tree.jpg");
background-repeat: no-repeat;
background-position: top right;
margin-right: 30px;
background-attachment: scroll;
}
p.dotted{
color:purple;
border-style: dotted;
}
p.dashed{
color:purple;
border-style: dashed;
border-width: thick;
}
p.solid{
color:purple;
border-style: solid;
border-width: 7px 10px 7px 10px;
}
p.dotted1{
border:2px solid brown;
border-radius: 5px;
}
p.dashed1{
border:2px solid brown;
border-radius: 10px;
}
p.solid1{
border:2px solid brown;
border-radius: 15px;
}
#margin{
border:2px solid blueviolet;
margin-top: 100px;
margin-right: 350px;
margin-bottom: 100px;
margin-left: 80px;
background-color: lightblue;
}
#margin{
border: 1px solid black;
margin: 25px 50px 35px 100px;
background-color: lightblue;
}
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
/* padding region? */
#padding{
padding: 25px 50px 75px 50px;
background-color: bisque;
}
.ex1{
width: 300px;
margin:10px 39px;
box-sizing: border-box;
background-color: yellow;
}
.ex2{
width: 300px;
padding: 25px;
margin: 10px 39px;
background-color: lightblue;
box-sizing: border-box;
}
.hewe{
height: 50px;
width:100%;
border: 1px solid #4CAF50;
}
#hewe2{
height: 70px;
width: 50%;
background-color: powderblue;
}
#image{
width:320px;
height:50px;
padding:10px;
border: 5px solid gray;
margin: 0;
}
</style>
<title>Document</title>
</head>
<body>
<h3> this is a h1 tag</h3>
<p class="para1"> i am para</p>
<p id="para2"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur magni cum,
porro voluptates quam odit placeat vel in alias debitis voluptatum nam provident mollitia qui
culpa minus at accusamus sed. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero dolore aspernatur, beatae est cumque sint reiciendis quidem ipsum laboriosam corporis, exercitationem alias accusantium quaerat magni et ex? Numquam, doloremque laboriosam!</p>
<h2 style="color: gold;text-align: center;background-color: rgba(68, 65, 64, 0.9); border: 2px solid red;"> i am h2 heading</h2>
<!-- These paragraphs will be red -->
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p style="background-color: lightskyblue">Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, nam! Ipsa quis quae, perspiciatis praesentium reiciendis natus. Voluptatum perspiciatis totam rem ipsa tempore dolorum.</p>
<div id="first">
<h2>opacity 0.1</h2>
</div>
<div id="second">
<h2>opacity 0.3</h2>
</div>
<div id="third">
<h2>opacity 0.6</h2>
</div>
<pre class="bi">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut quasi, at natus pariatur quod omnis autem saepe,
sint, perferendis nobis error unde ab harum. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum velit
obcaecati illo nihil, recusandae totam natus consequuntur officiis eius, porro omnis, quia odit magni! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Beatae alias, culpa, voluptate pariatur, accusantium aliquam sint ipsam excepturi eos a et fugit perspiciatis suscipit?</pre>
<div class="tree">
<h1>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).</p>
<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser window.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</div>
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
<!-- border region -->
<p class="dotted"> this is an dotted border this is an dotted border</p>
<p class="dashed"> this is an dashed border this is an dashed border</p>
<p class="solid"> this is an solid border this is an solid border</p>
<p class="dotted1"> this is an dotted border this is an dotted border</p>
<p class="dashed1"> this is an dashed border this is an dashed border</p>
<p class="solid1"> this is an solid border this is an solid border</p>
<h2>Using individual margin properties</h2>
<div id="margin">This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>
<!-- padding region -->
<div id="padding">
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.
</div>
</div>
<div class="ex1">This div is 300px wide.</div>
<br>
<div class="ex2">The width of this div is 350px, even though it is defined as 300px in the CSS.</div>
<!-- css heights and widths -->
<h2>CSS height and width properties</h2>
<div class="hewe">
<div>This div element has a height of 50 pixels and a width of 100%.
</div>
<br>
<h2>Set the height and width of an element</h2>
<div id="hewe2">
<div>This div element has a height of 200px and a width of 50%.</div>
</div>
<h2 style="color: red;"> calculate the flower width:</h2>
<img src="papergif.jpg" width="350" height="263" >
<div id="image">The picture above is 350px wide. The total width of this element is also 350px. The total height of this element is 80px.</div>
</body>
</html>