-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
161 lines (158 loc) · 11 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!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>V-Card | Conatct</title>
<!-- cdn font-awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="assets/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<!-- Main Wrapper -->
<div class="main-wrapper">
<div class="container-xl">
<div class="row">
<div class=" col-2 col-md-1 col-lg-3 ">
<!-- Sidebar Menu -->
<header class="sidebar">
<div class="sidebar-profile">
<div class="sidebar-profile__image">
<img src="assets/images/img/sidebar-person.png" alt="">
<button id="mode-changer-contact" class="mode-changer">
<svg id="moon-svg" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.6179 12.071C13.7745 12.3738 14.974 12.4512 16.1519 12.3038C15.7564 13.1576 15.2095 13.9368 14.5344 14.6022C13.5545 15.568 12.3386 16.2603 11.0079 16.61C9.67716 16.9596 8.27805 16.9546 6.9499 16.5953C5.62174 16.2359 4.41091 15.5349 3.438 14.562C2.4651 13.5891 1.76407 12.3783 1.40475 11.0501C1.04543 9.72196 1.04036 8.32284 1.39004 6.99212C1.73973 5.66139 2.43196 4.44551 3.39779 3.46558C4.06316 2.79049 4.84238 2.24362 5.69619 1.84807C5.54883 3.02598 5.62624 4.22554 5.92898 5.38214C6.34993 6.99039 7.19137 8.45761 8.36688 9.63312C9.54239 10.8086 11.0096 11.6501 12.6179 12.071Z" stroke="#707070" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg id="sun-svg" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 17.625C15.1066 17.625 17.625 15.1066 17.625 12C17.625 8.8934 15.1066 6.375 12 6.375C8.8934 6.375 6.375 8.8934 6.375 12C6.375 15.1066 8.8934 17.625 12 17.625Z" stroke="#F7F7F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 3.375V1.5" stroke="#F7F7F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.89689 5.89707L4.57501 4.5752" stroke="#F7F7F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.375 12H1.5" stroke="#F7F7F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.89689 18.103L4.57501 19.4249" stroke="#F7F7F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 20.625V22.5" stroke="#F7F7F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.1031 18.103L19.425 19.4249" stroke="#F7F7F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.625 12H22.5" stroke="#F7F7F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.1031 5.89707L19.425 4.5752" stroke="#F7F7F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
<h2 class="sidebar-profile__name">Stiphen Osais</h2>
<p class="sidebar-profile__designation">UI/UX Designer</p>
<div class="sidebar-profile__social-media">
<ul>
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-pinterest-p"></i></a></li>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-solid fa-phone"></i></a></li>
</ul>
</div>
</div>
<nav class="sidebar-menu">
<ul>
<li><a href="index.html"><i class="fa-solid fa-house"></i><span>Home</span></a></li>
<li><a href="resume.html"><i class="fa-solid fa-id-card-clip"></i><span>Resume</span></a></li>
<li><a href="portfolio.html"><i class="fa-solid fa-briefcase"></i><span>Portfolio</span></a></li>
<li><a href="blog.html"><i class="fa-brands fa-blogger-b"></i><span>Blogs</span></a></li>
<li><a href="contact.html" class="active"><i class="fa-solid fa-table-list"></i><span>Contact</span></a></li>
</ul>
</nav>
<div class="sidebar-contact">
<p class="sidebar-contact__address">
<i class="fa-solid fa-location-arrow"></i><span>Stockton, New Hampshire</span>
</p>
<p class="sidebar-conatct__phone">
<i class="fa-solid fa-phone"></i><span>(219) 555-0114e</span>
</p>
<p class="sidebar-contact__email">
<i class="fa-regular fa-envelope"></i><span>example.email@gmail.com</span>
</p>
</div>
</header>
</div>
<div class="col-10 col-md-11 col-lg-9">
<div class="main-bar">
<section class="contact">
<div class="row">
<div class="contact-title">
<h2>Contact</h2>
<p>Please the fill the form and you team will reach you in 24 hours</p>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-6">
<div class="contact-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d142543.57284638577!2d90.34928576871451!3d23.780777744581084!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755b8b087026b81%3A0x8fa563bbdd5904c2!2sDhaka!5e1!3m2!1sen!2sbd!4v1659539281902!5m2!1sen!2sbd" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<!-- <div id="map"></div> -->
<!-- <img src="assets/images/img/map.png" alt="contact"> -->
</div>
</div>
<div class="col-12 col-lg-6">
<div class="contact-form">
<form action="">
<input type="text" name="" id="" placeholder="First Name">
<input type="text" name="" id="" placeholder="Last Name">
<input type="email" name="" id="" placeholder="Email">
<input type="number" name="" id="" placeholder="Phone Number">
<input type="text" name="" id="" placeholder="What you need">
<textarea name="" id="" cols="30" rows="10" placeholder="Write us a message"></textarea>
<div class="contact-form-btn">
<a href="" class="btn_primary">Send Message</a>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<script src="assets/js/app.js"></script>
<!-- mode switcher javascript code -->
<script>
var toggleIconContact = document.getElementById('mode-changer-contact');
toggleIconContact.onclick= () =>{
console.log("clicked");
let local_storage_mode = localStorage.getItem('mode')
console.log(local_storage_mode)
if(local_storage_mode === 'dark'){
localStorage.setItem('mode', 'light');
document.body.classList.toggle("dark-theme");
}else{
localStorage.setItem('mode', 'dark');
document.body.classList.toggle("dark-theme");
console.log('else')
}
if (document.body.classList.contains("dark-theme")) {
document.getElementById('moon-svg').style.display = "none"
document.getElementById('sun-svg').style.display = "block"
document.getElementById('mode-changer').style.background = "#434343"
}else{
document.getElementById('sun-svg').style.display = "none"
document.getElementById('moon-svg').style.display = "block"
document.getElementById('mode-changer').style.background = "#EDEDED"
}
};
let local_storage_mode = localStorage.getItem('mode')
if(local_storage_mode === 'dark'){
document.body.classList.add("dark-theme");
console.log('Hi Dark Theme')
}else{
document.body.classList.remove("dark-theme");
}
if (document.body.classList.contains("dark-theme")) {
document.getElementById('moon-svg').style.display = "none"
document.getElementById('sun-svg').style.display = "block"
document.getElementById('mode-changer').style.background = "#434343"
}else{
document.getElementById('sun-svg').style.display = "none"
document.getElementById('moon-svg').style.display = "block"
document.getElementById('mode-changer').style.background = "#EDEDED"
}
</script>
</body>
</html>