add files

css/components/aside.css

@@ -0,0 +1,6 @@
+.aside {
+  min-width: 150px;
+  width: 280px;
+  border: 1px solid var(--gray-100);
+  padding-top: 10px;
+}

css/components/header.css

@@ -0,0 +1,21 @@
+.header {
+  height: 70px;
+  border: 1px solid var(--gray-100);
+  width: 100%;
+}
+
+.header__container {
+  display: flex;
+  gap: 117px;
+  padding: 23px 0 23px 30px;
+}
+
+.header__logo {
+  font-weight: 700;
+  font-size: 29px;
+  line-height: 24px;
+}
+
+.header__logo span {
+  color: var(--gray-200);
+}

css/components/main-content.css

@@ -0,0 +1,82 @@
+.main-content {
+  width: 100%;
+  border: 1px solid var(--gray-100);
+  padding: 23px;
+  overflow: auto;
+}
+
+.form-container {
+  background-color: white;
+  border-radius: 8px;
+  max-width: 600px;
+  margin: 0px auto;
+  padding: 20px;
+  margin-bottom: 59px;
+}
+
+.color-palette-container {
+  width: 36px;
+  height: 36px;
+  padding: 9px;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 100px;
+  position: relative;
+}
+
+.colors__container-custom-form {
+  background-color: white;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 8px;
+  padding: 5px;
+  gap: 5px;
+  display: none;
+  grid-template-columns: repeat(5, 1fr);
+  position: absolute;
+  top: 40px;
+  left: 5px;
+}
+
+.colors__container-custom {
+  background-color: white;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 8px;
+  padding: 5px;
+  gap: 5px;
+  display: none;
+  grid-template-columns: repeat(5, 1fr);
+  position: absolute;
+  bottom: 42px;
+  left: 0px;
+}
+
+.colors__container-custom-open {
+  display: grid;
+}
+
+.color-custom {
+  width: 25px;
+  height: 25px;
+  border-radius: 100px;
+  cursor: pointer;
+}
+
+.color-custom-note {
+  width: 25px;
+  height: 25px;
+  border-radius: 100px;
+  cursor: pointer;
+}
+
+.color-custom:focus-within {
+  outline: solid;
+  outline-color: #999b9e;
+  background-color: red;
+}
+
+.empty-container {
+  text-align: center;
+  height: 500px;
+  justify-content: center;
+  align-items: center;
+  display: none;
+}

css/components/notes.css

@@ -0,0 +1,122 @@
+.note-container {
+  position: relative;
+  background-color: white;
+  border-radius: 8px;
+  width: 260px;
+  height: 260px;
+  padding: 20px;
+  color: black;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.notes-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+.deleted_notes-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  left: 0;
+  top: 0;
+  gap: 20px;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0, 0, 0); /* Fallback color */
+  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
+}
+
+/* Modal Content/Box */
+.modal-content {
+  background-color: #fefefe;
+  margin: 15% auto; /* 15% from the top and centered */
+  padding: 20px;
+  border: 1px solid #888;
+  color: black;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  max-width: 600px;
+  height: 203px;
+  border-radius: 8px;
+  box-shadow: 3px 3px 8px rgba(40, 40, 40, 0.85);
+}
+
+/* The Close Button */
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+}
+
+/* Background colors for palettes */
+.white-bg {
+  background-color: white;
+}
+
+.red-100-bg {
+  background-color: var(--red-100);
+}
+
+.yellow-100-bg {
+  background-color: var(--yellow-100);
+}
+
+.yellow-200-bg {
+  background-color: var(--yellow-200);
+}
+
+.green-100-bg {
+  background-color: var(--green-100);
+}
+
+.cyan-100-bg {
+  background-color: var(--cyan-100);
+}
+
+.blue-100-bg {
+  background-color: var(--blue-100);
+}
+
+.blue-200-bg {
+  background-color: var(--blue-200);
+}
+
+.pink-100-bg {
+  background-color: var(--pink-100);
+}
+
+.purple-200-bg {
+  background-color: var(--purple-200);
+}
+.pin-container {
+  position: absolute;
+  justify-self: flex-end;
+  align-self: flex-end;
+  background: rgba(255, 255, 255, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 2em;
+  height: 2em;
+  border-radius: 50%;
+
+  cursor: pointer;
+}

css/global.css

@@ -0,0 +1,6 @@
+@import url("./global/colors.css");
+@import url("./global/layout.css");
+@import url("./global/reset.css");
+@import url("./global/typography.css");
+@import url("./global/utils.css");
+@import url("./components/notes.css");

css/global/colors.css

@@ -0,0 +1,23 @@
+:root {
+  --red-100: #f28b82;
+  --yellow-100: #fff475;
+  --yellow-200: #fbbc04;
+  --green-100: #ccff90;
+  --cyan-100: #a7ffeb;
+  --blue-100: #cbf0f8;
+  --blue-200: #aecbfa;
+  --pink-100: #fdcfe8;
+  --purple-200: #d7aefb;
+  --gray-100: #d1d1d1;
+  --gray-200: #999b9e;
+  --gray-300: #1d2128;
+
+  --white-transparent: #ffffff80;
+  --gray-transparent: #999b9e80;
+  --gray-placeholder-1: #8E9196;
+  --gray-placeholder-2: #7B8493;
+
+
+  --shadow-sm: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  --shadow-white: 5px 5px 15px 0px #999B9ED9;
+}

css/global/layout.css

@@ -0,0 +1,75 @@
+.container {
+  background-color: var(--gray-300);
+  color: #ffffff;
+  height: 100vh;
+}
+body {
+  background-color: var(--gray-300);
+}
+
+section {
+  height: calc(100vh - 70px);
+  width: 100%;
+}
+
+a {
+  text-decoration: none;
+  color: white;
+}
+
+input {
+  border: none;
+}
+
+input:focus {
+  outline: none;
+}
+
+.card__title::placeholder {
+  color: var(--gray-placeholder-1);
+}
+
+.card__content::placeholder {
+  color: var(--gray-placeholder-2);
+}
+
+.button {
+  border: none;
+  background-color: transparent;
+  padding: 0px;
+  cursor: pointer;
+}
+
+.aside__notes:hover,
+.aside__trash:hover {
+  background-color: var(--gray-200);
+  border-radius: 0px 25px 25px 0px;
+}
+
+.aside__notes-icon {
+  width: 20px;
+  height: 16px;
+}
+
+.aside__active-menu {
+  background-color: var(--gray-200);
+  border-radius: 0px 25px 25px 0px;
+}
+
+.text-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.actions-container {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+
+/* .aside__notes:active,
+.aside__trash:active {
+  background-color: var(--gray-transparent);
+  border-radius: 0px 25px 25px 0px;
+} */