<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Day 10: Coder</title>
</head>
<body>
<div class="container">
<div class="window">
<div class="cloud" id="first-cloud"></div>
<div class="cloud" id="second-cloud"></div>
</div>
<div class="small-monitor">
<div class="bar">
<div class="button" id="red"></div>
<div class="button" id="yellow"></div>
<div class="button" id="green"></div>
</div>
<div class="screen">
<ul class="code">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="inline-code" id="line-1"></li>
<li class="inline-code" id="line-2"></li>
<li class="inline-code" id="line-3"></li>
<li class="inline-code" id="line-4"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="main-monitor">
<div class="bar">
<div class="button" id="red"></div>
<div class="button" id="yellow"></div>
<div class="button" id="green"></div>
</div>
<div class="screen">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="avatar">
<div class="avatar-neck"></div>
<div class="avatar-collar"></div>
<div class="avatar-body"></div>
<div class="avatar-head"></div>
<div class="avatar-hairband"></div>
<div class="avatar-hair"></div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>$background: #fad0d9
$windowFrame: #393d73
$windowMetal: #a6a9d3
$white: #fffaf0
// sky colors
$sky: #aadbea
$sunset: #ff5f6d
$night: #201b46
// $sky: linear-gradient(to bottom, #4ca1af, #c4e0e5)
// $sunset: linear-gradient(to bottom, #ff5f6d, #ffc371)
// $night: linear-gradient(to bottom, #020107 0%, #201b46 40%)
$sunsetCloud: darken(white, 15%)
$nightCloud: darken(white, 30%)
// tech variables
$ideBackground: #301353
$buttonRed: #FF4766
$buttonYellow: #FFB023
$buttonGreen: darken(#6ADEAE, 20%)
$buttonOffset: 20px
$codeGreenLength: 80px
$codeYellowLength: 45px
$codeRedLength: 60px
// avatar variables
$hair: #020916
$shirt: #b51231
$skin: #c74b16
=bar()
.bar
position: absolute
width: 100%
height: 30px
background: black
z-index: 5
.button
position: absolute
margin-left: 10px
margin-top: 10px
margin-right: 15px
width: 10px
height: 10px
border-radius: 100%
#red
background: $buttonRed
#yellow
left: $buttonOffset
background: $buttonYellow
#green
left: $buttonOffset * 2
background: $buttonGreen
body
height: 100%
width: 100%
background: $white
ul
list-style: none
.container
transition: all 5s ease
width: 450px
height: 450px
background: $background //purple
position: absolute
transform: translate(-50%, -50%)
left: 50%
top: 50%
border-radius: 100%
overflow: hidden
animation: wallChange 40s ease-in-out infinite
.window
transition: all 5s ease
width: 200px
height: 200px
background: $sky
position: absolute
left: 50%
border: 10px solid $windowFrame
border-radius: 10px
animation: skyChange 40s ease-in-out infinite
overflow: hidden
.cloud
position: absolute
background: white
width: 35px
height: 30px
top: 20px
left: 20px
border-radius: 100px
&:before
content: ""
position: absolute
@extend .cloud
width: 30px
left: -5px
top: 10px
animation: cloudChange 40s ease-in-out infinite
&:after
content: ""
position: absolute
@extend .cloud
width: 40px
left: 15px
top: 12px
animation: cloudChange 40s ease-in-out infinite
#first-cloud
animation: cloudMove 25s linear infinite, cloudChange 40s ease-in-out infinite
#second-cloud
top: 80px
left: -60px
animation: cloudMove 40s 10s linear infinite, cloudChange 40s ease-in-out infinite
.small-monitor
position: absolute
width: 160px
height: 210px
top: 20%
border-radius: 10px
background: $ideBackground
overflow: hidden
border: 8px solid lighten($windowMetal, 10%)
border-bottom: 50px solid lighten($windowMetal, 10%)
box-shadow: -5px 5px $windowMetal
left: 10px
+bar()
.screen
position: absolute
width: 190px
height: 240px
backgorund: $ideBackground
margin-top: 30px
li
position: relative
width: 20px
height: 5px
margin-top: 4px
left: -20px
border-radius: 5px
background: white
@for $i from 1 to 5
&:nth-child(#{$i})
background: $buttonGreen
width: 100px
@for $i from 5 to 8
&:nth-child(#{$i})
$width: 100px - $i * 10
background: $buttonRed
width: $width
left: 8px
@for $i from 8 to 19
&:nth-child(#{$i})
$width: 100px - $i * 10
background: $buttonYellow
width: $width
.inline-code
position: relative
display: inline-block
width: 40px
height: 5px
background: pink
.main-monitor
position: absolute
width: 250px
height: 200px
top: 30%
left: 25%
border-radius: 10px
background: $ideBackground
overflow: hidden
border: 8px solid lighten($windowMetal, 10%)
border-bottom: 50px solid lighten($windowMetal, 10%)
box-shadow: -5px 5px $windowMetal
+bar()
.screen
position: absolute
width: 190px
height: 240px
max-height: 200px
overflow: hidden
li
position: relative
height: 5px
margin: 5px 0
left: -20px
border-radius: 5px
@for $i from 1 to 31
&:nth-child(#{$i})
@if $i % 3 == 0
background: $buttonRed
width: $codeRedLength
@else if $i % 2 == 0
background: $buttonGreen
width: $codeGreenLength
@else
background: $buttonYellow
width: $codeYellowLength
ul
position: absolute
top: 0
animation: codeMove 5s linear infinite
.avatar
position: absolute
width: 150px
height: 300px
top: 40%
left: 50%
.avatar-body
position: absolute
width: 130px
height: 100px
background: $shirt
top: 70%
border-radius: 30px
.avatar-collar
position: absolute
width: 80px
height: 35px
background: darken(white, 10%)
top: 65%
left: calc(45% - 40px)
.avatar-neck
position: absolute
width: 50px
height: 60px
background: $skin
top: 50%
left: calc(45% - 25px)
.avatar-head
position: absolute
width: 150px
height: 150px
background: $hair
border-radius: 100%
top: 10%
left: calc(42% - 75px)
border-bottom: 6px solid $skin
border-left: 5px solid lighten($hair, 10%)
border-right: 5px solid lighten($hair, 10%)
box-shadow: inset 10px 10px lighten($hair, 10%)
.avatar-hairband
position: absolute
width: 80px
height: 80px
background: $shirt
border-radius: 100%
left: calc(63% - 40px)
top: 25%
.avatar-hair
width: 85px
height: 120px
position: absolute
background: $hair
left: 40%
top: 25%
border-radius: 200px
box-shadow: inset 10px 10px lighten($hair, 10%)
&:after
content: ""
position: absolute
width: 120px
height: 70px
background: $hair
border-radius: 0 0 300px 300px
top: 60%
box-shadow: inset 10px -10px lighten($hair, 10%)
// https://stackoverflow.com/questions/34314474/css-infinite-scrolling-div
@keyframes codeMove
100%
top: -60%
@keyframes skyChange
0%
background: $sky
20%
background: $sunset
40%
background: $night
60%
background: $sky
@keyframes wallChange
0%
background: $background
20%
background: darken($background, 10%)
40%
background: $ideBackground
60%
background: $background
@keyframes cloudChange
0%
background: white
20%
background: $sunsetCloud
40%
background: $nightCloud
60%
background: white
@keyframes cloudMove
0%
left: -30%
100%
left: 100%
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.