diff --git a/assets/css/styles.css b/assets/css/styles.css index 531bd3b..e65b714 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -18,3 +18,62 @@ nav a { main { margin: 20vh 5% 20vh 5%; } + +/* https://codepen.io/RG/pen/bdfDI */ +.phone { + background: none repeat scroll 0 0 #fff; + /*border-left: 1px solid #ccc; + border-right: 1px solid #ccc;*/ + color: #ffffff; + font-family: "Open Sans"; + line-height: 20px; + width: 80%; + margin: 0 auto; + overflow-x: hidden; + position: relative; +} +.messages-wrapper { + position: relative; +} +.message { + margin: 0 15px 10px; + padding: 15px 20px; + position: relative; +} +.message.to { + border-radius: 20px 0px 20px 20px; + background-color: #2095fe; + color: #fff; + margin-left: 160px; +} +.message.from { + border-radius: 20px 20px 20px 0px; + background-color: #e5e4e9; + color: #363636; + margin-right: 160px; +} +.message.to + .message.to, +.message.from + .message.from { + margin-top: -7px; +} +.message:before { + border-color: #2095fe; + border-radius: 50% 50% 50% 50%; + border-style: solid; + border-width: 0 20px; + bottom: 0; + clip: rect(20px, 35px, 42px, 0px); + content: " "; + height: 40px; + position: absolute; + right: -50px; + width: 30px; + z-index: -1; +} +.message.from:before { + border-color: #e5e4e9; + left: -50px; + -webkit-transform: rotateY(180deg); + -moz-transform: rotateY(180deg); + transform: rotateY(180deg); +} diff --git a/assets/img/TgChartChat.jpg b/assets/img/TgChartChat.jpg new file mode 100644 index 0000000..8a30091 Binary files /dev/null and b/assets/img/TgChartChat.jpg differ diff --git a/assets/img/TgChartChat.png b/assets/img/TgChartChat.png deleted file mode 100644 index 2200419..0000000 Binary files a/assets/img/TgChartChat.png and /dev/null differ diff --git a/assets/img/TgIntraChat.jpg b/assets/img/TgIntraChat.jpg new file mode 100644 index 0000000..c186fc9 Binary files /dev/null and b/assets/img/TgIntraChat.jpg differ diff --git a/index.html b/index.html index 5aecaef..3b0949b 100644 --- a/index.html +++ b/index.html @@ -41,12 +41,13 @@