-
Notifications
You must be signed in to change notification settings - Fork 0
/
connect.html
143 lines (140 loc) · 6.56 KB
/
connect.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
<!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="./css/bootstrap.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" sizes="32x32" href="./img/company logo.png">
<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=Poppins:wght@400;600&display=swap" rel="stylesheet">
<title>Connect</title>
</head>
<body>
<!--Section on navbar-->
<nav class="navbar navbar-expand-lg pt-3 shadow-sm p-3 mb-5 bg-body rounded">
<div class="container">
<a class="navbar-brand" href="index.html"><img src="./img/company logo.png" alt="Company logo"><span
class="text-dark px-1 fw-bold">CSUF</span></a>
<button class="navbar-toggler navbar-light" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 fw-bold">
<li class="nav-item">
<a class="nav-link active text-dark" aria-current="page" href="about.html">about</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="events.html">events</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="paths.html">paths</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="nodeBuds.html">node<span class="bud-primary">Buds</span></a>
</li>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="connect.html">connect</a>
</li>
</ul>
</div>
</div>
</nav>
<!---section on main content-->
<main class="container text-center ">
<div class="d-flex gap-3 mb-3 flex-wrap justify-content-center align-items-center">
<div class="">
<img src="./img/about_image.png" alt="" height="100" width="100">
</div>
<div class="align-self-lg-center">
<h2 class="fw-bold">connect</h2>
</div>
</div>
<h2 class="text-center fw-bold pt-3 pb-3">follow us!</h2>
<p class="mb-5">The best way to keep up with what’s going on in the world of acm<span
class="text-primary fw-bold">CSUF</span> is by following <br>
us on our social media, and by joining our Discord server! The accounts <br>
listed below are our only public profiles.</p>
<div class="follow_us_social-link d-flex justify-content-center align-items-center gap-5">
<div class="follow_us_social-link-insta d-flex">
<!-- <a href=""><img src="./img/logo-instagram 1.png" alt="" width="50" height="50">Instagram</a> -->
<button class="d-flex align-items-center fw-bold bg-dark text-white w-auto"><img
src="./img/logo-instagram 1.png" width="20" height="20" alt="logo-instagram">Instagram</button>
</div>
<div class="follow_us_social-link-discord">
<!-- <a href=""><img src="" alt="">Discord</a> -->
<button class="d-flex align-items-center fw-bold bg-dark text-white w-auto"><img src="./img/imb.png"
alt="Discord" height="20" width="20">discord</button>
</div>
</div>
<div class="follow_us_social-link d-flex justify-content-center align-items-center follow_us_social-link-2 gap-5 ">
<div class="follow_us_social-link-insta d-flex">
<!-- <a href=""><img src="./img/logo-instagram 1.png" alt="" width="50" height="50">Instagram</a> -->
<button class="d-flex align-items-center fw-bold bg-dark text-white w-auto"><img src="./img/linkedin.png"
width="20" height="20" alt="logo-instagram">linkedin</button>
</div>
<div class="follow_us_social-link-discord">
<!-- <a href=""><img src="" alt="">Discord</a> -->
<button class="d-flex align-items-center fw-bold bg-dark text-white w-auto"><img src="./img/youtube.png"
alt="youtube" height="20" width="20">youtube</button>
</div>
</div>
</main>
<!--Section on get in touch-->
<section class="container">
<div class="text-center p-5">
<h2>
get in touch!
</h2>
<p>Have any questions for us? Want to work with us? Just want to say hi? <br>
Whatever it is, feel free to contact us! Send us an email by filling out the form below, <br>
and we’ll have a representative get back to you as soon as possible. <br>
Don’t worry, we’re friendly! 😊</p>
</div>
<div class="mb-3 row">
<div class="col-6">
<input type="name" class="form-control shadow border-0 p-2 rounded-pill" id="exampleFormControlInput1"
placeholder="name*">
</div>
<div class="col-6">
<input type="email" class="form-control shadow border-0 p-2 rounded-pill" id="exampleFormControlInput2"
placeholder="email*">
</div>
</div>
<div class="mt-3 mb-3">
<input type="text" class="form-control shadow border-0 p-2 mt-3 rounded-pill" id="exampleFormControlInput3"
placeholder="topic*">
</div>
<div class="mt-3 mb-3">
<textarea class="form-control shadow border-0 p-2 mt-3 " id="exampleFormControlTextarea1"
style="height: 45vh; border-radius: 1.45rem;" rows="3" placeholder="message*"></textarea>
</div>
</section>
<!--section on "what are you waiting for"-->
<div class="container mt-5">
<div class="text-center">
<h2 class="fw-bold">so what are you waiting for?</h2>
<p class="pt-2">Whatever the reason is for you to reach out to us, we can’t wait to hear, and <br>
to getback to you! acm<span class="text-primary fw-bold">CSUF</span> is here to support you, as <span
class="fw-bold">we are the <br> largest tech community on campus.</span></p>
<div class="pt-3 mb-3">
<button type="submit" class="btn btn-dark fw-bold rounded">join us today!</button>
</div>
</div>
</div>
<footer class="bg-dark mt-5">
<div class="pt-5 pb-3">
<div class="text-center text-white">
<p class="fw-bold">© 2021 <img src="./img/company logo.png" alt="Company logo"><span
class="px-1 fw-bold">CSUF</span></p>
</div>
</div>
</footer>
<script src="js/bootstrap.min.js"></script>
</body>
</html>