Sleeping mask 3 css

Developer
Qpoziomek
Size
2,969 Kb
Views
6,072
  1. Sleeping mask 3 css Previews
  2. Sleeping mask 3 css HTML Codes
  3. Sleeping mask 3 css CSS Codes

How do I make an sleeping mask 3 css?

What is a sleeping mask 3 css? How do you make a sleeping mask 3 css? This script and codes were developed by Qpoziomek on 06 January 2023, Friday.

Sleeping mask 3 css Previews
IQ Test

Sleeping mask 3 css - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>sleeping mask 3 css</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="outer">
<div class="middle">
<div class="main clearfix"> <div class="box clear"><span class="circle right red"></span></div> <div class="box clear"></div> <div class="box clear"><span class="circle left red"></span></div> <div class="box clear"><span class="circle down red"></span><span class="circle left rotate hoar"></span></div> <div class="box clear"><span class="circle left gray"></span><span class="circle right hoar" style="z-index:1"></span></div> <div class="box clear"><span class="circle down gray"></span><span class="circle right rotate black"></span></div> <div class="box clear zoom"><div class="smal"><span class="half left hoar"></span><span class="half right hoar"></span></div><div class="smal"><span class="half left red"></span><span class="half right red"></span></div><div class="rotate-left"><span class="circle down-top hoar"></span><span class="eye bottom"></span><span class="circle top-down black"></span></div></div> <div class="box clear zoom" style="z-index:1"><div class="smal"><span class="half left hoar"></span><span class="half right red"></span></div><div class="smal"><span class="half left red"></span><span class="half right hoar"></span></div><div class=""><span class="circle down-top black"></span><span class="eye bottom"></span><span class="circle top-down gray"></span></div></div> <div class="box clear zoom"><div class="smal"><span class="half left red"></span><span class="half right red"></span></div><div class="smal"><span class="half left hoar"></span><span class="half right hoar"></span></div><div class="rotate-right"><span class="circle down-top red"></span><span class="eye bottom"></span><span class="circle top-down gray"></span></div></div> <div class="box clear"><span class="circle top hoar"></span><span class="circle bottom right rotate black"><span class="circle left red"></span></span></div> <div class="box clear"><span class="circle left gray"></span><span class="circle right hoar" style="z-index:1"></span></div> <div class="box clear"><span class="circle top black"></span><span class="circle bottom left rotate gray-light"><span class="circle right red"></span></span></div> <div class="box clear"><span class="circle right red"></span></div> <div class="box clear"><span class="circle top black"></span></div> <div class="box clear"><span class="circle left hoar"></span></div>
</div>
</div>
</div>
<p class="tekst">Design by <a href="https://dribbble.com/shots/2527255-SLEEPING-MASK-3-of-12" target="_blank">TRÜF</a></p>
</body>
</html>

Sleeping mask 3 css - Script Codes CSS Codes

body,html{height:100%;width:100%;overflow-x:hidden}
body{font:normal normal 14px/19px Arial,sans-serif;letter-spacing:1px;margin:0;background-color:#DED6C9}
.clearfix{display:inline-block}
.clearfix:after{visibility:hidden;display:inline-block;font-size:0;content:"";clear:both;height:0}
.tekst{color:#57585C;font-family:'Lato',arial,sans-serif;text-transform:uppercase;font-size:14px;line-height:28px;font-weight:bold;display:block;letter-spacing:2px;max-width:100%;text-align:center;position:absolute;bottom:20px;left:30px;z-index:1}
a{color:#FC1C14;text-decoration:none;cursor:pointer}
a:hover{text-decoration:underline}
p{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}
.outer{display:table;margin:0 auto;height:100%}
.middle{display:table-cell;vertical-align:middle}
.main{padding-top:35px;padding-bottom:35px}
.box{position:relative;float:left;width:100px;height:100px;-webkit-transition:width 0.2s;transition:width 0.2s}
.smal{position:relative;height:50%}
.box:nth-child(3n+1){clear:left}
.white{background-color:#FFFFFF}
.black{background-color:#000000}
.gray{background-color:#57585C}
.gray-light{background-color:#7B7A78}
.hoar{background-color:#9F9A94}
.clear{background-color:#DED6C9}
.red{background-color:#FC1C14}
.circle{display:inline-block;position:absolute;width:100%;height:100%;border-radius:100px}
.circle.top{top:0;left:0;width:100%;height:50%;border-radius:0 0 100px 100px}
.circle.top-down{top:0;left:0;width:100%;height:50%;border-radius:100px 100px 0 0}
.circle.right{bottom:0;right:0;width:50%;height:100%;border-radius:100px 0 0 100px}
.circle.down{bottom:0;left:0;width:100%;height:50%;border-radius:100px 100px 0 0}
.circle.down-top{bottom:0;left:0;width:100%;height:50%;border-radius:0 0 100px 100px}
.circle.left{bottom:0;left:0;width:50%;height:100%;border-radius:0 100px 100px 0}
.rotate-right{position:absolute;top:0;right:-50%;width:100%;height:100%;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}
.rotate-left{position:absolute;top:0;left:-50%;width:100%;height:100%;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
.right.rotate{bottom:3%;right:58%;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
.left.rotate{bottom:3%;left:58%;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}
.circle .circle{display:inline-block;position:absolute;top:-100%;right:auto;width:100%;height:100%}
.right.rotate .circle.left{left:100%}
.right.rotate .circle.left .circle.right{left:-100%}
.left.rotate .circle.right{right:100%}
.left.rotate .circle.right .circle.left{left:100%}
.bottom.right.rotate{top:37%;right:100%}
.bottom.left.rotate{top:37%;left:100%}
.half{display:inline-block;position:absolute;width:100%;height:100%;border-radius:0}
.half.right{bottom:0;right:0;width:50%;height:100%}
.half.left{bottom:0;left:0;width:50%;height:100%}
.eye{display:inline-block;position:absolute;width:80%;height:80%;border-radius:100px}
.eye.top{top:0;left:0;width:80%;height:40%;margin-left:10%;border-radius:0 0 100px 100px;background-color:#FFFFFF}
.eye.bottom{bottom:10%;left:0;width:80%;height:40%;margin-left:10%;border-radius:0 0 100px 100px;background-color:#FFFFFF}
.eye:before{content:'';display:inline-block;position:absolute;width:40%;height:40%;left:50%;top:0;margin-left:-20%;border-radius:0 0 100px 100px;background-color:#000000}
.eye:after{content:'';display:inline-block;position:absolute;left:50%;top:0;width:0;height:0;margin-top:-3px;margin-left:3px;border:16px solid transparent;border-bottom:8px solid #FFFFFF;-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}
.rotate-left .eye:after{content:'';display:inline-block;position:absolute;left:50%;top:0;width:0;height:0;margin-top:-3px;margin-left:-36px;border:16px solid transparent;border-bottom:8px solid #FFFFFF;-webkit-transform:rotate(-60deg);-ms-transform:rotate(-60deg);transform:rotate(-60deg)}
.eye{-webkit-box-shadow:inset 0px 0px 0px 0px #000;box-shadow:inset 0px 0px 0px 0px #000;-webkit-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s}
.eye:hover{-webkit-box-shadow:inset 0px 0px 15px 0px #000;box-shadow:inset 0px 0px 15px 0px #000}
.zoom{width:124px;height:124px;margin-left:-12px;margin-right:-12px}
@media (max-width:600px){.box{width:50px!important;height:50px!important}.zoom{width:62px!important;height:62px!important;margin-left:-6px;margin-right:-6px}.eye:after{margin-top:-2px;margin-left:2px;border:8px solid transparent;border-bottom:4px solid #FFFFFF}.rotate-left .eye:after{margin-top:-3px;margin-left:-16px;border:8px solid transparent;border-bottom:4px solid #FFFFFF}.eye:hover{-webkit-box-shadow:inset 0px 0px 8px 0px #000;box-shadow:inset 0px 0px 8px 0px #000}}
@media (max-width:320px){.box{width:30px!important;height:30px!important}.zoom{width:36px!important;height:36px!important;margin-left:-3px;margin-right:-3px}.eye:after{margin-top:-1px;margin-left:1px;border:4px solid transparent;border-bottom:2px solid #FFFFFF}.rotate-left .eye:after{margin-top:-1px;margin-left:-8px;border:4px solid transparent;border-bottom:2px solid #FFFFFF}.eye:hover{-webkit-box-shadow:inset 0px 0px 0px 0px #000;box-shadow:inset 0px 0px 0px 0px #000}}
Sleeping mask 3 css - Script Codes
Sleeping mask 3 css - Script Codes
Home Page Home
Developer Qpoziomek
Username poziomq
Uploaded January 06, 2023
Rating 3
Size 2,969 Kb
Views 6,072
Do you need developer help for Sleeping mask 3 css?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Qpoziomek (poziomq) Script Codes
Name
Lost in the tech css version
Tancerka css
Daily Postage 069 - Minions
Spinner loader
Gratitude Logo
Darth Vader css
Squares loader
PoziomQ
Dancer css
Sleeping mask 5 css
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!