Merge pull request #2 from youngderrick82/main

Added nav and header menu
techlahoma · Mar 11, 2024 · ed3bf5b · ed3bf5b
2 parents f1e584b + 949a5bc
commit ed3bf5b
Show file tree

Hide file tree

Showing 16 changed files with 293 additions and 0 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,18 @@
+{
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": true,
+    "**/.apivcs": true,
+    "**/.gitignore": true,
+    "**/.designer.json": true,
+    "**/.exchange.xml": true,
+    "**/.vscode": true,
+    "**/.mvn": true,
+    "**/.exchange_modules_tmp": true,
+    ".mule": true
+  }
+}
diff --git a/Logo_horizontal.png → assets/Logo_horizontal.png b/Logo_horizontal.png → assets/Logo_horizontal.png
diff --git a/Logomark_Bolt.png → assets/Logomark_Bolt.png b/Logomark_Bolt.png → assets/Logomark_Bolt.png
diff --git a/README.md → assets/README.md b/README.md → assets/README.md
diff --git a/Tplains2024-HoldingPage.png → assets/Tplains2024-HoldingPage.png b/Tplains2024-HoldingPage.png → assets/Tplains2024-HoldingPage.png
diff --git a/assets/dots.png b/assets/dots.png
diff --git a/facebook.svg → assets/facebook.svg b/facebook.svg → assets/facebook.svg
diff --git a/handshake.svg → assets/handshake.svg b/handshake.svg → assets/handshake.svg
diff --git a/linked-in.svg → assets/linked-in.svg b/linked-in.svg → assets/linked-in.svg
diff --git a/microphone.svg → assets/microphone.svg b/microphone.svg → assets/microphone.svg
diff --git a/people.svg → assets/people.svg b/people.svg → assets/people.svg
diff --git a/tiny-bolt.png → assets/tiny-bolt.png b/tiny-bolt.png → assets/tiny-bolt.png
diff --git a/x-twitter.svg → assets/x-twitter.svg b/x-twitter.svg → assets/x-twitter.svg
diff --git a/dots.png b/dots.png
diff --git a/index.html b/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ThunderPlains</title>
+    <link rel="stylesheet" href="/styles.css" />
+  </head>
+  <nav class="navbar">
+    <div class="logo flex">
+      <img class="logo-bolt" src="/assets/tiny-bolt.png" alt="logo-bolt" />
+      <p>Thunderplains2024</p>
+    </div>
+    <div class="link-container">
+      <ul class="links">
+        <li class="link"><a>SPONSOR</a></li>
+        <li class="link">|</li>
+        <li class="link">SPEAK</li>
+        <li class="link">|</li>
+        <li class="link">VOLUNTEER</li>
+      </ul>
+    </div>
+    <div class="socials">
+      <img class="social-link" src="/assets/x-twitter.svg" alt="X-Twitter" />
+      <img class="social-link" src="/assets/facebook.svg" alt="FaceBook" />
+      <img class="social-link" src="/assets/linked-in.svg" alt="LinkedIn" />
+    </div>
+  </nav>
+  <body>
+    <header class="tplains-header">
+      <section class="flex flex-container">
+        <div class="img-wrapper">
+          <img src="/assets/Logomark_Bolt.png" alt="" class="header-img" />
+        </div>
+        <div class="text-wrapper">
+            <span class="info">10.10.24 <span class="subhead-divider"> | </span>OKC, OK</span
+            >
+            <h1 class="header-text">ThunderPlains</h1>
+            <h2 class="sub-header"> Developer Conference</h2>
+          <h1 class="comment">
+            ThunderPlains is an electrifying tech event that you don't want to
+            miss!
+          </h1>
+          <p class="intro">
+            Explore the latest trends, gain value insights, and connect whit
+            like-minded individuals who share your passion for technology.
+            whether you're a seasoned developer or just staring out,
+            ThunderPlains has something for everyone.<strong
+              >Join us in 2024!</strong
+            >
+          </p>
+        </div>
+      </section>
+      <div>
+        <div class="btn-container">
+          <div class="btn">
+            <div class="header-btn">
+              <a>Sponsor</a>
+            </div>
+            <div class="img-box">
+              <img
+              id="sponsor"
+                class="btn-img"
+                src="/assets/handshake.svg"
+                alt="handshake"
+              />
+            </div>
+          </div>
+          <div class="btn">
+            <div class="header-btn">
+              <a>Speak</a>
+            </div>
+            <div class="img-box"></div>
+            <img
+            id="speak"
+              class="btn-img"
+              src="/assets/microphone.svg"
+              alt="microphone"
+            />
+          </div>
+          <div class="btn">
+            <div class="header-btn">
+              <a>Volunteer</a>
+            </div>
+            <div class="img-box">
+              <img id="volunteer" class="btn-img" src="/assets/people.svg" alt="Volunteer" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  </body>
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,182 @@
+:root {
+  --navy: #05125f;
+  --magenta: #931cad;
+  --darkMagenta: #5e1279;
+  --darkGrey: #242736;
+  --white: #fff;
+  --header-gradient: linear-gradient(320deg, #5e1279 2.37%, #05125f 67.37%);
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  color: var(--white);
+}
+
+nav {
+  display: flex;
+  height: 2rem;
+  background: var(--darkGrey);
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 5em;
+}
+
+.logo {
+  margin: 0;
+  margin-right: -2.9em;
+  font-size: 1.25rem;
+}
+
+.logo-bolt {
+  height: 1.5rem;
+  padding-top: 1em;
+}
+
+.links {
+  display: flex;
+  padding: 0;
+}
+
+.link {
+  list-style: none;
+  margin: 5px;
+}
+
+.socials {
+}
+
+header {
+  margin-top: 0;
+  padding-top: 3em;
+}
+
+.tplains-header {
+  position: relative;
+  background: var(--header-gradient);
+  width: 100vw;
+  height: 40rem;
+}
+
+.subhead-divider {
+  color: var(--magenta);
+}
+
+section {
+  margin: auto;
+  max-width: 1240px;
+}
+
+.img-wrapper {
+  position: relative;
+  text-align: center;
+  width: 100%;
+  height: auto;
+  z-index: 2;
+}
+
+.img-wrapper::after {
+  position: absolute;
+  background: url(/assets/dots.png);
+  background-repeat: repeat;
+  background-size: 1rem;
+  content: " ";
+  width: 80vw;
+  height: 77.5vh;
+  top: -50px;
+  left: 58%;
+  opacity: 2%;
+  z-index: -1;
+}
+
+.header-img {
+  height: 30em;
+  text-align: center;
+}
+
+.text-wrapper {
+  height: 500px;
+  width: 100%;
+  z-index: 10;
+}
+
+.header-text {
+  font-size: 3rem;
+  margin-bottom: 0px;
+  font-family: "Murecho", sans-serif;
+}
+
+.sub-header {
+  font-family: "Lato", sans-serif;
+  font-size: 2em;
+  font-weight: 500;
+  margin-top: 0;
+  color: var(--magenta);
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.flex {
+  display: flex;
+}
+
+.btn-container {
+  display: flex;
+  height: 3rem;
+  margin-top: 3em;
+}
+
+.btn {
+  display: flex;
+  margin: auto;
+  z-index: 2;
+}
+
+.header-btn {
+  background: var(--magenta);
+  height: 2rem;
+  min-width: 8em;
+  width: 12.5vw;
+  font-size: 24px;
+  border-radius: 4px;
+}
+
+.img-box {
+  position: relative;
+  background: var(--darkGrey);
+  right: 6rem;
+  bottom: 1.2rem;
+  height: 75px;
+  width: 75px;
+  rotate: 8deg;
+  border: 2px solid white;
+  border-radius: 5px;
+}
+
+.btn-img {
+}
+
+#sponsor {
+  position: relative;
+  left: 0.8rem;
+  top: 1.1rem;
+  height: 2.3em;
+  rotate: -8deg;
+}
+
+#speak {
+  position: relative;
+  left: -9.5rem;
+  top: -0.2rem;
+  height: 2.8em;
+}
+
+#volunteer {
+  position: relative;
+  left: 0.9rem;
+  top: 1.2rem;
+  height: 2.3em;
+  rotate: -8deg;
+}