<!DOCTYPE html>
<html>
<head>
  <title>page</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" type="text/css" href="1.page.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>

  <div class="box">
    <svg><rect></rect></svg>
    <div class="content">
      <h1>HTML Styles - CSS</h1>
      <p>Learn to Code HTML & CSS is an interactive beginner’s guide with one express goal: teach you how to develop and style websites with HTML and CSS. Outlining the fundamentals, this book covers all of the common elements of front-end design and development.Learn to Code HTML & CSS is an interactive beginner’s guide with one express goal: teach you how to develop and style websites with HTML and CSS. </p>
    </div>
  </div>

</body>
</html>
body{
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  background: #073146;
}
.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 400px;
  height: 400px;
  background:#001e2d;
  box-sizing: border-box;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  border:2px solid rgba(0,0,0,.5);
}
.box .content{
  position: absolute;
  top: 15px;
  left: 15px;
  bottom: 15px;
  right: 15px;
  border:2px solid #ffeb3b;
  padding: 30px;
  box-shadow: 0 5px 10px rgba(0,0,0,.5);
  text-align: center;
}
.box .content h1{
  color: #fff;
  font-size: 30px;
  margin: 0 0 10px;
  padding: 0;
}
.box .content p{
  color: #fff;
}
.box svg,
.box svg rect{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: transparent;
}
.box svg rect{
  stroke: #009fff;
  stroke-width:4;
  stroke-dasharray: 397;
  animation: ani 3s linear infinite;
}
@keyframes ani{
  0%{
    stroke-dashoffset: 800;
  }
  100%{
    stroke-dashoffset: 0;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.