-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcontact.html
More file actions
183 lines (149 loc) · 8.88 KB
/
contact.html
File metadata and controls
183 lines (149 loc) · 8.88 KB
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="pl">
<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>Fizykabezryzyka Kontakt</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./css/style.css">
<script src="https://kit.fontawesome.com/5b6c54b906.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark py-3 sticky-top">
<div class="container">
<a class="navbar-brand" href="#">
<i class="fa-solid fa-pen-nib"></i>Fizyka<span class="text-primary">bez</span> ryzyka</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ms-auto">
<a class="nav-link px-lg-3" href="index.html">Home</a>
<a class="nav-link px-lg-3" href="about.html">Usługi </a>
<a class="nav-link px-lg-3" href="materialy.html">Materiały</a>
<a class="nav-link px-lg-3" href="projekty.html">Projekty</a>
<a class="nav-link px-lg-3 active" href="#">Kontakt</a>
</div>
</div>
</div>
</nav>
<main>
<section class="top-hero contact-hero">
<div class="hero-shadow"></div>
<p class="top-hero-text text-light">kontakt</p>
</section>
<section class="contact py-5">
<div class="container">
<div class="text-center py-5">
<p class="display-3">Napisz do mnie! <i class="fa-solid fa-pen-nib fa-shake"></i> </p>
</div>
<div class="row">
<div class="col-md-5 col-lg-4">
<div class="border p-5 mb-4 text-center">
<p class="mt-4 fw-bold text-uppercase">Dane kontaktowe</p>
<p class="mt-4 fw-bold text-uppercase">Faustyna Misiura</p>
<a href="https://www.linkedin.com/in/faustyna-misiura-b05943243/" class="linkedin">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="https://github.com/faustyna77" class="github">
<i class="fa-brands fa-github"></i>
</a>
<p class="mt-4 fw-bold text-uppercase">telefon</p>
<p>+48 882 081 539</p>
<p class="mt-4 fw-bold text-uppercase">e-mail</p>
<p>fizykabezryzyka@gmail.pl</p>
<div class="contact-logo mt-5 pt-4 mb-n3 border-top">
Fizyka<span class="text-primary">bez</span>
ryzyka
</div>
</div>
</div>
<div class="col-md-7 col-lg-8">
<div class="border p-5 text-center">
<h2>formularz kontaktowy</h2>
<form class="mt-5">
<div class="row">
<div class="col-md-6">
<div class="form-group mb-4">
<label>Imię i nazwisko</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-4">
<label>Adres mailowy</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6">
</div>
<div class="col-md-6">
<div class="form-group mb-4">
<label>W jakiej sprawie piszesz?</label>
<select class="form-select">
<option selected></option>
<option>Fizyka-pomoc</option>
<option>Doświadczenia wirtualne </option>
<option>Propozycja współpracy</option>
<option>Inne</option>
</select>
</div>
</div>
<div class="col-12">
<label>Wypisz treść wiadomości</label>
<textarea class="form-control" rows="6"></textarea>
</div>
<div class="mt-3">
<button class="btn btn-primary">Wyślij!</button>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<section class="contact-map pb-5">
<div class="container d-flex flex-column align-items-center">
<p class="display-4 py-4">Mapa dojazdu</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d163974.59324806317!2d19.86444958939342!3d50.046901417666824!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471644c0354e18d1%3A0xb46bb6b576478abf!2zS3Jha8Ozdw!5e0!3m2!1spl!2spl!4v1637683976518!5m2!1spl!2spl" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</section>
</main>
<footer class="bg-dark text-light">
<p class="py-5 mb-0 text-center">© 2023 Copyright <i class="fa-solid fa-pen-nib"></i> Fizyka<span
class="text-primary">bez</span>ryzyka</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/5b6c54b906.js" crossorigin="anonymous"></script>
<script>
const linkedin=document.querySelector(".fa-brands fa-linkedin")
const github=document.querySelector(".fa-brands fa-github")
const klik=(e)=>
{
e.preventDefault(); // zatrzymuje domyślną akcję, czyli otwarcie linku w tej samej karcie
window.open(this.href, '_blank');
}
linkedin.addEventListener('click', klik(e) );
github.addEventListener('click',klik(e))
</script>
</body>
</html>