From e51084db9770e0611966b6ef99d2bd839d9b858c Mon Sep 17 00:00:00 2001
From: youngderrick82 <youngderrick82@gmail.com>
Date: Sat, 9 Mar 2024 16:43:02 -0600
Subject: [PATCH] Added nav and header menu

---
 .vscode/settings.json                         |  18 +++
 .../Logo_horizontal.png                       | Bin
 Logomark_Bolt.png => assets/Logomark_Bolt.png | Bin
 README.md => assets/README.md                 |   0
 .../Tplains2024-HoldingPage.png               | Bin
 dots.png => assets/dots.png                   | Bin
 facebook.svg => assets/facebook.svg           |   0
 handshake.svg => assets/handshake.svg         |   0
 linked-in.svg => assets/linked-in.svg         |   0
 microphone.svg => assets/microphone.svg       |   0
 people.svg => assets/people.svg               |   0
 tiny-bolt.png => assets/tiny-bolt.png         | Bin
 x-twitter.svg => assets/x-twitter.svg         |   0
 index.html                                    |  94 +++++++++++
 styles.css                                    | 151 ++++++++++++++++++
 15 files changed, 263 insertions(+)
 create mode 100644 .vscode/settings.json
 rename Logo_horizontal.png => assets/Logo_horizontal.png (100%)
 rename Logomark_Bolt.png => assets/Logomark_Bolt.png (100%)
 rename README.md => assets/README.md (100%)
 rename Tplains2024-HoldingPage.png => assets/Tplains2024-HoldingPage.png (100%)
 rename dots.png => assets/dots.png (100%)
 rename facebook.svg => assets/facebook.svg (100%)
 rename handshake.svg => assets/handshake.svg (100%)
 rename linked-in.svg => assets/linked-in.svg (100%)
 rename microphone.svg => assets/microphone.svg (100%)
 rename people.svg => assets/people.svg (100%)
 rename tiny-bolt.png => assets/tiny-bolt.png (100%)
 rename x-twitter.svg => assets/x-twitter.svg (100%)
 create mode 100644 index.html
 create mode 100644 styles.css

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..79b42de
--- /dev/null
+++ 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 b/assets/Logo_horizontal.png
similarity index 100%
rename from Logo_horizontal.png
rename to assets/Logo_horizontal.png
diff --git a/Logomark_Bolt.png b/assets/Logomark_Bolt.png
similarity index 100%
rename from Logomark_Bolt.png
rename to assets/Logomark_Bolt.png
diff --git a/README.md b/assets/README.md
similarity index 100%
rename from README.md
rename to assets/README.md
diff --git a/Tplains2024-HoldingPage.png b/assets/Tplains2024-HoldingPage.png
similarity index 100%
rename from Tplains2024-HoldingPage.png
rename to assets/Tplains2024-HoldingPage.png
diff --git a/dots.png b/assets/dots.png
similarity index 100%
rename from dots.png
rename to assets/dots.png
diff --git a/facebook.svg b/assets/facebook.svg
similarity index 100%
rename from facebook.svg
rename to assets/facebook.svg
diff --git a/handshake.svg b/assets/handshake.svg
similarity index 100%
rename from handshake.svg
rename to assets/handshake.svg
diff --git a/linked-in.svg b/assets/linked-in.svg
similarity index 100%
rename from linked-in.svg
rename to assets/linked-in.svg
diff --git a/microphone.svg b/assets/microphone.svg
similarity index 100%
rename from microphone.svg
rename to assets/microphone.svg
diff --git a/people.svg b/assets/people.svg
similarity index 100%
rename from people.svg
rename to assets/people.svg
diff --git a/tiny-bolt.png b/assets/tiny-bolt.png
similarity index 100%
rename from tiny-bolt.png
rename to assets/tiny-bolt.png
diff --git a/x-twitter.svg b/assets/x-twitter.svg
similarity index 100%
rename from x-twitter.svg
rename to assets/x-twitter.svg
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f0064c2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,94 @@
+<!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 flex-grow">
+      <img class="logo-bolt" src="/assets/tiny-bolt.png" alt="logo-bolt" />
+      <p>Thunderplains2024</p>
+    </div>
+    <div class="link-container flex-grow">
+      <ul class="links">
+        <li class="link">SPONSOR</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">
+          <h1>
+            <span class="info"
+              >Oct. 10, 2024 <span class="subhead">|</span> OKC, </span
+            >ThunderPlains<span class="subhead"> Developer Conference</span>
+          </h1>
+          <h1 class="comment">
+            ThunderPlains is an electrifying tech event that you dont 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.
+            Whethere 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
new file mode 100644
index 0000000..e6f5163
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,151 @@
+: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: white;
+}
+
+nav {
+  display: flex;
+  height: 2rem;
+  background: var(--darkGrey);
+  align-items: center;
+  padding: 0px 5em;
+}
+
+.logo {
+  margin: 0;
+}
+
+.logo-bolt {
+  height: 1.5rem;
+}
+
+.links {
+  display: flex;
+  margin: 0;
+}
+
+.link {
+  list-style: none;
+  margin: 5px;
+}
+
+header {
+  margin-top: 0;
+  padding-top: 3em;
+}
+
+.tplains-header {
+  position: relative;
+  background: var(--header-gradient);
+  width: 100vw;
+  height: 40rem;
+}
+
+section {
+  margin: auto;
+  max-width: 1240px;
+}
+
+.img-wrapper {
+  position: relative;
+  text-align: center;
+  width: 100%;
+  height: auto;
+}
+
+/* .img-wrapper::after {
+    position: absolute;
+    background: url(/assets/dots.png);
+    background-size: .7rem;
+    content: " ";
+    width: 100%;
+    height: 100%;
+    top: 0;
+    bottom: 0;
+    left: 0;
+  } */
+
+.header-img {
+  height: 30em;
+  text-align: center;
+}
+
+.text-wrapper {
+  height: 500px;
+  width: 100%;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.flex {
+  display: flex;
+}
+
+.btn-container {
+  display: flex;
+  height: 3rem;
+  margin-top: 3em;
+}
+
+.btn {
+  display: flex;
+  margin: auto;
+}
+
+.header-btn {
+  background: var(--magenta);
+  height: 2rem;
+  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.6rem;
+  top: 0.3rem;
+  height: 2.3em;
+  rotate: -8deg;
+}