Skip to content

Commit e9e639b

Browse files
elyse502elyse502
committed
New changes
1 parent 068e179 commit e9e639b

File tree

487 files changed

+37482
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

487 files changed

+37482
-0
lines changed

‎HTML/First-Part/Attributes.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title> Html Attributes</title>
5+
</head>
6+
<body>
7+
<h1>Welcome to our Website</h1>
8+
9+
<a href="https://www.w3schools.com" target="_blank">Visit w3schools</a>
10+
<img src="img/bird.png" width="200" height="300">
11+
</body>
12+
</html>

‎HTML/First-Part/CSS/IntroductionCss.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Learning CSS</title>
7+
<link rel="stylesheet" href="./style.css">
8+
</head>
9+
<body>
10+
<h1>Welcome to our website.</h1>
11+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum ratione dicta veritatis repellendus id nobis rerum dolores ducimus itaque maxime accusantium debitis quam, eaque quisquam numquam illo necessitatibus error quidem.</p>
12+
</body>
13+
</html>

‎HTML/First-Part/CSS/Sprites.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
body, div {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
.sprite {
7+
width: 300px;
8+
padding: 50px;
9+
background-image: url('img/spritesheet.png');
10+
background-position: -70px -40px;
11+
}

‎HTML/First-Part/CSS/Sprites.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" type="text/css" href="Sprites.css">
7+
<title>Image Sprites Example</title>
8+
</head>
9+
<body>
10+
<div class="sprite"></div>
11+
</body>
12+
</html>

‎HTML/First-Part/CSS/align.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.center-text {
2+
text-align: center;
3+
}
4+
5+
.left-margin {
6+
margin-left: 20px;
7+
}
8+
9+
.right_margin {
10+
margin-right: 20px;
11+
}
12+
13+
14+
.vertical-align {
15+
vertical-align: middle;
16+
}
17+
18+
.flex-container {
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
height: 150px;
23+
background-color: #007bff;
24+
}

‎HTML/First-Part/CSS/align.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="align.css">
7+
<title>CSS Horizontal and Vertical Alignment</title>
8+
</head>
9+
<body>
10+
<div class="center-text">
11+
<p>This is a horizontally centered.</p>
12+
</div>
13+
14+
<div class="left-margin">
15+
<p>This text has a left margin of 20px.</p>
16+
</div>
17+
18+
<div class="right-margin">
19+
<p>This text has a right margin of 20px.</p>
20+
</div>
21+
22+
<p class="vertical-align">This text is vertically centered.</p>
23+
<div class="flex-container">
24+
<p>This text is centered using flexbox.</p>
25+
</div>
26+
</body>
27+
</html>

‎HTML/First-Part/CSS/background.css

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
h1 {
2+
background-color: orange;
3+
}
4+
5+
div {
6+
background-color: yellowgreen;
7+
opacity: 0.3;
8+
}
9+
10+
p {
11+
background-color: blueviolet;
12+
}

‎HTML/First-Part/CSS/background.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" type="text/css" href="background.css">
7+
<title>CSS Background</title>
8+
</head>
9+
<body>
10+
<h1>Welcome to my webpage.</h1>
11+
12+
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae nemo voluptatum suscipit doloribus laboriosam neque numquam ratione fugiat obcaecati molestias perspiciatis sunt quos, possimus quisquam ipsam quaerat. Minima, assumenda architecto.</div>
13+
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non temporibus inventore enim ipsam distinctio nihil consequuntur ut esse adipisci, hic reprehenderit iusto ea facere numquam amet maiores magni consectetur placeat!</p>
14+
</body>
15+
</html>

‎HTML/First-Part/CSS/border.css

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
h1 {
2+
border: 2px solid tan;
3+
border-radius: 5px;
4+
}
5+
6+
p {
7+
padding: 10px;
8+
border-style: solid; /* solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden */
9+
border-width: 5px; /* thin, medium, thick, 1px, 2px, 3px, 4px, 5px */
10+
border-color: springgreen;
11+
border-bottom-left-radius: 20px;
12+
}

‎HTML/First-Part/CSS/border.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="border.css">
7+
<title>CSS Border</title>
8+
</head>
9+
<body>
10+
<h1>Welcome to my webpage.</h1>
11+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore consequatur exercitationem, ab impedit iusto reprehenderit. Perspiciatis illo quo accusamus! Temporibus maiores id quia quidem vitae at delectus ut earum odio!</p>
12+
</body>
13+
</html>

‎HTML/First-Part/CSS/box-model.css

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
div {
2+
width: 300px;
3+
border: 15px solid green;
4+
padding: 50px;
5+
margin: 20px;
6+
}

‎HTML/First-Part/CSS/box-model.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="box-model.css">
7+
<title>CSS Box Model</title>
8+
</head>
9+
<body>
10+
<div>
11+
<h1>Box Model</h1>
12+
<p>This is a content box with padding, border and margin.</p>
13+
</div>
14+
</body>
15+
</html>

‎HTML/First-Part/CSS/colors.css

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
h1 {
2+
color: aqua;
3+
background-color: dodgerblue;
4+
border: 4px solid blue;
5+
}
6+
h2 {
7+
color: aqua;
8+
background-color: dodgerblue;
9+
border: 4px solid orange;
10+
}
11+
h3 {
12+
color: aqua;
13+
background-color: dodgerblue;
14+
border: 4px solid violet;
15+
}
16+
17+
p {
18+
color: blue;
19+
background-color: yellowgreen;
20+
}

‎HTML/First-Part/CSS/colors.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" type="text/css" href="colors.css">
7+
<title>CSS Colors</title>
8+
</head>
9+
<body>
10+
<h1>Hello Everyone</h1>
11+
<h2>Welcome to website.</h2>
12+
<h3>Hello world</h3>
13+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit minus ipsa explicabo eligendi unde, veritatis placeat. Eveniet tempore officiis minima distinctio incidunt vitae temporibus quae, tenetur tempora asperiores iure illum!</p>
14+
</body>
15+
</html>

‎HTML/First-Part/CSS/comments.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
h1 {
2+
color: green; /* set the text color is green */
3+
font-size: 28px; /* set font size to 28px */
4+
}
5+
6+
p {
7+
color: blue; /* set the text color is blue */
8+
font-size: 20px; /* set font size to 20px */
9+
}

‎HTML/First-Part/CSS/comments.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" type="text/css" href="comments.css">
7+
<title>CSS Comments</title>
8+
</head>
9+
<body>
10+
<h1>Welcome to css comments</h1>
11+
<p>This is a paragraph.</p>
12+
</body>
13+
</html>

‎HTML/First-Part/CSS/dropdown.css

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.dropbtn {
2+
background-color: green;
3+
color: white;
4+
padding: 16px;
5+
font-size: 16px;
6+
border: none;
7+
cursor: pointer;
8+
}
9+
.dropdown {
10+
position: relative;
11+
display: inline-block;
12+
}
13+
14+
.dropdown-content {
15+
display: none;
16+
position: absolute;
17+
background-color: antiquewhite;
18+
min-width: 160px;
19+
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
20+
z-index: 1;
21+
}
22+
.dropdown-content a{
23+
color: black;
24+
padding: 12px 16px;
25+
text-decoration: none;
26+
display: block;
27+
}
28+
.dropdown-content a:hover {
29+
background-color: #f1f1f1;
30+
}
31+
32+
.dropdown:hover .dropdown-content {
33+
display: block;
34+
}
35+
.dropdown:hover .dropbtn {
36+
background-color: green;
37+
}

‎HTML/First-Part/CSS/dropdown.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="dropdown.css">
7+
<title>Dropdown Menu</title>
8+
</head>
9+
<body>
10+
<div class="dropdown">
11+
<button class="dropbtn">Menu Bar</button>
12+
<div class="dropdown-content">
13+
<a href="#">Link 1</a>
14+
<a href="#">Link 2</a>
15+
<a href="#">Link 3</a>
16+
</div>
17+
</div>
18+
</body>
19+
</html>

‎HTML/First-Part/CSS/float.css

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.left-box {
2+
float: left;
3+
width: 100px;
4+
height: 100px;
5+
background-color: #007bff;
6+
margin-right: 20px;
7+
}
8+
9+
.right-box {
10+
float: right;
11+
width: 100px;
12+
height: 100px;
13+
background-color: #ff6600;
14+
margin-right: 20px;
15+
}
16+
17+
18+
.box {
19+
float: left;
20+
width: 33.33%;
21+
height: 200px;
22+
background-color: violet;
23+
box-sizing: border-box;
24+
padding: 10px;
25+
}

‎HTML/First-Part/CSS/float.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="float.css">
7+
<title>CSS Float</title>
8+
</head>
9+
<body>
10+
<div class="left-box"></div>
11+
<div class="right-box"></div>
12+
13+
<div class="box"> Box 1</div>
14+
<div class="box"> Box 2</div>
15+
<div class="box"> Box 3</div>
16+
</body>
17+
</html>

‎HTML/First-Part/CSS/fonts.css

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
body {
2+
font-family: 'Open Sans', sans-serif;
3+
}
4+
blockquote {
5+
font-family: 'Lobster', cursive;
6+
}
7+
8+
9+
p {
10+
font-family: Arial, Helvetica, sans-serif;
11+
font-size: 16px;
12+
font-weight: bold;
13+
}
14+
15+
h1 {
16+
font-family: 'Times New Roman', Times, serif;
17+
font-size: 36px;
18+
font-weight: normal;
19+
}
20+
21+
22+
h2 {
23+
font-size: 24px;
24+
font-weight: bold;
25+
}
26+
27+
em {
28+
font-size: 18px;
29+
font-weight: normal;
30+
}

0 commit comments

Comments
 (0)