-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
146 lines (116 loc) · 7.23 KB
/
contact.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
143
144
145
146
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="contact.css">
<link rel="stylesheet" href="navbar.css">
<link rel="stylesheet" href="chatbot.css">
<link rel="icon" href="/software.png" type="image/x-icon">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
</head>
<body>
<div class="container-fluid"> <!--begin container-->
<div class="row"><!--begin row to sperate navbar elements-->
<nav class="navbar navbar-expand-lg " data-bs-theme="dark"> <!--begin navbar-->
<div class="container-fluid">
<!--navbar elements-->
<a class="navbar-brand fs-2 fw-bold col-5 offset-1" href="./about.html">About<span
class="text-warning mx-2">Me</span></a>
<!--burger menu-->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--other elements-->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link fw-semibold mx-3" aria-current="page" href="index.html">ACCUEIL</a>
</li>
<li class="nav-item ">
<a class="nav-link fw-semibold mx-3 " href="./about.html">À PROPOS</a>
</li>
<li class="nav-item">
<a class="nav-link fw-semibold mx-3" href="./resume.html">MON CV</a>
</li>
<li class="nav-item">
<a class="nav-link fw-semibold mx-3" href="./project.html">PROJETS</a>
</li>
<li class="nav-item">
<a class="nav-link active fw-semibold mx-3" href="./contact.html">CONTACT</a>
</li>
</ul>
</div>
</div> <!--end row-->
</nav> <!--end navbar-->
<main class="container-fluid main-content"><!--begin contact content-->
<div style="margin-top: 4%;"><!--begin contact and information sector-->
<!--text id for responsive font size-->
<p class="fs-1 text-light fw-bold text-center elm-1 ">Contactez <span
class="text-warning">Moi</span></p>
<p id="text" class="fw-medium text-center elm-2 " style="color: #9CA3AF ;font-family: 'Cherry Swash', serif
;font-style: normal;">
N'hésitez pas à me contacter. Je suis toujours ouvert pour discuter de nouveaux
<br>
projets, idées créatives ou opportunités pour faire partie de vos visions.
</p>
</div>
<div style="margin-top: 3%;"> <!--begin row to divide elements-->
<div class="my-xl-4 offset-xl-3 offset-lg-4 col-xl-9 col-lg-4 col-sm-8 col-md-8 row">
<!--information-->
<!--begin information sector-->
<!--use text 2 for responsive font size-->
<div class="row ">
<div class="text-light fw-bold col-xl-5 col-lg-9 mb-4 elm-3">
<span class="fs-1 text-warning"><i class="fas fa-home icon"></i></span>
<span class="text2 ms-1">Boulevard Vauban, Guyancourt, France</span>
</div>
<div class="text-light fw-bold col-xl-5 col mb-4 elm-4">
<span class="fs-1 text-warning"><i class="fas fa-phone-alt icon"></i></span>
<span class="text2 ms-2">0646973854</span>
</div>
<div class="text-light fw-bold col-xl-5 col-lg-9 mb-4 elm-5">
<span class="fs-1 text-warning"><i class="fas fa-envelope icon"></i></span>
<span class="text2 ms-2">mohamedmaghzaoui53@gmail.com</span>
</div>
<div class="text-light fw-bold col-xl-5 mb-4 elm-6">
<span class="fs-1 text-warning"><i class="fas fa-birthday-cake icon"></i></span>
<span class="text2 ms-2">20</span>
</div>
<div class="text-light fw-bold col-xl-5 col-lg-9 mb-4 elm-7">
<span class="fs-1 text-warning"><i class="fab fa-github icon"></i></span>
<span class="text2 ms-1"><a href="https://github.com/mohamedmaghzaoui"
id="link">https://github.com/mohamedmaghzaoui</a></span>
</div>
<div class="text-light fw-bold col-xl-5 mb-4 elm-8">
<span class="fs-1 text-warning"><i class="fab fa-linkedin icon"></i></span>
<span class="text2 ms-2"><a id="link"
href="https://www.linkedin.com/in/mohamed-maghzaoui-577044256/">Connectez-vous
avec moi sur
LinkedIn</a></span>
</div>
<div id="chatbot-window" class="col-xl-1">
<div id="chatbox">
<p class="botText"><span>Bonjour ! Posez-moi des questions sur moi.</span></p>
</div>
<input class="ms-3" id="userInput" type="text" placeholder="Tapez votre question...">
<button class="btn btn-warning ms-3 my-3" onclick="getResponse()">Envoyer</button>
</div>
</div>
</div><!--end information sector-->
</div><!--end information and form sectors-->
<!-- Chatbot Toggle Button -->
<div id="chatbot-toggle" class="btn btn-outline-warning" onclick="toggleChatbot()">
<i class="fas fa-comment-dots"></i>
</div>
<!-- Chatbot Window -->
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="./chatbot.js">
</script>
</body>
</html>