add html and css

2024-07-17 23:15:12 +02:00
parent fa84b5ba19
commit 6201d0ab2b
2 changed files with 250 additions and 0 deletions
@@ -0,0 +1,137 @@
+:root {
+    --main-bg-color: #212121;
+  }
+  
+  body {
+    background-color: var(--main-bg-color);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+  }
+  h2 {
+    color: white;
+  }
+  p {
+    color: white;
+  }
+  
+  textarea {
+    width: 100%;
+    height: 150px;
+    padding: 12px 20px;
+    box-sizing: border-box;
+    border: 2px solid #ccc;
+    border-radius: 4px;
+    background-color: #f8f8f8;
+    font-size: 16px;
+    resize: none;
+  }
+  
+  button {
+    background-color: #454545;
+    border: none;
+    border-radius: 4px;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    display: inline-flex;
+    font-size: 16px;
+    cursor: pointer;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 2px 2px black;
+    height: 42px;
+    width: 48px;
+  }
+  
+  button:active {
+    -webkit-box-shadow: inset 0px 0px 2px black;
+       -moz-box-shadow: inset 0px 0px 2px black;
+            box-shadow: inset 0px 0px 2px black;
+     outline: none;
+  }
+
+  .text-white {
+    color: white;
+  }
+  .text-orange {
+    color: orange;
+  }
+
+  .text-with-line {
+    text-transform: uppercase;
+    display: flex; 
+    flex-direction: row; 
+  }
+
+  .text-with-line:before, 
+  .text-with-line:after { 
+            content: ""; 
+            flex: 1 1; 
+            border-bottom: 2px solid currentColor; 
+            margin: auto 5px; 
+        } 
+  
+  .smallbutton {
+    height: 28px;
+    width: 56px;
+    background-color: #8a8a8a;
+    font-size: 12px;
+  }
+  
+  .roundbutton {
+    border-radius: 50%;
+    width: 26px;
+    height: 26px;
+  }
+  
+  .upper-buttonbox {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    border-radius: 8px;
+    background-color: #4d4d4d;
+    padding: 8px;
+    display: flex;
+    gap: 12px;
+    border: 2px solid grey;
+    border-bottom-color: black;
+    border-right-color: black; 
+  }
+  
+  .lower-buttonbox {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    border-radius: 8px;
+    background-color: #333333;
+    padding: 8px;
+    display: flex;
+    gap: 12px;
+    border: 2px solid grey;
+    border-bottom-color: black;
+    border-right-color: black; 
+  }
+  
+  .textinput-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    color: white;
+  }
+
+  .textinput {
+    width: 100%;
+    padding: 12px 20px;
+    box-sizing: border-box;
+    border: 2px solid #ccc;
+    border-radius: 4px;
+    background-color: #f8f8f8;
+    font-size: 16px;
+    resize: none;
+  }
+  
+  .headline {
+    text-align: center;
+  }