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;