demo6-2

In this example below you will see how to do a demo6-2 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by polilu1985, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright polilu1985 ©
  • HTML
  • CSS
  • JavaScript
    .phone
  .top
  .bottom
    .headpic
    .name Joanna Chang

/*Downloaded from https://www.codeseek.co/polilu1985/demo6-2-VbjmNp */
    *
  //order: solid 2px
  font-family: Arial
  position: relative
  
@mixin size($w,$h)
  width: $w
  height: $h
  
body,html
  +size(100%,100%)
  padding: 0px
  margin: 0px

.phone
  width: 240px
  margin-left: auto
  margin-right: auto
  margin-top: 150px
  border: solid 1px #999
  border-radius: 5px
  background-color: #fff
  
  
.top
  +size(100%,150px)
  background-color: #999
  background-image: url("")
  background-size: cover
  background-position: center center
  
  
.bottom
  +size(100%,200px)
  border: white
  
.headpic
  +size(80px,80px)
  position: absolute
  top: -50px
  left: 10px
  background-color: #555
  background-image: url("")
  background-size: cover
  border: solid 2px white
    
  
.name
  right: -100px
  top: -30px
  color: white


/*Downloaded from https://www.codeseek.co/polilu1985/demo6-2-VbjmNp */
    

Comments