built website

iteration 1
FAUHSCoding · Apr 6, 2024 · fbfdc43 · fbfdc43
commit fbfdc43
Show file tree

Hide file tree

Showing 3 changed files with 165 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FAUHS Coding Club</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <h1>FAUHS Coding Club</h1>
+        <nav>
+            <ul>
+                <li><a href="#">Home</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#events">Events</a></li>
+                <li><a href="#">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+    <br>
+    <div class="focus">
+        <h1>proof of concept</h1>
+        <h2>Apply Today</h2>
+        <h3>September Somethingth I frogot</h3>
+    </div>
+    <br>
+    <section id="about">
+        <h2>About Us</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at justo et orci scelerisque rutrum in vel orci. In et rutrum sapien. Proin in imperdiet nibh. Fusce at est ac arcu volutpat feugiat in at nulla. Etiam ultrices auctor orci, id venenatis neque feugiat a. Nulla dictum diam eget tempor ullamcorper. Vivamus commodo semper nunc, sit amet feugiat urna.
+
+        </p>
+        <button>Learn More ></button>
+    </section>
+    <br>
+    <br>
+    <section id="events">
+        <h2>Upcoming Events</h2>
+        <ul id="event-list">
+            <li>Phasellus blandit a nisl non accumsan. Donec quis faucibus arcu. In volutpat diam non neque malesuada, in faucibus mauris vulputate. Quisque in pharetra elit. Morbi vel dignissim leo. Phasellus ut tempus lacus, eu volutpat dui. Curabitur turpis orci, egestas vitae nisi nec, iaculis faucibus ante. Duis at dignissim risus, eget rutrum mi. </li>
+            <li>Sed vitae nulla et magna suscipit sagittis vel in eros. Nullam eu enim turpis. Nam scelerisque eros sapien, non ornare nunc lobortis sed. Ut mattis ex efficitur, auctor ex ut, cursus nisl. Integer dignissim ut ex a interdum. Curabitur pretium purus a enim commodo, ut consequat massa vestibulum. Phasellus fringilla viverra fringilla. </li>
+        </ul>
+    </section>
+    <br>
+    <footer>
+        <p>&copy; 2024 FAUHS Coding Club</p>
+    </footer>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
diff --git a/style.css b/style.css
@@ -0,0 +1,114 @@
+/* style.css */
+@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+
+body {
+    max-width: 1000px;
+    margin: auto;
+    padding: 10px;
+    font-family: "Inter", sans-serif;
+}
+
+h1 {
+    font-family: "Source Code Pro", monospace;
+}
+
+h2 {
+    font-family: "Josefin Sans", sans-serif;
+    margin-bottom: -10px;
+}
+
+h3 {
+    font-family: "Source Code Pro", monospace;
+
+}
+
+button {
+    text-decoration: none;
+    padding: 5px 15px;
+    border-radius: 20px;
+    border: 2px solid black;
+    color: black;
+    background-color: white;
+    font-family: "Source Code Pro", monospace;
+    font-weight: 600;
+}
+
+button:hover {
+    background-color: black;
+    color: white;
+}
+
+.focus {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.45),
+                       rgba(0, 0, 0, 0.5)), url(https://media.discordapp.net/attachments/1144092548902694980/1226015140172927067/image.png?ex=66233a93&is=6610c593&hm=4b9d28cffebbeac78ce5e07088d0c53764c6ebe9d4a965a49ccd2d8418dfb3fe&=&format=webp&quality=lossless&width=956&height=671);
+
+    border-radius: 10px;
+    padding: 10%;
+    color: white;
+
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: auto;
+    background-position-y: top;
+    background-size: inherit;
+}
+
+section {
+    padding-left: 5%;
+    padding-right: 5%;
+}
+
+header {
+    overflow: hidden; /* Clear floats */
+    border: 2px solid black;
+    border-radius: 10px;
+    margin-top: 0px;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 5px;
+}
+
+header h1 {
+    float: left; /* Title floats left */
+    font-family: "Source Code Pro", monospace;
+    font-size: 25px;
+    font-weight: 650;
+    margin-top: 10px;
+}
+
+nav {
+    float: right; /* Nav floats right */
+}
+
+nav ul {
+    list-style-type: none;
+    margin-top: 15px;
+}
+
+nav ul li {
+    display: inline;
+    margin-right: 10px;
+    font-family: "Source Code Pro", monospace;
+    font-weight: 600;
+}
+
+nav ul li a {
+    text-decoration: none;
+    padding: 5px 15px;
+    border-radius: 20px;
+    border: 2px solid black;
+    color: black;
+}
+
+nav ul li a:hover {
+    background-color: black;
+    color: white;
+}
+
+footer {
+    text-align: center;
+    font-family: "Source Code Pro", monospace;
+}