-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
145 lines (137 loc) · 7.29 KB
/
index.html
File metadata and controls
145 lines (137 loc) · 7.29 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
<!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">
<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=Inter&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/home.css">
<link rel="stylesheet" href="styles/slicknav.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://kit.fontawesome.com/bfd3987de4.js" crossOrigin="anonymous"></script>
<script src="https://unpkg.com/typeit@8.0.1/dist/index.umd.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/jquery.slicknav.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#nav').slicknav({ prependTo: "#mobile_menu" });
});
</script>
<title>The Programming Saints</title>
</head>
<body>
<header>
<nav id="mobile_menu"></nav>
<nav id="nav">
<ul id="nav-items">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="pages/about.html">About Us</a></li>
<li><a href="pages/team.html">Team</a></li>
<li><a href="pages/news.html">News</a></li>
<li><a href="pages/events.html">Events</a></li>
<li><a href="pages/contact.html">Contact Us</a></li>
</ul>
</nav>
</header>
<main data-aos="fade-down" data-aos-duration="1000">
<div class="cover">
<img src="https://i.ibb.co/HzyV66v/cover.png">
<div class="cover-text">
<img class="logo" src="images/home/tps-logo.png" alt="logo">
<h1>The Programming Saints</h1>
<h2></h2>
<div class="links">
<div class="link"><a href="https://github.com/Programming-Saints" target="_blank"><i
class="fab fa-github"></i></a>
</div>
<div class="link"><a href="#" target="_blank"><i class="fab fa-facebook"></i></a></div>
<div class="link"><a href="#" target="_blank"><i class="fab fa-instagram"></i></a></div>
<div class="link"><a href="#" target="_blank"><i class="fab fa-twitter"></i></a></div>
<div class="link"><a href="#" target="_blank"><i class="far fa-envelope"></i></a></div>
</div>
</div>
</div>
<div class="home-content">
<div class="discord"><a href="https://discord.gg/SrG8W7DkeR">
<i id="disc" class="fab fa-discord"></i>
Join Our Discord</a>
</div>
<div class="mission">
<h3><i id="mission-icon" class="fas fa-bullseye-arrow"></i>Our Mission</h3>
<p>Our mission is to make the connection between education and application of skills to prepare for
entering the development industry. It’s also to demystify programming by helping students and the
community to better understand what programming is and how to use it.
</p>
</div>
<hr class="line">
<p id="typewrite" data-aos="fade-in" class="join"></p>
<div class="vec-wrap">
<div data-aos="fade-left" data-aos-duration="1000" id="programmer" class="club-details">
<img class="svg" src="images/svg/learn.svg" alt="Programmer">
<div class="club-text">
<h3>Are you eager to learn?</h3>
<p>With collaboration amongst other club members, guest speakers, and working on real projects,
you
can develop vital programming skills, and create important connections with peers that you
will
need in your career.
</p>
<a class="learn-more" href="pages/about.html">About Us<i id="learn-icon"
class="fal fa-arrow-right"></i></a>
</div>
</div>
<div data-aos="fade-right" data-aos-duration="1000" id="team" class="club-details">
<img id="team-svg" class="svg" src="images/svg/team.svg" alt="Team">
<div class="club-text">
<h3>We have a spot for everybody!</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae possimus voluptates modi
dolore illum, tempore non eaque corrupti esse exercitationem.</p>
<a class="learn-more" href="pages/team.html">Our Team<i id="learn-icon"
class="fal fa-arrow-right"></i></a>
</div>
</div>
<div data-aos="fade-left" data-aos-duration="1000" id="computer" class="club-details">
<img class="svg" src="images/svg/computer.svg" alt="Computer">
<div class="club-text">
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et sapiente illo voluptatum rerum
non
sequi
facilis sint laudantium blanditiis excepturi.</p>
<a class="learn-more" href="pages/news.html">News<i id="learn-icon"
class="fal fa-arrow-right"></i></a>
</div>
</div>
<div data-aos="fade-right" data-aos-duration="1000" id="event" class="club-details">
<img class="svg" src="images/svg/event.svg" alt="Event">
<div class="club-text">
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et sapiente illo voluptatum rerum
non
sequi
facilis sint laudantium blanditiis excepturi.</p>
<a class="learn-more" href="pages/events.html">Events<i id="learn-icon"
class="fal fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</main>
<footer>
<p>2021 © Santa Fe College's Programming Saints</p>
<div class="foot-links">
<div class="f-link"><a href="#" target="_blank"><i class="fab fa-facebook"></i></a></div>
<div class="f-link"><a href="#" target="_blank"><i class="fab fa-instagram"></i></a></div>
<div class="f-link"><a href="#" target="_blank"><i class="fab fa-twitter"></i></a></div>
<div class="f-link"><a href="#" target="_blank"><i class="far fa-envelope"></i></a></div>
</div>
</footer>
<script>
AOS.init();
</script>
<script src="js/type.js"></script>
</body>
</html>