Untitled Application
MyApp
Author name
1.0
Desktop
False
800
600
False
False
False
False
WebApp
False
C:\Users\asmat\Documents\VisualNeoWeb\Libraries\img\default-icon.png
*{
font-family:'Poppins',sans-serif;
}
.box{
margin: 0 40px ;
max-width: 600px;
display: flex;
flex-direction: column;
gap:15px;
}
.box .tab input{
appearance: none;
position:absolute;
top:-20px;
}
.box .tab label{
display: flex;
align-items: center;
cursor: pointer;
margin:0;
}
.box .tab label::after{
content: '+';
position: absolute;
right: 20px;
font-size: 1.5em;
color: rgba(0,0,0,0.1);
transition: 0.6s;
font-weight:0px;
z-index:10;
}
.box .tab input:checked ~ label::after {
transform: rotate(135deg);
color:white;
}
.box .tab label h2{
width: 40px;
height: 40px;
background:#333;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 1.25em;
border-radius: 5px;
margin: 15px;
}
.box .tab:nth-child(1) label h2 {
background: linear-gradient(135deg,#70f570,#49c628);
}
.box .tab:nth-child(2) label h2 {
background: linear-gradient(135deg, #3c8ce7, #00eaff);
}
.box .tab:nth-child(3) label h2 {
background: linear-gradient(135deg, #ff96f9, #c32bac);
}
.box .tab:nth-child(4) label h2 {
background: linear-gradient(135deg, #fd6e6a, #ffc600);
}
.box .tab label h3{
position: relative;
font-weight: 500;
font-size:1.25em;
color:#333;
z-index: 10;
margin:12px;
}
.box .tab .content{
max-height: 0;
position:relative;
overflow: hidden;
transition: 0.6s;
}
.box .tab .content p{
margin:10px;
}
.box .tab input:checked ~ .content{
max-height: 100vh;
z-index:2;
}
.box .tab input:checked ~ label h2 {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
margin: 0px;
z-index:1;
color:rgba(255,255,255,0.2);
font-size:8em;
justify-content:flex-end;
padding:20px;
}
.box .tab input:checked ~ label h3 {
background-color: white;
padding: 2px 10px;
color: #333;
border-radius: 2px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.box .tab input:checked ~ .content p {
color:white;
}
.flexTop{
display:flex;
justify-content:flex-start;
align-items:center;
flex-direction:column;
}
en
standalone
Offline page
#000000
/
[AndroidOS,iOS,WindowsPhoneOS]
normal
True
True
False
True
True
False
False
True
False
False
neoGoogleFonts "Poppins::sans-serif"
100px
31px
629px
auto
flexTop box
23px
30px
100%
auto
top
tab
style="
height:auto !important;
"
<input type="radio" name="acc" id="acc1">
<label for="acc1">
<h2>01</h2>
<h3>How do I apply?</h3>
</label>
<div class="content">
<p>
In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a
document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy
is available.
</p>
</div>
-699px
125px
100%
auto
top
tab
<input type="radio" name="acc" id="acc2">
<label for="acc2">
<h2>02</h2>
<h3>Lost or forgotten your passowrd?</h3>
</label>
<div class="content">
<p>
In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a
document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy
is available. relying on meaningful content. Lorem ipsum may be relying on meaningful content. Lorem ipsum may be relying
on meaningful content. Lorem ipsum may be
</p>
</div>
8px
68px
100%
auto
top
tab
<input type="radio" name="acc" id="acc3">
<label for="acc3">
<h2>03</h2>
<h3>How can I make change to my application?</h3>
</label>
<div class="content">
<p>
In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a
document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy
is available.and graphic design, Lorem ipsum is a placeholder text commonly useand graphic design, Lorem ipsum is a placeholder
text commonly useand graphic design, Lorem ipsum is a placeholder text commonly use
and graphic design, Lorem ipsum is a placeholder text commonly use
</p>
</div>
8px
128px
100%
auto
top
tab
<input type="radio" name="acc" id="acc4">
<label for="acc4">
<h2>04</h2>
<h3>How do I apply?</h3>
</label>
<div class="content">
<p>
In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a
document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy
is available.
</p>
</div>
0px
0px
640px
480px
False
custom