Life Mottos

Developer
Saysora
Size
3,352 Kb
Views
30,360
  1. Life Mottos Previews
  2. Life Mottos HTML Codes
  3. Life Mottos CSS Codes
  4. Life Mottos JS Codes

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 Previews
IQ Test

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>&mdash; 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>&mdash; 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>&mdash; 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>&ndash; 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>&ndash; 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);
}
Life Mottos - Script Codes
Life Mottos - Script Codes
Home Page Home
Developer Saysora
Username azureknight
Uploaded August 26, 2022
Rating 3
Size 3,352 Kb
Views 30,360
Do you need developer help for Life Mottos?

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!

Saysora (azureknight) Script Codes
Name
Flat UI Login
Simple Video Lightbox
Beautiful Ribbon
Value vs Placeholder
CSS Tab Holder
Responsive Background
A Pen by Saysora
Legend of Zelda - Triforce
Ralph Lauren Mimic
Landscape Animation
Create amazing marketing copy 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!