- Code: Tout sélectionner
<div class="laptop">
<div class="upper"></div>
<div class="lower"></div>
</div>
CSS :
- Code: Tout sélectionner
html
font-size: .75vw
body
margin: 0
background: #89d0d7
display: flex
height: 100vh
width: 100%
justify-content: center
align-items: center
.laptop
width: 50rem
position: relative
&:before
background: #222
display: block
content: ''
position: absolute
width: .8rem
height: .8rem
border-radius: 50%
top: .7rem
left: 24.5rem
z-index: 1000
&:after
display: block
content: ''
position: absolute
width: 95%
margin-left: 2.5%
height: .75rem
box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, 0.1)
border-radius: 5rem
.upper
width: 40rem
height: 23rem
background: #3d4144
border: 2px solid #eaeaea
border-bottom: none
border-radius: 1.5rem 1.5rem 0 0
margin-left: 5rem
box-shadow: inset 0 0 2px 2px #222
position: relative
&:before
width: 36rem
height: 19rem
background: #a1a1a1
display: block
content: ''
top: 2rem
left: 2rem
position: absolute
&:after
display: block
content: ''
position: absolute
border-bottom: 23rem solid rgba(0,0,0,0.075)
border-right: 10rem solid transparent
height: 0
width: 50%
border-top-left-radius: 1.5rem
.lower
width: 50rem
height: 2rem
background: #eaeaea
border-radius: 2px
position: relative
&:before
display: block
content: ''
position: absolute
width: 10rem
height: .8rem
background: #a1a1a1
left: 20rem
top: 0
border-radius: 0 0 .25rem .25rem
&:after
display: block
content: ''
position: absolute
width: 100%
height: .75rem
background: #bababa
top: 2rem
border-bottom-right-radius: 7.5rem 2.5rem
border-bottom-left-radius: 7.5rem 2.5rem
Résultat : Vous devez être inscrit et présenté pour voir les liens ainsi que d'autres éléments qui peuvent être caché aux invités.