<!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.