Skip to content

Commit

Permalink
teach_commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Alvin390
Alvin390 committed Jan 23, 2025
0 parents commit e6dc57a
Show file tree
Hide file tree
Showing 23 changed files with 434 additions and 0 deletions.
59 changes: 59 additions & 0 deletions PROJECT ONE PARAGRAPHS.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<style>
ul{
background-color: rgb(18, 118, 206);
list-style: georgian;
}
ul li{
color: brown;
}
ul li:hover{
color: darkgreen;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alvin's Website</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis ex totam explicabo ullam dolorum fugit eligendi, placeat
aut perferendis quo eaque officia deserunt veritatis aperiam ad, minus exercitationem
deleniti! Maiores?
</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus optio nulla quisquam inventore suscipit eos. Sequi eius aliquid
eveniet in eligendi atque fuga fugit distinctio, accusamus quibusdam, porro, laudantium nihil?
</p>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis excepturi a necessitatibus non iusto vel! Soluta, dolorum, eos ipsam doloremque vero excepturi
aperiam laudantium dicta cupiditate dolores repudiandae unde magni.
</p>
<hr>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur quidem beatae perferendis ipsam? Voluptas incidunt fuga omnis similique, repellat quod dolores quibusdam nisi, iure
perspiciatis ex iusto vel, esse tempora.
</p>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, expedita veritatis labore placeat libero eius debitis temporibus ipsam ipsa, id molestias ullam non eaque porro soluta. Dolor eum ipsa voluptate.
Laudantium molestias perferendis ex itaque alias totam nam velit modi, soluta cupiditate iste, eos ullam porro! Nostrum dolorum sapiente dolore! Porro reiciendis eius animi unde atque cum provident nobis repudiandae!
Alias doloremque pariatur cupiditate repellendus ipsam laborum minus, nobis rem vitae nemo vel nulla repudiandae possimus ab dolor exercitationem excepturi illo? Dolore, natus eligendi vero repellat quos beatae porro excepturi!
Quae consectetur nulla iure, ut dignissimos ea aliquam. Veniam eum, quibusdam labore maiores aspernatur distinctio quo dolor, ipsa et aliquid ducimus atque, neque enim exercitationem officiis reprehenderit? Suscipit, corporis culpa.
Consequatur facere dolores laudantium ipsam. Voluptas quidem temporibus culpa assumenda blanditiis? Iusto, itaque explicabo. Odio, cumque quis cupiditate quasi expedita atque sit, asperiores distinctio, modi repellat totam itaque provident labore.
</p>
<hr>

<ul>
<li>coffee</li>
<li>tea</li>
<li>iced tea</li>
</ul>
</body>
</html>
3 changes: 3 additions & 0 deletions css/beauty.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
body{
background-color: wheat;
}
28 changes: 28 additions & 0 deletions css/navigation.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
ul{
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
background-color: green;
}
li{
float: left;
}

li a{
display: block;
padding: 15px;
color: white;
text-decoration: none;

}

li a:hover{
color: black;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

a{
float: left;
padding: 20px;
}
4 changes: 4 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.colors{
color: red;
}

42 changes: 42 additions & 0 deletions divs.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>divs</title>
</head>
<body>
<div class="colors">
<h2>COLORS</h2>
</div>
<ul>
<li>red</li>
<li>blue</li>
<li>orange</li>
<li>green</li>
<li>yellow</li>
</ul>
<h2>FURNITURE</h2>
</div>
<ol>
<li>Chair</li>
<li>Table</li>
<li>Cabinet</li>
<li>Bed</li>
<li>Wardrobe</li>
<li>Shelf</li>
</ol>
<h1>PETS</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta explicabo amet nihil officiis, sequi adipisci minus id eum sapiente ducimus rerum quasi praesentium provident magnam nulla est? Aperiam, doloremque dolores.
Repudiandae sed voluptates officia praesentium molestiae amet illo incidunt velit. Sunt voluptatibus aspernatur quos recusandae veritatis quaerat consequatur deserunt eligendi, minima temporibus! Corrupti, dignissimos fugiat similique quasi explicabo deleniti tempora?
Eum quos quod laudantium a, ipsum maxime odit ratione eligendi dignissimos! Assumenda sit ea obcaecati magni a modi quia, numquam rerum nihil id nobis qui natus consequuntur! Porro, eveniet. Soluta.
Dolore ipsa, velit molestiae rem nemo recusandae placeat cupiditate quidem? Delectus libero ullam molestiae animi, nobis eius? Neque libero possimus, ipsa cumque deserunt nihil. Enim rem illum quidem inventore culpa.</p>
<h1>CARS</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore error minima quis at fuga labore ea laboriosam debitis! Culpa eius repudiandae nesciunt quam iure nisi voluptates voluptatibus qui ipsa praesentium.
Incidunt suscipit, amet est eaque eius, sapiente quidem voluptatibus hic quis quam impedit assumenda tenetur sed laboriosam perspiciatis asperiores reiciendis expedita. Reiciendis expedita vel amet doloremque omnis quidem veritatis earum!
Id eum nisi officiis veniam corporis quo maiores rerum placeat vitae sequi. Voluptas magni suscipit, animi aperiam perspiciatis nam reprehenderit repudiandae quos provident dolor error dolorem harum expedita porro sint.
Explicabo eos ad ab! Laboriosam illum inventore aspernatur ipsum minus molestiae possimus, dignissimos facere voluptate vel iste ullam odio doloremque eaque sit est unde sed libero explicabo! Magni, molestias ut.
Velit ad dolor adipisci laudantium quae animi fuga voluptatibus accusantium provident ab nisi aperiam numquam obcaecati doloremque molestias, blanditiis excepturi dolorem. Accusantium, iure odit. Quo repudiandae harum voluptate dolore nulla.</p>
</body>
</html>
94 changes: 94 additions & 0 deletions forms.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background-color: #f0f0f0; /* Background color for the body */
}
.mycontainer {
display: flex;
flex-direction: column;
align-items: center;
background-color: #ffffff; /* Different background color for the container */
padding: 20px;
border-radius: 10px; /* Rounded corners for the container */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Slight shadow for better visibility */
}
.logindetails, .registrationdetails {
display: flex;
flex-direction: column;
align-items: center;
}
.logindetails label, .registrationdetails label,
.logindetails input, .registrationdetails input,
.loginbutton {
width: 100%;
max-width: 300px;
margin: 5px 0;
text-align: center;
}
.logindetails input, .registrationdetails input {
border-radius: 5px; /* Rounded corners for inputs */
padding: 10px;
border: 1px solid #ccc;
transition: box-shadow 0.3s ease-in-out; /* Smooth transition for hover effect */
}
.logindetails input:hover, .registrationdetails input:hover {
box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); /* Glow effect on hover */
}
.loginbutton button {
width: 100%;
border-radius: 5px; /* Rounded corners for button */
padding: 10px;
border: none;
background-color: #007bff;
color: white;
cursor: pointer;
transition: box-shadow 0.3s ease-in-out; /* Smooth transition for hover effect */
}
.loginbutton button:hover {
box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); /* Glow effect on hover */
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
</head>
<body>

<div class="mycontainer">
<!-- LOGIN FORM -->
<div class="title1"><h2>LOGIN</h2></div>
<form action="">
<div class="logindetails">
<label for="email">Enter Email</label>
<input type="email" name="email" id="email" placeholder="Email">
<label for="password">Enter Password</label>
<input type="password" id="password" name="password" placeholder="password">
<div class="loginbutton">
<button type="submit">LOGIN !!</button>
</div>
</div>
<!-- END LOGIN FORM -->
<div class="title2"><h2>REGISTRATION</h2></div>
<div class="registrationdetails">
<label for="fname">Enter First Name</label>
<input type="text" name="fname" id="fname" placeholder="First Name">
<label for="lname">Enter Last Name</label>
<input type="text" name="lname" id="lname" placeholder="Last Name">
<label for="email">Enter Email</label>
<input type="email" name="email" id="email" placeholder="Enter Email">
<div class="gender">
<label for="male">Male</label>
<input type="radio" name="gender" id="male">
<label for="female">Female</label>
<input type="radio" name="gender" id="female">
</div>
<div class="regbutton">
<button type="submit">REGISTER !!</button>
</div>
</div>
</form>
</div>
</body>
</html>
22 changes: 22 additions & 0 deletions headings.html
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>Document</title>
</head>
<body>
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>


<h1 style="color: rgb(15, 25, 155);">THIS IS MY FIRST COLOR</h1>
<marquee><h1>FIRST MARQUEE TEST</h1></marquee>
<marquee behavior="alternate" direction="left"><h1>SECOND MARQUEE TEST</h1></marquee>

</body>
</html>
15 changes: 15 additions & 0 deletions iframe.html
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 name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>iframe</title>
</head>
<body>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15956.089591372516!2d36.956784725189216!3d-1.1444680713812658!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182f474da31ff315%3A0xfaa9d5a1a06c6da3!2sKenyatta%20University%2C%20Ruiru%20Campus!5e0!3m2!1sen!2ske!4v1737219717984!5m2!1sen!2ske" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<iframe width="853" height="480" src="https://www.youtube.com/embed/bA10OW0hOEg" title="Sam Wilson &amp; Joaquín Torres | The Falcon and The Winter Soldier | Official Clip" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</body>
</html>
21 changes: 21 additions & 0 deletions images.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<style>
img{
-webkit-filter: blur(4px);
}
img:hover{
-webkit-filter: blur(0px);
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Images</title>
</head>
<body>
<img src="static/images/testing one.jpeg" alt="" width="300" height="300">


</body>
</html>
24 changes: 24 additions & 0 deletions links.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Links</title>
</head>
<body>
<a href="headings.html">Heading Page</a>
<a href="images.html">My Gallery</a>
<h1><a href="headings.html">CLICK HERE</a></h1>
<a href="images.html"><img src="static/images/testing 2.jpg" alt=""></a>
<a href="images.html"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime pariatur laborum debitis, sed nulla at suscipit neque itaque, eligendi, amet sunt deleniti. Magni deleniti quaerat ipsam iusto, perspiciatis iste ipsa!
Odit commodi magnam quam quisquam aperiam iure iste dignissimos accusantium delectus quas aut sed labore architecto tempore, ad corrupti harum ut laboriosam soluta? Quis vitae eligendi necessitatibus laborum, itaque fugit?
Quam consectetur minima dignissimos hic quibusdam expedita deserunt voluptatem dolor. Sit magni iure est itaque, asperiores quia earum. Inventore error accusantium eum odio debitis quod explicabo vero? Beatae, officiis quo?
Quae ut beatae delectus repellat recusandae. Earum dolore soluta nihil eum? Blanditiis totam distinctio vel quas eius maiores quam, rerum asperiores porro! Nesciunt delectus dolor, repellat distinctio sunt iste placeat!
Id, quae obcaecati. Quasi cum, aperiam odio quis molestias labore fugit laudantium officia et commodi corporis omnis saepe, nisi doloribus. Harum, est quas illo molestiae praesentium rerum labore architecto perspiciatis!</p></a>

<a href="https://www.youtube.com/watch?v=k-RgO1h_i7c">ASSASIN'S CREED</a>

<a href="headings.html"><img src="static/images/testing 3.jpg" alt=""></a>

</body>
</html>
20 changes: 20 additions & 0 deletions lists.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/beauty.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lists</title>
</head>
<body>
<h2>List</h2>
<ol>
<li>Jug</li>
<li>Cup</li>
<li>Spoon</li>
<li>Fork</li>
<li>Plate</li>
<li>Sufuria</li>
</ol>
</body>
</html>
15 changes: 15 additions & 0 deletions media.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>media</title>
</head>
<body>
<audio controls autoplay muted>
<source src="static/audio/y2mate.com - BIEN FT SCAR MKADINALI LIFESTYLE music video 2024.mp3" type="audio/mpeg">
</audio>

</body>
</html>
Loading

0 comments on commit e6dc57a

Please sign in to comment.