🎉 feat: Initial commit

HarshKapadia2 · Jul 18, 2020 · 4ddd3a8 · 4ddd3a8
commit 4ddd3a8
Show file tree

Hide file tree

Showing 17 changed files with 1,411 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.vscode
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Harsh Kapadia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+# sample-contact-us-page
+
+A sample contact us web page made with HTML, vanilla CSS and JS.
+
+The navbar and footer code was taken from my [sample-challenge-page](https://harshkapadia2.github.io/sample-challenges-page/) project.
diff --git a/index.html b/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="keywords" content="codecell, tsec, contact, contact us, harsh kapadia, html, css, js, vanilla css">
+        <meta name="description" content="A contact us static page for TSEC CodeCell by Harsh Kapadia">
+        <meta name="author" content="Harsh Kapadia">
+
+        <link href="https://fonts.googleapis.com/css2?family=Overpass+Mono&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="./static/css/base.css">
+        <link rel="stylesheet" href="./static/css/navbar.css">
+        <link rel="stylesheet" href="./static/css/footer.css">
+
+        <link rel="shortcut icon" href="./static/img/codecell_logo.svg" type="image/x-icon" sizes="any">
+
+        <script defer src="./static/js/account_dropdown.js"></script>
+        <script defer src="./static/js/burger_menu_dropdown.js"></script>
+
+        <title>TSEC CodeCell</title>
+    </head>
+
+    <body>
+        <nav class="navbar">
+            <div class="left-side">
+                <div class="burger-menu">
+                    <div class="line-1"></div>
+                    <div class="line-2"></div>
+                    <div class="line-3"></div>
+                </div>
+
+                <div class="logo">
+                    <a href="#"><img src="./static/img/codecell_logo.svg" alt="TSEC CodeCell"></a>
+                </div>
+
+                <ul class="navbar-main-ul hide-burger-menu burger-menu-dropdown">
+                    <a href="#"><li>Home</li></a>
+                    <a href="#"><li>About</li></a>
+                    <a href="#"><li>Challenges</li></a>
+                    <a href="#"><li>Ranklist</li></a>
+                    <a href="#"><li>TSEC Hacks</li></a>
+                    <a href="#"><li>Contact Us</li></a>
+                </ul>
+            </div>
+
+            <div class="right-side">
+                <div class="account">
+                    <img src="./static/img/harsh_kapadia_pic.jpg" alt="HK">
+
+                    <div class="dropdown-caret"></div>
+                </div>
+
+                <div class="dropdown hide">
+                    <div class="user-name">HarshKapadia2</div>
+
+                    <ul>
+                        <a href="#"><li>Your profile</li></a>
+                        <a href="#"><li>Settings</li></a>
+                        <a href="#"><li>Log Out</li></a>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+        <main></main>
+
+        <footer>
+            <a href="#" target="_blank"><img class="social-media-img" src="./static/img/social_media/facebook.svg" alt="Facebook"></a>
+            <a href="#" target="_blank"><img class="social-media-img" src="./static/img/social_media/github.svg" alt="GitHub"></a>
+            <a href="#" target="_blank"><img class="social-media-img" src="./static/img/social_media/instagram.svg" alt="Instagram"></a>
+
+            <a href="#"><img class="codecell-img" src="./static/img/codecell_logo.svg" alt="TSEC CodeCell"></a>
+
+            <a href="#" target="_blank"><img class="social-media-img" src="./static/img/social_media/linkedin.svg" alt="LinkedIn"></a>
+            <a href="#" target="_blank"><img class="social-media-img" src="./static/img/social_media/twitter.svg" alt="Twitter"></a>
+            <a href="#" target="_blank"><img class="social-media-img" src="./static/img/social_media/youtube.svg" alt="YouTube"></a>
+        </footer>
+    </body>
+</html>
diff --git a/static/css/base.css b/static/css/base.css
@@ -0,0 +1,29 @@
+*
+{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body
+{
+    background-color: black;
+    font-family: 'Overpass Mono', monospace;
+    color: #f5f5f5;
+}
+
+a
+{
+    text-decoration: none;
+    color: #f5f5f5;
+}
+
+a:hover
+{
+    color: #69f0ae;
+}
+
+.hide
+{
+    display: none;
+}
diff --git a/static/css/footer.css b/static/css/footer.css
@@ -0,0 +1,59 @@
+footer
+{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 20vh;
+    width: 75%;
+    margin: auto;
+    opacity: 0.2;
+    border-top: 1px solid #212121;
+    margin-top: 2%;
+}
+
+footer:hover
+{
+    animation: fade 0.3s ease;
+    opacity: 0.9;
+}
+
+.social-media-img
+{
+    height: 5vh;
+}
+
+.codecell-img
+{
+    height: 10vh;
+}
+
+@keyframes fade
+{
+    0%
+    {
+        opacity: 0.2;
+    }
+
+    100%
+    {
+        opacity: 0.9;
+    }
+}
+
+/* Media queries */
+
+@media screen and (max-width: 1295px)
+{
+    footer
+    {
+        width: 95%;
+    }
+}
+
+@media screen and (max-width: 500px)
+{
+    footer
+    {
+        opacity: 0.9;
+    }
+}
diff --git a/static/css/navbar.css b/static/css/navbar.css
@@ -0,0 +1,190 @@
+.navbar
+{
+    height: 10vh;
+    display: flex;
+    align-items: center;
+}
+
+.left-side
+{
+    display: flex;
+    align-items: center;
+    flex: 1;
+}
+
+.logo
+{
+    padding: 0 2%;
+}
+
+.logo img
+{
+    height: 7vh;
+}
+
+ul
+{
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: 50%;
+}
+
+li
+{
+    list-style: none;
+}
+
+.left-side li
+{
+    height: 10vh;
+    display: flex;
+    align-items: center;
+}
+
+.right-side
+{
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    flex: 0.1;
+}
+
+.account
+{
+    display: flex;
+    align-items: center;
+    margin-right: 30%;
+}
+
+.account:hover
+{
+    cursor: pointer;
+}
+
+.right-side img
+{
+    height: 5vh;
+    border-radius: 50px;
+    margin-right: 20%;
+}
+
+.dropdown-caret {
+    border-top-style: solid;
+    border-top-width: 4px;
+    border-right: 4px solid transparent;
+    border-bottom: 0 solid transparent;
+    border-left: 4px solid transparent;
+}
+
+.dropdown
+{
+    position: absolute;
+    top: 8vh;
+    right: 1vh;
+    border: 0.5px solid;
+    border-radius: 5px;
+    border-color: #212121;
+    padding: 0.5%;
+    box-shadow: 0 0 10px #212121;
+    background-color: black;
+    z-index: 2;
+}
+
+.user-name
+{
+    margin-bottom: 5%;
+    padding: 2%;
+    width: 180px;
+    border-bottom: 1px solid #212121;
+    color: #757575;
+}
+
+.user-name:hover
+{
+    cursor: default;
+}
+
+.dropdown ul
+{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 180px;
+}
+
+.dropdown li
+{
+    padding: 2%;
+    width: 180px;
+}
+
+.dropdown li:hover
+{
+    background-color: #424242;
+    border-radius: 3px;
+}
+
+
+/* Media query */
+
+@media screen and (max-width: 1200px)
+{
+    .logo
+    {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+    }
+
+    .burger-menu
+    {
+        flex: 0.1;
+        padding-left: 2%;
+    }
+
+    .burger-menu:hover
+    {
+        cursor: pointer;
+    }
+
+    .line-1, .line-2, .line-3
+    {
+        width: 25px;
+        height: 3px;
+        background-color: #f5f5f5;
+        margin: 5px;
+    }
+
+    .burger-menu-dropdown
+	{
+		display: flex;
+		flex-direction: column;
+		position: absolute;
+		top: 10vh;
+		left: 0;
+		width: 100%;
+		margin: auto;
+		z-index: 1;
+		background-color: rgba(0, 0, 0, 0.9); /* RGB of black */
+	}
+
+	.burger-menu-dropdown li
+	{
+		width: 90vw;
+		display: flex;
+		justify-content: center;
+	}
+
+	.burger-menu-dropdown li:hover
+	{
+		color: #69f0ae;
+		background-color: rgba(66, 66, 66, 0.3);
+		border-radius: 8px;
+	}
+
+	.hide-burger-menu
+	{
+		display: none;
+	}
+}