-
Notifications
You must be signed in to change notification settings - Fork 1
/
project3.html
112 lines (110 loc) · 2.86 KB
/
project3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!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>Project-3</title>
<style>
.css-button-arrow--sand {
min-width: 130px;
height: 40px;
color: black;
padding: 5px 10px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
outline: none;
overflow: hidden;
border-radius: 5px;
border: none;
background-color: #ced4da;
margin-left: 1.5rem;
}
.css-button-arrow--sand:hover {
border-radius: 5px;
padding-right: 24px;
padding-left:8px;
}
.css-button-arrow--sand:hover:after {
opacity: 1;
right: 10px;
}
.css-button-arrow--sand:after {
content: "\00BB";
position: absolute;
opacity: 0;
font-size: 20px;
line-height: 40px;
top: 0;
right: -20px;
transition: 0.4s;
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.bg{
background-color: #004643;
}
.hc{
color: #fffffe;
}
h2{
color: #f9bc60;
margin-left: 1.625rem;
}
ul,ol{
font-size: 1.5rem;
color: #fffffe;
line-height: 2rem;
}
ul li{
list-style: none;
}
a{
text-decoration: none;
}
</style>
</head>
<body class="bg">
<!-- Project 1 -->
<h1 class="center hc">Pencil Box</h1>
<img class="center" src="./images/pencilBox.jpg" alt="ShoeBox">
<h2>Components Required</h2>
<ul>
<li><label>
<input type="checkbox"> Plastic Bottle
</label>
</li>
<li><label>
<input type="checkbox"> Glue
</label>
</li>
<li><label>
<input type="checkbox"> Zip-set
</label>
</li>
<input type="checkbox"> Stationary Cutter
</label>
</li>
<li><label>
<input type="checkbox"> Scissor
</label>
</li>
</ul>
<h2>Procedure</h2>
<ol>
<li>Cover the box with cuttings of comics from the newspaper/articles</li>
<li>Seal the box with Tape from inside</li>
<li>Try to create an attractive image of the cuttings at the top of the box to create some beautiful effects</li>
<li>Take a soda can and crush it and make it flat (adults need to perform this step)</li>
<li>Place the flattened soda can at the top of the box and write whatever you want, and it’s done. I hope you liked this best out-of-waste craft idea</li>
</ol>
<a href="https://youtu.be/y1r0c-V7GIk"><button class="css-button-arrow--sand">Click here for video tutorial</button></a>
</body>
</html>