CSS Laptop V2

css-laptop-v2.markdown

CSS Laptop V2

A Pen by Zachary Bennett on CodePen.

License.

index.html

<div class="hero-img-cntr">
  <div class="laptop">
    <div class="screen-case">
      <div class="webcam"></div>
      <div class="screen">
        <div class="vs-code">
          <div class="toolbar"><div></div><div></div><div></div></div>
          <div class="code">
          <span class="cursor-pos"></span>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
    <div class="base">
      <div class="power-light"></div> 
    </div>
  </div>
  <div class="coffee-cup-cntr">
    <div class="handle"></div>
    <div class="cup">
      <img src="https://png.icons8.com/ios/1600/javascript.png"/>
    </div>
    <div class="steam">
      <div></div> 
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="table-base"></div>
</div>

style.css

.hero-img-cntr {
  position: relative;
  height: 240px;
  width: 500px;
  margin: auto; 
  background-color: lightgray;
}

.hero-img-cntr .laptop {
  position: absolute;
  width: 250px;
  height: 160px;
  bottom: 27px;
  right: 80px;
}

.laptop .screen-case {
  position: absolute;
  left: 5.5px;
 width: 225px;
  height: calc(100% - 30px);
  border: 7px solid #fafafa;
  border-top: 12px solid #fafafa;
  border-radius: 10px 10px 0 0;
}

.screen-case .webcam {
  height: 5px;
  width: 5px;
  background-color: #555;
  position: absolute;
  border-radius: 50%;
  top: -8px;
  left: calc(50% - 2px);
}


.screen-case .screen {
 border: 1px solid silver; 
  background: #01B6AD;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen .vs-code {
  height: calc(100% * .8);
  width: calc(100% * .7);
  background-color: #555;
}

.vs-code .toolbar {
  top: 0;
  height: 5px;
  background-color: black;
  display: flex;
  justify-content: flex-start;
  padding: 1px;
}

.vs-code .toolbar div {
  margin: .5px;
}

.vs-code .toolbar div:nth-of-type(1) {
  height: 2px;
  width: 2px;
  background-color: red;
  border-radius: 50%;
} 

.vs-code .toolbar div:nth-of-type(2) {
  height: 2px;
  width: 2px;
  background-color: yellow;
  border-radius: 50%;
} 

.vs-code .toolbar div:nth-of-type(3) {
  height: 2px;
  width: 2px;
  background-color: lightgreen;
  border-radius: 50%;
} 

.vs-code .code {
  margin: 5px;
  margin-top: 12px;
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
  grid-row-gap: 10px;
}

.vs-code .code .cursor-pos {
  height: 6px;
  width: 5px;
  background-color: white;
  grid-column: 2;
  opacity: 1;
  animation: blinking 1s linear infinite;
}

.vs-code .code div {
  height: 5px;
  background-color: silver;
  font-size: 5px;
}

.vs-code .code div:nth-of-type(1) {
  grid-column: 1 / span 5;
  grid-row: 1;
}

.vs-code .code div:nth-of-type(2) {
  grid-column: 2 / span 3;
  grid-row: 2;
}

.vs-code .code div:nth-of-type(3) {
  grid-column: 2 / span 2;
  grid-row: 3;
}

.vs-code .code div:nth-of-type(4) {
  grid-column: 2 / span 5;
  grid-row: 4;
}

.vs-code .code div:nth-of-type(5) {
  grid-column: 2 / span 3;
  grid-row: 5;
}

.laptop .base {
  position: absolute;
  width: 280px;
  height: 10px;
  background-color: #fafafa;
  border: 1px solid silver;
  border-radius: 0 0 15px 15px;
  bottom: 0px;
  left: -15px;
  display: flex;
  justify-content: center;
}

.laptop .base .power-light {
  width: 50px;
  height: 2px; 
  background-color: gray;
}


.hero-img-cntr .table-base {
  position: absolute;
  bottom: 0;
  margin-bottom: 20px;
  width: 80%;
  background-color: tan;
  height: 8px;
  margin-left: 50px;
}

.coffee-cup-cntr {
  width: 100px;
  height: 120px;
  position: absolute;
  left: 45px; 
  bottom: 27px;
}

.coffee-cup-cntr .cup {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 65px;
  height: 80px;
  background-color: #F6E7D2;
  border: 1px solid silver;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 10px 10px;
}

.coffee-cup-cntr .cup img {
  height: 50px;
  width: 50px;
}

.coffee-cup-cntr .handle {
  position: absolute;
  top: 45%;
  left: 6%;
  z-index: 1;
  width: 40px;
  height: 40px;
    border: 8px solid #F6E7D2;
  box-shadow: 0 0 0 1px silver;
  border-radius: 50%;
}

.steam {
  position: absolute;
  right: 3px;
  top: 3px;
  height: 30px;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: steaming 2s linear infinite;
}

.steam div {
  height: 75%;
  width: 2px;
  background-color: gray;
  margin: 4px;
}

@keyframes blinking {
  50% {opacity: 0.5;} 
  100% {opacity: 0.0;} 
}

@keyframes steaming {
  0% {
    opacity: 1;
    top: 30px;
  }
  
  30% {
    opacity: 0.7;
    top: 20px;
  }
  
  80% {
    opacity: 0.0;
    top: 3px;
  }
  
  100% {
    opacity: 0.0;
    top: 3px;
  }
}