Skip to content

CSS #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hafizabushra997 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

CSS #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bf55491
Add files via upload
hafizabushra997 Dec 28, 2022
559d402
Files added till navigation
hafizabushra997 Dec 31, 2022
0f5e9ec
Till tut26
hafizabushra997 Feb 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions 1 Html/tut10.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Ids and classes in HTML</title>
</head>
<body>
<h3>Ids and classes tutorial</h3>
<div id="mainBox" class="redBg blackBorder">this is mainbox</div>
<span class="redBg"></span>
<!-- Select and press ctrl + / to comment -->
<!-- Emmet -->
<!-- . is for class and # is for id -->
<span class="redBg"></span>
<span id="mainSpan"></span>
<div class="redBg blackBorder anotherClass"></div>

<!-- Emmet takes div tag as default, it means .blackBackground print below line -->
<div class="blackBackground"></div>

<!-- Creating multiple elements using Emmet -->
<!-- span.myClass.myClass2.myClass3*4 + <Tab> to print 4 similar elements using Emmet -->
<span class="myClass myClass2 myClass3">First</span>
<span class="myClass myClass2 myClass3">Second</span>
<span class="myClass myClass2 myClass3">Third</span>
<span class="myClass myClass2 myClass3">Fourth</span>
</body>
</html>
25 changes: 25 additions & 0 deletions 1 Html/tut11.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML Entities</title>
</head>
<body>
<div class="container">
<p>This is a paragraph</p>
</div>
<div class="container">
<p>This is another &nbsp; paragraph with two spaces</p>
<!-- Write &lt;p&gt; for typing this <p> -->
<p><p>Paragraph is written like this &lt;p&gt; </p>

<p>Pound £ is written like this &pound; </p>
<p>Copyright © is written like this &copy; </p>
<p>Another character ⇛ is written like this &rAarr; </p>
<p>Another character is ¼ written like this &frac14; </p>
<p>Empty character is written like this ​ &#8203;</p>
</div>
</body>
</html>
28 changes: 28 additions & 0 deletions 1 Html/tut12.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>HTML Semantic Tags</title>
</head>

<body>
<h3>Semantic Elements</h3>
<details>
<summary>
I have keys but no doors. I have space but no room. You can enter but
can’t leave. What am I? A keyboard. A keyboard. A keyboard. A keyboard.
A keyboard. A keyboard. A keyboard. A keyboard. A keyboard. A keyboard.
A keyboard. A keyboard. A keyboard. A keyboard. A keyboard. A keyboard.
A keyboard. A keyboard. A keyboard.
</summary>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quidem
officiis in eveniet, id, est temporibus iure cumque deserunt similique
dolorum vitae aliquam! Mollitia amet consequuntur aperiam praesentium
fugiat aliquam cum atque debitis velit?
</details>
</body>

</html>
15 changes: 15 additions & 0 deletions 1 Html/tut4.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!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" />
<meta name="description" content="This is Description" />
<meta name="keywords" content="html, html tutorials, web development" />
<meta name="robots" content="INDEX, FOLLOW">
<title>Title, Links & Meta Tags</title>
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<body></body>
</html>
20 changes: 20 additions & 0 deletions 1 Html/tut5.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!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">
<title>Headings, Paragraphs & Emmet Abreviations</title>
</head>
<body>
<h1>Heading#1</h1>
<h2>Heading#2</h2>
<h3>Heading#3</h3>
<h4>Heading#4</h4>
<h5>Heading#5</h5>
<h6>Heading#6</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A nihil nam neque, impedit enim <strong>This is strong</strong> molestiae at error eveniet debitis, cupiditate distinctio? Neque <em>This is emphasized</em> eaque magnam illo tempore fugiat eum <b>Bold is here</b> nisi modi, aliquam <i>Italic is here</i> quod quaerat.</p>
<p>first <br>THIS IS A NEW LINE</p>
<hr>
</body>
</html>
25 changes: 25 additions & 0 deletions 1 Html/tut6.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Links and images</title>
</head>
<body>
<a href="https://google.com" target="_blank">Go to google</a><br />
<a href="https://facebook.com" target="_blank">Go to facebook</a><br />
<a href="https://twitter.com" target="_blank">Go to twitter</a><br />
<a href="https://linkedin.com" target="_blank">Go to Linkedin</a><br />
<a href="/tut4.html" target="_blank">Tut 4</a>
<a href="/tut5.html" target="_blank">Tut 5</a>

<!-- Image is not present hence alt text is shown -->
<img src="harry.jpg" alt="Error loading image" /><br />
<!-- <img src="https://source.unsplash.com/200x400/?nature,water" alt="remote image" width="233" height="34"> -->
<img
src="https://source.unsplash.com/200x400/?nature,water"
alt="remote image"
/>
</body>
</html>
62 changes: 62 additions & 0 deletions 1 Html/tut7.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tables and Lists</title>
</head>

<body>
<ul type="circle">
<li>This is first item of my unordered list</li>
<li>This is second item of my unordered list</li>

<ul>
<li>Another one</li>
<li>Another two</li>
<li>Another three</li>
</ul>


<li>This is third item of my unordered list</li>
</ul>
<ol type="a">
<li>This is first item of my ordered list</li>
<li>This is second item of my ordered list</li>
<li>This is third item of my ordered list</li>
</ol>

<!-- Tables -->
<h3>HTML Table</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Employee Id</th>
<th>Employee Role</th>
</tr>
</thead>
<tbody>
<tr>
<td> Harry </td>
<td> 34343 </td>
<td> Programmer </td>
</tr>
<tr>
<td> Rohan Das</td>
<td> 3483 </td>
<td> HTML Expert </td>
</tr>
<tr>
<td> Shubham </td>
<td> 7564 </td>
<td> Android Developer </td>
</tr>
</tbody>
</table>

</body>

</html>
58 changes: 58 additions & 0 deletions 1 Html/tut8.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Forms</title>
</head>

<body>
<h2>This is HTML forms tutorial</h2>
<form action="backend.php">
<label for="name"> Name</label>
<div>
<input type="text" name="myName" id="name" />
</div>
<br />
<div>Role: <input type="text" name="myRole" /></div>
<br />
<div>Email: <input type="email" name="myEmail" /></div>

<br />
<div>Date: <input type="date" name="myDate" /></div>
<br />
<div>Bonus: <input type="number" name="myBonus" /></div>
<br />
<div>
Are you eligible?:
<input type="checkbox" name="myEligibility" checked />
</div>
<br />
<div>
Gender: Male <input type="radio" name="myGender" /> Female
<input type="radio" name="myGender" /> Other
<input type="radio" name="myGender" />
</div>
<br />
<div>
Write about yourself: <br /><textarea name="myText" cols="90" rows="10"></textarea>
</div>
<br />
<div>
<label for="car">Car</label>
<select name="myCar" id="car">
<option value="ind">Indica</option>
<option value="swf" selected>Swift</option>
</select>
</div>
<br />
<div>
<input type="submit" value="Submit Now" />
<input type="reset" value="Reset Now" />
</div>
</form>
</body>

</html>
19 changes: 19 additions & 0 deletions 1 Html/tut9.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Inline and Block elements</title>
</head>
<body>
<strong style="border: 2px solid red;">this is a paragraph</strong> <a style="border: 2px solid blue;">
this is also a paragraph</a>
<span style="border: 2px solid red;">this is a span</span> <span style="border: 2px solid red;">this is also a span</span>
li, em, div, img
<p>li is a Block element</p>
<p>em is an Inline element</p>
<p>div is a Block element</p>
<p>img is an Inline element</p>
</body>
</html>
Binary file added 2 CSS/img/background1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 2 CSS/img/logoHeart.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 2 CSS/img/user.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions 2 CSS/tut13.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
p{
color: greenyellow;
background-color: hotpink;
}
21 changes: 21 additions & 0 deletions 2 CSS/tut13.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Tutorial</title>
<style>
p{
color:rgb(245, 184, 245);
background-color: seagreen !important;
}
</style>
<link rel="stylesheet" href="tut13.css">
</head>
<body>
<h3>This is CSS Tutorial</h3>
<!-- <p style="color: red; background-color: yellow;">This tutorial will teach you everything you need to know about HTML/CSS</p> -->
<p>This tutorial will teach you everything you need to know about HTML/CSS</p>
</body>
</html>
3 changes: 3 additions & 0 deletions 2 CSS/tut14.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
p{
Color: greenyellow;
}
22 changes: 22 additions & 0 deletions 2 CSS/tut14.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!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" />
<title>Document</title>
<link rel="stylesheet" href="tut14.css">
<style>
p {
color: purple;
}
</style>
</head>

<body>
<h1>This is CSS tutorial</h1>
<p style="color: brown">
This tutorial will teach you everything you need to know about CSS
</p>
</body>
</html>
41 changes: 41 additions & 0 deletions 2 CSS/tut15.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Selectors</title>
<style>
/* Element selector */
p{
border: 2px solid red;
}

/* Id selector */
#firstPara{
color: green;
}

/* Class selector */
.bgBlue{
color: yellow;
background-color: blue;
}

/* Grouping selector */
footer, span{
background-color: pink;
}
</style>
</head>
<body>
<h3>CSS Selectors</h3>
<p id="firstPara">This is a simple paragraph to demonstrate css selectors</p>
<p id="secondPara" class="redElement bgBlue">This is a another simple paragraph to demonstrate css selectors</p>
<div>
<p>This is yet another simple paragraph inside div to demonstrate css selectors</p>
<span>this is span</span>
</div>
<footer>This is footer</footer>
</body>
</html>
Loading