Barber Shop
How do I make an barber shop?
Pure CSS implementation of Barber Shop by miguelcm. What is a barber shop? How do you make a barber shop? This script and codes were developed by Barbara Laird on 16 January 2023, Monday.
Barber Shop - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Barber Shop</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #fefaed; widht: 100%; height: 100%; padding: 16px;
}
.roof1,
.roof2 { width: 250px; height: 4px; background-color: #94bed3; border: 4px solid #344960; margin-left: 13px;
}
.roof3 { width: 234px; height: 24px; margin-left: 21px; background-color: #94bed3; background-image: repeating-linear-gradient(-45deg, #f47067 0%, #f47067 10%, #fcf9f1 10%, #fcf9f1 20%, #94bed3 20%, #94bed3 30%, #fcf9f1 30%, #fcf9f1 40%); border-left: 4px solid #344960; border-right: 4px solid #344960; box-shadow: inset 0 6px 0 0 rgba(0, 0, 0, 0.2);
}
.floor1 { width: 234px; height: 120px; margin-left: 21px; border-left: 4px solid #344960; border-right: 4px solid #344960; background-image: repeating-linear-gradient(0deg, #fcf9f1 0, #fcf9f1 18px, #aaafad 18px, #aaafad 22px); box-shadow: inset 0 6px 0 0 rgba(0, 0, 0, 0.2); padding-top: 10px;
}
.street { width: 284px; height: 6px; background-color: #344960; border-radius: 4px; position: relative;
}
.window1 { width: 121px; height: 4px; background-color: #94bed3; border: 4px solid #344960; margin-left: 4px; box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.2);
}
.window2 { position: relative; width: 105px; height: 66px; background-image: linear-gradient(-45deg, #cceeef 0, #cceeef 40%, #e5f4f1 40%, #e5f4f1 45%, #cceeef 45%, #cceeef 55%, #e5f4f1 55%, #e5f4f1 65%, #cceeef 65%, #cceeef 100%); border-left: 4px solid #344960; border-right: 4px solid #344960; margin-left: 8px; padding-top: 10px; padding-left: 8px; color: #f47067; font-family: 'Ultra', serif; font-size: 14pt; font-weight: normal; text-align: center;
}
.window2 > span { display: inline-block; color: #344960; font-family: Oswald, san-serif; font-size: 12pt; margin-left: -8px;
}
.window { float: left;
}
.door { position: relative; margin-left: 10px; float: left; height: 110px; width: 42px; border: 8px solid #344960; background-image: linear-gradient(-45deg, #cceeef 0, #cceeef 40%, #e5f4f1 40%, #e5f4f1 45%, #cceeef 45%, #cceeef 55%, #e5f4f1 55%, #e5f4f1 65%, #cceeef 65%, #cceeef 100%); box-shadow: inset 0 12px 0 0 #344960, inset 0 20px 0 0 rgba(0, 0, 0, 0.2), inset 0 -30px 0 0 #344960;
}
.door:after { content: ''; display: block; position: relative; width: 30px; height: 12px; top: 18px; left: 4px; border: 2px solid #94bed3; box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.2);
}
.door:before { content: ''; display: block; position: relative; width: 30px; height: 2px; top: 2px; left: 7px; background-color: #94bed3;
}
.doorpane { top: 10px; width: 4px; background-color: #344960; height: 72px; position: relative; left: 19px;
}
.pole { animation: barberPole 1s linear infinite; margin-left: 8px; top: 25px; width: 18px; height: 50px; float: left; background-image: repeating-linear-gradient(-45deg, #f47067 0%, #f47067 12.5%, #fcf9f1 12.5%, #fcf9f1 25%, #94bed3 25%, #94bed3 37.5%, #fcf9f1 37.5%, #fcf9f1 50%, #f47067 50%, #f47067 62.5%, #fcf9f1 62.5%, #fcf9f1 75%, #94bed3 75%, #94bed3 87.5%, #fcf9f1 87.5%, #fcf9f1 100%); position: relative;
}
.pole:after { width: 20px; height: 14px; content: ''; display: block; background: #344960; border-radius: 0 0 12px 12px; position: relative; top: 28px; left: -1px; box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.2);
}
.pole:before { width: 20px; height: 12px; content: ''; display: block; background: #344960; border-radius: 12px 12px 0 0; position: relative; top: -10px; left: -1px; box-shadow: 0 -6px 0 -4px #344960;
}
.letter { display: inline-block; position: relative; padding: 0; margin: -3px;
}
.letter:nth-child(1) { transform: rotate(-25deg); top: 7px;
}
.letter:nth-child(2) { transform: rotate(-15deg); top: 2px;
}
.letter:nth-child(3) { transform: rotate(-5deg);
}
.letter:nth-child(4) { transform: rotate(5deg);
}
.letter:nth-child(5) { transform: rotate(15deg); top: 2px;
}
.letter:nth-child(6) { transform: rotate(25deg); top: 7px;
}
.line { display: inline-block; border-top: 2px solid #344960; width: 20px; position: absolute; float: left; top: 46px;
}
.ll:after { content: ""; width: 6px; height: 6px; background: #344960; border-radius: 5px; position: absolute; top: -4px;
}
.lr:before { content: ""; width: 6px; height: 6px; background: #344960; border-radius: 5px; position: absolute; left: 0; top: -4px;
}
.line:after { right: 0;
}
.ll { left: 15px;
}
.lr { left: 78px;
}
@keyframes barberPole { from { background-position: 0 0; } to { background-position: 18px 0; }
}
.corner { background: #344960; height: 20px; width: 20px; overflow: hidden; position: absolute;
}
.corner:nth-child(7) { top: 0; left: 0;
}
.corner:nth-child(8) { top: 0; right: 0;
}
.corner:nth-child(9) { bottom: 0; left: 0;
}
.corner:nth-child(10) { bottom: 0; right: 0;
}
.r,
.l,
.t,
.b { width: 100%; height: 100%; background-image: linear-gradient(-45deg, #cceeef 0, #cceeef 40%, #e5f4f1 40%, #e5f4f1 45%, #cceeef 45%, #cceeef 55%, #e5f4f1 55%, #e5f4f1 65%, #cceeef 65%, #cceeef 100%); background-size: 105px 66px; border-radius: 24px; background-origin: 0 -66px; position: absolute;
}
.l { left: -65%;
}
.r { right: -65%;
}
.t { top: -65%;
}
.b { bottom: -65%;
}
.title { width: 284px; text-align: center; color: #344960; font-family: Oswald, san-serif;
}
.title > a { color: #f47067; text-decoration: none;
}
.title > a:hover { color: #344960;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Ultra|Oswald' rel='stylesheet' type='text/css'>
<div class='roof1'></div>
<div class='roof3'></div>
<div class='roof1'></div>
<div class='floor1'> <div class='pole'></div> <div class='window'> <div class='window1'></div> <div class='window2'> <div class='letter'>B</div> <div class='letter'>A</div> <div class='letter'>R</div> <div class='letter'>B</div> <div class='letter'>E</div> <div class='letter'>R</div> <div class='corner'> <div class='r'></div> <div class='b'></div> </div> <div class='corner'> <div class='l'></div> <div class='b'></div> </div> <div class='corner'> <div class='r'></div> <div class='t'></div> </div> <div class='corner'> <div class='l'></div> <div class='t'></div> </div> <div class='line ll'></div> <span> SHOP </span> <div class='line lr'></div> </div> <div class='window1'></div> </div> <div class='door'> <div class='doorpane'></div> </div>
</div>
<div class='street'></div>
<div class='title'> Pure CSS implementation of<br> <a href="http://dribbble.com/shots/1370382-Barber-Shop">Barber Shop</a> by <a href="http://dribbble.com/miguelcm">miguelcm</a>
</div>
</body>
</html>
Barber Shop - Script Codes CSS Codes
body { background: #fefaed; widht: 100%; height: 100%; padding: 16px;
}
.roof1,
.roof2 { width: 250px; height: 4px; background-color: #94bed3; border: 4px solid #344960; margin-left: 13px;
}
.roof3 { width: 234px; height: 24px; margin-left: 21px; background-color: #94bed3; background-image: repeating-linear-gradient(-45deg, #f47067 0%, #f47067 10%, #fcf9f1 10%, #fcf9f1 20%, #94bed3 20%, #94bed3 30%, #fcf9f1 30%, #fcf9f1 40%); border-left: 4px solid #344960; border-right: 4px solid #344960; box-shadow: inset 0 6px 0 0 rgba(0, 0, 0, 0.2);
}
.floor1 { width: 234px; height: 120px; margin-left: 21px; border-left: 4px solid #344960; border-right: 4px solid #344960; background-image: repeating-linear-gradient(0deg, #fcf9f1 0, #fcf9f1 18px, #aaafad 18px, #aaafad 22px); box-shadow: inset 0 6px 0 0 rgba(0, 0, 0, 0.2); padding-top: 10px;
}
.street { width: 284px; height: 6px; background-color: #344960; border-radius: 4px; position: relative;
}
.window1 { width: 121px; height: 4px; background-color: #94bed3; border: 4px solid #344960; margin-left: 4px; box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.2);
}
.window2 { position: relative; width: 105px; height: 66px; background-image: linear-gradient(-45deg, #cceeef 0, #cceeef 40%, #e5f4f1 40%, #e5f4f1 45%, #cceeef 45%, #cceeef 55%, #e5f4f1 55%, #e5f4f1 65%, #cceeef 65%, #cceeef 100%); border-left: 4px solid #344960; border-right: 4px solid #344960; margin-left: 8px; padding-top: 10px; padding-left: 8px; color: #f47067; font-family: 'Ultra', serif; font-size: 14pt; font-weight: normal; text-align: center;
}
.window2 > span { display: inline-block; color: #344960; font-family: Oswald, san-serif; font-size: 12pt; margin-left: -8px;
}
.window { float: left;
}
.door { position: relative; margin-left: 10px; float: left; height: 110px; width: 42px; border: 8px solid #344960; background-image: linear-gradient(-45deg, #cceeef 0, #cceeef 40%, #e5f4f1 40%, #e5f4f1 45%, #cceeef 45%, #cceeef 55%, #e5f4f1 55%, #e5f4f1 65%, #cceeef 65%, #cceeef 100%); box-shadow: inset 0 12px 0 0 #344960, inset 0 20px 0 0 rgba(0, 0, 0, 0.2), inset 0 -30px 0 0 #344960;
}
.door:after { content: ''; display: block; position: relative; width: 30px; height: 12px; top: 18px; left: 4px; border: 2px solid #94bed3; box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.2);
}
.door:before { content: ''; display: block; position: relative; width: 30px; height: 2px; top: 2px; left: 7px; background-color: #94bed3;
}
.doorpane { top: 10px; width: 4px; background-color: #344960; height: 72px; position: relative; left: 19px;
}
.pole { animation: barberPole 1s linear infinite; margin-left: 8px; top: 25px; width: 18px; height: 50px; float: left; background-image: repeating-linear-gradient(-45deg, #f47067 0%, #f47067 12.5%, #fcf9f1 12.5%, #fcf9f1 25%, #94bed3 25%, #94bed3 37.5%, #fcf9f1 37.5%, #fcf9f1 50%, #f47067 50%, #f47067 62.5%, #fcf9f1 62.5%, #fcf9f1 75%, #94bed3 75%, #94bed3 87.5%, #fcf9f1 87.5%, #fcf9f1 100%); position: relative;
}
.pole:after { width: 20px; height: 14px; content: ''; display: block; background: #344960; border-radius: 0 0 12px 12px; position: relative; top: 28px; left: -1px; box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.2);
}
.pole:before { width: 20px; height: 12px; content: ''; display: block; background: #344960; border-radius: 12px 12px 0 0; position: relative; top: -10px; left: -1px; box-shadow: 0 -6px 0 -4px #344960;
}
.letter { display: inline-block; position: relative; padding: 0; margin: -3px;
}
.letter:nth-child(1) { transform: rotate(-25deg); top: 7px;
}
.letter:nth-child(2) { transform: rotate(-15deg); top: 2px;
}
.letter:nth-child(3) { transform: rotate(-5deg);
}
.letter:nth-child(4) { transform: rotate(5deg);
}
.letter:nth-child(5) { transform: rotate(15deg); top: 2px;
}
.letter:nth-child(6) { transform: rotate(25deg); top: 7px;
}
.line { display: inline-block; border-top: 2px solid #344960; width: 20px; position: absolute; float: left; top: 46px;
}
.ll:after { content: ""; width: 6px; height: 6px; background: #344960; border-radius: 5px; position: absolute; top: -4px;
}
.lr:before { content: ""; width: 6px; height: 6px; background: #344960; border-radius: 5px; position: absolute; left: 0; top: -4px;
}
.line:after { right: 0;
}
.ll { left: 15px;
}
.lr { left: 78px;
}
@keyframes barberPole { from { background-position: 0 0; } to { background-position: 18px 0; }
}
.corner { background: #344960; height: 20px; width: 20px; overflow: hidden; position: absolute;
}
.corner:nth-child(7) { top: 0; left: 0;
}
.corner:nth-child(8) { top: 0; right: 0;
}
.corner:nth-child(9) { bottom: 0; left: 0;
}
.corner:nth-child(10) { bottom: 0; right: 0;
}
.r,
.l,
.t,
.b { width: 100%; height: 100%; background-image: linear-gradient(-45deg, #cceeef 0, #cceeef 40%, #e5f4f1 40%, #e5f4f1 45%, #cceeef 45%, #cceeef 55%, #e5f4f1 55%, #e5f4f1 65%, #cceeef 65%, #cceeef 100%); background-size: 105px 66px; border-radius: 24px; background-origin: 0 -66px; position: absolute;
}
.l { left: -65%;
}
.r { right: -65%;
}
.t { top: -65%;
}
.b { bottom: -65%;
}
.title { width: 284px; text-align: center; color: #344960; font-family: Oswald, san-serif;
}
.title > a { color: #f47067; text-decoration: none;
}
.title > a:hover { color: #344960;
}
Developer | Barbara Laird |
Username | bhlaird |
Uploaded | January 16, 2023 |
Rating | 3.5 |
Size | 6,270 Kb |
Views | 4,048 |
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!
Name | Size |
Movember | 2,396 Kb |
Playing with colors | 9,310 Kb |
Man Up | 3,309 Kb |
SVG Shape Hover Effect | 4,672 Kb |
Colors | 3,569 Kb |
Coming Soon | 3,075 Kb |
Codrops animated text | 1,970 Kb |
Windows | 2,686 Kb |
Hipster quote callout | 5,030 Kb |
Atom | 1,932 Kb |
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!
Name | Username | Size |
Project MMetro beta | Atomicsong | 5,157 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
Google Chrome Icon using Pure CSS in one DIV | Grssam | 3,627 Kb |
CSS Bot Confusion | Jpod | 3,456 Kb |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 Kb |
Sign Up Form | Sicontis | 5,272 Kb |
Bezier Animation with straight paths | Rhernando | 2,087 Kb |
Sticky menu on scroll | Senff | 2,869 Kb |
Learning canvas drawing | Aurer | 2,204 Kb |
Asteroids | Davedehaan | 2,846 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!