create index.css + add to index.html

2 years ago · 0558cef495
parent 2902266a61
commit 0558cef495
3 changed files with 72 additions and 73 deletions
--- a/index.html
+++ b/index.html
@ -5,6 +5,7 @@
    <meta charset="UTF-8">
    <title>HyperSet</title>
    <link rel="stylesheet" type="text/css" href="./styles/style.css">
+    <link rel="stylesheet" type="text/css" href="./styles/index.css">
 </head>

 <body>
--- a/styles/index.css
+++ b/styles/index.css
@ -0,0 +1,71 @@
+/* Nav Bar */
+#nav-bar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    height: 7vh;
+    list-style-type: none;
+    background-color: black;
+}
+
+#nav-bar li a {
+    font-size: 2rem;
+    font-weight: bold;
+    font-family: var(--font);
+    text-decoration: none;
+    color: white;
+    border: none;
+    padding: 0.7rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+}
+
+/* Main */
+
+#master {
+    display: flex;
+    flex-direction: row;
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 7vh - 6em);
+}
+
+#left {
+    background-color: red;
+    width: 60%;
+    padding: 3em;
+}
+
+#right {
+     background-color: blue;
+     width: 40%;
+     padding: 3em;
+}
+
+h1 {
+    color: black;
+    font-size: 5em;
+    font-weight: bold;
+}
+
+#slogan {
+    margin-top: 1em;
+    margin-bottom: 1.5em;
+    color: black;
+    font-size: 2em;
+}
+
+#random-set {
+    height: 40vh;
+    background-color: green;
+}
+
+#info {
+    display: flex;
+    flex-direction: column;
+    margin-top: 4em;
+}
--- a/styles/style.css
+++ b/styles/style.css
@ -7,77 +7,4 @@
    margin: 0;
    border: 0;
    font-family: var(--font);
-}
-
-/* Nav Bar */
-
-#nav-bar {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    height: 7vh;
-    list-style-type: none;
-    background-color: black;
-}
-
-#nav-bar li a {
-    font-size: 2rem;
-    font-weight: bold;
-    font-family: var(--font);
-    text-decoration: none;
-    color: white;
-    border: none;
-    padding: 0.7rem;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-}
-
-/* Main */
-
-#master {
-    display: flex;
-    flex-direction: row;
-}
-
-.column {
-    display: flex;
-    flex-direction: column;
-    height: calc(100vh - 7vh - 6em);
-}
-
-#left {
-    background-color: red;
-    width: 60%;
-    padding: 3em;
-}
-
-#right {
-     background-color: blue;
-     width: 40%;
-     padding: 3em;
-}
-
-h1 {
-    color: black;
-    font-size: 5em;
-    font-weight: bold;
-}
-
-#slogan {
-    margin-top: 1em;
-    margin-bottom: 1.5em;
-    color: black;
-    font-size: 2em;
-}
-
-#random-set {
-    height: 40vh;
-    background-color: green;
-}
-
-#info {
-    display: flex;
-    flex-direction: column;
-    margin-top: 4em;
 }