<div id="message_chat">

        <div class="top-bar">
            <div class="top-bar_time">
                <p class="time">10:34 <img src="img/top-bar/top-bar_time/location-arrow.svg" alt=""></p>
            </div>
            <div class="top-bar_indicators">
                <div class="item"><img src="img/top-bar/top-bar_indicators/net-arrow.svg" alt=""></div>
                <div class="item"><img src="img/top-bar/top-bar_indicators/wifi-arrow.svg" alt=""></div>
                <div class="item"><img src="img/top-bar/top-bar_indicators/battery-arrow.svg" alt=""></div>
            </div>
        </div>


        <div class="message_content-bar">

            <div class="message-wrapper">
                <a class="message-to-you">ogfjgfhgfhgfhhf</a>
                <a class="message-to-you">fdhgfhh</a>
                <a class="message-to-your">fdfddghghfgdhhp</a>
                <a class="message-to-you">gfhfghfgfgfgfgfgfgfgfgfgfgfgfgfgfgfggfhfghfgfgfgfgfgfgfgfgfgfgfgfgfgfgfg</a>
                <a class="message-to-your">ogfjgfhdfgfdgfghfghgfhgjgfhgfhhf</a>
                <a class="message-to-your">ogfjgfhgfhgfhhf</a>
                <a class="message-to-you-img">ФОТО</a>
                <a class="message-to-you">gfgfhhgfh</a> 
                <a class="message-to-your-img">ФОТО</a>
            </div>

        </div>

        <div class="input_wrapper">
            <div class="input-line">
                <a href="#" class="input-line_camera"><i class="fas fa-camera"></i></a>
                <div class="input-line_chat">
                    <input type="search" class="chat" placeholder="iMessage" onclick="openApp('chat-keyboard')">
                    <a href="#" class="chat-voice"><i class="fas fa-microphone-alt"></i></a>
                    <a href="#" class="chat-send"><i class="fas fa-arrow-up"></i></a>
                </div>
            </div>

            <div id="chat-keyboard">
                <div class="keyboard-content">
                    <div class="key" id="key">
                        <a href="#" class="key-item letter">й</a>
                        <a href="#" class="key-item letter">ц</a>
                        <a href="#" class="key-item letter">у</a>
                        <a href="#" class="key-item letter">к</a>
                        <a href="#" class="key-item letter">е</a>
                        <a href="#" class="key-item letter">н</a>
                        <a href="#" class="key-item letter">г</a>
                        <a href="#" class="key-item letter">ш</a>
                        <a href="#" class="key-item letter">щ</a>
                        <a href="#" class="key-item letter">з</a>
                        <a href="#" class="key-item letter">х</a>
                        <a href="#" class="key-item letter">ф</a>
                        <a href="#" class="key-item letter">ы</a>
                        <a href="#" class="key-item letter">в</a>
                        <a href="#" class="key-item letter">а</a>
                        <a href="#" class="key-item letter">п</a>
                        <a href="#" class="key-item letter">р</a>
                        <a href="#" class="key-item letter">о</a>
                        <a href="#" class="key-item letter">л</a>
                        <a href="#" class="key-item letter">д</a>
                        <a href="#" class="key-item letter">ж</a>
                        <a href="#" class="key-item letter">э</a>
                        <a href="#" class="key-item shift">↥</a>
                        <a href="#" class="key-item letter">я</a>
                        <a href="#" class="key-item letter">ч</a>
                        <a href="#" class="key-item letter">с</a>
                        <a href="#" class="key-item letter">м</a>
                        <a href="#" class="key-item letter">и</a>
                        <a href="#" class="key-item letter">т</a>
                        <a href="#" class="key-item letter">ь</a>
                        <a href="#" class="key-item letter">б</a>
                        <a href="#" class="key-item letter">ю</a>
                        <a href="#" class="key-item"><i class="fas fa-backspace"></i></a>
                    </div>
                    <div class="bottom-key">
                        <a href="#" class="key-item">123</a>
                        <a href="#" class="key-item"><i class="far fa-smile"></i></a>
                        <a href="#" class="key-item">Пробел</a>
                        <a href="#" class="key-item">Ввод</a>
                    </div>
                </div>
                <div class="bottom-btn">
                    <a href="#" class="world"><img src="img/chat/globe.svg" alt=""></a>
                    <a href="#" class="microphone"><img src="img/chat/keyboard-voice.svg" alt=""></a>
                </div>
            </div>

        </div>

    </div>
*,
*::after,
*::before {
	box-sizing: border-box;
}

::-webkit-scrollbar {
	width: 0;
}

body {
	font-family: sans-serif;
	color: black;
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

a {
	text-decoration: none;
}
.top-bar {
	width: 100%;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 15px;
	transition: 0.3s;
	cursor: pointer;
	user-select: none;
}

.top-bar:hover {
	background-color: rgba(255, 255, 255, 0.42);
	transition: 0.5s;
}

.top-bar_time p.time {
	font-size: 18px;
	color: black;
}

.top-bar_indicators {
	display: flex;
	justify-content: space-between;
}

.top-bar_indicators .item {
	padding-right: 5px;
}
#message_chat {
	width: 414px;
	height: 896px;
	background-color: #fff;
	right: 0;
	bottom: 0;
	z-index: 99;
	position: absolute;
	user-select: none;
}

#message_chat .top-bar:hover {
	background-color: rgba(160, 158, 158, 0.185);
	transition: 0.5s;
}

.input-line {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
	margin-bottom: 10px;
}

.input-line_chat {
	width: 100%;
	display: flex;
	align-items: center;
	margin-left: 10px;
	height: 40px;
	border: 2px solid #c2c2c2;
	border-radius: 20px;
}

.input-line_chat input.chat {
	border: none;
	outline: none;
	padding: 0 20px;
	border-radius: 15px;
	width: 84%;
	color: rgba(0, 0, 0, 0.3);
	font-size: 16px;
}

a.input-line_camera {
	color: rgba(0, 0, 0, 0.4);
	font-size: 38px;
}

a.input-line_camera:hover {
	color: rgba(97, 97, 97, 0.4);
	transition: 0.3s;
}

a.chat-voice {
	background-color: rgba(196, 196, 196, 0.46);
}

a.chat-voice:hover {
	background-color: rgba(196, 196, 196);
}

.input-line_chat a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 16px;
	font-size: 18px;
	color: white;
	margin-right: 3px;
}

a.chat-send {
	background-color: rgba(109, 211, 119, 0.46);
}

a.chat-send:hover {
	background-color: rgba(109, 211, 119);
}

.message_content-bar {
	height: 55.5%;
	overflow: auto;
	user-select: text;
	padding: 0 10px;
}

.message-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	font-size: 14px;
}

.message-to-your-img {
	align-self: flex-end;
}

.message-to-you-img,
.message-to-your-img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 158px;
	height: 140px;
	background-color: #c4c4c4;
	cursor: pointer;
	border-radius: 9px;
}

.message-to-you-img img,
.message-to-your-img img {
	display: block;
	width: 100%;
	height: 100%;
	background-size: 100%;
}

.message-to-you {
	height: 100%;
	width: fit-content;
	padding: 7px;
	border-radius: 9px;
	background-color: #c4c4c4;
	margin-top: 10px;
	word-wrap: break-word;
	max-width: 50%;
}

.message-to-your {
	width: fit-content;
	padding: 7px;
	border-radius: 9px;
	background-color: #c4c4c4;
	margin-top: 10px;
	word-wrap: break-word;
	align-self: flex-end;
	max-width: 50%;
	height: 100%;
}

.input_wrapper {
	width: 100%;
	position: absolute;
	bottom: 0;
}

.new-message {
	background-color: rgba(196, 196, 196, 0.46);
	width: 100%;
	padding: 24px 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	border-radius: 8px 8px 0px 0px;
}

.new-message p {
	font-size: 16px;
	padding-right: 60px;
}

.new-message a {
	font-size: 13px;
	color: #0a93ce;
	padding-right: 14px;
}

.new-message a:hover {
	color: #10b7ff;
	transition: 0.3s;
}

.to-message {
	width: 100%;
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	position: relative;
}

.to-message a {
	padding-right: 10px;
}

.to-message p {
	padding-left: 20px;
	font-size: 15px;
	color: rgba(0, 0, 0, 0.4);
}

.to-message p span {
	color: black;
}

.to-message::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	background-color: #c4c4c4;
	top: 0;
}

.to-message::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	background-color: #c4c4c4;
	bottom: 0;
}

#chat-keyboard {
	width: 100%;
	padding: 10px;
	background-color: #dadada;
}

.bottom-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
}

.bottom-key {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.key {
	display: grid;
	grid-template-areas:
		"a a a a a a a a a a a"
		"a a a a a a a a a a a"
		"a a a a a a a a a a a";
	justify-content: space-between;
}

.key .key-item {
	margin-bottom: 10px;
}
.key .key-item:last-child {
	background-color: #c4c4c4;
}

.bottom-key .key-item:nth-child(1) {
	width: 46px;
	height: 41px;
	background-color: #c4c4c4;
}
.bottom-key .key-item:nth-child(2) {
	width: 44px;
	height: 41px;
	background-color: #c4c4c4;
}
.bottom-key .key-item:nth-child(3) {
	width: 200px;
	height: 41px;
}
.bottom-key .key-item:nth-child(4) {
	width: 79px;
	height: 41px;
	background-color: #c4c4c4;
}

.key-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 31px;
	height: 50px;
	font-size: 18px;
	box-shadow: 2px 1px 4px 0px rgba(0, 0, 0, 0.25);
	background-color: #fff;
	border-radius: 4px;
	color: black;
}

.key-item:hover {
	color: #565656;
	transition: 0.3s;
}
.key-item:active,
.shift.active {
	color: #424242;
	background: #c4c4c4;
	transition: 0.3s;
	box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.15);
}
.shift {
	font-weight: bold;
}
const shiftKey = {
	elem: document.querySelector('.shift'),
	state: false,
};
const letters = document.querySelectorAll('.letter');

function changeCase() {
	if(!shiftKey.state) {
		shiftKey.state = true;
		shiftKey.elem.classList.add("active");
  	letters.forEach(item => item.textContent = item.textContent.toUpperCase());
		
  } else {
		shiftKey.state = false
		shiftKey.elem.classList.remove("active");
  	letters.forEach(item => item.textContent = item.textContent.toLowerCase());
	}
}

shiftKey.elem.addEventListener("click", changeCase)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://kit.fontawesome.com/abe3bddbe4.js