Skip to content

4 mini projects added #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
3li-507 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

4 mini projects added #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
99873b1
1st project done
Mar 28, 2026
c3431fb
2nd project done
Mar 28, 2026
1a23304
done 1st and 2nd project
Mar 30, 2026
5e2f0f7
finish 3rd project
Mar 30, 2026
a675155
4th project done
Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
226 changes: 226 additions & 0 deletions CSS/introduction/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,226 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>

<style>
body {
background-color: #b31ff7;
color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h2 {
margin-top: 0;
}

.form-group {
margin-bottom: 15px;

}

.d-block {
margin-bottom: 6px;
display: block;
}

select.form-control {
height: 25px;
}

.form-control {
width: 98%;
padding: 5px;
border-radius: 5px;
border-style: solid;
border-width: 0px;
border-color: white;
height: 20px;
}

.container {
background-color: #4e0373;
width: 500px;
border-radius: 5px;
padding: 15px;
margin: auto;
margin-top: 100px;
}

.btn {
width: 80px;
padding: 5px;
border: 0;
border-radius: 5px;
font-size: 15px;

}

.bg-orange {
background-color: orange;
}

.bg-green {
background-color: #0ed97d;
}

</style>
</head>

<body>

<div class="container">

<h2>Please fill the contact form</h2>

<form method="get" action="" enctype="multipart/form-data">

<div class="form-group">
<label class="d-block" for="name">Name: </label>
<input
name="name"
id="name"
type="text"
placeholder="enter your name"
maxlength="10"
class="form-control"
>
</div>

<div class="form-group">
<label class="d-block" for="email">Email: </label>
<input
id="email"
type="email"
name="email"
placeholder="enter your email"
class="form-control"
>
</div>

<div class="form-group">
<label class="d-block" for="phone">Phone:</label>
<input
type="tel"
id="phone"
name="phone"
placeholder="050 123 4567"
class="form-control"
>
</div>

<div class="form-group">
<label class="d-block" for="refer">How did you hear about me?</label>
<select
name="refer"
id="refer"
required
class="form-control"
>
<option value="" selected>select from the following...</option>
<option value="friend">From a friend</option>
<option value="social">Social media</option>
<option value="google">Google search</option>
<option value="others">Others</option>
</select>
</div>

<div class="form-group">
<span>Gender:</span>

<label for="male">male</label>
<input
id="male"
type="radio"
name="gender"
value="male"
>

<label for="female">female</label>
<input
id="female"
type="radio"
name="gender"
value="female"
>
</div>

<div class="form-group">
<div>Which field you want to ask about?</div>

<div>
<input
id="web"
type="checkbox"
name="product"
value="web"
>
<label for="web">Web development</label>
</div>

<div>
<input
id="AI"
type="checkbox"
name="product"
value="AI"
>
<label for="AI">AI</label>
</div>

<div>
<input
id="project"
type="checkbox"
name="product"
value="project"
>
<label for="project">Project Management</label>
</div>
</div>

<div class="form-group">
<label class="d-block" for="date">What is the appropriate date?</label>
<input
id="date"
type="date"
name="date"
class="form-control"
>
</div>

<div class="form-group">
<label class="d-block" for="message">Feel free to write:</label>
<input
type="text"
id="message"
name="message"
placeholder="Write here ..."
class="form-control"
>
</div>

<div class="form-group">
<label class="d-block" for="files">Attach a file (optional): </label>
<input
type="file"
id="files"
name="files"
accept="application/pdf"
multiple
>
</div>

<div class="form-group" >
<button class="btn bg-green" type="submit">send</button>
<input class="btn bg-orange" type="reset" value="clear">
</div>

</form>

</div>

</body>
</html>
153 changes: 153 additions & 0 deletions HTML/introduction/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
</head>
<body>

<h2>Please fill the contact form</h2>

<form method="get" action="" enctype="multipart/form-data">

<div>
<label for="name">Name: </label>
<input
name="name"
id="name"
type="text"
placeholder="enter your name"
maxlength="10"
>
</div>

<div>
<label for="email">Email: </label>
<input
id="email"
type="email"
name="email"
placeholder="enter your email"
>
</div>

<div>
<label for="phone">Phone:</label>
<input
type="tel"
id="phone"
name="phone"
placeholder="050 123 4567"
>
</div>

<div>
<label for="refer">How did you hear about me?</label>
<select
name="refer"
id="refer"
required
>
<option value="" selected>select from the following...</option>
<option value="friend">From a friend</option>
<option value="social">Social media</option>
<option value="google">Google search</option>
<option value="others">Others</option>
</select>
</div>

<div>
<span>Gender:</span>

<label for="male">male</label>
<input
id="male"
type="radio"
name="gender"
value="male"
>

<label for="female">female</label>
<input
id="female"
type="radio"
name="gender"
value="female"
>
</div>

<div>
<div>Which field you want to ask about?</div>

<div>
<input
id="web"
type="checkbox"
name="product"
value="web"
>
<label for="web">Web development</label>
</div>

<div>
<input
id="AI"
type="checkbox"
name="product"
value="AI"
>
<label for="AI">AI</label>
</div>

<div>
<input
id="project"
type="checkbox"
name="product"
value="project"
>
<label for="project">Project Management</label>
</div>
</div>


<div>
<label for="date">What is the appropirate date?</label>
<input
id="date"
type="date"
name="date"
>
</div>
<div>
<label for="message">fell free to write: <br>
<input
type="text"
id="message"
name="message"
placeholder="Write here ...">

</label>
</div>
<div>
<label for="files">Attach a file (optional): </label>
<input
type="file"
id="files"
name="files"
accept="application/pdf"
multiple
>
</div>

<div>
<button type="submit">send</button>
<input type="reset" value="clear">
</div>

</form>


</body>
</html>
Loading