Chương trình ứng dụng chính xác cho các loại mã HTML, css, JavaScript.
Bạn click vào nút TEST CODE, rồi copy code bên dưới và paste vào để test.
Chỉ dùng cho PC thôi nha. Chúc các bạn thành công !
MỘT SỐ CODE THÔNG DỤNG
Code 01: Ẩn hiện nội dung
Code 03: Đưa thanh tìm kiếm google vào blog
Code 06: Tra năm sinh âm lịch
Code 07: Hiển thị thời gian hiện tại
Code 08: Đồng hồ Việt Nam
Code 09: Đồng hồ thế giới
Code 10: Tự động thay đổi màu text
Code 11: Chữ nổi giản đơn
Code 12: Biểu tượng xã hội thay đổi màu
Code 13: Tab xem nội dung
Code 14: Đồng hồ Casio F-91w
Code 15: Button animation
Code 16: Viết bài kèm hình bên trái
Code 17: Đang cập nhật . . .
01. Ẩn hiện nội dung
</>
<div class="bigfont" style="margin-bottom: 0px;background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66);border-bottom:none; height: auto; margin: 0px 0px; padding: 6px; text-align: left; width: auto;">
<input class="button" onclick="if
(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
!= '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= ''; this.innerText = ''; this.value = 'Ẩn nội dung'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.innerText = ''; this.value = 'Xem nội dung'; }" style="margin: 0px; padding: 0px; width: 120px;" type="button" value="Xem nội dung" />
</div>
<div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 0px;border-top:none; padding: 1px; text-align: left;width: auto;">
<div style="display: none;">
<!-- Bắt đầu phần nội dung hiển thị -->
Phần đầu hiển thị <br />Chữ bình thường <br />
<b>Xuất chữ in đậm </b> | <i>Xuất chữ in nghiêng</i><br />
<div><font color="#0000ff">Xuất chữ màu xanh</font></div>
<div><font color="#ff0000">Xuất chữ màu đỏ</font></div>
<div><a href="https://vnexpress.net/" target="_blank">Đọc báo vnExpress</a></div>
<img src="https://i.pinimg.com/236x/5b/49/33/5b4933cea1a99f29c6aeffddee57ec06.jpg" alt="Anhlevan" style="width:200px;height:320px;"> <br>
<!-- Kết thúc phần nội dung hiển thị -->
</div>
</div>
<style type="text/css">
.button {
background: linear-gradient(#0000CD,#00008B);
color: #fff;
border-radius: 5px;
cursor: pointer;
font-family: arial, serif;
font-size: 14px;
font-weight: bold;
height: 36px;
}.button:hover {
background:linear-gradient(#B22222,#8B0000);
color: #FFFF00;
}
</style>
02. Hiển thị thứ, ngày tháng năm hiện tại
JS
<div style="font-size: 14px;color: blue;text-align: center;">
<script language="" type="text/javascript">
//<![CDATA[
<!-- // Array of month Names
<!-- var monthNames = new Array("một","hai","ba","bốn","năm","sáu","bảy","tám","chín","mười","mười một","mười hai"); -->
var monthNames = new Array("1","2","3","4","5","6","7","8","9","10","11","12");
var dayNames = new Array("Chủ nhật, ngày ","Thứ 2, ngày ","Thứ 3, ngày ","Thứ 4, ngày ","Thứ 5, ngày ","Thứ 6, ngày ","Thứ 7, ngày ")
var now = new Date();
thisYear = now.getYear();
thisDay = dayNames[now.getDay()];
if(thisYear < 1900) {thisYear += 1900}; // corrections if Y2K display problem
document.write("" + thisDay +""+""+" "+ now.getDate() + "/" + monthNames[now.getMonth()] + "/" + thisYear);
// -->
//]]>
</script>
</div>
03. Đưa thanh tìm kiếm google vào blog
</>
<form action="http://www.google.com.vn/custom" method="get" target="_top"><table bgcolor="#ffffff"><tr><td align="left" height="32" nowrap="nowrap" valign="top"><a href="http://www.google.com/"><img align="middle" alt="Google" border="0" src="http://www.google.com/logos/Logo_25wht.gif" /></a><input maxlength="255" name="q" size="40" type="text" value="" /><input name="sa" type="submit" value="Search" /><input name="client" type="hidden" value="pub-1710694852538675" /><input name="forid" type="hidden" value="1" /><input name="ie" type="hidden" value="UTF-8" /><input name="oe" type="hidden" value="UTF-8" /><input name="cof" type="hidden"value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH :center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000F F;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;" /><input name="hl" type="hidden" value="vi" /></td></tr></table></form>
04. Tập thơ tình lãng mạng của dân toán học
HTML
<iframe allowfullscreen="" allowtransparency="" frameborder="0" height="425px" src="https://online.fliphtml5.com/paiw/oete/" width="620px"></iframe>
05. Mở liên kết bằng cửa sổ riêng tuỳ chỉnh
</>
<img src="https://www.weebly.com/weebly/images/file_icons/src.png" border="0" width="30" align="center"><a onclick="window.open('http://anhlevan.weebly.com/playlist-mp3.html','mywindow','width=380,height=350,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes')" target="_self" href="javascript:void(0)" style="text-decoration:none;"> Mở cửa sổ nghe nhạc</a>
06. Tra năm sinh âm lịch
HTML
<iframe src="https://freetuts.net/upload/demo/files/2017/07/16/2/kiem_tra_nam_sinh_php.php" style="height:300px;width:640px" title="Anhlevan"></iframe>
07. Hiển thị thời gian hiện tại
JS
<script language='javascript'>
var myVar=setInterval(function(){Clock()},1000);
function Clock() {
a=new Date();
w=Array("Chủ Nhật","Thứ hai","Thứ ba","Thứ tư","Thứ năm","Thứ sáu","Thứ bảy");
var a=w[a.getDay()],
w=new Date,
h=w.getHours();
mi=w.getMinutes();
se=w.getSeconds();
if(10>h){h="0"+h}
if(10>mi){mi="0"+mi}
if(10>se){se="0"+se}
document.getElementById("clockDiv").innerHTML="Bây giờ là "+h+" giờ "+mi+" phút "+se+" giây";
}
</script>
<div id="clockDiv"></div>
08. Đồng hồ Việt Nam
</>
<!-- Begin of localTimes.info script --> <div style="margin:15px 0px 0px 0px" align="center"> <div style="width:140px; border:2px solid #ccc; background:transparent; color:#000080; font-weight:bold; padding:6px 6px" align="center"><a style="font-size:14px; line-height:16px; padding:2px 0px; font-family:arial; text-decoration: none; color: #000080;" href="https://localtimes.info/Asia/Vietnam/Ho_Chi_Minh_City_(Saigon)/"><img src="https://localtimes.info/images/countries/vn.png" style="border:0;margin:0;padding:0" height="18" align="center"/> VietNam Clock</a></div> <p> <script type="text/javascript" src="https://localtimes.info/clock.php?cp3_Hex=FFB200&cp2_Hex=FFFFFF&cp1_Hex=000080&fwdt=160&ham=0&hbg=0&hfg=0&sid=&mon=&wek=&wkf=&sep=&continent=Asia&country=Vietnam&city=Lagi&widget_number=110"></script> </p> </div> <!-- End of localTimes.info script -->
➤ HD: Bạn thay số 110 ở dòng widget_number=110 để chọn loại đồng hồ hiển thị
09. Đồng hồ thế giới
</>
<!--Local Time Difference widget - HTML code - localtimes.info --> <div style="border-radius: 10px; overflow: hidden;padding:0px 3px;padding-top:3px; width:220px; margin:auto; align:center;text-align:center;background:black"><iframe src="https://localtimes.info/timediff.php?lcid=USCA0638,USNY0996,BRXX0201,UKXX0085,FRXX0076,RSXX0063,INXX0096,SNXX0006,JAXX0085,ASXX0112&cp=FFFFFF,000000" seamless frameborder=0 width="216" height="385" style="background:white"></iframe><a rel="external" target="_top" href="https://localtimes.info/difference/?lcid=USCA0638,USNY0996,BRXX0201,UKXX0085,FRXX0076,RSXX0063,INXX0096,SNXX0006,JAXX0085,ASXX0112&h=UKXX0085" title="World Time Difference & Time Converter"><span style="font-size:11px;font-family:verdana;geneva;line-height:18px;color:white">World Time Difference</span></a></div> <!--end of code-->
10. Tự động thay đổi màu text
CSS
<style type="text/css">
span{
font-family:verdana,arial,sans-serif;
padding:8px;
float:left;
color:blue;
text-shadow:-1px -1px 2px #000,-1px 1px 2px #000,1px -1px 2px #000,1px 1px 2px #000;
font-size:18pt;
animation:myfirst 15s;
animation-iteration-count: infinite;
-webkit-animation:myfirst 15s;
-webkit-animation-iteration-count: infinite;
font-family: Arial;
font-weight: bold;
text-decoration: none;
}
@keyframes myfirst
{
0% {color: hsl( 10, 90%, 60% );}
6% {color: hsl( 30, 90%, 60% );}
12% {color: hsl( 50, 90%, 60% );}
18% {color:hsl( 70, 90%, 60% );}
24% {color:hsl( 90, 90%, 60% );}
30% {color:hsl( 110, 90%, 60% );}
36% {color:hsl( 130, 90%, 60% );}
42% {color:hsl( 150, 90%, 60% );}
48% {color:hsl( 170, 90%, 60% );}
54% {color:hsl( 190, 90%, 60% );}
60% {color:hsl( 210, 90%, 60% );}
66% {color:hsl( 230, 90%, 60% );}
72% {color:hsl( 250, 90%, 60% );}
78% {color:hsl( 270, 90%, 60% );}
84% {color:hsl( 290, 90%, 60% );}
90% {color:hsl( 310, 90%, 60% );}
96% {color:hsl( 330, 90%, 60% );}
100% {color:hsl( 350, 90%, 60% );}
}
@-webkit-keyframes myfirst
{
0% {color: hsl( 10, 90%, 60% );}
6% {color: hsl( 30, 90%, 60% );}
12% {color: hsl( 50, 90%, 60% );}
18% {color:hsl( 70, 90%, 60% );}
24% {color:hsl( 90, 90%, 60% );}
30% {color:hsl( 110, 90%, 60% );}
36% {color:hsl( 130, 90%, 60% );}
42% {color:hsl( 150, 90%, 60% );}
48% {color:hsl( 170, 90%, 60% );}
54% {color:hsl( 190, 90%, 60% );}
60% {color:hsl( 210, 90%, 60% );}
66% {color:hsl( 230, 90%, 60% );}
72% {color:hsl( 250, 90%, 60% );}
78% {color:hsl( 270, 90%, 60% );}
84% {color:hsl( 290, 90%, 60% );}
90% {color:hsl( 310, 90%, 60% );}
96% {color:hsl( 330, 90%, 60% );}
100% {color:hsl( 350, 90%, 60% );}
}
</style>
<span><b>Thân tặng các bạn kho code thông dụng</b></span>
11. Chữ nổi giản đơn
CSS
<div style="font-family:Arial;font-size:20px;color:blue;font-weight:bold;text-align:center;text-shadow: 3px 3px 2px #808080;">CHỮ NỔI GIẢN ĐƠN</div>
12. Biểu tượng xã hội thay đổi màu
</>
<div class="container">
<a href="#" target="_blank"><i class="fa fa-apple" id="apple"></i></a>
<a href="#" target="_blank"><i class="fa fa-youtube" id="youtube"></i></a>
<a href="#" target="_blank"><i class="fa fa-twitter" id="twitter"></i></a>
<a href="#" target="_blank"><i class="fa fa-github-square github" id="github"></i></a>
<a href="#" target="_blank"><i class="fa fa-facebook-square" id="facebook"></i></a>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
}
.cd_main{
background: #444;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
#apple,
#youtube,
#twitter,
#github,
#facebook {
font-size: 3em;
background-color: #18191f;
color: #fff;
box-shadow: 2px 2px 2px #00000080, 10px 1px 12px #00000080,
2px 2px 10px #00000080, 2px 2px 3px #00000080, inset 2px 2px 10px #00000080,
inset 2px 2px 10px #00000080, inset 2px 2px 10px #00000080,
inset 2px 2px 10px #00000080;
border-radius: 12px;
padding: 8px 12px;
margin: 0 20px;
animation: animate 3s linear infinite;
text-shadow: 0 0 50px #0072ff, 0 0 100px #0072ff, 0 0 150px #0072ff,
0 0 200px #0072ff;
}
#youtube {
animation-delay: 0.3s;
}
#twitter {
animation-delay: 0.5s;
}
#facebook {
animation-delay: 0.7s;
}
#github {
animation-delay: 0.1s;
}
@keyframes animate {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
</style>
13. Tab xem nội dung
</>
<div id="page-wrap">
<input type="radio" name="tab" id="tab1" checked>
<label class="" for="tab1">1</label>
<input type="radio" name="tab" id="tab2">
<label class="" for="tab2">2</label>
<input type="radio" name="tab" id="tab3">
<label class="" for="tab3">3</label>
<input type="radio" name="tab" id="tab4">
<label class="" for="tab4">4</label>
<div id="tab1tab" class="tab-content">Nội dung tab 1!</div>
<div id="tab2tab" class="tab-content">Nội dung tab 2!</div>
<div id="tab3tab" class="tab-content">Nội dung tab 3!</div>
<div id="tab4tab" class="tab-content">Nội dung tab 4!</div>
</div>
<style type="text/css">
*,*:after,*:before{box-sizing:border-box;}
#page-wrap {
width: 450px;
margin: 40px auto;
box-shadow: 0 3px 5px #666;
overflow: visible;
float: left;
background: #ebebeb;
border-radius: 5px;
position: relative;
z-index: 1;
}
#page-wrap:after, #page-wrap:before {
content: "";
width: 90%;
position: absolute;
height: 20px;
box-shadow: 0 20px 20px #000;
bottom: 25px;
transform: rotate(5deg);
z-index: -1;
right: 5px
}
#page-wrap:after {
transform: rotate(-5deg);
left: 5px;
}
input[type="radio"] {
position: absolute;
left: -200%;
}
label {
display: block;
border-radius: 5px 5px 0 0;
border: 1px solid #999;
width: 80px;
height: 40px;
float: left;
margin-right: 2px;
text-align: center;
line-height: 40px;
color: #fff;
font-family: arial;
font-weight: bold;
cursor: pointer;
margin-bottom:-1px;
background:#333;
}
.tab-content {
color: #fff;
background:#888;
font-family: arial;
font-weight: bold;
padding: 0 10px;
width: 100%;
float: left;
height: 0em;
overflow: hidden;
transition: 0.5s;
}
input[type="radio"]:checked+label{background:#888}
#tab1:checked~#tab1tab {
height: 150px;
padding: 10px;
}
#tab2:checked~#tab2tab {
height: 150px;
padding: 10px;
}
#tab3:checked~#tab3tab {
height: 150px;
padding: 10px;
}
#tab4:checked~#tab4tab {
height: 150px;
padding: 10px;
}
</style>
14. Đồng hồ Casio F-91w
</>
<!--
Light/Dark mode automatically changes based on users system preference.
ALT DIGITAL CLOCK FONTS CAN BE FOUND HERE:
https://www.1001fonts.com/digital+clock-fonts.html
-->
<div id="watch-elements-container">
<div id="shine"></div>
<div id="screen">
</div>
<button id="button1"></button>
<button id="button2"></button>
<button id="button3"></button>
<svg id="casio" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1271 1311" width="320">
<defs>
<radialGradient id="Dégradé_sans_nom_3" data-name="Dégradé sans nom 3" cx="635" cy="687" fx="260.1751499985994" r="374.83" gradientUnits="userSpaceOnUse">
<stop offset="0.28" stop-color="lime"></stop>
<stop offset="0.46" stop-color="#00b200" stop-opacity="0.7"></stop>
<stop offset="0.65" stop-color="#006700" stop-opacity="0.4"></stop>
<stop offset="0.82" stop-color="#002f00" stop-opacity="0.19"></stop>
<stop offset="0.94" stop-color="#000d00" stop-opacity="0.05"></stop>
<stop offset="1" stop-opacity="0"></stop>
</radialGradient>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#4f4a42;stop-opacity:1" />
<stop offset="50%" style="stop-color:#fbfbfa;stop-opacity:1" />
<stop offset="100%" style="stop-color:#4f4a42;stop-opacity:1" />
</linearGradient>
<linearGradient id="grad2" x1="100%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#222;stop-opacity:1" />
<stop offset="50%" style="stop-color:#333;stop-opacity:1" />
<stop offset="100%" style="stop-color:#222;stop-opacity:1" />
</linearGradient>
</defs>
<g id="Calque">
<g id="Contours">
<path id="btn3" d="M1226,777h39.08a5.92,5.92,0,0,1,5.92,5.92v58.16a5.92,5.92,0,0,1-5.92,5.92H1226a0,0,0,0,1,0,0V777A0,0,0,0,1,1226,777Z" fill="url(#grad1)" class=""></path>
<path id="btn2" d="M2593.5,686h39.08a5.92,5.92,0,0,1,5.92,5.92v58.16a5.92,5.92,0,0,1-5.92,5.92H2593.5a0,0,0,0,1,0,0V686A0,0,0,0,1,2593.5,686Z" transform="translate(2638.5 1533) rotate(180)" fill="url(#grad1)" class=""></path>
<path id="btn1" d="M2593.5,386h39.08a5.92,5.92,0,0,1,5.92,5.92v58.16a5.92,5.92,0,0,1-5.92,5.92H2593.5a0,0,0,0,1,0,0V386A0,0,0,0,1,2593.5,386Z" transform="translate(2638.5 933) rotate(180)" fill="url(#grad1)" class=""></path>
<path id="Contour_1" data-name="Contour 1" d="M2855-91h752c16,0,17,13,17,13l35,112c5,14,6,13,6,13l122,206a23,23,0,0,0,6,7l25,24a31.37,31.37,0,0,1,9,17l13,187c0,16-8,19-8,19l-29,24c2,46,0,84,0,84l28,21c6,5,6,15,6,15l-13,187c-1,12-7,16-7,16l-32,30a39.08,39.08,0,0,0-4,5l-121,206h0a107.12,107.12,0,0,0-6,12l-37,101a19.32,19.32,0,0,1-17,12H2868c-21,0-24-12-24-12l-37-99a123.46,123.46,0,0,0-8-18L2679,888c-4-6-12-12-12-12l-22-21c-9-9-8-19-8-19l-15-182c-1-10,4-14,4-14l30-27V532l-28-24a24.69,24.69,0,0,1-7-16l13-190c1-11,7-15,7-15l34-33c6-5,7-9,7-9L2792,52c7-10,9-18,9-18l36-111C2840-91,2855-91,2855-91Z" transform="translate(-2593.5 91)" fill="url(#grad2)"></path>
<path id="Contour_2" data-name="Contour 2" d="M2799,1060c18.5,26.5,37,27,37,27,455.44,18.42,790,0,790,0s24,0,41-29l86-154s16.5-20.5,20-55c30-295.67,1-557,1-557s1-17-13-47L3672,87c-14-23-37-22-37-22-389.5-13.5-809,0-809,0-29,1-37,24-37,24l-87,153a119.3,119.3,0,0,0-17,48c-24.58,335.84,3,569,3,569,4.5,16.5,17.86,37.6,17.86,37.6Z" transform="translate(-2593.5 91)" style="fill: #3d3d3d"></path>
<g id="Contour_centre" data-name="Contour centre">
<path d="M3712.11,308.15C3711,283,3693,258,3693,258l-43-69c-20-34-60-35-60-35-360-13-725,1-725,1-33.26,1.17-49,25-49,25l-53,84c-15,25-17,46-17,46-22,287-1,518-1,518,3,30,21,56,21,56l42,72c23,37,60,40,60,40,392,15,716.5.5,716.5.5C3633,992,3653,953,3653,953l43-73s10-13.87,13.5-43.5C3739,587,3712.11,308.15,3712.11,308.15ZM3570,728.32A34.68,34.68,0,0,1,3535.32,763H2921.68A34.68,34.68,0,0,1,2887,728.32V463.68A34.68,34.68,0,0,1,2921.68,429h613.64A34.68,34.68,0,0,1,3570,463.68Z" transform="translate(-2593.5 91)" style="fill: #2a2a2a"></path>
</g>
<path id="Contour_bleu" data-name="Contour bleu" d="M2886.5,193.5c-30.78,1.07-51,26-51,26a719.08,719.08,0,0,0-43,69,107.83,107.83,0,0,0-12,45c-20.17,253.56,2,489,2,489,1.06,24.61,18,53,18,53,17,32,39,58,39,58,16,23,47,25,47,25,373.59,13.91,680,1,680,1,37,0,59-36,59-36,17-25.68,35-58,35-58a94.2,94.2,0,0,0,12-38c20.17-223.6,1-496,1-496-1-27-15-49-15-49-15.92-30-37-63-37-63-14-23-50-26-50-26C3207.46,179.59,2886.5,193.5,2886.5,193.5Z" transform="translate(-2593.5 91)" style="fill: none;stroke: #0e57a9;stroke-miterlimit: 10;stroke-width: 16px"></path>
<path id="Contour_blanc" data-name="Contour blanc" d="M2894.5,217.5c-29,1-41,22-41,22-23,32-40,68-40,68a103.23,103.23,0,0,0-6,31c-19,237,2,476,2,476,1,23,13,43,13,43,15,30,37,58,37,58,10,14,34,16,34,16,352,13,667,1,667,1,29-1,41-21,41-21,16-24,31-49,31-49,14-24,15-43,15-43,19-209,1-478,1-478-1-27-10-43-10-43-15-28-37-60-37-60-10-16-30-19-30-19C3228.5,206.5,2894.5,217.5,2894.5,217.5Z" transform="translate(-2593.5 91)" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 3px"></path>
<g id="Contour_ecran" data-name="Contour ecran">
<path d="M3539,416A45.1,45.1,0,0,1,3584,461.05V733A45.1,45.1,0,0,1,3539,778h-620.9A45.1,45.1,0,0,1,2873,733V461.05A45.1,45.1,0,0,1,2918.05,416H3539m0-3h-620.9A48,48,0,0,0,2870,461.05V733a48,48,0,0,0,48.05,48H3539A48,48,0,0,0,3587,733V461.05A48,48,0,0,0,3539,413Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
</g>
<g >
<rect id="Ecran" x="293.5" y="520" width="683" height="334" rx="34.68" fill="#888"></rect>
</g>
<g id="light" style="opacity: 0;">
<rect x="293.5" y="520" width="683" height="334" rx="34.68" style="fill: url(#Dégradé_sans_nom_3)"></rect>
</g>
</g>
<g id="Textes">
<g>
<path d="M3379.84,864.39h20.51q7.28,0,10.5,1.71c2.16,1.12,3.23,3.2,3.23,6.24v1a4.21,4.21,0,0,1-.12,1,6.3,6.3,0,0,1-.67,2.12,4.16,4.16,0,0,1-1.87,1.72,7.5,7.5,0,0,1-1.67.62c-.62.15-1.24.28-1.87.38l-.73.1c-.23,0-.47.07-.73.09v.12a10.14,10.14,0,0,1,5.45,1.46,4.14,4.14,0,0,1,1.71,3.53V890h-8.17v-4.65l.06-.57a2.67,2.67,0,0,0-1.8-2.61,12.68,12.68,0,0,0-4.59-.69h-11.39V890h-7.85Zm19.24,13c2.49,0,4.23-.26,5.22-.87a3.29,3.29,0,0,0,1.49-3.05,6,6,0,0,0-.85-3.55c-.57-.78-2.36-1.17-5.35-1.17h-11.9v8.64Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3426.36,875.15h19.81v3.57h-19.81V886h21v4h-28.87V864.39h28.68v4.08h-20.83Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3476.68,871.88a3,3,0,0,0-1.51-3,12.78,12.78,0,0,0-5.26-.77h-2.21c-.38,0-.8,0-1.24,0s-.88,0-1.3,0a19.65,19.65,0,0,0-2,.17,8.6,8.6,0,0,0-1.77.4,2.55,2.55,0,0,0-1.14.79,3.36,3.36,0,0,0-.57,1.07,3,3,0,0,1,0,.43,1.94,1.94,0,0,0,0,.4,2.76,2.76,0,0,0,1.24,2.63,10.64,10.64,0,0,0,4.52.83,6,6,0,0,1,.61,0l.6,0,1.61,0c.53,0,1,0,1.55,0a62.72,62.72,0,0,1,11,1.06q4.76.95,4.75,6.07a8.23,8.23,0,0,1-1.71,5.37c-1.14,1.4-3.78,2.22-7.91,2.48l-2,.06c-.65,0-1.29,0-1.93.06s-1.34,0-2,0h-2a58,58,0,0,1-11.87-1q-4.59-1-4.59-6.3v-.25a.54.54,0,0,1,.06-.25v-.5l7.66,0a5.67,5.67,0,0,0,.79,3.08c.53.85,2,1.29,4.34,1.31,1,0,2,0,3,0h3a16.05,16.05,0,0,0,5.45-.67q1.71-.68,1.71-3,0-2.54-2.19-3a28.79,28.79,0,0,0-5.6-.5h-1.26c-.43,0-.87,0-1.33,0l-.67,0q-.35,0-.66-.06a45.92,45.92,0,0,1-10.48-1.36q-3.77-1.1-3.77-6.17a5.83,5.83,0,0,1,2.28-4.95q2.28-1.72,7.79-2c1.1-.05,2.2-.09,3.32-.11s2.23,0,3.33,0a66.79,66.79,0,0,1,11.33.84c3.2.57,4.81,2.49,4.81,5.76v1Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3498,890h-8.1V864.39h8.1Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3527.89,871.88a3,3,0,0,0-1.52-3,12.69,12.69,0,0,0-5.25-.77h-2.21c-.38,0-.8,0-1.24,0s-.88,0-1.3,0a19.65,19.65,0,0,0-2,.17,8.6,8.6,0,0,0-1.77.4,2.55,2.55,0,0,0-1.14.79,3.36,3.36,0,0,0-.57,1.07,3,3,0,0,1,0,.43,2.91,2.91,0,0,0,0,.4,2.76,2.76,0,0,0,1.24,2.63,10.64,10.64,0,0,0,4.52.83,5.82,5.82,0,0,1,.6,0l.61,0,1.61,0c.53,0,1,0,1.55,0a62.72,62.72,0,0,1,11,1.06q4.76.95,4.75,6.07a8.23,8.23,0,0,1-1.71,5.37c-1.14,1.4-3.78,2.22-7.91,2.48l-2,.06c-.65,0-1.29,0-1.93.06s-1.34,0-2,0h-2a58,58,0,0,1-11.86-1q-4.59-1-4.59-6.3v-.25a.54.54,0,0,1,.06-.25v-.5l7.66,0a5.67,5.67,0,0,0,.79,3.08c.53.85,2,1.29,4.34,1.31,1,0,2,0,3,0h3a16.05,16.05,0,0,0,5.45-.67q1.71-.68,1.71-3,0-2.54-2.19-3a28.79,28.79,0,0,0-5.6-.5h-1.27c-.42,0-.86,0-1.33,0l-.66,0q-.35,0-.66-.06a45.92,45.92,0,0,1-10.48-1.36q-3.77-1.1-3.77-6.17a5.83,5.83,0,0,1,2.28-4.95q2.28-1.72,7.79-2c1.09-.05,2.2-.09,3.32-.11s2.23,0,3.32,0a66.63,66.63,0,0,1,11.33.84q4.82.86,4.82,5.76v1Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3557.9,890h-8.17V868.73h-12.22v-4.34h32.79v4.34h-12.4Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
</g>
<g id="WR">
<path id="R" d="M3300,854h-43a3.55,3.55,0,0,0-3,2l-20,37s-1,2,2,2h8a4.94,4.94,0,0,0,3-1l6-9a4.33,4.33,0,0,1,4-2h22a6.19,6.19,0,0,1,4,2l6,8a4.33,4.33,0,0,0,4,2h8s3,0,2-2l-5-6s-6-5,1-7l7.38-3.69a8.49,8.49,0,0,0,4.07-4.36C3312.86,866.12,3316,854,3300,854Zm-5,18a6.19,6.19,0,0,1-4,2h-27c-6,0-4-3-4-3l1-2,2-4a6.46,6.46,0,0,1,5-3h23C3299,862,3298.2,868.8,3295,872Z" transform="translate(-2593.5 91)" style="fill: #771217"></path>
<path id="W" d="M3156,854s2,0,3,3l9,26c2,3,4,0,4,0l13-27h0a3.55,3.55,0,0,1,3-2h8a3.7,3.7,0,0,1,3,2l9,25h0c2,4,4,0,4,0l14-25h0c1-2,2-2,2-2h9c3,0,1,3,1,3l-20,36h0a6.19,6.19,0,0,1-4,2h-8c-3,0-4-3-4-3l-8-24c-3-6-5,0-5,0l-12,25a3.55,3.55,0,0,1-3,2h-10c-2,0-3-3-3-3l-15-35c-1-3,1-3,1-3h9" transform="translate(-2593.5 91)" style="fill: #771217"></path>
</g>
<g id="WATER">
<g>
<path d="M2994.68,890h-8.17V868.73h-12.22v-4.34h32.79v4.34h-12.4Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3016.83,875.15h19.81v3.57h-19.81V886h21v4H3009V864.39h28.68v4.08h-20.83Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3043.54,864.39h20.51q7.27,0,10.51,1.71t3.23,6.24v1a4.22,4.22,0,0,1-.13,1,6.51,6.51,0,0,1-.66,2.12,4.21,4.21,0,0,1-1.87,1.72,7.78,7.78,0,0,1-1.68.62c-.61.15-1.23.28-1.87.38l-.72.1c-.24,0-.48.07-.73.09v.12a10.1,10.1,0,0,1,5.44,1.46,4.14,4.14,0,0,1,1.71,3.53V890h-8.17v-4.65l.07-.57a2.7,2.7,0,0,0-1.81-2.61,12.68,12.68,0,0,0-4.59-.69h-11.39V890h-7.85Zm19.24,13c2.49,0,4.23-.26,5.23-.87a3.28,3.28,0,0,0,1.48-3.05,6,6,0,0,0-.85-3.55q-.85-1.17-5.35-1.17h-11.9v8.64Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
</g>
<path d="M2951,885.1,2948.4,890H2940L2954,864.39h11.9L2980.24,890H2972l-2.73-4.91Zm9.12-16.94-7.22,13.29h14.56Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M2934,890h-9.79l-7-19.55h-.16L2909.8,890h-9.63L2891,864.39h6.74l7.31,21.59h.21l8.05-21.59h7.74l8,21.59,7.63-21.59h6.79Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
</g>
<g id="ALARM_ON" data-name="ALARM ON">
<g>
<path d="M3465.8,817.11v1.58h-19v-3.12c0-1.75.54-2.89,1.63-3.43s3.65-1,7.7-1.25c3.25-.23,5.21-.53,5.88-.92s1-1.4,1-3c0-1.43-.38-2.35-1.13-2.77s-2.4-.64-4.94-.64q-4.74,0-6,.51c-.83.35-1.25,1.17-1.25,2.49l0,1.23h-2.92l0-.86c0-2,.67-3.3,2-4s4-1,8-1q5.32,0,7.16,1.07c1.23.71,1.84,2.1,1.84,4.16s-.57,3.31-1.71,4-3.62,1.12-7.43,1.35c-3.35.21-5.34.51-6,.88s-1,1.42-1,3.16v.56Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3486.12,802.13v11.16h3.94v1.58h-3.94v3.82h-3v-3.82h-14.76v-2.2l13.14-10.54Zm-3,11.16v-10h-.06l-12.25,10Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3513.9,802.13v16.56h-3V811h-15.42v7.68h-3V802.13h3v7.3h15.42v-7.3Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3517.32,818.69V802.13h12.56q4.24,0,6,1.06a3.92,3.92,0,0,1,1.73,3.66,4.35,4.35,0,0,1-.94,3.2,6.32,6.32,0,0,1-3.61,1.17v0q4.18.19,4.19,3.21v4.23h-3v-3.81q0-2.89-4-2.9h-10v6.71Zm3-8.29h8.59a11.06,11.06,0,0,0,4.64-.65,2.5,2.5,0,0,0,1.24-2.44c0-1.49-.31-2.47-.92-2.92s-1.92-.68-3.93-.68h-9.62Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
</g>
<path id="_" data-name="/" d="M3421.46,808h19.33a1.24,1.24,0,0,1,1.24,1.24v.72a1.19,1.19,0,0,1-1.19,1.19H3422a1.83,1.83,0,0,1-1.83-1.83v0a1.32,1.32,0,0,1,1.32-1.32Z" transform="translate(-1763.06 3280.53) rotate(-55.74)" style="fill: #fff"></path>
<g>
<path d="M3366.82,801q7.47,0,9.35,1.37c1.25.92,1.87,3.2,1.87,6.86q0,5.89-1.79,7.28t-9.43,1.39q-7.59,0-9.42-1.37t-1.82-7.09v-1.16l0-1.57c0-2.19.78-3.7,2.36-4.5S3362.5,801,3366.82,801Zm0,1.58q-6.26,0-7.32.87t-1.06,6c0,3.42.35,5.43,1.06,6s3.15.87,7.32.87,6.63-.29,7.34-.87,1.06-2.59,1.06-6v-1.08l0-1.56q0-2.75-1.47-3.48C3372.74,802.79,3370.43,802.54,3366.8,802.54Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3384.42,802.71v5.78h12.84v1.58h-12.84v7.62h-3V801.13h16.17v1.58Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3403.75,802.71v5.78h12.85v1.58h-12.85v7.62h-3V801.13h16.16v1.58Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
</g>
<rect id="_." data-name="." x="3341.2" y="806.08" width="6.87" height="6.72" rx="3.36" transform="matrix(0, -1, 1, 0, -58.3, 4245.08)" style="fill: #fff"></rect>
<g>
<path d="M3294.82,801q7.47,0,9.35,1.37c1.25.92,1.87,3.2,1.87,6.86q0,5.89-1.79,7.28t-9.43,1.39q-7.59,0-9.42-1.37t-1.82-7.09v-1.16l0-1.57c0-2.19.78-3.7,2.36-4.5S3290.5,801,3294.82,801Zm0,1.58q-6.26,0-7.32.87t-1.06,6c0,3.42.35,5.43,1.06,6s3.15.87,7.32.87,6.63-.29,7.34-.87,1.06-2.59,1.06-6v-1.08l0-1.56q0-2.75-1.47-3.48C3300.74,802.79,3298.43,802.54,3294.8,802.54Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3332,801.13v16.56h-4.88l-11-11.27-1.8-1.86-.89-.92-.88-.92h-.08l0,.62,0,.63v13.72h-3V801.13h4.87L3324,811l2.51,2.6,1.25,1.29,1.24,1.29h.08l0-.61,0-.64v-13.8Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
</g>
<g>
<path d="M3153.39,814.18H3140l-2,3.51h-3.15l9.66-16.56h4.17l9.85,16.56h-3.11Zm-.87-1.4-5.86-10.12-5.77,10.12Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3164.22,801.13V816h13.56v1.74h-16.53V801.13Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3196.64,814.18h-13.35l-2,3.51h-3.15l9.66-16.56h4.17l9.85,16.56h-3.11Zm-.87-1.4-5.86-10.12-5.77,10.12Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3204.5,817.69V801.13h12.55c2.84,0,4.83.35,6,1.06a3.92,3.92,0,0,1,1.74,3.66,4.35,4.35,0,0,1-1,3.2,6.29,6.29,0,0,1-3.61,1.17v0c2.8.13,4.19,1.2,4.19,3.21v4.23h-3v-3.81q0-2.89-4-2.9h-10v6.71Zm3-8.29h8.6a11,11,0,0,0,4.63-.65,2.48,2.48,0,0,0,1.24-2.44c0-1.49-.31-2.47-.92-2.92s-1.92-.68-3.93-.68h-9.62Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3258.08,801.13v16.56h-3V803.45l0-.5,0-.5h-.08l-.23.39-.24.38-.5.77-9,13.7h-3l-9-13.54-.52-.76-.23-.39a4.09,4.09,0,0,1-.23-.38h-.08l0,.45,0,.46v14.16h-3V801.13h5.15l7,10.71,1.13,1.74.55.86.55.86h.07l.54-.86c.27-.41.46-.7.54-.86l1.14-1.73,7-10.72Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
</g>
</g>
<g>
<path d="M2948.12,801.13v16.56h-3V803.45l0-.5,0-.5h-.08l-.23.39-.23.38-.5.77-9,13.7h-3l-9-13.54-.52-.76-.24-.39a4.09,4.09,0,0,1-.23-.38h-.07l0,.45,0,.46v14.16h-3V801.13h5.16l7,10.71,1.12,1.74.56.86.54.86h.08l.54-.86c.27-.41.45-.7.54-.86l1.14-1.73,7-10.72Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M2962.76,801q7.47,0,9.35,1.37c1.25.92,1.87,3.2,1.87,6.86q0,5.89-1.8,7.28c-1.19.93-4.34,1.39-9.42,1.39s-8.2-.46-9.42-1.37-1.82-3.28-1.82-7.09v-1.16l0-1.57c0-2.19.79-3.7,2.37-4.5S2958.44,801,2962.76,801Zm0,1.58q-6.25,0-7.32.87t-1.07,6c0,3.42.36,5.43,1.07,6s3.15.87,7.32.87,6.63-.29,7.34-.87,1.06-2.59,1.06-6v-1.08l0-1.56q0-2.75-1.47-3.48T2962.74,802.54Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M2977.38,817.69V801.13h12.21q5.65,0,7.67,1.57t2,6q0,5.38-1.79,7.19t-7.14,1.81Zm3-1.58H2989q4.74,0,6.1-1.19t1.38-5.3q0-4.51-1.19-5.71t-5.69-1.2h-9.19Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3005.14,802.71v5.64h13.38v1.58h-13.38v6.18h14v1.58h-16.94V801.13h16.94v1.58Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
</g>
<g>
<path d="M2920.16,374.13V389h13.55v1.74h-16.53V374.13Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M2939.34,374.13v16.56h-3V374.13Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M2953.82,382.45h11.3a16.4,16.4,0,0,1,.08,1.81q0,4.47-1.75,5.54c-1.16.7-4.2,1.06-9.12,1.06q-7,0-9-1.26c-1.32-.83-2-2.71-2-5.63l0-2.44,0-1.47q0-3.68,2.21-4.88t8.92-1.22q6.72,0,8.67.8t1.95,3.54v.64h-2.91v-.42c0-1.35-.44-2.18-1.33-2.5s-3.18-.48-6.9-.48q-5.16,0-6.45.77c-.87.51-1.3,1.8-1.3,3.85l0,2.2,0,2.36c0,2.09.48,3.37,1.44,3.85s3.52.71,7.68.71q4.77,0,5.9-.68c.75-.45,1.13-1.64,1.13-3.55a7.07,7.07,0,0,0-.15-1h-8.39Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M2990.27,374.13v16.56h-3V383h-15.42v7.68h-3V374.13h3v7.3h15.42v-7.3Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3004.47,375.87v14.82h-3V375.87h-8.6v-1.74H3013v1.74Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
</g>
<g>
<path d="M3293.74,382.93H3299a5.92,5.92,0,0,0,0,.61c0,.19,0,.36,0,.53a5.24,5.24,0,0,0,0,.56c0,.19,0,.38,0,.57,0,3.19-1,5.24-2.84,6.18a16.29,16.29,0,0,1-7.2,1.39h-3.74c-3.95,0-6.55-.93-7.81-2.81s-1.89-4.56-1.89-8c0-.32,0-.65,0-1s0-.67,0-1,0-.33,0-.49a3.93,3.93,0,0,1,0-.49c0-.48,0-1,0-1.48s0-1,0-1.47c0-4.54,1.06-7.43,3.16-8.67s5.26-1.86,9.49-1.86l1.8,0c.2,0,.39,0,.57,0h.57a16,16,0,0,1,3.63.56,5,5,0,0,1,2.84,2.11,5.62,5.62,0,0,1,1,2.29,15.86,15.86,0,0,1,.28,2.45,3,3,0,0,0,0,.42c0,.15,0,.29,0,.43a3.85,3.85,0,0,0,0,.48c0,.17,0,.33,0,.49l-5.33,0a1.86,1.86,0,0,1-.11-.57c0-.21,0-.43-.06-.64v-.29a6.07,6.07,0,0,0-.44-2.08c-.27-.64-1.13-1-2.59-1.08a9.39,9.39,0,0,0-1.19-.08H3287a6.91,6.91,0,0,1-.8,0c-.28,0-.56,0-.84,0a12.86,12.86,0,0,0-1.79.3,2.94,2.94,0,0,0-1.36.71,3.18,3.18,0,0,0-.74,1.18,5.22,5.22,0,0,0-.27,1.35,5,5,0,0,0-.06.56,5.25,5.25,0,0,0,0,.56l-.06,1.28c0,.41,0,.84,0,1.27,0,.87,0,1.74,0,2.61l.06,2.62c0,2.7.51,4.36,1.43,5s2.72.95,5.38.95a15,15,0,0,0,4.09-.49c1.17-.32,1.75-1.4,1.75-3.24v-.85a1.87,1.87,0,0,1,0-.42v-.47Z" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
<path d="M3327.84,392.61h-5.38V381.07H3309.4v11.54h-5.33v-27h5.33v11h13.06v-11h5.38Z" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
<path d="M3334.47,365.6h13.61c3.22,0,5.55.63,7,1.8s2.15,3.37,2.15,6.58v1a6.23,6.23,0,0,1-.09,1.06,8.92,8.92,0,0,1-.44,2.22,3.92,3.92,0,0,1-1.24,1.83,4.56,4.56,0,0,1-1.11.65,11.18,11.18,0,0,1-1.24.4l-.48.1a3.86,3.86,0,0,1-.49.1v.12a5.1,5.1,0,0,1,3.62,1.54,5.63,5.63,0,0,1,1.13,3.73v5.87h-5.42v-4.9l0-.61a3.06,3.06,0,0,0-1.19-2.75,5.62,5.62,0,0,0-3.05-.73h-7.56v9h-5.21Zm12.77,13.65a4.92,4.92,0,0,0,3.47-.91,4.4,4.4,0,0,0,1-3.22,9.58,9.58,0,0,0-.56-3.75c-.38-.82-1.56-1.24-3.55-1.24h-7.9v9.12Z" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
<path d="M3362.32,379.45q0-6.72,1.57-10.37t9.64-3.64a27.5,27.5,0,0,1,8.64,1.24q3.75,1.24,4,7c.05.59.09,1.18.1,1.78s0,1.2,0,1.82v1.77c0,5-.56,8.56-1.7,10.65s-4.71,3.13-10.73,3.13c-4.23,0-7.22-.68-9-2.06s-2.64-4.23-2.64-8.55v-.73a5.79,5.79,0,0,1,0-.72v-1.34Zm5.46-.12v2.43c0,.4,0,.8,0,1.19s0,.79.06,1.2c.17,2,.74,3.25,1.7,3.68a10.76,10.76,0,0,0,4.27.65,11.26,11.26,0,0,0,5.29-.91c1.06-.61,1.64-2.17,1.72-4.68.06-1.1.09-2.21.09-3.3v-3.26q0-3.76-.95-5.14t-4.93-1.38c-3.62,0-5.72.49-6.33,1.48s-.9,2.88-.9,5.69v.36c0,.3,0,.62,0,1v1Z" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
<path d="M3417.51,392.61h-8.91L3396.76,370h-.17l.17,22.6h-5.21v-27h8.86l11.85,22.6h.16l-.16-22.6h5.25Z" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
<path d="M3423.34,379.45q0-6.72,1.58-10.37t9.64-3.64a27.44,27.44,0,0,1,8.63,1.24q3.76,1.24,4,7c.06.59.09,1.18.11,1.78s0,1.2,0,1.82v1.77c0,5-.57,8.56-1.7,10.65s-4.71,3.13-10.73,3.13c-4.23,0-7.23-.68-9-2.06s-2.65-4.23-2.65-8.55v-.73c0-.24,0-.48,0-.72v-1.34Zm5.46-.12v2.43c0,.4,0,.8,0,1.19s0,.79.06,1.2c.17,2,.73,3.25,1.7,3.68a10.73,10.73,0,0,0,4.26.65,11.3,11.3,0,0,0,5.3-.91q1.59-.92,1.72-4.68c.05-1.1.08-2.21.08-3.3v-3.26q0-3.76-.94-5.14t-4.94-1.38q-5.42,0-6.32,1.48t-.9,5.69v.36c0,.3,0,.62,0,1v1Z" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
<path d="M3476.1,378.27V379l.08,4.3a16.39,16.39,0,0,1-1.07,6.21c-.72,1.74-2.53,2.78-5.44,3.1-.92.08-1.85.14-2.77.16s-1.85,0-2.77,0q-6.35,0-9.39-1.92t-3-8.65v-.95a9.08,9.08,0,0,1,0-.91v-4.27c0-.39,0-.79,0-1.2a17.71,17.71,0,0,1,.4-3.3,7.74,7.74,0,0,1,1.36-3,6.22,6.22,0,0,1,3.21-2.37,16.27,16.27,0,0,1,4.06-.75c.42,0,.83,0,1.24,0h1.19l2.48,0q5.3,0,7.79,1.43c1.67.94,2.53,3.25,2.59,6.95l-5.38,0a4.7,4.7,0,0,0-.74-2.8,3.35,3.35,0,0,0-2.7-1.09c-.51,0-1-.05-1.52-.06l-1.51,0q-5.16,0-6.09,1.44t-1,6.25v1.34l0,3.48q0,4.22,1.4,5.21t5.53,1c2.57,0,4.34-.29,5.29-.87s1.43-2.14,1.43-4.68v-.4a.41.41,0,0,1,0-.18v-.19h-7.05v-3.89Z" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
<path d="M3481.43,365.6H3495q4.83,0,7,1.8t2.14,6.58v1a7.45,7.45,0,0,1-.08,1.06,9.92,9.92,0,0,1-.44,2.22,3.92,3.92,0,0,1-1.24,1.83,4.75,4.75,0,0,1-1.11.65,11.18,11.18,0,0,1-1.24.4l-.49.1a3.39,3.39,0,0,1-.48.1v.12a5.07,5.07,0,0,1,3.61,1.54,5.58,5.58,0,0,1,1.14,3.73v5.87h-5.42v-4.9l0-.61a3.09,3.09,0,0,0-1.2-2.75,5.59,5.59,0,0,0-3-.73h-7.56v9h-5.21Zm12.77,13.65a4.89,4.89,0,0,0,3.46-.91,4.35,4.35,0,0,0,1-3.22,9.36,9.36,0,0,0-.57-3.75c-.37-.82-1.56-1.24-3.55-1.24h-7.89v9.12Z" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
<path d="M3514.82,387.43l-1.72,5.18h-5.59l9.33-27h7.89l9.49,27h-5.46l-1.8-5.18Zm6-17.86-4.79,14h9.66Z" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
<path d="M3538.3,365.6h11.21c3.75,0,6.53.56,8.32,1.6s2.69,3.58,2.69,7.63c0,.35,0,.72,0,1.1s0,.75-.06,1.13a10.62,10.62,0,0,1-.52,2.75,5.16,5.16,0,0,1-1.58,2.31,5.76,5.76,0,0,1-2.83,1.44,17.41,17.41,0,0,1-3.26.3,2.12,2.12,0,0,1-.44,0h-8.3v8.71h-5.2Zm11.3,13.81a9.77,9.77,0,0,0,4.22-.59c.82-.42,1.24-1.71,1.24-3.87,0-2-.28-3.32-.84-4s-1.92-1-4.08-1h-6.64v9.4Z" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
<path d="M3589.41,392.61H3584V381.07H3571v11.54h-5.33v-27H3571v11H3584v-11h5.38Z" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
</g>
<g>
<path d="M3118.05,387.43l-1.72,5.18h-5.59l9.33-27H3128l9.5,27H3132l-1.81-5.18Zm6-17.86-4.79,14H3129Z" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
<path d="M3147.41,388.08h13v4.53H3142v-27h5.46Z" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
<path d="M3169.92,387.43l-1.72,5.18h-5.59l9.33-27h7.89l9.49,27h-5.46l-1.8-5.18Zm6-17.86-4.79,14h9.66Z" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
<path d="M3193.78,365.6h13.6q4.83,0,7,1.8c1.42,1.18,2.14,3.37,2.14,6.58v1a6.23,6.23,0,0,1-.09,1.06,8.92,8.92,0,0,1-.44,2.22,3.92,3.92,0,0,1-1.24,1.83,4.38,4.38,0,0,1-1.11.65,11.18,11.18,0,0,1-1.24.4l-.48.1a4.1,4.1,0,0,1-.48.1v.12A5.09,5.09,0,0,1,3215,383a5.63,5.63,0,0,1,1.13,3.73v5.87h-5.42v-4.9l.05-.61a3.09,3.09,0,0,0-1.2-2.75,5.62,5.62,0,0,0-3.05-.73H3199v9h-5.2Zm12.76,13.65a4.9,4.9,0,0,0,3.47-.91,4.35,4.35,0,0,0,1-3.22,9.36,9.36,0,0,0-.57-3.75c-.38-.82-1.56-1.24-3.55-1.24H3199v9.12Z" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
<path d="M3252.42,392.61h-4.78l.15-22.76-8,22.76h-4.4L3227.21,370l.23,22.64h-4.78v-27h7.88l6.88,20h.16l6.81-20h8Z" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
</g>
<g id="F-91W">
<path id="W-2" data-name="W" d="M3464,256h10c3,0,3,2,3,2v10c0,2,2,0,2,0l6-10a3.55,3.55,0,0,1,3-2h7c3,0,3,2,3,2l1,11c1,2,2,0,2,0l7-12a3.1,3.1,0,0,1,2-1h10c3,0,2,2,2,2l-17,29c-2,2-3,2-3,2h-11a2,2,0,0,1-2-2V276c0-3-2,0-2,0l-7,11a3.55,3.55,0,0,1-3,2h-10a2.94,2.94,0,0,1-3-3l-2-28A2,2,0,0,1,3464,256Z" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
<path id="_1" data-name="1" d="M3453,257l-5,30h0a3.55,3.55,0,0,1-3,2h-9a2,2,0,0,1-2-2l2-15c0-1-2-1-2-1h-3a1,1,0,0,1-1-1l1-8c8-1,10-6,10-6h10c2,0,2,1,2,1" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
<path id="_9" data-name="9" d="M3403,256s-11-1-18,5c0,0-9,9,7,17h-10s-3,6,9,10c0,0,9.57,2.73,19.1-.84a16.52,16.52,0,0,0,8.92-8C3422.69,271.92,3425.86,258.86,3403,256Zm-3,27c-6,0-5-5-5-5h10C3405,283,3400,283,3400,283Zm2-12c-5,0-5-4-5-4,0-4,5-4,5-4,5,0,5,4,5,4C3407,271,3402,271,3402,271Z" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
<path id="_-" data-name="-" d="M3354,269h16a2,2,0,0,1,2,2l-1,5h0c0,1-3,1-3,1h-15a2,2,0,0,1-2-2l1-5C3352,269,3354,269,3354,269Z" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
<path id="F" d="M3313,256h30a2,2,0,0,1,2,2l-1,4c-1,2-2,2-2,2h-17a2,2,0,0,0-2,2h0a2,2,0,0,0,2,2h12c3,0,2,2,2,2l-1,5a3.1,3.1,0,0,1-2,1h-13a2,2,0,0,0-2,2l-2,9c-1,2-2,2-2,2h-10c-3,0-2-3-2-3l5-28c0-2,3-2,3-2" transform="translate(-2593.5 91)" style="fill: #b6a66e"></path>
</g>
<g>
<path d="M2980,275.39h10.59a8.2,8.2,0,0,0,0,.89,7.28,7.28,0,0,1,0,.78,7.7,7.7,0,0,0,.05.83c0,.28,0,.56,0,.83q0,7-5.72,9.08a43.49,43.49,0,0,1-14.52,2.06H2963q-11.94,0-15.75-4.14t-3.81-11.82c0-.47,0-1,0-1.46s0-1,0-1.45a5.79,5.79,0,0,0,0-.72,5.74,5.74,0,0,1,0-.71c0-.72,0-1.44,0-2.18s0-1.45,0-2.17q0-10,6.35-12.74t19.14-2.74l3.65-.06a11.17,11.17,0,0,0,1.14.06h1.14a43.37,43.37,0,0,1,7.33.84,10.33,10.33,0,0,1,5.71,3.09,7.38,7.38,0,0,1,2,3.37,17.45,17.45,0,0,1,.55,3.6,4.56,4.56,0,0,0,0,.62c0,.22,0,.43,0,.63a5.63,5.63,0,0,0,0,.71,5.79,5.79,0,0,1,0,.72l-10.75-.06a2.36,2.36,0,0,1-.21-.84c0-.31-.07-.63-.13-1V261a6.72,6.72,0,0,0-.89-3.06c-.54-.93-2.27-1.46-5.21-1.58a23.86,23.86,0,0,0-2.41-.12h-4.28c-.51,0-1,.06-1.61.06s-1.13,0-1.69.06a31.62,31.62,0,0,0-3.6.44,7.09,7.09,0,0,0-2.75,1,4.84,4.84,0,0,0-1.48,1.75,5.52,5.52,0,0,0-.56,2c-.05.28-.09.56-.12.83a7.69,7.69,0,0,0,0,.83c-.06.63-.1,1.26-.13,1.87s0,1.24,0,1.88c0,1.27,0,2.55,0,3.84s.07,2.57.13,3.84q.07,6,2.87,7.35t10.84,1.4a41.54,41.54,0,0,0,8.26-.72c2.34-.47,3.52-2.06,3.52-4.76V276.7a2.16,2.16,0,0,1-.09-.62v-.69Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3006.88,282l-3.47,7.62h-11.27l18.8-39.71h15.92L3046,289.62h-11l-3.64-7.62Zm12.19-26.25-9.65,20.59h19.48Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3082.25,261.52q0-3.45-2-4.64c-1.36-.8-3.7-1.19-7-1.19h-3c-.51,0-1.06.05-1.65.05s-1.17,0-1.74.06a24.68,24.68,0,0,0-2.7.27,10.42,10.42,0,0,0-2.38.62,3.57,3.57,0,0,0-1.52,1.23,5.89,5.89,0,0,0-.76,1.65,4.94,4.94,0,0,1,0,.68c0,.21,0,.42,0,.62,0,2,.55,3.34,1.65,4.07s3.12,1.16,6.06,1.28c.28,0,.55,0,.8,0s.53,0,.81,0l2.16.09,2.07,0a73,73,0,0,1,14.65,1.64q6.36,1.47,6.36,9.4a14.18,14.18,0,0,1-2.29,8.33q-2.28,3.25-10.59,3.85l-2.66.09c-.88,0-1.74.05-2.59.09s-1.79.06-2.67.06h-2.66a67.51,67.51,0,0,1-15.88-1.53q-6.15-1.51-6.14-9.76v-.39a1,1,0,0,1,.08-.39V277l10.25-.06a9.9,9.9,0,0,0,1.06,4.78c.7,1.32,2.64,2,5.8,2,1.35,0,2.71.06,4.06.06h4.07c3.33,0,5.76-.34,7.28-1s2.29-2.26,2.29-4.69q0-3.94-2.92-4.66a34.1,34.1,0,0,0-7.5-.78h-1.69c-.57,0-1.16,0-1.78-.06l-.89,0c-.31,0-.61-.05-.89-.09a53.19,53.19,0,0,1-14-2.11q-5-1.69-5-9.55c0-3.34,1-5.9,3-7.68s5.5-2.82,10.41-3.1c1.47-.08,2.95-.14,4.45-.18s3-.06,4.45-.06a77.06,77.06,0,0,1,15.15,1.31q6.43,1.32,6.44,8.93v1.49Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3112.14,289.62H3101.3V249.91h10.84Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<path d="M3120.44,270.27q0-9.88,3.18-15.24t19.43-5.36a74.62,74.62,0,0,1,17.41,1.83q7.58,1.81,8.17,10.32.16,1.31.21,2.61c0,.87,0,1.76,0,2.67v2.62q0,11.05-3.43,15.65T3143.82,290q-12.8,0-18.13-3t-5.33-12.56v-1.07a7.59,7.59,0,0,1,.08-1.07v-2Zm11-.18v3.57c0,.6,0,1.19,0,1.76s.07,1.16.13,1.76c.34,3,1.48,4.78,3.43,5.41a29.18,29.18,0,0,0,8.6,1q7.44,0,10.67-1.34t3.47-6.88c.11-1.63.17-3.24.17-4.85v-4.79q0-5.54-1.91-7.56c-1.27-1.35-4.58-2-10-2q-10.92,0-12.74,2.18c-1.22,1.44-1.82,4.23-1.82,8.36v.54a10.15,10.15,0,0,0-.09,1.39v1.52Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
</g>
</g>
<g id="Détails">
<path d="M3515,909.56v6.83a4,4,0,0,1-.68,2.53c-.45.58-1.38.89-2.8.93h-1.29a11.16,11.16,0,0,1-3.67-.48c-.88-.31-1.32-1.28-1.32-2.89v-7h2.26v6.93c0,.74.18,1.22.54,1.43a3.63,3.63,0,0,0,1.7.3h.78a4.15,4.15,0,0,0,1.68-.24c.39-.17.58-.6.58-1.3v-7.11Z" transform="translate(-2593.5 91)" style="fill: #fff"></path>
<g id="Flèches">
<path id="Flèche_B_D" data-name="Flèche B D" d="M3594,810l-34,5a2,2,0,0,1-2-2v-9a2,2,0,0,1,2-2l34,6c5,1,0,2,0,2" transform="translate(-2593.5 91)" style="fill: #771217"></path>
<path id="Flèche_B_G" data-name="Flèche B G" d="M2865,810l34,5a2,2,0,0,0,2-2v-9a2,2,0,0,0-2-2l-34,6c-5,1,0,2,0,2" transform="translate(-2593.5 91)" style="fill: #771217"></path>
<path id="Flèche_H_G" data-name="Flèche H G" d="M2863,383l34,5a2,2,0,0,0,2-2v-9a2,2,0,0,0-2-2l-34,6c-5,1,0,2,0,2" transform="translate(-2593.5 91)" style="fill: #771217"></path>
</g>
<g id="Bares_bleu" data-name="Bares bleu">
<path id="Bar_down_M" data-name="Bar down M" d="M3118,837h215c15,0,16,16,16,16v31c0,6-7,12-7,12l-13,13c-6,7-18,7-18,7H3143c-13,0-18-7-18-7l-13.72-13.61C3105,889,3105,885,3105,885V853C3105,837,3118,837,3118,837Z" transform="translate(-2593.5 91)" style="fill: none;stroke: #0e57a9;stroke-miterlimit: 10;stroke-width: 8px"></path>
<path id="Bar_down_R" data-name="Bar down R" d="M3619,838c3.21,0,2,3,2,3l-8,10a5,5,0,0,1-3,1H3364a2,2,0,0,1-2-2V840a2,2,0,0,1,2-2Z" transform="translate(-2593.5 91)" style="fill: #0e57a9"></path>
<path id="Bar_down_L" data-name="Bar down L" d="M2835,838c-3.21,0-2,3-2,3l8,10a5,5,0,0,0,3,1H3090a2,2,0,0,0,2-2V840a2,2,0,0,0-2-2Z" transform="translate(-2593.5 91)" style="fill: #0e57a9"></path>
<path id="Bar_up" data-name="Bar up" d="M3621,336l-4-8a3.55,3.55,0,0,0-3-2H2840a4.33,4.33,0,0,0-4,2l-3,8c-1,3,2.5,3,2.5,3H3619C3623,339,3621,336,3621,336Z" transform="translate(-2593.5 91)" style="fill: #0e57a9"></path>
</g>
</g>
</g>
</svg>
</div>
<style type="text/css">
@import url("https://fonts.cdnfonts.com/css/alarm-clock");
@import url("https://fonts.googleapis.com/css2?family=Gidugu&family=Michroma&display=swap");
@font-face {
font-family: "DSEG7 Classic";
src: url(https://manzdev.github.io/twitch-casio/dseg7-bold.woff2)
format("woff2"),
url(https://manzdev.github.io/twitch-casio/dseg7-bold.woff) format("woff");
font-display: swap;
}
@font-face {
font-family: "DSEG14 Classic";
src: url(https://manzdev.github.io/twitch-casio/dseg14-bold.woff2)
format("woff2"),
url(https://manzdev.github.io/twitch-casio/dseg14-bold.woff) format("woff");
font-display: swap;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 16px;
border: none;
outline: 0;
}
body {
font-family: "DSEG14 Classic", "alarm clock", sans-serif;
height: 100vh;
opacity:0.9;
background-color:whitesmoke;
background-image:-webkit-radial-gradient(50% 30% ellipse at center top, #e5e5e5, rgba(0, 0, 0, 0)),
radial-gradient(60% 50% ellipse at center bottom, #e6e6e6, rgb(179, 179, 179));
background-image:radial-gradient(50% 30% ellipse at center top, #e5e5e5, rgba(0, 0, 0, 0)),
radial-gradient(60% 50% ellipse at center bottom, #e6e6e6, rgb(179, 179, 179)) !important;
background-repeat: no-repeat;
height: 100vh;
background-size: cover;
display: grid;
background-position: center;
margin: 0;
padding: 0;
display: grid;
place-items: center;
}
.highlight {
fill: #fff;
}
#watch-elements-container {
position: relative;
display: grid;
place-items: center;
gap: 50px;
}
#shine {
background-image: linear-gradient(
40deg,
#fff0 15%,
#fff2 30%,
#fff6 50%,
#fff2 70%,
#fff0 85%
);
position: absolute;
height: 198px;
width: 227px;
border-radius: 39px;
bottom: 63px;
z-index: 4;
}
#screen {
position: absolute;
bottom: 115px;
right: 74px;
height: 84px;
width: 172px;
border-radius: 9px;
overflow: hidden;
color: rgba(0, 0, 0, 0.61);
font-size: 2rem;
letter-spacing: -1px;
line-height: 24px;
word-spacing: 10px;
display: flex;
flex-wrap: wrap;
row-gap: 10px;
justify-content: space-between;
padding: 5px;
z-index: 3;
}
#Countour_1{
fill:url("#grad1");
}
p {
font-size: 2.25rem;
width: 100%;
display: flex;
justify-content: center;
align-items: baseline;
}
span {
font-size: 0.8rem;
font-family: sans-serif;
}
#casio {
z-index: 2;
position:relative;
}
small {
font-size: 1.5rem;
}
#day-name,
#day-date {
font-size: 18px;
font-family: "DSEG14 Classic", "alarm clock", sans-serif;
}
#format {
display: flex;
align-items: end;
}
#btn1,#btn2,#btn3{
opacity:0;
}
#button1,#button2,#button3{
background: linear-gradient(to bottom, #4f4a42 10%, #fbfbfa 50%, #4f4a42);
height:17px;
aspect-ratio:1/1;
position:absolute;
z-index:1;
border-radius:2px;
}
#button1{
left:0px;
bottom:193px;
}
#button2{
left: 0;
bottom: 118px;
}
#button3 {
right: 0;
bottom: 118px;
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
body{
background-image:radial-gradient(50% 30% ellipse at center top, #323232, rgba(48, 48, 48, 0)),
radial-gradient(60% 50% ellipse at center bottom, #363636, rgb(16, 16, 16));
background-image:-webkit-radial-gradient(50% 30% ellipse at center top, #e5e5e5, rgba(0, 0, 0, 0)),
radial-gradient(60% 50% ellipse at center bottom, #e6e6e6, rgb(179, 179, 179));
}
}
</style>
<script type="text/JavaScript">
const lightBtn = document.getElementById("btn1");
const modeBtn = document.getElementById("btn2");
const alarmOr24HBtn = document.getElementById("btn3");
const light = document.getElementById("light");
const screen = document.getElementById("screen");
const Ecran = document.getElementById("Ecran");
//toggle for 12 or 24 hour format (true = 12H) (false = 24H)
// Initialize toggle variable to false
let twelveHour = true;
// Toggle function to flip state
function toggleState() {
// Flip boolean value using ! operator
twelveHour = !twelveHour;
// Equivalent to:
// if(twelveHour === true) {
// twelveHour = false;
// } else {
// twelveHour = true;
// }
}
function toggleTimeFormat() {
alarmOr24HBtn.addEventListener("click", () => {
toggleState();
displayTime(twelveHour);
});
}
toggleTimeFormat();
function getDay() {
const date = new Date();
const days = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
return days[date.getDay()];
}
const day = getDay();
console.log(day); // prints the current day of the week
// Returns the current day of the month
function getCurrentDay() {
// Create a new Date object to get current time
const now = new Date();
// Use getDate() to extract just the day of month from Date object
return now.getDate();
}
// Usage:
const today = getCurrentDay();
console.log(today);
function toggleScreenColor(){
Ecran.style.fill="rgba(0,255,0,0.7";
setTimeout(()=>{
Ecran.style.fill="#888";
},3000);
}
function activateLight() {
light.style.opacity = "1";
setTimeout(() => {
light.style.opacity = "0";
}, 3000);
toggleScreenColor();
}
function watchLight() {
lightBtn.addEventListener("click", activateLight);
}
watchLight();
// Display current time in 12 or 24 hour format
function displayTime(use12Hour) {
// Create Date object to get current time
const currentDate = new Date();
// Get hours, minutes, seconds
let hours = currentDate.getHours();
let minutes = currentDate.getMinutes();
let seconds = currentDate.getSeconds();
// Set AM/PM
let ampm = "AM";
// 12 hour format
if (use12Hour) {
ampm = "AM";
if (hours >= 12) {
ampm = "PM";
}
if (hours > 12) {
hours -= 12;
} else if (hours === 0) {
hours = 12;
}
}
// Add leading 0 to single digit values
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
// Construct time string
let time = "";
if (use12Hour) {
// 12 hour format
time = `<span id="format">${ampm}</span><span id="day-name">${day}</span><span id="day-date">${today}</span><p>${hours}:${minutes}:<small>${seconds}</small></p>`;
} else {
// 24 hour format
time = `<span id="format">24H</span><span id="day-name">${day}</span><span id="day-date">${today}</span><p>${hours}:${minutes}:<small>${seconds}</small></p>`;
}
// Log time to console
screen.innerHTML = `${time}`;
}
// Call function to display time
displayTime(twelveHour);
function updateTime() {
setInterval(() => {
displayTime(twelveHour);
}, 500);
}
updateTime();
</script>
15. Button animation
CSS
<p style="text-align:center;font-size:22px;font-weight:bold;color:red;text-shadow: 2px 2px 2px #808080;">Button animation</p>
<div class="frame">
<button class="custom-btn btn-alv"><a href="https://s-anhlevan.blogspot.com/" target="_blank"><span>Click now!</span></a><span>Liên kết của button</span></button>
</div>
<style type="text/css">
.frame {
width: 90%;
margin: 10px auto;
text-align: center;
}
.custom-btn {
width: 130px;
height: 40px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Lato', sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
outline: none;
}
.btn-alv{
position: relative;
right: 20px;
bottom: 20px;
border:none;
box-shadow: none;
width: 180px;
height: 40px;
line-height: 42px;
-webkit-perspective: 230px;
perspective: 230px;
}
.btn-alv span {
background: rgb(0,172,238);
background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
display: block;
position: absolute;
width: 180px;
height: 40px;
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
border-radius: 5px;
margin:0;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.btn-alv span:nth-child(1) {
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.btn-alv span:nth-child(2) {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.btn-alv:hover span:nth-child(1) {
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);color:#fff!important;
}
.btn-alv:hover span:nth-child(2) {
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
color: transparent;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
</style>
16. Viết bài kèm hình bên trái
CSS
<div class="clearfix"><img class="imgleft" src="https://hinh365.com/wp-content/uploads/2020/06/thu-vien-anh-dep-ve-qua-dua-hau-voi-khoan-100-619-tam-anh-chat-luong-cuc-cao.jpg" alt="Dưa hấu" width="200" height="170">Citrullus lanatus là một loài thực vật thuộc họ Cucurbitaceae, một loài thực vật có hoa giống như cây nho có nguồn gốc từ Tây Phi. Nó được trồng để lấy quả. Dưa này phân chia thành hai giống, dưa hấu và Citrullus caffer bắt nguồn từ việc đặt tên sai lầm của Citrullus lanatus Matsum</div>
<style type="text/css">
div {border: 3px solid green;padding: 10px;}
.clearfix {overflow: auto;}
.imgleft {float:left;margin-right:10px;}
</style>
➤ HD: Nếu bạn muốn hình ở bên phải thì thay float:left thành float:right
17. Đang cập nhật ...
</>
.Đang cập nhật . . .
☞ Nếu bạn có bất kỳ vấn đề nào với bài viết này hãy comment vào bên dưới, mình sẽ hồi âm sớm nhất có thể.
Tags:
blogspot