Life Mottos
How do I make an life mottos?
I was asked to have a place where people could hear my life mottos. Here are 3 of them summed up in nice colors.. What is a life mottos? How do you make a life mottos? This script and codes were developed by Saysora on 26 August 2022, Friday.
Life Mottos - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Life Mottos</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap"> <div class="motto-hold"> <div class="mottos"> <div class="quote-hold q-red show"> <div class="quote"><h1><span class="motto-quote">No good deed goes unpunished</span></h1></div> <div class="whom"><p>— Braden Brodersen</p></div> </div> <div class="quote-hold q-blue" title="blue"> <div class="quote"><h1><span class="motto-quote">All's well that begins poorly</span></h1></div> <div class="whom"><p>— Braden Brodersen</p></div> </div> <div class="quote-hold q-green"> <div class="quote"><h1><span class="motto-quote">What doesn't kill you only makes you hate life more</span></h1></div> <div class="whom"><p>— Braden Brodersen</p></div> </div> <div class="quote-hold q-yellow"> <div class="quote"><h1><span class="motto-quote">If Mama isn't happy; No one is going to be happy</span></h1></div> <div class="whom"><p>– Jim Shirley</p></div> </div> <div class="quote-hold q-purple"> <div class="quote"><h1><span class="motto-quote">Be careful on whom you pass on the way up; You will meet them again on the way down</h1></div> <div class="whom"><p>– Jim shirley</p></div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Life Mottos - Script Codes CSS Codes
/* Google Open Sans Font */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600);
/* Colors */
/* Markup */
* { margin: 0; padding: 0;
}
html, body { height: 100%;
}
body { font-family: 'Open Sans', sans-serif;
}
.wrap { min-height: 100%; background: #323232;
}
.motto-hold { padding-top: 50px;
}
.mottos { width: 1024px; max-width: 100%; margin-left: auto; margin-right: auto; color: #fff; position: relative;
}
.mottos .quote-hold { width: 1024px; max-width: 100%; padding-top: 10%; padding-bottom: 10%; opacity: 0; position: absolute; -webkit-transition: opacity 1s linear; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear;
}
.mottos .quote-hold .quote { position: relative; font-size: 1.8em; padding-top: 10px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; text-align: center;
}
.mottos .quote-hold .quote .motto-quote:before { content: "\201C"; font-size: 1.5em; text-indent: 0;
}
.mottos .quote-hold .quote .motto-quote:after { content: "\201D"; font-size: 1.5em;
}
.mottos .quote-hold .whom { text-align: center;
}
.mottos .q-red { background: #dc6062;
}
.mottos .q-blue { background: #63b9dc;
}
.mottos .q-green { background: #3c968a;
}
.mottos .q-yellow { background: #ffd073;
}
.mottos .q-purple { background: #a173ff;
}
.show { opacity: 1 !important;
}
Life Mottos - Script Codes JS Codes
$(document).ready(function(){ slider();
});
function slider() { select = $('.mottos .show'); next = select.next(); select.removeClass('show');
if(next.length) { select.next(); next = next.addClass('show');
} else { next = select.siblings().first(); next.addClass('show');
}
setTimeout(slider, 7000);
}
Developer | Saysora |
Username | azureknight |
Uploaded | August 26, 2022 |
Rating | 3 |
Size | 3,352 Kb |
Views | 30,360 |
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 |
Landscape Animation | 3,469 Kb |
Legend of Zelda - Triforce | 2,530 Kb |
Clean Card Layout | 3,654 Kb |
Life Mottos | 3,352 Kb |
A Pen by Saysora | 2,253 Kb |
Service Card Animation | 3,567 Kb |
Info Cards | 3,926 Kb |
Value vs Placeholder | 2,244 Kb |
CSS Browser | 2,611 Kb |
CSS Full Width Content Menu | 3,712 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 |
Nested flexbox layout for library catalog | Boycetrus | 3,271 Kb |
Two joint circles - One element | Berdejitendra | 1,704 Kb |
Tree growth tests | Orchard | 3,818 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
SVG Scalable Text | Said_FD | 1,451 Kb |
FCC_Twitch.tv | MitchES | 3,466 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
Isometric css island | Xaddict | 2,950 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!