Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Keshabkjha
Keshabkjha committed Aug 30, 2024
1 parent 097069e commit ef90c26
Show file tree
Hide file tree
Showing 11 changed files with 599 additions and 0 deletions.
55 changes: 55 additions & 0 deletions Programs/Program36.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styling Even and Odd Rows</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}

th, td {
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}

/* Styling odd rows */
tr:nth-child(odd) {
background-color: #f2f2f2;
}

/* Styling even rows */
tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>Styled Table</h2>
<table>
<tr>
<th>Course</th>
<th>Department</th>
<th>Section</th>
</tr>
<tr>
<td>B.Tech</td>
<td>CSE</td>
<td>B</td>
</tr>
<tr>
<td>B.Tech</td>
<td>IT</td>
<td>A</td>
</tr>
<tr>
<td>B.Tech</td>
<td>ECE</td>
<td>A</td>
</tr>
</table>
</body>
</html>
32 changes: 32 additions & 0 deletions Programs/Program37.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Style Type Example</title>
<style>
ul.square {
list-style-type: square;
}

ol.lower-alpha {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>Pandit</h2>
<ul class="square">
<li>Jha</li>
<li>Mishra</li>
<li>Pathak</li>
</ul>

<h2>NIET</h2>
<ol class="lower-alpha">
<li>B.TECH</li>
<li>CSE</li>
<li>52 LPA</li>
</ol>
</body>
</html>
36 changes: 36 additions & 0 deletions Programs/Program38.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID and Class Selectors</title>
<style>
#header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px;
}

.content {
margin: 20px;
padding: 20px;
background-color: #f9f9f9;
}

.highlight {
color: #4CAF50;
font-weight: bold;
}
</style>
</head>
<body>
<div id="header">
<h1>Welcome to Dalsinghsarai</h1>
</div>

<div class="content">
<p>Keshab Kumar jha is from <span class="highlight">Dalsinghsarai</span> Bihar India.</p>
</div>
</body>
</html>
22 changes: 22 additions & 0 deletions Programs/Program39.html
View file
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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Box Model</title>
<style>
.box {
width: 200px;
padding: 20px;
border: 5px solid #4CAF50;
margin: 15px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="box">
<p>THink NIET.</p>
</div>
</body>
</html>
34 changes: 34 additions & 0 deletions Programs/Program40.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grouping and Dimensions</title>
<style>
h1, h2, p {
color: #333;
text-align: center;
}

.box {
width: 300px;
height: 150px;
background-color: #4CAF50;
margin: 20px auto;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<h2>This is a Subheading</h2>
<p>This is a paragraph below the headings.</p>

<div class="box">
<p>Box with dimensions</p>
</div>
</body>
</html>
43 changes: 43 additions & 0 deletions Programs/Program41.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display and Positioning</title>
<style>
.container {
display: flex;
justify-content: space-around;
}

.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
}

.fixed-box {
position: fixed;
bottom: 20px;
right: 20px;
width: 100px;
height: 100px;
background-color: #ff5722;
color: white;
text-align: center;
padding-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>

<div class="fixed-box">
Fixed Box
</div>
</body>
</html>
68 changes: 68 additions & 0 deletions Programs/Program43.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!--Design a web page by applying CSS pseudo classes. -->
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Pseudo-Elements
</title>

<style>
p::first-line {
color: #b92626;
font-variant: small-caps;
}

h1::first-letter {
color: #ff0000;
font-size: xx-large;
}

p.intro::first-letter {
color: #ff0000;
font-size: 500%;
}

h2::before {
content: url(smiley.jpg);
}

h3::after {
content: url(smiley.jpg);
}

::marker {
color: green;
font-size: 23px;
}

::selection {
color: red;
background: skyblue;
}
</style>
</head>

<body>
<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>
<h1>I am adding style to this first letter of heading h1 </h1>
<p class="intro">This is an introduction.</p>
<h2>The ::before pseudo-element inserts content before the content of an element.</h2>
<h3>The ::after pseudo-element inserts content after the content of an element.</h3>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<div>This is some text in a div element. ::selection matches all the portion that is selected by the user</div>
</body>

</html>
71 changes: 71 additions & 0 deletions Programs/Program44.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!--Design a web page by applying CSS Navigation Bar-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpage with CSS Navigation Bar</title>
<style>
/* Basic CSS Reset */
body, h1, p {
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}

/* Navigation Bar */
.navbar {
background-color: #333;
overflow: hidden;
}

.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 17px;
}

.navbar a:hover {
background-color: #ddd;
color: black;
}

/* Active/current link */
.navbar a.active {
background-color: #4CAF50;
color: white;
}

/* Main Content */
.main {
padding: 16px;
margin-top: 30px;
}
</style>
</head>
<body>

<!-- Navigation Bar -->
<div class="navbar">
<a class="active" href="#home">Home</a>
<a href="#services">Services</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>

<!-- Main Content -->
<div class="main">
<h1>Welcome to Our Website</h1>
<p>This is a simple webpage with a navigation bar at the top.</p>
</div>

</body>
</html>
Loading

0 comments on commit ef90c26

Please sign in to comment.