Smile More

Developer
Barbara Laird
Size
3,720 Kb
Views
4,048
  1. Smile More Previews
  2. Smile More HTML Codes
  3. Smile More CSS Codes

How do I make an smile more?

Inspired by http://dribbble.com/shots/877132-To-Resolve-Project-2013. What is a smile more? How do you make a smile more? This script and codes were developed by Barbara Laird on 16 January 2023, Monday.

Smile More Previews
IQ Test

Smile More - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Smile More </title> <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: -webkit-radial-gradient(50% 50%, #fbc21f 0%, #f9b925 100%); background: -moz-radial-gradient(50% 50%, #fbc21f 0%, #f9b925 100%); background: -ms-radial-gradient(50% 50%, #fbc21f 0%, #f9b925 100%); width: 100%; height: 100%;
}
.face { width: 500px; height: 500px;
}
.center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.eye { position: absolute; background: #c46f13; width: 97px; height: 97px; border-radius: 100% 100%;
}
.eye:before { left: 36px; top: 16px; display: block; position: relative; content: ''; background-color: #ffffff; width: 37px; height: 37px; border-radius: 100% 100%;
}
.eye:after { left: 64px; top: 16px; display: block; position: relative; content: ''; background-color: #ffffff; width: 14px; height: 14px; border-radius: 100% 100%;
}
.lefteye { left: 25px;
}
.righteye { right: 25px;
}
.freckles { position: absolute; width: 10px; height: 10px; border-radius: 100% 100%; background-color: #ffffff; top: 110px;
}
.freckles:before { display: block; position: relative; content: ''; background-color: #ffffff; width: 10px; height: 10px; border-radius: 100% 100%; top: 14px; left: 15px;
}
.freckles:after { display: block; position: relative; content: ''; background-color: #ffffff; width: 10px; height: 10px; border-radius: 100% 100%; top: 9px; left: -7px;
}
.leftfreckles { left: 7px;
}
.rightfreckles { right: 7px; transform: scaleX(-1);
}
.mouth { position: absolute; height: 225px; width: 450px; border-radius: 0 0 450px 450px; background: -webkit-radial-gradient(50% 100%, #f7a81c 0, #f7a81c 50%, #c46f13 50%, #c46f13 100%); background: -moz-radial-gradient(50% 100%, #f7a81c 0, #f7a81c 50%, #c46f13 50%, #c46f13 100%); background: -ms-radial-gradient(50% 100%, #f7a81c 0, #f7a81c 50%, #c46f13 50%, #c46f13 100%); left: 25px; top: 170px;
}
.mouth > p { margin: 110px 150px; font-family: 'Rammetto One', cursive; font-size: 30pt; line-height: 30pt; color: #ffffff;
}
.mouth > p > span { font-size: 29pt;
} </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=Rammetto+One' rel='stylesheet' type='text/css'>
<div class='face center'> <div class='eye lefteye'></div> <div class='eye righteye'></div> <div class='freckles leftfreckles'></div> <div class='freckles rightfreckles'></div> <div class='mouth'> <p> SMILE <br> <span>MORE</span> </p> </div>
</div>
</body>
</html>

Smile More - Script Codes CSS Codes

body { background: -webkit-radial-gradient(50% 50%, #fbc21f 0%, #f9b925 100%); background: -moz-radial-gradient(50% 50%, #fbc21f 0%, #f9b925 100%); background: -ms-radial-gradient(50% 50%, #fbc21f 0%, #f9b925 100%); width: 100%; height: 100%;
}
.face { width: 500px; height: 500px;
}
.center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.eye { position: absolute; background: #c46f13; width: 97px; height: 97px; border-radius: 100% 100%;
}
.eye:before { left: 36px; top: 16px; display: block; position: relative; content: ''; background-color: #ffffff; width: 37px; height: 37px; border-radius: 100% 100%;
}
.eye:after { left: 64px; top: 16px; display: block; position: relative; content: ''; background-color: #ffffff; width: 14px; height: 14px; border-radius: 100% 100%;
}
.lefteye { left: 25px;
}
.righteye { right: 25px;
}
.freckles { position: absolute; width: 10px; height: 10px; border-radius: 100% 100%; background-color: #ffffff; top: 110px;
}
.freckles:before { display: block; position: relative; content: ''; background-color: #ffffff; width: 10px; height: 10px; border-radius: 100% 100%; top: 14px; left: 15px;
}
.freckles:after { display: block; position: relative; content: ''; background-color: #ffffff; width: 10px; height: 10px; border-radius: 100% 100%; top: 9px; left: -7px;
}
.leftfreckles { left: 7px;
}
.rightfreckles { right: 7px; transform: scaleX(-1);
}
.mouth { position: absolute; height: 225px; width: 450px; border-radius: 0 0 450px 450px; background: -webkit-radial-gradient(50% 100%, #f7a81c 0, #f7a81c 50%, #c46f13 50%, #c46f13 100%); background: -moz-radial-gradient(50% 100%, #f7a81c 0, #f7a81c 50%, #c46f13 50%, #c46f13 100%); background: -ms-radial-gradient(50% 100%, #f7a81c 0, #f7a81c 50%, #c46f13 50%, #c46f13 100%); left: 25px; top: 170px;
}
.mouth > p { margin: 110px 150px; font-family: 'Rammetto One', cursive; font-size: 30pt; line-height: 30pt; color: #ffffff;
}
.mouth > p > span { font-size: 29pt;
}
Smile More - Script Codes
Smile More - Script Codes
Home Page Home
Developer Barbara Laird
Username bhlaird
Uploaded January 16, 2023
Rating 3
Size 3,720 Kb
Views 4,048
Do you need developer help for Smile More?

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
Name
A Pen by Barbara Laird
Einstien Quotes
Windows
Happy New Year
Color Wheel
Playing with colors
Hipster quote callout
Coming Soon
Man Up
Barber Shop
Create amazing Facebook ads 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!