Hi there!
I am creating a toggle in pure css without jquery or javascript and its look like it hasn’t work yet. The problem is Css div alignment. Its not perfectly aligned.
Here is what I am trying to achieve: https://ibb.co/dsYS0J && https://ibb.co/gcOo7y
CSS:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > #__spookyPopup {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #fff);
background: -o-linear-gradient(#fff, #999);
}
.profile_container
{
height:160px;
width:400px;
background:#ccc;
display:inline-block;
}
.profile_div
{
height:120px;
width:130px;
margin-top:20px;
margin-left:130px;
background:#ddd;
border:1px solid grey;
}
.head_div
{
min-height:12px;
width:100%;
}
.media_layer
{
margin-top:20px;
mi-height:12px;
width:400px;
background:#;
display:inline-block;
}
.manual
{
height:50px;
width:197px;
float:right;
background:#;
display:inline-block;
}
.manual:hover
{
border-bottom:2px solid #ab0a72;
}
.social
{
height:50px;
width:197px;
background:#;
display:inline-block;
}
.social:hover
{
border-bottom:2px solid #ab0a72;
}
.social_link_container
{
height:160px;
width:400px;
background:#ccc;
display:inline-block;
}
.fb_container
{
height:50px;
width:340px;
margin-top:20px;
margin-left:30px;
background:#ddd;
border:1px solid grey;
}
.collapse > a{
background: #cdf;
cursor: pointer;
display: inline-block;
}
.collapse:focus{
outline: none;
}
.collapse > div{
display: none;
}
.collapse:focus div{ float:right;
display: inline-block;
}
HTML:
<a href="#__spooky_auth_popup">Open Modal</a>
<div id="__spooky_auth_popup" class="modalDialog">
<div id="__spookyPopup">
<a href="#close" title="Close" class="close">X</a>
<div class="profile_container">
<div class="profile_div"></div>
</div>
<div class="head_div">
<p style="margin:0;padding:0;text-align:center;
font-size:25px;color:#8d8686;"><I>Hey, please login to access your private content.</I></p>
</div>
<div class="media_layer">
<div class="social collapse" tabindex="1">
<p style="margin:0;padding:0;text-align:center;
font-size:25px;color:#000;line-height:50px;">SOCIAL</p>
</div>
<div class="manual">
<p style="margin:0;padding:0;text-align:center;
font-size:25px;color:#000;line-height:50px;">MANUAL</p>
</div>
</div>
<div class="collapse" style="float:right;" tabindex="1">
<a>Collapse 1</a>
<div class="social_link_container" style="float:left;">Content internal 1....</div>
</div>
<div class="collapse" style="float:left;" tabindex="1">
<a>Collapse 2</a>
<div class="social_link_container" >Content internal 2....</div>
</div>
</div>
</div>
HERE IS DEMO:
https://jsfiddle.net/navjot789/2fcLvmrj/
and its seems like its not working as I want. If anyone who have a deep knowledge is css helps thats would be a great.
any input is apprecheated.