JjPRdLw

index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <button onclick="history.back()" class="navbar-brand btn"><span class="glyphicon glyphicon-arrow-left"></span></button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li class="dropdown">
          <a href="#">About us</a>
        </li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Contact us</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <div class="b-margin"></div>
  <div class="center b-margin">
    <img src="https://blog.blockstack.org/wp-content/uploads/2019/07/logo-2.png" width="25%" style=max-width:100px>
  </div>
  <h1 style="text-align:center;margin-bottom: 20px;">Hello</h1>
  <div class="center" style="margin-bottom: 10px;">
    <p class="fsize">Welcome to WebSiteName</span></p>
  </div>
  <div class="center" style="margin-bottom: 6em;">
    <p class="fsize">Login with Blockstack to continue. <span class="glyphicon glyphicon-info-sign"></span></p>
  </div>
  <div class="b-margin" style="text-align:center;">

    <button style="display: inline-block; background-color: rgb(39, 15, 52); border: 1px solid rgb(39, 15, 52); padding: 12px 25px; border-radius: 5px;"><img src="https://img-resize.com/view/85030ed37b1f45faf6e0c9cd4738cad4.webp" alt="Blockstack Logo" style="height: 25px;"><span style="font-size: 16px; font-family: &quot;Source Code Pro&quot;, monospace; padding-left: 10px; vertical-align: top; top: 3px; position: relative; color: rgb(255, 255, 255);">Sign In with Blockstack</span></button>
    </div>
<div class="center b-margin">
    <p class="fsize">Any feedback or suggestions ? <a href="contact-us">Contact us</a></p>
  </div>
</div>

jjprdlw.markdown

JjPRdLw

A Pen by Vikas Gupta on CodePen.

License.

style.css

.btn {
  background-color: Transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
}

.center {
  display: flex;
  justify-content: center;
}

.b-margin {
  margin-bottom: 3em;
}
.fsize{
  font-size: 4vw;
}

@media screen and (min-width: 600px) {
  .fsize {
      font-size: 20px;
    }
}