CSS-Threaded-Comments/css-threaded-comments.html at master · thinkdj/CSS-Threaded-Comments · 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>CSS Threaded Comments: @thinkdj</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="css-threaded-comments.css">
  <style>
  body {
    background: #FFF;
  	font-family: Segoe UI, Tahoma, sans-serif;
  	padding: 20px 40px;
  	margin: 0 auto;
    width: 90%;
    max-width: 800px;
  }
  </style>

</head>

<body>

<!-- COMMENTS -->
<div>
<h3>Nested Comments [HTML/CSS ONLY]</h3>

<div class="upp-comments">

  <div class="upp-comment">
    <div class="upp-com-auth">
      <img class="upp-img-person" src="https://image.ibb.co/fqM4Mb/Marko_the_kidnapper.png" alt="">
      <b class="upp-com-auth-name">Marko</b>
      <span class="upp-com-auth-ts">4 minutes ago</span>
    </div>
    <div class="upp-com-content">
      <p>
        Marco-Polo has my name in it. MIND = BLOWN!
      </p>
      <div class="upp-com-replies">
        <div class="upp-comment">
          <div class="upp-com-auth">
            <img class="upp-img-person" src="https://image.ibb.co/njwtEw/liam_taken_814.jpg" alt="">
            <b class="upp-com-auth-name">Bryan Neeson</b>
            <span class="upp-com-auth-ts">2 minutes ago</span>
          </div>
          <div class="upp-com-content">
            <p>
              I don't know who you are. I don't know what you want. If you are looking for ransom, I can tell you I don't have money. But what I do have are a very particular set of skills; skills I have acquired over a very long career. Skills that make me a nightmare for people like you. If you let my daughter go now, that'll be the end of it. I will not look for you, I will not pursue you. But if you don't, I will look for you, I will find you, and I will kill you.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<div class="upp-comment-box first">
  <div class="upp-comment-box-avatar">
    <a href="https://twitter.com/thinkdj" target="_blank" title="thinkdj">
			<img src="https://accounts-cdn.9gag.com/media/avatar/872741_100_5.jpg">
		</a>
  </div>
  <div class="upp-comment-box-comm">
    <div class="upp-comment-box-comm-ent">
			<textarea placeholder="Your opinion ..." class="upp-comment-box-comm-ent-ta focus" required></textarea>
    </div>
    <div class="upp-comment-box-comm-actions">
      <div class="upp-comment-box-comm-actions-meta">
        <small class="upp-small">
				<!-- Footer text -->
				Do not post profanity. Repeat-offenders would be banned permanently.
				</small>
      </div>
      <div class="upp-comment-box-comm-actions-action">
        <p class="upp-comment-box-comm-word-count tc"><span>1000</span></p>
        <a href="javascript:void(0);" class="upp-btn">Post</a>
      </div>
    </div>
  </div>
</div>

</div>
<!-- /COMMENTS -->


</body>
</html>