[FE] Design init

taskmanager/static/style.css

@@ -1,25 +1,36 @@
 :root {
   --border-radus: 1rem;
-  --background: #000000;
-  --header-background: #FFFFFF;
+  --background: #383840;
+  --header-background: #212121;
   --header-height: 3rem;
   --input-bar-height: 3rem;
+  --white: #FFF;
+  --primary: #d2d2d2;
+  --font-primary: #d2d2d2;
   color: #FFF;
 }
 
-body{
-	background: var(--background);
-	font-family: sans-serif;
+* {
 	margin: 0;
 	padding: 0;
 }
 
+a, a:visited {
+	color: var(--font-primary);
+}
+
+body {
+	background: var(--background);
+	font-family: sans-serif;
+}
+
 main {
 	display: flex;
 	flex-direction: column;
 	align-self: flex-start;
 	gap: 1rem;
 	margin: 0 auto;
+	padding: 30px 0;
 	height: calc(100vh - var(--header-height) - var(--input-bar-height));
 	box-sizing: border-box;
 }
@@ -36,6 +47,12 @@ header {
 	box-sizing: border-box;
 }
 
+header ul {
+	display: flex;
+	list-style-type: none;
+	gap:15px
+}
+
 footer {
 	width: 100vw;
 	height: var(--input-bar-height);
@@ -47,3 +64,120 @@ footer {
 	box-sizing: border-box;
 	gap: 1rem;
 }
+
+/* global classes */
+.container {
+	width: 100%;
+	max-width: 960px;
+	margin: 0 auto;
+	padding: 20px 30px;
+}
+
+.page h1 {
+	margin-bottom: 15px;
+}
+
+.btn-wrap {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 15px 12px;
+}
+.btn {
+	display: inline-block;
+	padding: 5px 20px;
+	border: 1px solid var(--primary);  
+	color: var(--primary);
+	background-color: transparent;
+	border-radius: 5px;    
+}
+
+.btn:hover {
+	background-color: rgba(0,0,0,0.3);
+	cursor: pointer;
+}
+
+.btn a {
+	text-decoration: none;
+}
+
+.label {
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 11px;
+  display: inline-block;
+  user-select: none;
+}
+
+.underline {
+	border-bottom: 1px solid var(--font-primary);
+	padding-bottom: 2px;
+	margin-top:20px;
+}
+
+.section-tasks > ul {
+	margin-left: 30px;
+}
+
+/* page index*/
+
+.page-index .btn{
+	margin-bottom: 20px;
+}
+
+.task-wrap {
+  border: 1px solid var(--primary);
+  padding: 20px 40px 40px 40px;
+  border-radius: 5px;
+  box-shadow: inset 0 0 9px 4px rgba(255,255,255, 0.1);
+}
+
+.task {
+	display: flex;
+	border-bottom: 1px solid white;
+}
+
+.task a:hover {
+	background-color: rgba(255,255,255,0.1);
+}
+
+.task a {
+	display: flex;
+	gap: 15px;
+	width: 100%;
+	padding: 20px;
+	text-decoration: none;
+}
+
+/* Page projects */
+
+.page-project h1 {
+	text-transform: uppercase;
+}
+
+.user-info-wrap{
+	margin-bottom: 10px;
+}
+
+/* form */
+
+.form-wrap {
+	max-width: 400px;
+}
+
+.form-input {
+	display: flex;  
+	flex-direction: column;
+	padding: 10px 0;
+}
+
+.form-input input {
+	height: 25px;  
+	border-radius: 5px;
+	outline: none;
+}
+
+
+