Skip to content

Commit a630962

Browse files
OctaviomichelOctaviomichel
committed
first commit
0 parents  commit a630962

File tree

4 files changed

+574
-0
lines changed

4 files changed

+574
-0
lines changed

‎bootstrap.min.css

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<!-- <link rel="stylesheet" href="bootstrap.min.css"> -->
8+
<link rel="stylesheet" href="./styles.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="row">
13+
<nav class="menu">
14+
<ul class="items">
15+
<li class="item">
16+
<i class="fa fa-home" aria-hidden="true"></i>
17+
</li>
18+
<li class="item">
19+
<i class="fa fa-user" aria-hidden="true"></i>
20+
</li>
21+
<li class="item">
22+
<i class="fa fa-pencil" aria-hidden="true"></i>
23+
</li>
24+
<li class="item item-active">
25+
<i class="fa fa-commenting" aria-hidden="true"></i>
26+
</li>
27+
<li class="item">
28+
<i class="fa fa-file" aria-hidden="true"></i>
29+
</li>
30+
<li class="item">
31+
<i class="fa fa-cog" aria-hidden="true"></i>
32+
</li>
33+
</ul>
34+
</nav>
35+
36+
<section class="discussions">
37+
<div class="discussion search">
38+
<div class="searchbar">
39+
<i class="fa fa-search" aria-hidden="true"></i>
40+
<input type="text" placeholder="Search...">
41+
</div>
42+
</div>
43+
<div class="discussion message-active">
44+
<div class="photo" style="background-image: url(https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80);">
45+
<div class="online"></div>
46+
</div>
47+
<div class="desc-contact">
48+
<p class="name">Megan Leib</p>
49+
<p class="message">9 pm at the bar if possible 😳</p>
50+
</div>
51+
<div class="timer">12 sec</div>
52+
</div>
53+
54+
<div class="discussion">
55+
<div class="photo" style="background-image: url(https://i.pinimg.com/originals/a9/26/52/a926525d966c9479c18d3b4f8e64b434.jpg);">
56+
<div class="online"></div>
57+
</div>
58+
<div class="desc-contact">
59+
<p class="name">Dave Corlew</p>
60+
<p class="message">Let's meet for a coffee or something today ?</p>
61+
</div>
62+
<div class="timer">3 min</div>
63+
</div>
64+
65+
<div class="discussion">
66+
<div class="photo" style="background-image: url(https://images.unsplash.com/photo-1497551060073-4c5ab6435f12?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=667&q=80);">
67+
</div>
68+
<div class="desc-contact">
69+
<p class="name">Jerome Seiber</p>
70+
<p class="message">I've sent you the annual report</p>
71+
</div>
72+
<div class="timer">42 min</div>
73+
</div>
74+
75+
<div class="discussion">
76+
<div class="photo" style="background-image: url(https://card.thomasdaubenton.com/img/photo.jpg);">
77+
<div class="online"></div>
78+
</div>
79+
<div class="desc-contact">
80+
<p class="name">Thomas Dbtn</p>
81+
<p class="message">See you tomorrow ! 🙂</p>
82+
</div>
83+
<div class="timer">2 hour</div>
84+
</div>
85+
86+
<div class="discussion">
87+
<div class="photo" style="background-image: url(https://images.unsplash.com/photo-1553514029-1318c9127859?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80);">
88+
</div>
89+
<div class="desc-contact">
90+
<p class="name">Elsie Amador</p>
91+
<p class="message">What the f**k is going on ?</p>
92+
</div>
93+
<div class="timer">1 day</div>
94+
</div>
95+
96+
<div class="discussion">
97+
<div class="photo" style="background-image: url(https://images.unsplash.com/photo-1541747157478-3222166cf342?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=967&q=80);">
98+
</div>
99+
<div class="desc-contact">
100+
<p class="name">Billy Southard</p>
101+
<p class="message">Ahahah 😂</p>
102+
</div>
103+
<div class="timer">4 days</div>
104+
</div>
105+
106+
<div class="discussion">
107+
<div class="photo" style="background-image: url(https://images.unsplash.com/photo-1435348773030-a1d74f568bc2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1050&q=80);">
108+
<div class="online"></div>
109+
</div>
110+
<div class="desc-contact">
111+
<p class="name">Paul Walker</p>
112+
<p class="message">You can't see me</p>
113+
</div>
114+
<div class="timer">1 week</div>
115+
</div>
116+
</section>
117+
118+
<section class="chat">
119+
<div class="header-chat">
120+
<i class="icon fa fa-user-o" aria-hidden="true"></i>
121+
<p class="name">Megan Leib</p>
122+
<i class="icon clickable fa fa-ellipsis-h right" aria-hidden="true"></i>
123+
<div class="onglet">
124+
<button class="onglet-active"><a href="#">Messages</a></button>
125+
<button><a href="#">Programmes</a></button>
126+
</div>
127+
</div>
128+
<div class="messages-chat">
129+
<div class="message">
130+
<div class="photo" style="background-image: url(https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80);">
131+
<div class="online"></div>
132+
</div>
133+
<p class="text"> Hi, how are you ? </p>
134+
</div>
135+
<div class="message text-only">
136+
<p class="text"> What are you doing tonight ? Want to go take a drink ?</p>
137+
</div>
138+
<p class="time"> 14h58</p>
139+
<div class="message text-only">
140+
<div class="response">
141+
<p class="text"> Hey Megan ! It's been a while 😃</p>
142+
</div>
143+
</div>
144+
<div class="message text-only">
145+
<div class="response">
146+
<p class="text"> When can we meet ?</p>
147+
</div>
148+
</div>
149+
<p class="response-time time"> 15h04</p>
150+
<div class="message">
151+
<div class="photo" style="background-image: url(https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80);">
152+
<div class="online"></div>
153+
</div>
154+
<p class="text"> 9 pm at the bar if possible 😳</p>
155+
</div>
156+
<p class="time"> 15h09</p>
157+
</div>
158+
<div class="footer-chat">
159+
<i class="icon fa fa-smile-o clickable" style="font-size:25pt;" aria-hidden="true"></i>
160+
<input type="text" class="write-message" placeholder="Type your message here"></input>
161+
<i class="icon send fa fa-paper-plane-o clickable" aria-hidden="true"></i>
162+
</div>
163+
</section>
164+
</div>
165+
</div>
166+
<script src="./script.js"></script>
167+
</body>
168+
</html>

‎script.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
container = document.getElementById('loader');
2+
window.addEventListener( "load" , () => {
3+
setInterval({
4+
5+
}, 3000)
6+
})

0 commit comments

Comments
 (0)