EajQNL

EajQNL.markdown

EajQNL

A Pen by Max on CodePen.

License.

index.html

<div class="layuout-center-wrapper">
  <div class="macbook">
    <div class="foto-border">
      <div class="foto">
      </div>
    </div>
    <div class="keybord">
    </div>
    <div class="keybord-down">
    </div>
  </div>
</div>

style.css

body {
    margin: 0;
    background: #5aa348;
    padding-top: 50px;
    padding-left: 20px;
}
.layuout-center-wrapper {
  max-width: 960px;
  margin: 0 auto;
}
.macbook { 
  width: 59.895833%; /*575px/960px*/
  position: relative;
}
  .foto-border {
    width: 73.391304%; /*422px/575px*/
    height: 0;
    padding-bottom: 48.695652%; /*280px/575px*/
    background-image: linear-gradient(45deg, 
                                      #030404 50%, 
                                      #626466);
    border-top-left-radius: 4% 5%; /*12px/422px и 12px/280px*/
    border-top-right-radius: 4% 5%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 0 1px #6b6b6d,  /*верхняя тень*/
                0 0 0 2px #9b9c9e,
                0 0 0 3px #818182;
  }
  .keybord {
    width: 100%; /*575px*/
    padding-bottom: 3.3043478%; /*19px/575px*/
    background-image: linear-gradient(to right, 
                                      #afafb3, 
                                      #fff 2%, 
                                      #fff 3%, 
                                      #d2d3d6 4%, 
                                      #d2d3d6 96%, 
                                      #fff 97%, 
                                      #fff 98%, 
                                      #afafb3);
    position: relative;
    z-index: 10;
    border-top-left-radius: 10% 10%;
    border-top-right-radius: 10% 10%;
  }
  .keybord:after {
    position: absolute;
    content: "";
    width: 13.913043%; /*80px/575px*/
    height: 47.368421%; /*80px/19px*/
    background-image: linear-gradient(to bottom, 
                                      #dfdfdf, 
                                      #424242);
    border-bottom-left-radius: 10% 100%;
    border-bottom-right-radius: 10% 100%;
    left: 50%;
    transform: translateX(-50%);
  }
    .keybord-down {
      width: 100%; /*575px*/
      padding-bottom: 1.913043%; /*9px/575px*/
      background-image: linear-gradient(to bottom, 
                                        #9fa0a3, 
                                        #4b4c4c 80%, 
                                        #1c1c1c);
      border-bottom-left-radius: 10% 100%;
      border-bottom-right-radius: 10% 100%;
    }
  .foto {
    width: 94.312796%; /*398px/422px*/
    background: white;
    height: 89.285714%; /*250px/280px*/
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }