Initial commit 🚀

cslynx · Oct 11, 2023 · 0977893 · 0977893
commit 0977893
Show file tree

Hide file tree

Showing 12 changed files with 283 additions and 0 deletions.
diff --git a/css/fonts/Brave.ttf b/css/fonts/Brave.ttf
diff --git a/css/fonts/Montserrat-Black.ttf b/css/fonts/Montserrat-Black.ttf
diff --git a/css/fonts/Montserrat-Bold.ttf b/css/fonts/Montserrat-Bold.ttf
diff --git a/css/fonts/Montserrat-ExtraLight.ttf b/css/fonts/Montserrat-ExtraLight.ttf
diff --git a/css/fonts/Montserrat-Light.ttf b/css/fonts/Montserrat-Light.ttf
diff --git a/css/fonts/Montserrat-Medium.ttf b/css/fonts/Montserrat-Medium.ttf
diff --git a/css/fonts/Montserrat-Regular.ttf b/css/fonts/Montserrat-Regular.ttf
diff --git a/css/fonts/Montserrat-SemiBold.ttf b/css/fonts/Montserrat-SemiBold.ttf
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,196 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+@font-face {
+  font-family: logo;
+  src: url('./fonts/Brave.ttf');
+}
+
+@font-face {
+  font-family: regular;
+  src: url('./fonts/Montserrat-Regular.ttf');
+}
+
+@font-face {
+  font-family: boldblack;
+  src: url('./fonts/Montserrat-Black.ttf');
+}
+
+@font-face {
+  font-family: medium;
+  src: url('./fonts/Montserrat-Medium.ttf');
+}
+
+@font-face {
+  font-family: semibold;
+  src: url('./fonts/Montserrat-SemiBold.ttf');
+}
+
+body {
+  font-family: regular;
+  background: url('../images/bg1.png');
+  color: white;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+
+p {
+  text-align: left;
+  line-height: 70px;
+  margin-bottom:70px;
+}
+
+
+
+
+.navbar {
+  text-transform: uppercase;
+
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
+  background: linear-gradient(90deg, rgba(2, 0, 36, 0.1) 0%, rgba(0,22,81,0.1) 100%);
+  padding: 20px;
+  top: 0;
+  left:0;
+  right:0;
+  margin: 0 auto 0 auto;
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: transform 0.5s, border-radius 0.5s, width 0.5s, box-shadow 0.5s, background 0.1s;
+}
+
+.scrolled {
+  transform: translateY(30%);
+  background: linear-gradient(90deg, rgba(0,2,30, 0.97) 0%, rgba(5,12,61,0.97) 100%);
+  width: 80%;
+  border-radius: 50px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
+  transition: transform 0.5s, border-radius 0.5s, width 0.5s, box-shadow 0.5s, background 0.5s;
+}
+
+.navbar a {
+  float: left;
+  color: white;
+  text-align: center;
+  padding: 12px;
+  text-decoration: none;
+  font-size: 15px;
+  line-height: 25px;
+  transition: color 0.5s;
+  font-family: semibold;
+  letter-spacing: 2px;
+}
+
+.navbar-center a {
+  text-decoration: none;
+  color: white;
+  background-image: linear-gradient(white,white);
+  background-size: 0 2px, auto;
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  transition: all .3s ease-out;
+}
+
+.navbar-center a:hover {
+  background-size: 50% 2px, auto;
+  color: #bbbbbb;
+}
+
+.navbar-center a.active {
+  background-size: 50% 2px, auto;
+  color: #bbbbbb;
+}
+
+
+.navbar .logo {
+  font-family: logo;
+  font-size: 35px;
+  font-weight: bold;
+  transition: 0.4s;
+}
+
+.navbar-left {
+  flex: 0.47;
+  text-align: center;
+  transition: flex 0.3s;
+}
+.navbar-left-sc {
+  flex: 0.39;
+  text-align: center;
+  transition: flex 0.3s;
+}
+
+.navbar-center {
+  flex: 1;
+}
+
+.navbar-center a {
+  margin: 0 60px;
+}
+
+.navbar-right {
+  float: right;
+  padding-right: 20px;
+}
+
+
+.get-tickets-button {
+    text-align: center;
+    font-size: 15px;
+    background: linear-gradient(90deg, rgba(214,81,19,1) 0%, rgba(170,66,66,1) 100%);
+    color: white;
+    border: none;
+    cursor: pointer;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 100px;
+    background-color: #00F27E;
+    transition: all 0.4s ease-in;
+
+}
+
+.get-tickets-button:hover {
+    background-color: #00FFE0;
+}
+
+
+.content {
+  font-family: Montserrat;
+  margin-top: 200px;
+  padding-left: 100px;
+}
+
+.about {
+  height: 880px;
+  background: green;
+}
+
+.contact {
+  height: 880px;
+  background: tomato;
+}
+
+
+.lynx {
+  font-weight: bold;
+  font-size: 150px;
+  padding: 5px;
+}
+
+.expo {
+  font-size: 150px;
+}
+
+.S2023 {
+  font-weight: bold;
+  color:#ff7676;
+  font-size: 120px;
+  padding: 20px;
+}
diff --git a/images/bg1.png b/images/bg1.png
diff --git a/index.html b/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="./css/styles.css">
+  <title>Lynx</title>
+</head>
+<body>
+
+  <header class="navbar" id="navbar">
+    <div class="navbar-left"  id="navbar-left">
+      <a href="#default" class="logo">LYNX</a>
+    </div>
+    <div class="navbar-center">
+      <a class="navbar-links" href="#home" id="home" onclick="activateLink('home')">Home</a>
+      <a class="navbar-links" href="#about" id="about" onclick="activateLink('about')">About</a>
+      <a class="navbar-links" href="#contact" id="contact" onclick="activateLink('contact')">Contact</a>
+    </div>
+    <div class="navbar-right">
+      <a href="#tickets" class="get-tickets-button">&nbsp&nbspGet Tickets&nbsp&nbsp</a>
+    </div>
+  </header>
+
+<main>
+  <div class="content">
+    <p>
+      <span class="lynx">LYNX</span><br>
+      <span class="expo">EXPO</span><br>
+      <span class="S2023">2023</span><br>
+    <p>
+    <p>
+        &nbsp
+    </p>
+    <p>
+        &nbsp
+    </p>
+  </div>
+  <section class="about">
+
+  </section>
+
+  <section class="contact">
+
+  </section>
+
+</main>
+
+
+
+
+<script src="./js/script.js"></script>
+</body>
+</html>
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,34 @@
+
+
+window.onscroll = function() {scrollFunction()};
+
+function scrollFunction() {
+  var navbar = document.getElementById("navbar");
+  var navbar_left = document.getElementById("navbar-left");
+  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
+    navbar.classList.add("scrolled");
+    navbar_left.classList.add("navbar-left-sc");
+  } else {
+    navbar.classList.remove("scrolled");
+    navbar_left.classList.remove("navbar-left-sc");
+  }
+}
+
+function activateLink(linkId) {
+  const navLinks = document.querySelectorAll('.navbar-links');
+  navLinks.forEach(link => {
+    link.classList.remove('active');
+  });
+  const clickedLink = document.getElementById(linkId);
+  clickedLink.classList.add('active');
+  if (linkId=="home") {
+    window.scrollTo(0, 0);
+  }
+  else if (linkId=="about") {
+    window.scrollTo(0, 900);
+  }
+  else if (linkId=="contact") {
+    window.scrollTo(0, 1800);
+  }
+
+}