border intersection

border-intersection.markdown

border intersection

A Pen by misraX on CodePen.

License.

index.html

<div class="section">
  <div class="border top"></div>
  <h1>CONTACT US</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <a href="#">CONTACT US</a>
    <div class="border bottom"></div>
</div>

style.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "PT Sans";
  background-color: #ddd;
  color: #333;
}

.section {
  position: relative;
  width: 900px;
  max-width: 80%;
  border: 2px solid #333;
  border-left:none;
  text-align: center;
  margin: 60px auto;
}

.section h1 {
  position: absolute;
  bottom: calc(25% + 50px);
  transform: translateX(100%) translateX(-790px);
  display: inline-block;
  letter-spacing: 4px;
}

.border{
  position: absolute;
  width: 2px;
  background-color:  #333;
}
.top{
  left: 0;
  height: calc(20% + 50px);
}

.bottom{
  bottom: 0;
  left:0;
  height: calc(25% + 50px);
}
.section p {
  width: 61%;
  margin: 20px auto 40px auto;
  line-height: 30px;
}
.section a {
  outline: 0;
  display: inline-block;
  padding: 20px;
  margin-bottom: 40px;
  width: 440px;
  max-width: 80%;
  background-color: #333;
  color: #fff;
  font-size: 22px;
  letter-spacing: 3px;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}

.section a:hover {
  background-color: #1D222D;
}

.section a:link, .section a:visited, .section a:link:hover, .section a:visited:hover {
  text-decoration: none;
  color: #fff;
}