Forum GHS Tools

Html :

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.

super, cool ça montre bien les possibiltés du langage css

ah formidable ! c'est puissant

Oui mais, qu'est ce que le processeur Sass ?
Vous devez être inscrit et présenté pour voir les liens ainsi que d'autres éléments qui peuvent être caché aux invités.

Sans le processeur Sass, le code partagé précédemment ne fonctionne pas.
Merci codepen.io