twitter-messages/index.html at master · tpompon/twitter-messages · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Twitter Clone</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/png" href="favicon.ico" />
  <link href="reset.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>

<body>

  <div class="conversation">

    <div style="display: flex; align-items: center;">
      <svg viewBox="0 0 24 24" class="twitter-logo"><g><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"></path></g></svg>
      <h1 class="title">Twitter Conversation</h1>
    </div>

    <hr style="width: 100%; opacity: .2; margin-bottom: 50px;">

    <div class="message-container left">
      <div class="message received">
        Welcome on my Twitter Messages clone 👍
      </div>
      <a href="#" class="message-infos f-left">Someone · 11:22 PM</a>
    </div>

    <div class="message-container right">
      <div class="message sent">
        Here are the messages sent to someone using the typing area at the bottom of the page
      </div>
    </div>

    <div class="message-container right">
      <div class="message sent-continuous">
        As you can see, the messages are adaptative
      </div>
    </div>

    <div class="message-container right">
      <div class="message sent-continuous">
        What do you think about it ?
      </div>
      <a href="#" class="message-infos f-right">11:35 PM</a>
    </div>

    <div class="message-container left">
      <div class="message received">
        That's your turn, try to send some messages ! 😜
      </div>
    </div>

    <div class="message-container left">
      <div class="message received-continuous">
        If you prefer a lighter theme, try /light
      </div>
      <a href="#" class="message-infos f-left">Someone · 11:41 PM</a>
    </div>

    <input class="message-input" placeholder="Start a new message (switch with /received or /r [message])"></input>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="script.js"></script>
</body>

</html>