new start page

2022-06-06 14:22:42 -04:00
parent cd447e3a37
commit 392eb275eb
11 changed files with 530 additions and 1 deletions
--- a/NP_Root_Startpage/styles.css
+++ b/NP_Root_Startpage/styles.css
@ -0,0 +1,143 @@
+/* Custom Variables | Color Scheme */
+
+:root {
+  --primary: #FFC759;
+  --text-light: #eeeeee;
+  --background: #191E29;
+  --background-light: #202633;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: inherit;
+}
+
+body {
+  color: var(--text-light);
+  font-family: 'Inter', sans-serif;
+
+  padding: 2rem 4rem;
+
+  background-color: var(--background);
+  box-sizing: border-box;
+}
+
+h1 {
+  font-size: 4rem;
+  font-weight: bold;
+}
+
+h1 > span {
+  color: var(--primary);
+}
+
+main {
+  margin-top: 4rem;
+
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.header {
+  font-weight: 400;
+  
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#currentDate {
+  color: var(--primary);
+}
+
+#currentTime {
+  font-size: 4rem;
+  font-weight: 600;
+}
+
+@media screen and (max-width: 1250px) {
+  h1 {
+    display: none;
+  }
+
+  .header {
+    flex-direction: column-reverse;
+  }
+
+  #currentTime {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+  }
+
+  #fullDate {
+    text-align: center;
+  }
+}
+
+.card:link,
+.card:visited {
+  color: white;
+  text-decoration: none;
+
+  margin: 1.2rem;
+  padding: 4rem 8rem;
+
+  background-color: var(--background-light);
+  border-radius: 15px;
+  border: 1px solid rgba(255,255,255,.05);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  overflow: hidden;
+  cursor: pointer;
+  position: relative;
+
+  outline: none;
+  transition: 0.1s;
+}
+
+.card:hover,
+.card:focus {
+  border-color: var(--primary);
+  color: var(--primary);
+
+  transform: scale(1.02);
+}
+
+.card:focus > .card__name {
+  bottom: 0;
+}
+
+.card:hover > .card__name {
+  bottom: 0;
+}
+
+.card__icon {
+  font-size: 2rem;
+
+  padding: 1rem;
+
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 50%;
+
+  display: grid;
+  place-items: center;
+}
+
+.card__name {
+  font-weight: 400;
+
+  transform: translate(-50%, -50%);
+
+  position: absolute;
+  bottom: -25%;
+  left: 50%;
+
+  transition: 0.1s;
+}