-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
150 lines (107 loc) · 8.66 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS- Cascading Style Sheet</title>
<style>
/* p{
color: teal;
font-size: 25px;
display: block;
text-align: justify;
} */
</style>
<link rel="stylesheet" href="style.css">
<!-- fonts link-->
<!--
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet"> -->
</head>
<body>
<h1>New Code Updated </h1>
<h1>Yay1 Amra css shikte shuru kore diyesi!</h1>
<!--Inline css/ Internal css / External css-->
<!-- Inline css Example-->
<h1 style="color: tomato; background-color: yellow">I am CZ Mahi web developer & Hiphop Artist</h1>
<!--Internal Css Example-->
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta ut delectus vitae quasi velit harum ipsum expedita nam culpa,
deserunt dicta inventore deleniti tempore, recusandae odit perferendis commodi unde dolorum?
</p>
<!-- External Css Example: Use color property Color Name -->
<h2>Hey I am video creator and Engineer</h2>
<span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro et, magni, totam consectetur minima dolor laboriosam,
reprehenderit iure assumenda fugiat inventore ab labore harum praesentium beatae consequuntur qui officia obcaecati.
</span>
<!-- Use Color Property : Hexa Code Color -->
<div>
<h1> Hexa Color Changinge .... </h1>
<h3>RGBA Color Code. I am software Engineer</h3>
</div>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa, ratione ipsum. Fugit quo labore dolorem nulla laudantium ex perspiciatis nemo, nam sint soluta quas temporibus beatae alias accusamus debitis cum!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa, ratione ipsum. Fugit quo labore dolorem nulla laudantium ex perspiciatis nemo, nam sint soluta quas temporibus beatae alias accusamus debitis cum!
</p>
<h5> Hey Bitch Iam your crush do you know that just feel if lol</h5>
<!-- CSS ID, Apply style to a specific element arttribut tag ---->
<h1 id="tempu1">I am damn bitch.....of H! copy of heading one</h1>
<!-- CSS Class , Apply style to multiple elements, ID vs Class -->
<h2 class="styleMultiple">i am he kii dd kormm L F kkdi </h2>
<p class="styleMultiple">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus, voluptatum fugiat!
Corporis sit accusamus assumenda libero praesentium magni quidem, saepe dolore, neque
reiciendis minima ipsam enim eius doloribus a placeat?Enim accusamus reprehenderit aperiam
explicabo incidunt! Id iste in, itaque repellendus, mollitia enim, expedita soluta minima magni
veritatis ut. Eligendi corrupti doloremque voluptate commodi magnam veritatis facilis explicabo
at necessitatibus.
</p>
<p class="styleMultiple newColor">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos, totam excepturi unde sit nam adipisci, laudantium asperiores corporis eius quae libero accusamus! Debitis sed, id repellendus optio quae illo porro.</p>
<!-- Style a group of elements, style small portion of text -->
<div class="parentDiv">
<h1> This Heaeding one content 1</h1>
<h2>This is Heading two Content 2 </h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum odio maxime, deleniti
doloremque minima aliquam <span class="spn1">Loremenskkkkkkk kdkdkdk</span>quisquam nam aut ipsam! Quis repudiandae rerum hic obcaecati
commodi <span class="spant"> This is highlit</span>consequuntur delectus consequatur nemo aperiam.</p>
</div>
<!-- Border, Border Radious , Margin, Different ways to set margin -->
<div class="box1">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique explicabo optio temporibus, inventore molestias consequuntur nihil dolor dicta ratione perspiciatis quos voluptatem facilis iure rem alias repellat eligendi nesciunt suscipit?
</div>
<!-- Padding, Different way's to set padding, CSS Box Model -->
<div class="box2">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur dolore accusamus praesentium nesciunt error earum maiores quibusdam corporis impedit molestiae tempore dicta nam esse ipsa voluptatibus magni, reprehenderit, nobis quos!
</div>
<!-- TEXT ALIGN, FLOAT, DISPLAY, INLINE, BLOCK, INLINE-BLOCK -->
<img class="img-float" src="img/bipartite.png" alt="">
<img class="img2-float"src="img/drive.jpg" alt="">
<!-- TEXT ALIGN, FLOAT, -->
<p class="text-align-test">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, consequuntur officiis quasi molestiae mollitia fugit. Cupiditate pariatur minima tenetur, repudiandae facere esse nihil mollitia, ipsam tempora numquam assumenda nostrum corrupti?
Ipsa labore facilis porro blanditiis enim! Doloribus ab culpa explicabo at reiciendis labore aliquid in, nostrum odio temporibus non expedita eaque sequi dolorem mollitia. Esse excepturi quo porro atque eligendi!
Officia doloremque quidem voluptatum dolorum mollitia aliquam neque fuga quo consequuntur expedita quasi, deleniti sed officiis, distinctio, enim soluta dolore necessitatibus placeat tempore minus. Nam harum quam dolores voluptatibus voluptatem?
Voluptatum facilis, perferendis debitis sunt voluptatem corrupti omnis dolores labore quisquam harum nobis cum esse consectetur itaque sapiente deserunt qui necessitatibus nisi saepe? Repellendus, nesciunt assumenda quaerat enim quibusdam sunt!
Velit quibusdam mollitia maiores odio? Iusto doloremque animi laborum ullam veniam voluptatum velit consequatur nobis ipsam, quibusdam vitae, tempore ex similique fuga natus magni magnam, recusandae vel nam et deserunt?
Doloribus, quis modi eaque vero, itaque temporibus quam vitae enim dolor ducimus debitis rerum cumque nostrum earum consequatur quae atque illum maxime, sit reiciendis quidem. Enim nemo eum optio blanditiis!
Laborum quibusdam nesciunt aut optio rem et libero, quisquam, rerum nihil ipsum consequatur corrupti molestias placeat ducimus itaque doloremque mollitia nisi porro similique exercitationem ex atque explicabo alias sapiente. Cumque.
Atque dicta corporis nemo non iusto soluta voluptas consequuntur vel tenetur vitae numquam quibusdam, ratione eligendi. Quod vitae recusandae temporibus eveniet explicabo dolor quam earum quia neque, nostrum, aliquid reiciendis.
Commodi et ex fuga earum, quidem harum voluptatem reprehenderit cum numquam magnam repellendus quibusdam dicta optio? Voluptas, dicta corporis. Assumenda exercitationem molestiae, at nesciunt reprehenderit suscipit consectetur omnis harum doloremque.
Corporis ad quisquam, blanditiis hic beatae iure debitis tenetur velit accusamus autem animi, officia modi nobis? Molestiae quas maxime perspiciatis culpa dolor sapiente, illum sint facilis quisquam eaque enim dolores.</p>
<!-- DISPLAY, INLINE, BLOCK, INLINE-BLOCK -->
<div class="boxx boxA">Box1</div>
<div class="boxx boxB">Box2</div>
<div class="boxx boxC">Box3</div>
<div class="boxx boxD">Box4</div>
<button class="btn1 btnA">developer</button>
<button class="btn1 btnB">Designer</button>
<button class="btn1 btnC">Hacker</button>
<button class="btn1 btnD">Programmer</button>
<p>
Lorem ipsum dolor sit amet <span class="a1">consectetur </span> adipisicing elit. Nisi id facere veniam non libero cumque, excepturi vitae ipsum perspiciatis ad hic consequuntur, earum eveniet ea ratione rem, amet iste repellat?Omnis vel debitis maiores ipsa rem eum quae numquam quia animi possimus minus pariatur tenetur dicta itaque aliquid, delectus modi doloremque cupiditate aut iusto sunt unde assumenda commodi neque? Distinctio.
</p>
<p>
Lorem ipsum dolor sit amet <span class="b1">consectetur </span> adipisicing elit. Nisi id facere veniam non libero cumque, excepturi vitae ipsum perspiciatis ad hic consequuntur, earum eveniet ea ratione rem, amet iste repellat?Omnis vel debitis maiores ipsa rem eum quae numquam quia animi possimus minus pariatur tenetur dicta itaque aliquid, delectus modi doloremque cupiditate aut iusto sunt unde assumenda commodi neque? Distinctio.
</p>
<p>
Lorem ipsum dolor sit amet <span class="c1">consectetur </span> adipisicing elit. Nisi id facere veniam non libero cumque, excepturi vitae ipsum perspiciatis ad hic consequuntur, earum eveniet ea ratione rem, amet iste repellat?Omnis vel debitis maiores ipsa rem eum quae numquam quia animi possimus minus pariatur tenetur dicta itaque aliquid, delectus modi doloremque cupiditate aut iusto sunt unde assumenda commodi neque? Distinctio.
</p>
</body>
</html>