Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@MutteTejeshu
MutteTejeshu authored Nov 28, 2024
0 parents commit b05ec28
Show file tree
Hide file tree
Showing 65 changed files with 1,687 additions and 0 deletions.
1 change: 1 addition & 0 deletions 1/exercises/1a.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<button>Click</button>
2 changes: 2 additions & 0 deletions 1/exercises/1b.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<button>Tejeshu</button>
<button>Chicken</button>
1 change: 1 addition & 0 deletions 1/exercises/1f.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<a href="https://www.google.com" target="_blank">Search with Google</a>
6 changes: 6 additions & 0 deletions 1/exercises/1g.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<a href="https://www.amazon.com" target="_blank">Back to Amazon</a>
<p>Nike Black Running Shoes</p>
<p>$39 - in stock</p>
<p>Free delivery tomorrow.</p>
<button>Add to Cart</button>
<button>Buy now</button>
9 changes: 9 additions & 0 deletions 1/website.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<button>
Button-Hello
</button>
<p>
Paragraph-This is a paragraph text
</p>
<a href="https://www.youtube.com" target="_blank">
Anchor-Link to Youtube
</a>
60 changes: 60 additions & 0 deletions 11/grid.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html>
<head>
<title>Grid Practice</title>
</head>
<body style="padding-bottom: 1000px;">
<div style="
display: grid;
grid-template-columns: 100px 100px 200px;
">
<div style="background-color: lightblue;">div 1</div>
<div style="background-color: lightpink;">div 2<p>text</p></div>
</div>

<div style="
margin-top: 30px;
display: grid;
grid-template-columns: 100px 100px 200px;
">
<div style="background-color: lightblue;">100px</div>
<div style="background-color: lightpink;">100px<p>text</p></div>
<div style="background-color: lightblue;">200px</div>
<div style="background-color: lightpink;">100px</div>
</div>

<div style="
margin-top: 30px;
display: grid;
grid-template-columns: 100px 1fr;
">
<div style="background-color: lightblue;">100px</div>
<div style="background-color: lightpink;">1fr</div>
</div>

<div style="
margin-top: 30px;
display: grid;
grid-template-columns: 100px 1fr 2fr;
">
<div style="background-color: lightblue;">100px</div>
<div style="background-color: lightpink;">1fr</div>
<div style="background-color: lightblue;">2fr</div>
</div>

<div style="
margin-top: 30px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 20px;
row-gap: 50px;
">
<div style="background-color: lightblue; height: 200px;">1fr</div>
<div style="background-color: lightpink; height: 200px;">1fr</div>
<div style="background-color: lightblue; height: 200px;">1fr</div>
<div style="background-color: lightpink; height: 200px;">1fr</div>
<div style="background-color: lightblue; height: 200px;">1fr</div>
<div style="background-color: lightpink; height: 200px;">1fr</div>
</div>
</body>
</html>
79 changes: 79 additions & 0 deletions 12/flexbox.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Practice</title>
</head>
<body style="padding-bottom: 1000px;">
<div style="display: flex;
flex-direction: row;
">
<div style="background-color: lightblue;">div 1 text</div>
<div style="background-color: lightpink;">div 2<p>text</p></div>
</div>

<div style="
margin-top: 30px;
display: flex;
flex-direction: row;
">
<div style="background-color: lightblue; width: 100px;">100px</div>
<div style="background-color: lightpink; flex: 1;">flex: 1</div>
</div>

<div style="
margin-top: 30px;
display: flex;
flex-direction: row;
">
<div style="background-color: lightblue; flex: 1;">flex: 1</div>
<div style="background-color: lightpink; width: 100px;">100px</div>
<div style="background-color: lightblue; flex: 2;">flex: 2</div>
</div>

<div style="
margin-top: 30px;
height: 70px;
border-width: 1px;
border-style: solid;
border-color: gray;
display: flex;
flex-direction: row;
justify-content: center;
">
<div style="background-color: lightblue; width: 100px;">100px</div>
<div style="background-color: lightpink; width: 100px;">100px</div>
<div style="background-color: lightblue; width: 100px;">100px</div>
</div>

<div style="
margin-top: 30px;
height: 70px;
border-width: 1px;
border-style: solid;
border-color: gray;
display: flex;
flex-direction: row;
justify-content: space-between;
">
<div style="background-color: lightblue; width: 100px;">100px</div>
<div style="background-color: lightpink; width: 100px;">100px</div>
<div style="background-color: lightblue; width: 100px;">100px</div>
</div>

<div style="
margin-top: 30px;
height: 70px;
border-width: 1px;
border-style: solid;
border-color: gray;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
">
<div style="background-color: lightblue; width: 100px;">100px</div>
<div style="background-color: lightpink; width: 100px;">100px</div>
<div style="background-color: lightblue; width: 100px;">100px</div>
</div>
</body>
</html>
78 changes: 78 additions & 0 deletions 14/position.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html>
<head>
<title>Position Practice</title>
</head>
<body style="
height: 3000px;
padding-top: 60px;
padding-left: 90px;
">
<div style="background-color: black;
color: white;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 50px;
z-index: 100;
">
header
</div>
<div style="
background-color: green;
color: white;
position: fixed;
left: 0;
bottom: 0;
top: 50px;
width: 72px;
">
sidebar
<div style="position: absolute;
background-color: red;
color: white;
right: 0px;
top: 0px;
z-index: 2;
">
X
</div>
</div>

<div style="position: absolute;
background-color: red;
color: white;
left: 10px;
top: 10px;
z-index: 2;
">
absolute
</div>

<div style="
background-color: lightblue;
height: 200px;
width: 200px;
position: static;
">
div 1
</div>
<div style="background-color: lightpink;
height: 200px;
width: 200px;
position: relative;
">
div 2
<div style="position: absolute;
background-color: black;
color: white;
bottom: 10px;
right: 10px;
z-index: 2;
">
5:00
</div>
</div>
</body>
</html>
49 changes: 49 additions & 0 deletions 2/buttons.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<style>
.subscribe-button {
background-color: rgb(200, 0, 0);
color: white;
border: none;
height: 35px;
width: 105px;
border-radius: 2px;
cursor: pointer;
margin-right: 8px;
}

.join-button {
background-color: white;
border-color: rgb(1, 106, 218);
border-style: solid;
border-width: 1;
color: rgb(1, 106, 218);
height: 35px;
width: 62px;
border-radius: 2px;
cursor: pointer;
}

.tweet-button {
background-color: rgb(0, 144, 240);
color: white;
border: none;
height: 35px;
width: 72px;
border-radius: 17.5px;
font-weight: bold;
font-size: 15px;
cursor: pointer;
margin-left: 8px;
}
</style>

<button class="subscribe-button">
SUBSCRIBE
</button>

<button class="join-button">
JOIN
</button>

<button class="tweet-button">
Tweet
</button>
35 changes: 35 additions & 0 deletions 2/exercises/2f.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<style>
.cart-button {
background-color: rgb(255, 204, 0);
border: none;
height: 36px;
width: 130px;
border-radius: 18px;
font-size: 14px;
margin-right: 10px;
cursor: pointer;
}
.buy-button {
background-color: rgb(255, 153, 0);
border: none;
height: 36px;
width: 130px;
border-radius: 18px;
font-size: 14px;
cursor: pointer;
}
</style>



<a href="https://www.amazon.com" target="_blank">Back to Amazon</a>
<p>Nike Black Running Shoes</p>
<p>$39 - in stock</p>
<p>Free delivery tomorrow.</p>

<button class="cart-button">
Add to Cart
</button>
<button class="buy-button">
Buy now
</button>
Loading

0 comments on commit b05ec28

Please sign in to comment.