Barber Shop

Developer
Size
6,270 Kb
Views
4,048

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 Previews

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;
}
Barber Shop - Script Codes
Barber Shop - Script Codes
Home Page Home
Developer Barbara Laird
Username bhlaird
Uploaded January 16, 2023
Rating 3.5
Size 6,270 Kb
Views 4,048
Do you need developer help for Barber Shop?

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!

Barbara Laird (bhlaird) Script Codes
Create amazing video scripts 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!