Show DevBest Popup RESTRICTED AREA

[GageDodd]

Well the title pretty much explains what this is lets go ahead and get into the post!

Spoiler: Screenshot

You must be registered for see links

There is also a little motion involed!

Spoiler: Codes

HTML

<div class="cont_principal">
  <div class="cont_bgc_modal"></div>
  <div class="cont_modal">
    <div class="cont_circulo_prohibido">
      <div class="cont_raya_divisor"></div>
      <div class="cont_form_modal">
        <div class="cont_logo_restrigido">
          <div class="cont_circulo_logo">
            <div class="con_raya_logo"></div>
          </div>
        </div>
        <div class="po_relative">
          <h1>RESTRICTED AREA</h1>
          <p>You need an authorisation do see this content.</p>
          <p>If you dont have one, go back to the homepage</p>
        </div>
        <div class="cont_input_password">
          <p>Type your password to continue</p>
          <input type="password" class="input_password_" value="" placeholder="********" style="" />
        </div>
        <div class="cont_btn">
          <button class="btn_proceed">PROCEED <span>&#10141;</span>
</button>
        </div>
      </div>
    </div>

  </div>

</div>

CSS

* {
  margin: 0px auto;
  padding: 0px;
text-aling:center;
}
    .cont_principal {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #DEDEDE;
  }
 
  .cont_bgc_modal {
    width: 100%;
height: 100%;
position: fixed;
background-color: #F24541;
z-index: 0;
top:0px;
opacity: 0;
background-color: #F24541;
transition: all 0.2s;
display: none;
}

.cont_bgc_modal_activo{
opacity: 1; 
}

.cont_modal {
position: fixed;
  z-index: 10;
top:50%;
width: 600px;
height: 600px;
  left:50%;
  margin-top: -300px;
  margin-left: -300px;
display: none;
}

.cont_modal_activo {
display: block; 
}

.cont_modal > .cont_circulo_prohibido {
  width: 500px;
  height: 500px;
  background-color: #DEDEDE;
  border-radius:50%;
  border:50px solid #F24541;
transform: scale(0);
}

.cont_modal_activo > .cont_circulo_prohibido {
  transform: scale(1);
    transition: all 0.5s;
transition-delay: 0.5s;
}

.cont_raya_divisor {
  position: relative;
  width: 100px;
  height: 100%;
  background-color: #F24541;
  transform: rotate(45deg);
  z-index: 10;
}


.cont_modal >.cont_circulo_prohibido > .cont_form_modal {
  width: 350px;
  height: 400px;
background-color: #212121;
position: absolute;
z-index: 1003;
top: 50%;
  left:50%;
  margin-top: -200px;
  margin-left: -175px;
box-shadow: 1px 15px  30px -10px rgba(0,0,0,0.5);
border-radius:5px;

transform: scale(0);
}
.cont_modal_activo > .cont_circulo_prohibido >.cont_form_modal {
  transform: scale(1);
transition: all 0.5s;
  transition-delay: 1s;
}
.cont_logo_restrigido {
  position: relative;
  float: left;
width: 100%;
margin-top:30px;
}

.cont_circulo_logo {
  width: 50px;
  height: 50px;
border-radius:50%;
border:10px solid #F24541;
}

.con_raya_logo {
  width: 10px;
  height: 53px;
background-color: #F24541; 
transform: rotate(45deg);
}

.po_relative {
  position: relative;
float: left;
  width: 100%;
margin-top:30px; 
text-align:center;
color: #fff;
font-family: Arial;
}
.po_relative > h1 {
  font-size: 22px;
}

.po_relative > p {
  font-size: 14px;
}


.cont_input_password {
position: relative;
float: left;
  width: 350px;
height: 100px;
background: rgba(254,96,93,1);
background: -moz-linear-gradient(top, rgba(254,96,93,1) 0%, rgba(242,67,65,1) 74%, rgba(242,67,65,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(254,96,93,1)), color-stop(74%, rgba(242,67,65,1)), color-stop(100%, rgba(242,67,65,1)));
background: -webkit-linear-gradient(top, rgba(254,96,93,1) 0%, rgba(242,67,65,1) 74%, rgba(242,67,65,1) 100%);
background: -o-linear-gradient(top, rgba(254,96,93,1) 0%, rgba(242,67,65,1) 74%, rgba(242,67,65,1) 100%);
background: -ms-linear-gradient(top, rgba(254,96,93,1) 0%, rgba(242,67,65,1) 74%, rgba(242,67,65,1) 100%);
background: linear-gradient(to bottom, rgba(254,96,93,1) 0%, rgba(242,67,65,1) 74%, rgba(242,67,65,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe605d', endColorstr='#f24341', GradientType=0 );
margin-top: 20px;
left: 0px;
color: #fff;
text-align: center;
font-family: Arial;
box-shadow: 1px 1px  20px  -5px rgba(0,0,0,0.5);
  border-radius:3px;
transition: all 0.5s;
transition-delay: 1.3s;
}

.cont_modal_activo > .cont_circulo_prohibido > .cont_form_modal > .cont_input_password {
  width: 400px;
  left: -25px;
}

.cont_input_password >p {
  margin-top: 15px;
}

.input_password_ {
  padding: 7px 0px;
width: 100%;
  background-color: transparent;
border:none;
  outline: none;
color: #fff;
text-align: center;
font-family: Arial;
font-size: 45px;
}

.input_password_::-webkit-input-placeholder {
    color:    #fff;
}
.input_password_:-moz-placeholder {
    color:    #fff;
}
.input_password_::-moz-placeholder {
    color:    #fff;
}
.input_password_:-ms-input-placeholder {
    color:    #fff;
}



.cont_btn {
position: relative;
float: left;
  width: 100%;
  margin-top: 20px;
}

.btn_proceed {
  background-color: transparent;
border-radius:20px;
  padding: 10px;
border:2px solid #F24541; 
margin: 0px auto;
  display: block;
  text-align: center;
  font-size: 16px;
color: #fff;
padding-left: 20px;
padding-right: 20px;
  transition: all 0.5s;
cursor: pointer;
}

.btn_proceed:hover {
background-color: #fff;
  color: #F24541;
}

JS

window.onload = function() {
  limit_acces();
}

function limit_acces() {

  document.querySelector('.cont_bgc_modal').style.display = "block";
  document.querySelector('.cont_modal').style.display = "block";
  setTimeout(function() {
    document.querySelector('.cont_bgc_modal').className = "cont_bgc_modal  cont_bgc_modal_activo";
    document.querySelector('.cont_modal').className = "cont_modal cont_modal_activo";

  }, 100);

}

Thanks for checking this out i hope you enjoy it!

 

[TesoMayn]

I don't like that you have to open a spoiler and then go to another website just to look at an image, you should include an image in the thread with IMG tags, also a codepen or something for a live example would also be nice. The HTML, CSS and JavaScript could be cleaner, other than that, it's not bad.

 

[GageDodd]

I don't like that you have to open a spoiler and then go to another website just to look at an image, you should include an image in the thread with IMG tags, also a codepen or something for a live example would also be nice. The HTML, CSS and JavaScript could be cleaner, other than that, it's not bad.

Okay thanks i will make it into Codepen right now!
 
Heres a live preview for everyone!

You must be registered for see links