-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
146 lines (124 loc) · 7.43 KB
/
index.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>
<head>
<title>San Diego Digital Arts</title>
<link rel="icon" href="Icons/DigitalArts.png">
<link rel = "stylesheet" href = "styles/general.css">
<link rel = "stylesheet" href = "styles/index.css">
<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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&family=Lexend+Deca:wght@400;500&family=Outfit:wght@200;300&family=Roboto+Mono:wght@180;700&family=Schoolbell&family=Space+Grotesk:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- BOOTSTRAP AND JQUERY -->
<!-- NONE OF THESE FONTS ARE ASS -->
<!--
font-family: 'Chelsea Market', cursive;
font-family: 'Lexend Deca', sans-serif;
font-family: 'Outfit', sans-serif;
font-family: 'Roboto Mono', monospace;
font-family: 'Schoolbell', cursive;
font-family: 'Space Grotesk', sans-serif;
-->
</head>
<body>
<!-- FIRST PAGE -->
<div class="row no-gutters">
<div class="col-xl-6 no-gutters left-side">
<div class="centered" style="max-width:80%;">
<p class = "lh" style="font-weight:100;margin:0;">Digital Arts</p>
<p class = "xlh" style="font-weight:900;display:inline-block;margin:0;">And Code</p><span class="blinking-cursor xlh">_</span>
<!-- FOR SOME REASON HR TAGS DONT WORK WITH BOOTSTRAP.CSS SO I JUST MADE A LINE CLASS -->
<div class = "line blue"></div>
<!-- I CANT GET THIS TO WORK AAAAHHAHAHA-->
<!-- <div class = "st text-wrapper">
<p>Created </p>
<p>by </p>
<p>La </p>
<p>Jolla </p>
<p>High </p>
<p>School</p>
<p>Students!</p>
</div> -->
<p class = "st">For High School Students in San Diego</p>
<!-- LINKS PUT IN A TABLE SO THEY EXPAND IF WE WANT TO CHANG THE SIZE OF THE TITLE FONT -->
<table style = "width:100%;margin:0;padding:0;">
<tr>
<td><a class = "link-icon" href="https://discord.gg/uKAa4vXWMD" style = "background-image: url('Icons/discord.svg');"></a></td>
<!-- <td><a class = "link-icon small" style = "background-image: url('Icons/twitter.svg');"></a></td> -->
<td><a class = "link-icon" href="mailto:[email protected]?subject=Mail from the SDDA Website" style = "background-image: url('Icons/gmail.svg');"></a></td>
<td><a class = "link-icon" style = "background-image: url('Icons/github.svg');" href="https://github.com/SDArtsCode"></a></td>
</tr>
</table>
<div style = "transform: skew(-10deg, 10deg);margin-left:56px;margin-top:10px;">
<div style="background-image:url('Icons/iconmonstr-cursor-30.svg');width:30px;height:30px;display:inline-block;background-repeat:no-repeat;transform:rotate(-30deg) scale(1.2, 1.2);"></div>
<p class = "st" style = "display:inline-block;font-weight:bold;"> JOIN THE DISCORD!</p>
</div>
</div>
</div>
<div class="col-xl-6 no-gutters right-side ">
<div class = "relative-centered">
<p class = "h">Who are we?</p>
<div class = "line pink"></div>
<p class = "t" style="line-height: 40px;">NOT a brand or an entrepreneur.
Just a group of high school students who love making games, art, and music and who want to make an active digital arts community!
</p>
<!-- <a style="font-weight:600;" class = "lt page-lin" href="pages/mission.html">Read More -></a> -->
<div style = "padding:20px;"></div>
<p class = "h" style="display:inline-block;margin-right:20px;">Showcase</p>
<!-- <p style="display:inline-block;margin:0;" class = "t">(Games and music made by our members!)</p> -->
<div class = "line yellow"></div>
<div style = "width:100%;">
<div class = "project-card" onclick="window.location = 'https://github.com/Gegbee/PixelPenalty'">
<img src="Imgs/PixelPenalty.png" alt="Image">
<div>
<p class = "t handwriting" style = "padding:20px;text-align:center;">Pixel Penalty!</p>
</div>
</div>
<div class = "project-card" onclick="window.location = 'https://lajollagamesclub.itch.io/podmornica'">
<img src="Imgs/Podmornica.png" alt="Image">
<div>
<p class = "t handwriting" style = "padding:20px;text-align:center;">Podmornica</p>
</div>
</div>
<div class = "project-card" onclick="window.location = 'https://youtu.be/MTnpEPUrJiI'">
<img src="Imgs/Cyberdad.jpg" alt="Image">
<div>
<p class = "t handwriting" style = "padding:20px;text-align:center;">Cyberdad OST</p>
</div>
</div>
</div>
<div style = "padding:30px;"></div>
<!-- <a style="font-weight:600;" class = "lt page-lin" href="pages/showcase.html">See More -></a> -->
</div>
</div>
</div>
<!-- ONCE OTHER PAGES ARE DONE, UNCOMMENT THE MENU AND INSERT THE CORRESPONDING LINKS -->
<!--
<div class="menubar">
<div class="link-container">
<a class="current menubar-link" href="index.html">Home</a>
<a class="menubar-link" href="mission.html">Mission</a>
<a class="menubar-link" href="showcase.html">Showcase</a>
</div>
<div class="mobile-container" style="display: none;">
<button id="mobile-links-show"><svg viewBox="0 0 60 60" width="50" height="50"><rect y="10" width="45" height="5"></rect><rect y="25" width="45" height="5"></rect><rect y="40" width="45" height="5"></rect></svg></button>
<ul id="mobile-links">
<a class="current-mobile mobile-link" href="index.html">Home</a>
<a class="mobile-link" href="mission.html">Mission</a>
<a class="mobile-link" href="showcase.html">Showcase</a>
</ul>
</div>
</div> -->
<div id="read-more">
<div style="background-image:url('Icons/iconmonstr-arrow-73.svg');width:30px;height:30px;display:inline-block;background-repeat:no-repeat;transform:translateY(12px);"></div>
<p class="read-more-text" style ="display:inline-block">Scroll Down!</p>
</div>
<div class="bottom-bar">
<p class = "st">Our club made this website! -> <a href="https://github.com/SDArtsCode/Website">Github</a></p>
</div>
<script type="text/javascript" src="app.js"></script>
</body>