-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact-index.html
142 lines (104 loc) · 3.98 KB
/
contact-index.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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="contact.css">
<title>My portfolio</title>
</head>
<body>
<div class="bars" id="nav-action">
<span class="bar"> </span>
</div>
<!--Navbar Links-->
<nav id="nav">
<ul>
<li class="shape-circle circle-one"><a href="contact-index.html">Contact</a></li>
<li class="shape-circle circle-two"><a href="index-about.html">About</a></li>
<li class="shape-circle circle-five">
<a href="index.html">Home</a>
</li>
</ul>
</nav>
<header>
<nav >
<div class="nav-head">
Coded By Tasneem Salim
</div>
<ul class="hover-area">
<li><a href="index.html" class="moveable-element">Home</a></li>
<li><a href="index-about.html" class="moveable-element">About</a></li>
<li><a href="contact-index.html" class="moveable-element">Contact</a></li>
</ul>
</nav>
</header>
<div class="the-flex">
<section class="first-section">
<h1>Let's start a
project together</h1>
<hr>
<div class="container">
<form id="contactForm">
<label for="name">What's your name?</label>
<input type="text" id="name" name="name" placeholder="Tasneem Salim*" required>
<hr>
<label for="email">What's your email?</label>
<input type="email" id="email" name="email" placeholder="[email protected]" required>
<hr>
<label for="organization">What's the name of your organization?</label>
<input type="text" id="organization" name="organization" placeholder="Tasneem $ Doe">
<hr>
<label for="services">What services are you looking for?</label>
<input type="text" id="services" name="services" placeholder="Web Design, Web Development ...">
<hr>
<label for="message">Your message</label>
<input id="message" name="message" placeholder="Hello Tasneem, can you help me with ... *">
<hr>
<button class="moveable-element" type="submit">Send It</button>
<hr>
</form>
</div>
</section>
<section class="second-section">
<img src="images/contactphoto.jpg" loading="lazy" alt="" class="my-photo">
<img src="icons8-arrow-24 (1).png" alt="">
<span class="gray-span">CONTACT DETAILS</span>
<a href="#" class="inform">[email protected]</a>
<a href="#" class="inform">+2010 9357 4900</a>
<span class="gray-span">BUSINESS DETAILS</span>
<p>Tasneem Salim Hasan</p>
<p>Location : Egypt</p>
<span class="gray-span">SOCIALS :</span>
<ul class="last footer-area">
<li><a href="https://www.instagram.com/tasnem_salim/" class="moveable-element text-decor " >Instagram</a></li>
<li><a href="https://www.linkedin.com/in/tasneem-salim-1b1480287/" class="moveable-element text-decor">LinkedIn</a></li>
<li><a href="https://github.com/Tasniema" class="moveable-element text-decor">Github</a></li>
</ul>
</section>
</div>
<footer>
</div>
<div class="socials">
<div class="data">
<div>
<span class="gray-word">Version</span>
<p class="white-para">2024 Edition</p>
</div>
<div>
<span class="gray-word">Local Time</span>
<p class="white-para" id="current-time"></p>
</div>
</div>
<div class="media">
<span class="gray-words">Socials</span>
<ul class="footer-area">
<li><a href="https://www.instagram.com/tasnem_salim/" class="moveable-element">Instagram</a></li>
<li><a href="https://www.linkedin.com/in/tasneem-salim-1b1480287/" class="moveable-element">LinkedIn</a></li>
<li><a href="https://github.com/Tasniema" class="moveable-element">Github</a></li>
</ul>
</div>
</div>
</footer>
<script src="contact.js"></script>
</body>
</html>