Cohort4.2
/
YouAreEllClient
Tarkkaile 7
Äänestä 0
Fork 1
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Activity
Selaa lähdekoodia

added clean index.html and styles.css

Dominique Clarke 6 vuotta sitten
vanhempi
98ec1e7fb4
commit
a4c53e0cea
2 muutettua tiedostoa jossa 113 lisäystä ja 0 poistoa
Jaettu näkymä Näytä diff tilastot
  1. 32
    0
      index.html
  2. 81
    0
      styles.css

+ 32
- 0
index.html Näytä tiedosto 

@@ -0,0 +1,32 @@
1 
+<!DOCTYPE html>
2 
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
3 
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
4 
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
5 
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
6 
+    <head>
7 
+        <meta charset="utf-8">
8 
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
9 
+        <title>YouAreEll Client</title>
10 
+        <meta name="description" content="A front-end client for the YouAreEll server">
11 
+        <meta name="viewport" content="width=device-width, initial-scale=1">
12 
+        <link rel="stylesheet" href="styles.css">
13 
+    </head>
14 
+    <body>
15 
+        <!--[if lt IE 7]>
16 
+            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
17 
+        <![endif]-->
18 
+        <header id="sidebar-header">
19 
+            <h2 id="greeting"></h2>
20 
+        </header>
21 
+        <main>
22 
+            <ul id="message-list">
23 
+            </ul>
24 
+            <div id="new-message">
25 
+                <form id="new-message-form">
26 
+                    <textarea name="message" placeholder="Type your message here"></textarea>
27 
+                    <button type="submit">Submit</button>
28 
+                </form>
29 
+            </div>
30 
+        </main>
31 
+    </body>
32 
+</html>

+ 81
- 0
styles.css Näytä tiedosto 

@@ -0,0 +1,81 @@
1 
+/* reseting browser styles */
2 
+* {
3 
+    box-sizing: border-box;
4 
+    font-family: system-ui;
5 
+}
6 
+
7 
+body {
8 
+    margin: 0;
9 
+}
10 
+
11 
+header {
12 
+    border-bottom: 1px solid grey;
13 
+    height: 15vh;
14 
+    padding: 20px 10px;
15 
+    width: 100%;
16 
+    border-top: 1px solid grey;
17 
+    border-bottom: 1px solid grey;
18 
+}
19 
+
20 
+header h1,
21 
+header h2 {
22 
+    margin-right: 10px;
23 
+    margin-left: 10px;
24 
+}
25 
+
26 
+sidebar header.open {
27 
+    height: 225px;
28 
+}
29 
+
30 
+sidebar header input {
31 
+    margin: 10px 0;
32 
+}
33 
+
34 
+#thread-list,
35 
+#message-list {
36 
+    list-style: none;
37 
+    margin: 0;
38 
+    padding: 0;
39 
+}
40 
+
41 
+#message-list {
42 
+    height: 55vh;
43 
+    overflow: scroll;
44 
+}
45 
+
46 
+#thread-list li {
47 
+    border-bottom: 1px solid grey;
48 
+}
49 
+
50 
+#thread-list li h2 {
51 
+    padding: 20px 10px;
52 
+    margin: 0;
53 
+}
54 
+
55 
+#message-list li {
56 
+    padding: 10px 20px;
57 
+    border-bottom: 1px solid grey;
58 
+}
59 
+
60 
+#new-message-form {
61 
+    height: 100%;
62 
+    display: flex;
63 
+    flex-direction: column;
64 
+}
65 
+
66 
+#new-message {
67 
+    height: 30vh;
68 
+    border-top: 1px solid grey;
69 
+}
70 
+
71 
+#new-message-form textarea {
72 
+    height: 100%;
73 
+    margin: 10px;
74 
+    border-radius: 5px;
75 
+}
76 
+
77 
+#new-message-form button {
78 
+    height: 50px;
79 
+    margin: 10px;
80 
+    border-radius: 5px
81 
+}