Skip to content

Commit 8afa765

Browse files
author
=
committed
Added more projects
1 parent 444a830 commit 8afa765

File tree

12 files changed

+852
-0
lines changed

12 files changed

+852
-0
lines changed

‎application-form/index.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!--
2+
3+
Time : Learning HTML, CSS & JS
4+
Project : Application Form
5+
Details : This is an accordian using HTML, CSS and JS.
6+
Date : March / 2023
7+
8+
-->
9+
10+
11+
12+
13+
<!DOCTYPE html>
14+
<html lang="en">
15+
16+
<head>
17+
<meta charset="UTF-8">
18+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
19+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
20+
<title>Application Form</title>
21+
<link rel="stylesheet" href="style.css">
22+
</head>
23+
24+
<body>
25+
26+
<div id="applicationForm">
27+
<h2>Application Form</h2>
28+
<form>
29+
<div class="field">
30+
<label for="firstName">First Name</label>
31+
<input type="text" name="" id="firstName" placeholder="Enter First Name...">
32+
</div>
33+
<div class="field">
34+
<label for="lastName">Last Name</label>
35+
<input type="text" name="" id="lastName" placeholder="Enter Last Name...">
36+
</div>
37+
<div class="field">
38+
<label for="userEmail">Email</label>
39+
<input type="email" name="" id="userEmail" placeholder="Enter Email...">
40+
</div>
41+
<div class="field">
42+
<label for="jobRole">Job Role</label>
43+
<select name="" id="">
44+
<option value="frontend">Front End Developer</option>pt
45+
<option value="backend">Back End Developer</option>pt
46+
<option value="fullstack">Full Stack Developer</option>pt
47+
</select>
48+
</div>
49+
<div class="textArea">
50+
<label for="userAddress">Enter Address</label>
51+
<textarea name="" id="userAddress" cols="20" rows="3"></textarea>
52+
</div>
53+
<div class="field">
54+
<label for="userCity">City</label>
55+
<input type="text" name="" id="userCity" placeholder="Enter City...">
56+
</div>
57+
<div class="field">
58+
<label for="userPincode">Pincode</label>
59+
<input type="number" name="" id="userPincode" placeholder="Enter Pincode...">
60+
</div>
61+
<div class="field">
62+
<label for="startDate">Start Date</label>
63+
<input type="date" name="" id="startDate">
64+
</div>
65+
<div class="field">
66+
<label for="userCV">Upload Your CV</label>
67+
<input type="file" name="" id="userCV">
68+
</div>
69+
</form>
70+
<div class="submit">
71+
<input type="submit" value="Apply Now">
72+
</div>
73+
</div>
74+
75+
</body>
76+
77+
</html>

‎application-form/style.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'Tilt Neon', cursive;
8+
}
9+
10+
body {
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
height: 100vh;
15+
background-color: rgb(230, 230, 230);
16+
}
17+
18+
#applicationForm {
19+
background-color: white;
20+
box-shadow: 1px 1px 5px black;
21+
border-radius: 6px;
22+
padding: 20px;
23+
max-width: 600px;
24+
}
25+
26+
.field {
27+
display: flex;
28+
justify-content: center;
29+
flex-direction: column;
30+
padding: 2px 0;
31+
}
32+
33+
form {
34+
display: grid;
35+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
36+
grid-gap: 20px;
37+
padding: 20px 0;
38+
}
39+
40+
form label {
41+
font-size: 15px;
42+
padding: 0 3px;
43+
}
44+
45+
form input,
46+
form textarea,
47+
form select {
48+
padding: 3px 5px;
49+
border: 2px solid grey;
50+
border-radius: 3px;
51+
outline: none;
52+
}
53+
54+
form textarea:focus,
55+
form select:focus,
56+
form input:focus {
57+
border: 2px solid rgb(255, 0, 119);
58+
}
59+
60+
.textArea {
61+
grid-column: 1 / span 2;
62+
}
63+
64+
textarea {
65+
width: 100%;
66+
}
67+
68+
.submit {
69+
display: flex;
70+
justify-content: right;
71+
}
72+
73+
.submit input {
74+
background-color: rgb(255, 0, 68);
75+
padding: 10px 20px;
76+
color: #fff;
77+
border: 1px solid black;
78+
font-weight: 900;
79+
border-radius: 4px;
80+
transition: .2s linear;
81+
}
82+
83+
.submit input:hover {
84+
background-color: rgb(58, 58, 244);
85+
}
86+
87+
@media (max-width:500px) {
88+
.textArea {
89+
grid-column: 1 / span 1;
90+
}
91+
92+
#applicationForm {
93+
min-width: 300px;
94+
}
95+
96+
.field {
97+
padding: 1px 0;
98+
}
99+
100+
form {
101+
grid-gap: 10px;
102+
}
103+
}

‎music-website/hero_image.png‎

1.53 MB
Loading

‎music-website/index.html‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
<!--
2+
3+
Time : Learning HTML, CSS & JS
4+
Project : Practice Website 7
5+
Details : This is an accordian using HTML, CSS and JS.
6+
Date : March / 2023
7+
8+
-->
9+
10+
11+
12+
<!DOCTYPE html>
13+
<html lang="en">
14+
15+
<head>
16+
<meta charset="UTF-8">
17+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
18+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
19+
<title>Music Website</title>
20+
21+
<!-- google fonts -->
22+
<link rel="preconnect" href="https://fonts.googleapis.com">
23+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
24+
<link href="https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap" rel="stylesheet">
25+
26+
<!-- stylesheet link -->
27+
<link rel="stylesheet" href="style.css">
28+
29+
<!-- boostrap link -->
30+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
31+
32+
<script src="https://unpkg.com/scrollreveal"></script>
33+
</head>
34+
35+
<body>
36+
<nav>
37+
<div class="logo">myTunes</div>
38+
<ul>
39+
<li><a href="#overview">Overview</a></li>
40+
<li><a href="#music">Music</a></li>
41+
<li><a href="#video">Video</a></li>
42+
<li><a href="#gift">Gift Cards</a></li>
43+
</ul>
44+
</nav>
45+
46+
<div id="overview">
47+
<h1>my Tunes</h1>
48+
<h3>Your music,movies and TV shows takes ceter stage.</h3>
49+
<p>myTune is the best way to the music , movies and TV shows you already have - and shop for the once you. </p>
50+
</div>
51+
52+
<div id="music">
53+
<div class="container">
54+
55+
<h2><i class="bi bi-music-note-beamed"></i>Music</h2>
56+
<p>Stream over 45 million songs, ad-free or download albums and tracks to listen to offline. All the music
57+
in
58+
your personal myTune library - no matter here it came from lives right alongside the orange music
59+
catelog.
60+
Start your free three onth trial with no commitment and cancell any time</p>
61+
62+
<button>Start Your Trial Now</button>
63+
64+
<p>Orange music is availae on myTune and for ios and android devices</p>
65+
<div class="device">
66+
<img src="ipad-iphone.png" alt="">
67+
</div>
68+
</div>
69+
</div>
70+
71+
<div id="video">
72+
<div class="container">
73+
<h2>The movie and TV collection you always wished for grafted.</h2>
74+
75+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim perferendis illum error rerum doloribus
76+
porro
77+
aliquam dignissimos ratione animi! Aliquid.</p>
78+
<button>Read More</button>
79+
<div class="img">
80+
<img src="mac.png" alt="">
81+
</div>
82+
</div>
83+
</div>
84+
85+
<div id="gift">
86+
87+
<div class="container">
88+
89+
<h2>A world of entertainment. Available wherever you are.</h2>
90+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente, quidem! Dicta explicabo nisi cum
91+
minus laborum vel aspernatur accusamus aliquam ea, exercitationem neque praesentium veritatis provident
92+
ipsum minima debitis? Perspiciatis facere delectus sunt ipsum atque veritatis provident illo
93+
consequuntur doloribus deserunt, aperiam voluptatem hic ea animi quia praesentium a eum suscipit quod
94+
similique ex? Ducimus blanditiis nemo quos?
95+
</p>
96+
</div>
97+
</div>
98+
99+
<footer>
100+
<div class="content">
101+
<div class="text">
102+
<h3>Shop & Learn</h3>
103+
Music<br>
104+
Movies<br>
105+
Shows<br>
106+
Apps<br>
107+
Gift Code
108+
</div>
109+
<div class="text">
110+
<h3>Orange Store</h3>
111+
Find a Store<br>
112+
Today at Orange<br>
113+
Orange Camp<br>
114+
Financing<br>
115+
Order Status
116+
</div>
117+
<div class="text">
118+
<h3>Eduction & Business </h3>
119+
Orange & Eduction<br>
120+
Shop for College<br>
121+
Orange and Business<br>
122+
Shoe for Business<br>
123+
Jobs
124+
</div>
125+
<div class="text">
126+
<h3>About Orange</h3>
127+
New<br>
128+
Orange Leadership<br>
129+
Investor<br>
130+
Events<br>
131+
Contact Orange
132+
</div>
133+
</div>
134+
<div class="copyright">
135+
Copyright &copy; 2022 &nbsp;[ SC ]
136+
</div>
137+
</footer>
138+
139+
<script>
140+
ScrollReveal(
141+
{
142+
reset: true,
143+
distance: "60px",
144+
duration: 1000,
145+
delay: 400
146+
}
147+
)
148+
149+
ScrollReveal().reveal('h1', { deley:200,origin: "left" });
150+
ScrollReveal().reveal('h2', { origin: "left" });
151+
ScrollReveal().reveal('p', { origin: "left" });
152+
153+
</script>
154+
155+
</body>
156+
157+
</html>

‎music-website/ipad-iphone.png‎

687 KB
Loading

‎music-website/mac.png‎

521 KB
Loading

0 commit comments

Comments
 (0)