Be in touch

Developer
Judith Neumann
Size
3,222 Kb
Views
12,144
  1. Be in touch Previews
  2. Be in touch HTML Codes
  3. Be in touch CSS Codes

How do I make an be in touch?

Only CSS. What is a be in touch? How do you make a be in touch? This script and codes were developed by Judith Neumann on 05 December 2022, Monday.

Be in touch Previews
IQ Test

Be in touch - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Be in touch</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="celu"> <ul class="tecladoa"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="tecladob"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="a"> <span class="l1"></span> <span class="l2"></span> <span class="l3"></span> <span class="l4"></span> <span class="l5"></span> <span class="l6"></span> <span class="l7"></span> </div> <div class="tecladito"></div> </div> <div class="compu"> <ul class="chat"> <li></li> <li></li> <li></li> </ul> </div> <div class="sky5"> <div class="sky"> <div class="icon"></div> <div class="user"><span class="auri"></span> </div> <div class="sky3"> <div class="user3"><span class="auri3"></span> <div class="risa"></div> </div> </div> </div> </div>
</div>
</body>
</html>

Be in touch - Script Codes CSS Codes

body{ background:#1f2130;
}
.container{ position:relative; width:800px; height:600px; margin:231px auto; }
.celu{ position:absolute; width:192px; height:291px; border-top:30px solid cyan; border-bottom:30px solid cyan; border-right:12px solid cyan; border-left:12px solid cyan; border-radius:12px; margin:0 112px; -webkit-transform:scale(.7); transform:scale(.7) }
ul.tecladoa{ position:absolute; width:152px; height:112px; background:gray; margin:192px 0; list-style:none;
}
ul.tecladoa li{ display:inline-block; width:12px; height:12px; background:#036988; margin: 21px 0px; }
ul.tecladoa li:nth-child(1){ margin-left: -30px;
}
ul.tecladoa li:nth-child(3){ -webkit-animation:volar3 .9s alternate infinite; animation:volar3 .9s alternate infinite;
}
ul.tecladoa li:nth-child(7){	-webkit-animation:volar3 .3s alternate infinite; animation:volar3 .3s alternate infinite;
}
ul.tecladoa li:nth-child(9){	-webkit-animation:t .5s alternate infinite; animation:t .5s alternate infinite;
}
ul.tecladoa li::before{ content:""; display:inline-block; width:12px; height:12px; background:#036988; margin: 17px 0px; }
ul.tecladoa li:nth-child(3)::before{ -webkit-animation:t .4s alternate infinite; animation:t .4s alternate infinite;
}
ul.tecladoa li:nth-child(5)::before{ -webkit-animation:t .9s alternate infinite; animation:t .9s alternate infinite;
}
ul.tecladoa li:nth-child(6)::before{	-webkit-animation:t .7s alternate infinite; animation:t .7s alternate infinite;
}
ul.tecladoa li:nth-child(8)::before{ -webkit-animation:t .3s alternate infinite; animation:t .3s alternate infinite;
}
ul.tecladob{ position:absolute; width:152px; height:112px; margin:192px 0; list-style:none;
}
ul.tecladob li{ display:inline-block; width:12px; height:12px; background:#036988; margin: 55px 0px; }
ul.tecladob li:nth-child(1){ margin-left: -30px;
}
ul.tecladob li:nth-child(4){	-webkit-animation:t .3s alternate infinite; animation:t .3s alternate infinite;
}
ul.tecladob li:nth-child(7){	-webkit-animation:t .12s alternate infinite; animation:t .12s alternate infinite;
}
.tecladito{ position:absolute; width:12px; height:12px; background:#036988; margin:271px 9px;
}
.tecladito::before{ content:""; display:block; width:137px; height:12px; background:#036988; margin: 0 19px
}
.tecladito::after{ content:""; display:block; width:12px; height:12px; background:#036988; margin: -12px 162px
}
.a{ position:absolute; width:192px; height:192px; background:#036988; margin:0px 0; } .l1,.l2,.l3,.l4,.l5,.l6,.l7{ position:absolute; background:white; width:172px; height:5px; margin-left:9px;
}
.l1{ margin-top:30px; -webkit-animation: l1 3s linear infinite; animation: l1 3s linear infinite; }
.l2{ margin-top:45px; -webkit-animation: l2 3s linear infinite; animation: l2 3s linear infinite; }
.l3{ margin-top:60px; -webkit-animation: l3 3s linear infinite; animation: l3 3s linear infinite; }
.l4{ margin-top:75px; -webkit-animation: l4 3s linear infinite; animation: l4 3s linear infinite; }
.l5{ margin-top:90px; -webkit-animation: l5 3s linear infinite; animation: l5 3s linear infinite; }
.l6{ margin-top:105px; -webkit-animation: l6 3s linear infinite; animation: l6 3s linear infinite;
}
.l7{ margin-top:121px; -webkit-animation: l7 3s linear infinite; animation: l7 3s linear infinite;
}
.compu{ position:absolute; width:300px; height:192px; border:12px solid #f17682; border-radius:9px; margin:50px 271px; -webkit-transform:scale(.7); transform:scale(.7)
}
.compu::before{ content:""; display:block; width:305px; height:12px; background:#ff6666; margin:203px 0
}
ul.chat{ position:absolute; width:260px; height:192px; background:#e34f65; margin:-418px 0
}
ul.chat li{ display:block; width:50px; height:50px; background:white; margin:9px -3px;
}
ul.chat li::before{ content:""; position:absolute; display:block; width:121px; height:5px; background:white; margin: 21px 90px;
}
ul.chat li::after{ content:""; position:absolute; display:block; width:121px; height:5px; background:white; margin: 30px 90px;
}
ul.chat li:nth-child(1){ -webkit-animation: c3 3s linear infinite; animation: c3 3s linear infinite; }
ul.chat li:nth-child(1)::before{ -webkit-animation: c5 3s linear infinite; animation: c5 3s linear infinite; }
ul.chat li:nth-child(1)::after{ -webkit-animation: c5 3s linear infinite; animation: c5 3s linear infinite; }
ul.chat li:nth-child(2){ -webkit-animation: c6 3s linear infinite; animation: c6 3s linear infinite; }
ul.chat li:nth-child(2)::before{ -webkit-animation: c7 3s linear infinite; animation: c7 3s linear infinite; }
ul.chat li:nth-child(2)::after{ -webkit-animation: c7 3s linear infinite; animation: c7 3s linear infinite; }
ul.chat li:nth-child(3){ -webkit-animation: c9 3s linear infinite; animation: c9 3s linear infinite; }
ul.chat li:nth-child(3)::before{ -webkit-animation: c12 3s linear infinite; animation: c12 3s linear infinite; }
ul.chat li:nth-child(3)::after{ -webkit-animation: c12 3s linear infinite; animation: c12 3s linear infinite; }
.sky{ position:absolute; width:201px; height:142px; border:12px solid #ccc; border-radius:9px; margin: 80px 495px; background:#333; -webkit-animation: s 3s linear infinite; animation: s 3s linear infinite; -webkit-transform:scale(.7); transform:scale(.7)
}
.icon{ position:absolute; width:33px; height:7px; border-top:9px solid white; border-radius:30px; margin:55px 85px; -webkit-animation: s5 3s linear infinite; animation: s5 3s linear infinite; }
.icon::before{ content:""; display:block; width:12px; height:7px; border-radius:3px; background:white; margin:-2px 0px
}
.icon::after{ content:""; display:block; width:12px; height:9px; border-radius:3px; background:white; margin:-9px 21px
}
.user{ position:absolute; width:201px; height:142px; background:#333; margin:0 0; opacity:0; -webkit-animation: s3 3s linear infinite; animation: s3 3s linear infinite; }
.user::before{ content:""; display:block; width:60px; height:60px; border-radius:100%; background:white; margin:12px 70px; }
.user::after{ content:""; display:block; width:80px; height:70px; border-radius:80px 80px 0 0; background:white; margin:-12px 60px; }
.auri{ position:absolute; width:60px; height:40px; border-radius:90px 90px 0 0; border-top:9px solid cyan; margin:-69px 70px;
}
.auri::before{ content:""; display:block; width:12px; height:21px; border-radius:3px; background:cyan; margin:12px -5px;
}
.auri::after{ content:""; display:block; width:12px; height:21px; border-radius:3px; background:cyan; margin:-33px 55px;
}
.sky5{ position:absolute; margin: 0 40px
}
.sky3{ position:absolute; width:50px; height:43px; background:gray; margin:99px 150px;
}
.user3{ position:absolute; width:21px; height:30px; border-radius:21px 21px 0 0; background:black; margin:7px 14px;
}
.user3::before{ content:""; display:block; width:21px; height:12px; border-radius:30px 30px 0 0; background:white; margin:19px 0px;
}
.user3::after{ content:""; display:block; width:13px; height:12px; border-radius:0px 0px 14px 14px; background:white; margin:-40px 4px;
}
.auri3{ position:absolute; width:13px; height:40px; border-radius:90px 90px 0 0; border-top:3px solid #ff6666; margin:-47px 4px;
}
.auri3::before{ content:""; display:block; width:5px; height:7px; border-radius:3px; background:#ff6666; margin:3px -5px;
}
.auri3::after{ content:""; display:block; width:5px; height:7px; border-radius:3px; background:#ff6666; margin:-10px 13px;
}
.risa{ position:absolute; width:7px; height:3px; border-radius:0 0 9px 9px; background:#ff6666; margin:-33px 7px; -webkit-animation: s3 3s linear infinite; animation: s3 3s linear infinite;
}
@-webkit-keyframes t{ 0% { background:#036988;} 100% { background:white;}}
@keyframes t{ 0% { background:#036988;} 100% { background:white;}}
@-webkit-keyframes l1 { 0% {opacity: 0;} 25% {opacity: 0;width:0px;height:5px;} 35%,40%,45%,50%,60%,70%, 80%,90%,95%,100% {opacity: 1;width:172px;height:5px;} }
@keyframes l1 { 0% {opacity: 0;} 25% {opacity: 0;width:0px;height:5px;} 35%,40%,45%,50%,60%,70%, 80%,90%,95%,100% {opacity: 1;width:172px;height:5px;} }
@-webkit-keyframes l2 { 0%,25% {opacity: 0;} 35% {opacity: 0;width:0px;height:5px;} 40%,45%,50%,60%,70%, 80%,90%,95%,100% {opacity: 1;width:172px;height:5px;} }
@keyframes l2 { 0%,25% {opacity: 0;} 35% {opacity: 0;width:0px;height:5px;} 40%,45%,50%,60%,70%, 80%,90%,95%,100% {opacity: 1;width:172px;height:5px;} }
@-webkit-keyframes l3 { 0%,25%,35% {opacity: 0;} 40% {opacity: 0;width:0px;height:5px;} 45%,50%,60%,70%, 80%,90%,95%,100% {opacity: 1;width:172px;height:5px;} }
@keyframes l3 { 0%,25%,35% {opacity: 0;} 40% {opacity: 0;width:0px;height:5px;} 45%,50%,60%,70%, 80%,90%,95%,100% {opacity: 1;width:172px;height:5px;} } @-webkit-keyframes l4 { 0%,25%,35%,40% {opacity: 0;} 45% {opacity: 0; width:0px;height:5px;} 50%,60%,70%, 80%,90%,95%,100% {opacity: 1; width:172px;height:5px;} } @keyframes l4 { 0%,25%,35%,40% {opacity: 0;} 45% {opacity: 0; width:0px;height:5px;} 50%,60%,70%, 80%,90%,95%,100% {opacity: 1; width:172px;height:5px;} }
@-webkit-keyframes l5 { 0%,25%,35%,40%,45% {opacity: 0;} 50% {opacity: 0;width:0px;height:5px;} 60%,70%, 80%,90%,95%,100% {opacity: 1;width:172px;height:5px;} }
@keyframes l5 { 0%,25%,35%,40%,45% {opacity: 0;} 50% {opacity: 0;width:0px;height:5px;} 60%,70%, 80%,90%,95%,100% {opacity: 1;width:172px;height:5px;} } @-webkit-keyframes l6 { 0%,25%,35%,40%,45%,50% {opacity: 0;} 60% {opacity: 0;width:0px;height:5px;} 70%,80%,90%,95%,100% {opacity: 1;width:172px;height:5px;} } @keyframes l6 { 0%,25%,35%,40%,45%,50% {opacity: 0;} 60% {opacity: 0;width:0px;height:5px;} 70%,80%,90%,95%,100% {opacity: 1;width:172px;height:5px;} }
@-webkit-keyframes l7 { 0%,25%,35%,40%,45%,50%,60% {opacity: 0;} 70% {opacity: 0;width:0px;height:5px;} 80%,90%,95%,100% {opacity: 1;width:172px;height:5px;} }
@keyframes l7 { 0%,25%,35%,40%,45%,50%,60% {opacity: 0;} 70% {opacity: 0;width:0px;height:5px;} 80%,90%,95%,100% {opacity: 1;width:172px;height:5px;} }
@-webkit-keyframes c3{ 0%,25% {opacity: 0;} 35% {opacity: 0;width:0px;height:50px;} 40%,45%,50%,60%,70%,80%,90%,95%,100% {opacity: 1;width:50px;height:50px;} }
@keyframes c3{ 0%,25% {opacity: 0;} 35% {opacity: 0;width:0px;height:50px;} 40%,45%,50%,60%,70%,80%,90%,95%,100% {opacity: 1;width:50px;height:50px;} }
@-webkit-keyframes c6{ 0%,25%,35%,40% {opacity: 0;} 50% {opacity: 0; width:0px;height:50px;} 60%,70%,80%,90%,95%,100% {opacity: 1;width:50px;height:50px;} }
@keyframes c6{ 0%,25%,35%,40% {opacity: 0;} 50% {opacity: 0; width:0px;height:50px;} 60%,70%,80%,90%,95%,100% {opacity: 1;width:50px;height:50px;} }
@-webkit-keyframes c7{ 0%,25%,35%,40% {opacity: 0;} 45% {opacity: 0; width:0px;height:5px;} 50%,60%,70%,80%,90%,95%,100% {opacity: 1; width:121px;height:5px;} }
@keyframes c7{ 0%,25%,35%,40% {opacity: 0;} 45% {opacity: 0; width:0px;height:5px;} 50%,60%,70%,80%,90%,95%,100% {opacity: 1; width:121px;height:5px;} }
@-webkit-keyframes c9{ 0%,25%, 35%, 40%, 45%, 50%,60% {opacity: 0;} 70% {opacity: 0;width:0px;height:50px;} 80%,90%,95%,100% {opacity: 1; width:50px;height:50px;}}
@keyframes c9{ 0%,25%, 35%, 40%, 45%, 50%,60% {opacity: 0;} 70% {opacity: 0;width:0px;height:50px;} 80%,90%,95%,100% {opacity: 1; width:50px;height:50px;}}
@-webkit-keyframes c12{ 0%,25%,35%,40% {opacity: 0;} 45% {opacity: 0; width:0px;height:5px;} 50% {opacity: 1; width:0px;height:5px;} 60%, 70%, 80%, 85%,90%,95%,100%{opacity: 1;width:121px;height:5px;} }
@keyframes c12{ 0%,25%,35%,40% {opacity: 0;} 45% {opacity: 0; width:0px;height:5px;} 50% {opacity: 1; width:0px;height:5px;} 60%, 70%, 80%, 85%,90%,95%,100%{opacity: 1;width:121px;height:5px;} }
@-webkit-keyframes s5{ 0% {opacity: 0;} 25% {opacity: 1;} 30% {opacity: 0;} 35% {opacity: 1;} 40%,45%,50%,60%,70%,80%,85%,90%,100%{opacity: 0;} }
@keyframes s5{ 0% {opacity: 0;} 25% {opacity: 1;} 30% {opacity: 0;} 35% {opacity: 1;} 40%,45%,50%,60%,70%,80%,85%,90%,100%{opacity: 0;} }
@-webkit-keyframes s3{ 0%,25%,30%,35%,40% {opacity: 0;} 45%,50%,60%,70%,80%,85%,90%, 95%, 100% {opacity: 1;} }
@keyframes s3{ 0%,25%,30%,35%,40% {opacity: 0;} 45%,50%,60%,70%,80%,85%,90%, 95%, 100% {opacity: 1;} }
Be in touch - Script Codes
Be in touch - Script Codes
Home Page Home
Developer Judith Neumann
Username judag
Uploaded December 05, 2022
Rating 4
Size 3,222 Kb
Views 12,144
Do you need developer help for Be in touch?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Judith Neumann (judag) Script Codes
Name
Colorfull night...
Sad kitty
Funny icons...
Wait for a cofee...
Css animals
Fireworks
Landscapes animated icons...
Antartic day
Snow in town
Parrot preloader...
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!