Share code trang web tỏ tình bạn gái

Hôm nọ có một bạn nhắn tin hỏi minh xin cái code này. Mấy cái này thì nên dùng cho ngày 14-2 hay 1-4 là hay nhất. Trước kia mình đã từng chia sẻ rồi nhưng giờ chẳng nhớ bài đấy đâu mất lên ngồi viết lại luôn. Mình không khuyến khích các bạn dùng cái này để tỏ tình thật vì kết quả sẽ khoảng -1% thành công. Hehe

Demo các bạn có thể xem tại đây

Mình sẽ viết bài này một cách ngắn gọn nhất cho các bạn kể cả không biết code,các bạn có thể coppy paste là dùng được luôn… Nhưng nhớ đổi link facebook thành của bạn đấy nhé 😀

CSS

Về CSS các bạn chỉ cần copy và paste là được. Không có gì cần chỉnh sửa cả .Thậm chí bạn không cần tạo file css luôn vì phía dưới trong html mình có link file css từ web của mình.Nếu bạn biết code bạn có thể tùy biến lại theo ý thích của mình

@font-face {
font-family: Pacifico;
src:url('https://minhchuit.net/font/Pacifico-Regular.ttf') format('truetype');
font-weight:normal;
 font-style:normal;
}
body{
  background: url(https://minhchuit.net/images/noise_lines.png);
  font-family: 'Pacifico', Tahoma;
  overflow: hidden;
  color: #fff;
}
.bgoverlay{
  background: rgb(103,58,183);
  background: rgba(103,58,183,0.7);
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.container{
  position: relative;
  margin: 120px auto 0 auto;
  width: 320px;
}
.ico{
  display: block;
  width: 320px;
  height: 320px;
}
.open .ico{
  animation: open 6s;
  transform: scale(10);
    user-select: none;
}
.ico .title{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -110px;
  margin-top: -100px;
  z-index: 4;
  font-size: 50px;
  font-family: 'Pacifico', cursive;
  color: #fff;
  cursor: pointer;
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
    user-select: none;
}
.open .ico .title{
  opacity: 0;
  transition: all 0.3s ease;
  top:-150px;
}
.ico:before,
.ico:after,
.ico2:before,
.ico2:after{
  position: absolute;
  top:0;
  left:0;
}
.ico:before,
.ico:after,
.ico2:before,
.ico2:after{
  display: block;
  font-size: 20em;
  color: #ff4081;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f004";
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ico2:before,
.ico2:after{
  color: #e91e63;
}
.ico:before{
  z-index: 3;
}
.ico:after{
  animation: explode 4s infinite;
}
.ico2:before{
  animation: explodeSmall 3s infinite;
}
.ico2:after{
  animation: explodeSmall 2s infinite;
}
.endtext{
  opacity:0;
  position: absolute;
  top:-100px;
  width:100%;
    text-align: center;
}
.open .endtext{
  top:0;
  opacity: 1;
  animation: show 5s;
}
.endtext .close{
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
.endtext h1,
.endtext h2,
.endtext h3{
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
  text-align: center;
  font-weight: normal;
}
.endtext h1{
  font-size: 50px;
}
.endtext h2{
  font-size: 30px;
}
.endtext h3{
  font-size: 20px;
}
@keyframes explode {
    from {
      transform: scale(1);
      opacity: 1;
    }
    to {
      transform: scale(1.6);
      opacity: 0;
    }
}
@keyframes explodeSmall {
    from {
      transform: scale(1);
      opacity: 1;
    }
    to {
      transform: scale(1.2);
      opacity: 0;
    }
}
@keyframes open {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(10);
    }
}
@keyframes show {
    from {
      opacity: 0;
      top: -100px;
    }
    to {
      opacity: 1;
      top:0;
    }
}
h1,h2,h3{
     user-select: none;}
}
#all{
text-align: center;
width: 50%;
margin: 0 auto;
font-weight: bold;
}
.a{
 background: #ff0000;
  border: none;
  font-size: 20x;
  color: #fff;
border-radius: 10px;
padding: 5px 15px 5px 15px;
margin-right: 8px;
font-weight: bold;
}
.b{
   background: #00ff00;
  border: none;
  font-size: 15px;
  color: #fff;
border-radius: 10px;
padding: 5px 15px 5px 15px;
margin-left: 8px;
font-weight: bold;
}
a:link {
color : #fff;
text-decoration: none;
}
a:visited {
color : #fff ;
  text-decoration: none;
}
a:hover, a:active {
color : #fff;
text-decoration: none;
}

HTML

Với HTML các bạn cần phải chỉnh sửa lại Title,Description và OG Images lại cho phù hợp với nội dung mà các bạn mong muốn. Nếu không thì bạn có thể giữ nguyên cũng được.
Phía dưới có các đường link CSS và JS thì các bạn có thể thay bằng link của các bạn. Nếu trang của bạn đã sử dung Font Awesome và Jquery thì các bạn thay đường dẫn của các bạn vào sẽ giảm được 1 chút thời gian load trang. Nếu không các bạn cứ giữ nguyên nhé.
Tại phần cuối code các bạn thay ID Facebook của các bạn thay cho ID của mình đang có nhé.

 
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CHẠM VÀO ĐÂY</title>
<!-- Tiêu đề của trang -->
<meta name="description" content="Đoán xem có điều gì bất ngờ tại đây?">
<!-- Mô tả để thu hút crush click vào -->
<meta property="og:image" content="https://minhchuit.net/images/cham-vao-day.png">
<meta property="og:title" content="CHẠM VÀO ĐÂY">
<!-- Tiêu đề của trang -->
<meta property="og:type" content="website">
<meta name="author" content="Chuisme.">
<link rel="stylesheet" href="https://minhchuit.net/css/valentine.css" type="text/css">
<link rel="stylesheet" href="https://minhchuit.net/css/fontawesome-free-5.12.1-web/css/all.css" type="text/css">
<script language="javascript" src="https://minhchuit.net/js/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$('.title').click(function(){
$('.container').addClass('open');
});
$('.close').click(function(){
$('.container').removeClass('open');
});
});
</script>
<div class="bgoverlay">
<div class="container">
<span class="ico">
<span class="ico2"></span>
<span class="title">Chạm Vào<br>     Đây</span>
</span>
<div class="endtext">
<span class="close" title="Restart"><i class="fa fa-times"></i></span> 
<!-- Thay câu bạn muốn vào đây -->
<h1>I love you baby</h1>
<h2>Làm người yêu tớ nhé <i class="fas fa-heart"></i></h2>
<div id="all">
<button class="a" onclick="alert('Cái này thêm cho vui chứ không có bấm được.Vui lòng bấm nút Đồng Ý màu xanh')">Không Đồng Ý</button>
<!-- Thay câu bạn muốn vào trong phần ngoặc đơn -->
<button class="b"><a href="https://m.me/minhchuofficial">Đồng Ý</a></button>
<!-- Thay id facebook của bạn vào trong ngoặc kép sau phần m.me/ -->
</div>
</div>
</div>
</div>

CÁCH SỬ DỤNG CODE
Nếu các bạn biết một chút về HTML và CSS thì các bạn có thể tùy biến. Nếu không bạn chỉ cần một cái hosting,1 tên miền và tạo 1 file html rồi copy đoạn mã HTML trên là có thể chạy được rồi. Lưu ý là nhớ thay link facebook của bạn vào nhé.

Trên đây mình đã chia sẻ toàn bộ code của trang này.Các bạn sử dụng giải trí đùa vui thôi nhé. Mình nghĩ nó không có tác dụng tỏ tình thật đâu…hehe
Mình cũng đang viết một phiên bản khác để 14-2 năm tới dùng. Khi cài code có lỗi gì các bạn comment hoặc liên hệ qua facebook của mình để mình hướng dẫn nhé.