summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--close-menu.svg3
-rw-r--r--desktop.css9
-rw-r--r--index.css69
-rw-r--r--index.php174
-rw-r--r--menu.svg3
5 files changed, 172 insertions, 86 deletions
diff --git a/close-menu.svg b/close-menu.svg
new file mode 100644
index 0000000..5ecf9df
--- /dev/null
+++ b/close-menu.svg
@@ -0,0 +1,3 @@
+<svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
+ <path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
+</svg> \ No newline at end of file
diff --git a/desktop.css b/desktop.css
index e61e778..2ee28b0 100644
--- a/desktop.css
+++ b/desktop.css
@@ -2,13 +2,22 @@
a.closeMenu {
display: none;
}
+
a.openMenu {
display: none;
}
+
nav {
display: block;
}
+
#menu:target a.closeMenu {
display: none;
}
+
+ html,
+ body {
+ padding-right: 15%;
+ padding-left: 15%;
+ }
}
diff --git a/index.css b/index.css
index 37bdccb..bc9bee5 100644
--- a/index.css
+++ b/index.css
@@ -1,10 +1,41 @@
-html {
+:root {
+ --cultured: #efefefff;
+ --light-cyan: #cae4dbff;
+ --maximum-blue-green: #4ec5c1ff;
+ --minion-yellow: #f9e45bff;
+ --powder-blue: #caebf2ff;
+ --teal-blue: #2b6777ff;
+ --bar-background: var(--powder-blue);
+ --text-color: var(--teal-blue);
+ --link-color: var(--maximum-blue-green);
+ --background: var(--cultured);
+ --secondary-family: Lato, sans-serif;
+}
+
+html body {
font-family: "Vollkorn", serif;
+ font-size: 1.25em;
+ color: var(--text-color);
+ background-color: var(--background);
+ margin: 0;
+ padding: 0;
+}
+
+a {
+ color: var(--link-color);
+}
+
+nav a {
+ color: var(--text-color);
+ font-size: 0.75em;
+ text-decoration: none;
+ padding-right: 1em;
}
a.closeMenu {
float: right;
display: none;
+ text-align: right;
}
#menu:target nav {
@@ -17,6 +48,8 @@ a.closeMenu {
a.openMenu {
float: right;
+ padding: 1em;
+ padding-right: 2em;
}
#menu:target a.closeMenu {
@@ -24,6 +57,38 @@ a.openMenu {
}
nav {
- background-color: red;
+ text-align: center;
+ background-color: var(--bar-background);
display: none;
+ margin: 0;
+ padding: 1em;
+}
+
+svg path {
+ fill: var(--text-color);
+}
+
+main {
+ padding: 1em;
+}
+
+footer {
+ font-size: 0.75em;
+ text-align: center;
+ background-color: var(--bar-background);
+ margin: 0;
+ padding: 1em;
+}
+
+h1 {
+ padding-top: 0.25em;
+ text-align: center;
+ font-size: 3em;
+}
+
+h2,
+footer,
+nav a {
+ font-family: var(--secondary-family);
+ text-transform: uppercase;
}
diff --git a/index.php b/index.php
index a8a852b..ca5facd 100644
--- a/index.php
+++ b/index.php
@@ -1,88 +1,94 @@
<!DOCTYPE html>
<html lang="en">
- <head>
- <title>The University Edge</title>
- <style>
- <?php include('index.css'); ?>
- </style>
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Vollkorn&display=swap" rel="stylesheet">
- <link rel="stylesheet" href="/desktop.css" />
- <link rel="stylesheet" href="/widescreen.css" />
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <meta name="description" content="++description++" />
- <meta property="og:description" content="++description++" />
- <meta
- property="og:image"
- content="http://theuniversityedge.com/assets/logo.webp"
- />
- <meta
- property="og:image:secure_url"
- content="https://theuniversityedge.com/assets/logo.webp"
- />
- <meta property="og:site_name" content="The University Edge" />
- <meta property="og:title" content="The University Edge" />
- <meta property="og:type" content="website" />
- <meta property="og:url" content="https://theuniversityedge.com" />
- </head>
-
- <body id="menu">
- <main>
- <nav>
- <a href="/#"><img src="/assets/logo-simple.png" /></a>
- <a href="/#contact">Contact Me</a>
- <a href="/#reviews">Reviews</a>
- <a href="/about">About</a>
- <a href="/policies">Policies</a>
- <a href="/#pricing">Pricing</a>
- <a href="/#offerings">Offerings</a>
- <a class="closeMenu" href="#">
- <svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
- <path fill="#ffffff"
- d="M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z" />
- </svg>
- </a>
- </nav>
- <a class="openMenu" href="#menu">
- <svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
- <path fill="#195970" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
- </svg>
- </a>
- <section>
- <p>
- Nostrum eum pariatur pariatur qui libero dolores modi incidunt.
- Tempora asperiores nostrum asperiores non nihil. Dolores adipisci quia
- sed aut excepturi. Nobis harum perspiciatis molestiae atque.
- </p>
-
- <p>
- Reprehenderit quaerat maiores voluptas non reiciendis. Porro dicta
- necessitatibus voluptatibus alias qui at quaerat. Non explicabo neque
- impedit. Non velit amet accusantium aut itaque necessitatibus. Eveniet
- sunt consequatur officia.
- </p>
-
- <p>
- Recusandae deserunt ullam corrupti et. Quam est et voluptatum
- consequatur. Voluptates quia suscipit in voluptates.
- </p>
-
- <p>
- Quia porro aliquam illum eius possimus reprehenderit hic. Sed
- similique qui et. Eos aut illum veniam. Voluptas dolores minima et
- dolor reiciendis.
- </p>
- </section>
- </main>
-
- <footer>
+
+<head>
+ <title>The University Edge</title>
+ <style>
+ <?php include('index.css'); ?>
+ </style>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Lato&family=Merriweather:wght@300;400&family=Vollkorn&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="/desktop.css" />
+ <link rel="stylesheet" href="/widescreen.css" />
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta name="description" content="TODO:" />
+ <meta property="og:description" content="TODO:" />
+ <meta property="og:image" content="http://theuniversityedge.com/assets/logo.webp" />
+ <meta property="og:image:secure_url" content="https://theuniversityedge.com/assets/logo.webp" />
+ <meta property="og:site_name" content="The University Edge" />
+ <meta property="og:title" content="The University Edge" />
+ <meta property="og:type" content="website" />
+ <meta property="og:url" content="https://theuniversityedge.com" />
+</head>
+
+<body id="menu">
+ <nav>
+ <a class="closeMenu" href="#">
+ <?php include('menu.svg') ?>
+ </a>
+ <!--<a href="/#"><img src="/assets/logo-simple.png" /></a>-->
+ <a href="/#contact">Contact Me</a>
+ <a href="/#reviews">Reviews</a>
+ <a href="/about">About</a>
+ <a href="/policies">Policies</a>
+ <a href="/#pricing">Pricing</a>
+ <a href="/#offerings">Offerings</a>
+ </nav>
+ <a class="openMenu" href="#menu">
+ <?php include('close-menu.svg') ?>
+ </a>
+ <main>
+ <section>
+ <h1>
+ The University Edge
+ </h1>
+
+ <h2>
+ Why?
+ </h2>
+
<p>
- &copy;
- <?php echo date('Y'); ?>
- The University Edge. All rights reserved.
+ <a href="#">Reprehenderit quaerat maiores voluptas non reiciendis. Porro dicta</a>
+ necessitatibus voluptatibus alias qui at quaerat. Non explicabo neque
+ impedit. Non velit amet accusantium aut itaque necessitatibus. Eveniet
+ sunt consequatur officia.
+ </p>
+
+ <p>
+ Odio incidunt numquam quam voluptatem inventore pariatur hic inventore. Sint nemo officiis dolorum veritatis sunt. Itaque beatae dolorum iusto doloremque natus aliquam nisi. Aperiam voluptatem vel vel sequi nostrum reiciendis et.
+
+ Voluptates hic quia omnis et porro. Doloremque amet laudantium officiis quasi eos nesciunt laudantium. Omnis eius quia sunt sint. Repellendus quasi sed eius placeat dolorem est.
+
+ Facere velit recusandae aspernatur placeat et aliquid cum. Iste nisi autem earum odit et suscipit reprehenderit sed. Consequatur vel delectus qui. Quidem ut corporis est illo.
+
+ Nesciunt debitis et nemo magni dolores et. Enim amet in consequatur quis. Temporibus ex nam quo quis et et.
+
+ Sint modi eos ea et deleniti pariatur dolor officiis. Ut ex eius nostrum corporis perspiciatis distinctio minima impedit. Suscipit qui voluptatem voluptas maxime in numquam error molestiae.
+
+ Eaque qui rerum cum iusto est nisi. Voluptatibus id rerum aperiam ab impedit totam delectus. Quos molestiae dolor magni. Dignissimos nulla vero dolores. Nisi optio doloribus doloremque doloribus. Rerum qui possimus repellat omnis.
+
+ Iusto commodi perspiciatis alias ad odio. Nemo rerum ex laborum consequatur magni praesentium quis. Consequatur quae ducimus soluta optio vel. Debitis doloribus sed fuga.
+
+ Provident harum error non pariatur atque aut sunt. Vel deleniti quidem aut sequi. Delectus ut ut eius. Repellat quos nihil alias inventore. Impedit perspiciatis placeat molestiae laborum.
+
+ Magni architecto vel est vitae. Quisquam nisi harum praesentium ut doloremque molestiae dolorem vero. Sequi et rerum maiores sit explicabo at odio. Enim quia optio nostrum aut quasi nam. Quia consequatur recusandae voluptas.
+
+ Eum sit deserunt ut nemo omnis. Minus ut doloribus quam sit placeat velit. Magnam et itaque corporis exercitationem ea. Assumenda et eum aut alias odio quo natus. Accusamus eos minima repellendus quo aperiam aut. Repellendus quod porro quis eveniet autem.
</p>
- </footer>
- </body>
-</html>
+ </section>
+ </main>
+
+ <footer>
+ <p>
+ &copy;
+ <?php echo date('Y'); ?>
+ The University Edge
+ </p>
+ <p> All rights reserved
+ </p>
+ </footer>
+</body>
+
+</html> \ No newline at end of file
diff --git a/menu.svg b/menu.svg
new file mode 100644
index 0000000..99e9165
--- /dev/null
+++ b/menu.svg
@@ -0,0 +1,3 @@
+<svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
+ <path d="M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z" />
+</svg> \ No newline at end of file