Tablet style code texte
<!DOCTYPE html>
<html lang="fr" prefix="og: http://ogp.me/ns#">
<head>
<title>TABLET STYLE CODE TEXTE| par NGLESSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="TABLET STYLE CODE TEXTE">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50" onselectstart="return false" ondragstart="return false" oncontextmenu="return false;">
<div class="container-fluid" id="section1" >
<div class="row">
<div class="col-xs-12"><br></div>
<div class="col-xs-12"><br></div>
<div class="col-xs-1"></div>
<div class="col-xs-10 row tablet">
<div class="col-xs-12"><br></div>
<div class="col-xs-3 text-right front">domain name</div>
<div class="col-xs-9">
<p id="domainename"></p>
<p>This domain name is already reserved</p>
<p>If you want to have this domain name</p>
<p>Contact me on <a href="https://www.mezganisaid.com/" target="_blank"> mezganisaid.com </a><span id="blk"> _</span></p>
</div>
<div class="col-xs-12"><br></div>
<div class="col-xs-12"><br></div>
<div class="col-xs-12"><br></div>
<div class="col-xs-12"><br></div>
<div class="col-xs-12 text-center">
<img class="train" src="eTz9CuO.png">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
@import 'https://fonts.googleapis.com/css?family=Roboto+Slab';
#section1 {padding-top:50px;height:800px;color: #fff; background-color: #001f3f;}
p{
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: type 2s steps(60, end);
}
p:nth-child(2){
animation: type2 4s steps(60, end);
}
p:nth-child(3){
animation: type3 6s steps(60, end);
}
p:nth-child(4){
animation: type4 8s steps(60, end);
}
p a{
color: lime;
text-decoration: none;
}
#blk{
animation: blink 1s infinite;
}
@keyframes type{
from { width: 0; }
}
@keyframes type2{
0%{width: 0;}
50%{width: 0;}
100%{ width: 100; }
}
@keyframes type3{
0%{width: 0;}
66%{width: 0;}
100%{ width: 100; }
}
@keyframes type4{
0%{width: 0;}
75%{width: 0;}
100%{ width: 100; }
}
@keyframes blink{
to{opacity: .0;}
}
body
{
position :relative;
background-color: #001f3f;
color: #FF3;
font-family: 'Roboto Slab', serif;
overflow-x:hidden;
}
.front{
padding-top:10px;
color:lime;
font-family: "Courier";
font-size:20px;
}
div.img {
margin: 5px;
float: center;
width: 400px;
border-radius:3%;
}
div.desc {
padding: 15px;
text-align: center;
font-family: 'Roboto Slab', serif;
color:silver;
}
.black{
background-color:#111111;
}
.inside{
border: 10px solid #000;
border-radius:3%
}
.pad{
padding-left:50px;
}
.train{
width:500px;
height:250px;
animation:blink 0.8s infinite;
}
.para{
font-size:20px;
font-family: 'Roboto Slab', serif;
color:white;
}
.tablet{
border:50px;
border-style:solid;
border-color:#111111;
background-color:#000;
border-radius:5%
}
var domainename = window.location.hostname;
document.getElementById("domainename").innerHTML = domainename;
