Motivational message

Developer
Andrew Canham
Size
4,007 Kb
Views
30,360
  1. Motivational message Previews
  2. Motivational message HTML Codes
  3. Motivational message CSS Codes
  4. Motivational message JS Codes

How do I make an motivational message?

I saw a featured exhibition on http://www.creativebloq.com/creativity/advice-will-inspire-any-struggling-artist-101517375 , loved it and wanted to recreate it here.. What is a motivational message? How do you make a motivational message? This script and codes were developed by Andrew Canham on 23 August 2022, Tuesday.

Motivational message Previews
IQ Test

Motivational message - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Motivational message</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="holder change4"> <div class="left"> <p> Art is pointless<br> you have to go out<br> get an actual job<br> and make a living<br> you can't just let<br> the rest of your life<br> be a joke, a failure.<br> you will end up<br> a starving artist.<br> contribute to society<br> instead of wasting time<br> you’re worthless.<br> &nbsp; </p> </div> <div class="right"> <p> without passion.<br> and create art.<br> doing what you love<br> by being yourself.<br> other people define<br> and say you will<br> follow your heart.<br> happy and free, not<br> love your art and<br> by inspiring people<br> letting others tell you<br> you can change the world<br> &nbsp; </p> </div>
</div>
<div class="toggle"> <a href="#">Change perspective</a>
</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>

Motivational message - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,200,600,700,900);
body { background: -webkit-linear-gradient(left, #E6DADA 10%, #274046 90%); background: linear-gradient(90deg, #E6DADA 10%, #274046 90%); /* W3C */ font-family: 'Source Sans Pro', sans-serif; text-rendering: optimizeLegibility;
}
div.holder { height: 600px; left: 50%; opacity: 0.8; -webkit-perspective: 1500; perspective: 1500; position: absolute; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.6); top: 50%; -webkit-transform: translate3d(-50%, -50%, -200px); transform: translate3d(-50%, -50%, -200px); width: 400px;
}
div.holder > div { color: #7a7a7a; height: 100%; left: 0; position: absolute; top: 0; -webkit-transition: all 1.5s ease-in; transition: all 1.5s ease-in; width: 100%;
}
div.holder > div p { font-size: 20px; font-weight: 900; letter-spacing: 0.075em; line-height: 2em; text-transform: uppercase; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 1.5s ease-in; transition: all 1.5s ease-in;
}
div.holder div.left { -webkit-backface-visibility: hidden; backface-visibility: hidden; background: #e5e5e5; text-align: right; z-index: 10;
}
div.holder div.left p { right: 20px;
}
div.holder div.right { -webkit-backface-visibility: hidden; backface-visibility: hidden; background: #e5e5e5; -webkit-transform: rotateY(90deg) translate3d(200px, 0, 200px); transform: rotateY(90deg) translate3d(200px, 0, 200px); z-index: 5;
}
div.holder div.right p { left: 20px;
}
div.change div.left { background: #bfbfbf; -webkit-transform: rotateY(-45deg) translateX(-200px); transform: rotateY(-45deg) translateX(-200px);
}
div.change div.left p { color: #676767;
}
div.change div.right { background: #ffffff; -webkit-transform: rotateY(45deg) translateX(200px); transform: rotateY(45deg) translateX(200px);
}
div.change div.right p { color: #8d8d8d; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 #ffffff;
}
div.toggle { bottom: 60px; left: 50%; opacity: 0.8; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
div.toggle a { background: #545454; border-radius: 4px; color: #fff; display: inline-block; font-weight: 200; font-size: 18px; padding: 6px 40px 7px; text-decoration: none; letter-spacing: 0.025em;
}
div.toggle a:hover { background: #141414;
}

Motivational message - Script Codes JS Codes

$(document).ready(function(){ $("div.toggle a").click(function(){ $("div.holder").toggleClass("change"); });
});
// -------------------------------------------------
//
// NOT MY WORDS!!! I'm not that clever.
// A CSS version of an exhibit that was featured here:
// http://www.creativebloq.com/creativity/advice-will-inspire-any-struggling-artist-101517375
//
// Background gradient from http://uigradients.com/
//
// -------------------------------------------------
Motivational message - Script Codes
Motivational message - Script Codes
Home Page Home
Developer Andrew Canham
Username candroo
Uploaded August 23, 2022
Rating 4.5
Size 4,007 Kb
Views 30,360
Do you need developer help for Motivational message?

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!

Andrew Canham (candroo) Script Codes
Name
Faux 3D grid with image reveal
Cube grid
Footer animation
3D cube - hover rotate
3D List expansion
Hover flower
Angled nav reveal
Color hover buttons
Hover effect
3D Fold out reveal
Create amazing sales emails 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!