Added nav and header menu

techlahoma · Mar 9, 2024 · e51084d · e51084d
1 parent 2d62760
commit e51084d
Show file tree

Hide file tree

Showing 15 changed files with 263 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/dots.png → assets/dots.png b/dots.png → 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/index.html 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
@@ -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;
+}