Material Design Author Quote
How do I make an material design author quote?
What is a material design author quote? How do you make a material design author quote? This script and codes were developed by Srijon Sarker on 29 November 2022, Tuesday.
Material Design Author Quote Previews
Material Design Author Quote - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Design Author Quote </title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="author-quote-wrap"> <input class="toggle-quote" type="radio" id="AQ-1" name="quote" checked> <div class="author-quote"> <div class="pull-left author-photo photo-a animated bounceInLeft"> <div class="navigate"> <label class="label left" for="AQ-5"> </label> <label class="label right" for="AQ-2"> </label> </div> </div> <div class="pull-right quote-content"> <div class="clearfix animated zoomIn"> <div class="quote-like pull-right"><span class="love"></span> 423</div> </div> <div class="quote-text animated rotateInDownRight">Don't You<br>Think That<br>If I Were<br>Wrong,<br>I'd Know It?</div> <div class="quote-author animated lightSpeedIn">Sheldon Cooper</div> </div> </div> <input class="toggle-quote" type="radio" id="AQ-2" name="quote"> <div class="author-quote"> <div class="pull-left author-photo photo-b animated bounceInLeft"> <div class="navigate"> <label class="label left" for="AQ-1"> </label> <label class="label right" for="AQ-3"> </label> </div> </div> <div class="pull-right quote-content"> <div class="clearfix animated zoomIn"> <div class="quote-like pull-right"><span class="love"></span> 512</div> </div> <div class="quote-text animated zoomInDown">My Goal Was<br>To Prove<br>To My Family<br>I wasn't a dummy</div> <div class="quote-author animated lightSpeedIn">Ronalda Colen</div> </div> </div> <input class="toggle-quote" type="radio" id="AQ-3" name="quote"> <div class="author-quote"> <div class="pull-left author-photo photo-c animated bounceInLeft"> <div class="navigate"> <label class="label left" for="AQ-2"> </label> <label class="label right" for="AQ-4"> </label> </div> </div> <div class="pull-right quote-content"> <div class="clearfix animated zoomIn"> <div class="quote-like pull-right"><span class="love"></span> 618</div> </div> <div class="quote-text animated bounceInRight">Smart-Phones.<br>Who Cares?<br>Smart-Phones.<br>I Only Have<br>Dummy Phones</div> <div class="quote-author animated lightSpeedIn">Don Rickles</div> </div> </div> <input class="toggle-quote" type="radio" id="AQ-4" name="quote"> <div class="author-quote"> <div class="pull-left author-photo photo-d animated bounceInLeft"> <div class="navigate"> <label class="label left" for="AQ-3"> </label> <label class="label right" for="AQ-5"> </label> </div> </div> <div class="pull-right quote-content"> <div class="clearfix animated zoomIn"> <div class="quote-like pull-right"><span class="love"></span> 741</div> </div> <div class="quote-text animated lightSpeedIn">Design<br>Means<br>Being Good<br>Not Just<br>Looking Good</div> <div class="quote-author animated lightSpeedIn">Jacquie Dermody</div> </div> </div> <input class="toggle-quote" type="radio" id="AQ-5" name="quote"> <div class="author-quote"> <div class="pull-left author-photo photo-e animated bounceInLeft"> <div class="navigate"> <label class="label left" for="AQ-4"> </label> <label class="label right" for="AQ-1"> </label> </div> </div> <div class="pull-right quote-content"> <div class="clearfix animated zoomIn"> <div class="quote-like pull-right"><span class="love"></span> 824</div> </div> <div class="quote-text animated flipInX">Design<br>Is<br>Thinking<br>Made<br>Visible</div> <div class="quote-author animated lightSpeedIn">Mohan Khadka</div> </div> </div>
</div>
</body>
</html>
Material Design Author Quote - Script Codes CSS Codes
body{ margin:0; color:#444; background:#e2e7eb; font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
.author-quote-wrap .author-quote,
.author-quote-wrap .author-photo:before{ top:0; left:0; right:0; bottom:0; position:absolute;
}
.author-quote-wrap{ color:#fff; width:100%; overflow:hidden; max-width:560px; min-height:390px; margin:50px auto 0; background:#17a0ff; position:relative; box-shadow:0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21);
}
.author-quote-wrap .author-quote{ display:none;
}
.author-quote-wrap .toggle-quote{ display:none;
}
.author-quote-wrap .toggle-quote:checked + .author-quote{ display:block;
}
.author-quote-wrap .author-quote a{ color:inherit; text-decoration:none;
}
.author-quote-wrap .author-photo,
.author-quote-wrap .quote-content{ height:100%; position:relative;
}
.author-quote-wrap .author-photo{ width:140px; background-size:cover; background-position:center; background-repeat:no-repeat; quotes:'\201C''\201D''\2018''\2019';
}
.author-quote-wrap .author-photo.photo-a{ background-image:url(https://raw.githubusercontent.com/khadkamhn/day-007-author-quote/master/img/author-1.jpg);
}
.author-quote-wrap .author-photo.photo-b{ background-image:url(https://raw.githubusercontent.com/khadkamhn/day-007-author-quote/master/img/author-2.jpg);
}
.author-quote-wrap .author-photo.photo-c{ background-image:url(https://raw.githubusercontent.com/khadkamhn/day-007-author-quote/master/img/author-3.jpg);
}
.author-quote-wrap .author-photo.photo-d{ background-image:url(https://raw.githubusercontent.com/khadkamhn/day-007-author-quote/master/img/author-4.jpg);
}
.author-quote-wrap .author-photo.photo-e{ background-image:url(https://raw.githubusercontent.com/khadkamhn/day-007-author-quote/master/img/author-5.jpg);
}
.author-quote-wrap .author-photo:before{ content:''; background:rgba(22,160,255,.5);
}
.author-quote-wrap .author-photo:after{ top:15px; left:60px; font-size:72px; line-height:72px; position:absolute; font-family:serif; content:open-quote;
}
.author-quote-wrap .author-photo .navigate{ left:15px; z-index:10; right:15px; bottom:15px; position:absolute; text-align:center;
}
.author-quote-wrap .author-photo .navigate .label{ width:15px; height:30px; cursor:pointer; position:relative; display:inline-block;
}
.author-quote-wrap .author-photo .navigate .label.left{ left:-30px;
}
.author-quote-wrap .author-photo .navigate .label.right{ right:-30px;
}
.author-quote-wrap .author-photo .navigate .label.disabled{ cursor:not-allowed;
}
.author-quote-wrap .author-photo .navigate .label:before,
.author-quote-wrap .author-photo .navigate .label:after{ content:''; height:2px; width:15px; background:#ccc; position:absolute;
}
.author-quote-wrap .author-photo .navigate .label:before{ top:62%;
}
.author-quote-wrap .author-photo .navigate .label:after{ bottom:62%;
}
.author-quote-wrap .author-photo .navigate .label.left:before,
.author-quote-wrap .author-photo .navigate .label.right:after{ transform:rotate(45deg);
}
.author-quote-wrap .author-photo .navigate .label.right:before,
.author-quote-wrap .author-photo .navigate .label.left:after{ transform:rotate(-45deg);
}
.author-quote-wrap .author-photo .navigate .label.left:before,
.author-quote-wrap .author-photo .navigate .label.left:after{ left:0;
}
.author-quote-wrap .author-photo .navigate .label.right:before,
.author-quote-wrap .author-photo .navigate .label.right:after{ right:0;
}
.author-quote-wrap .author-photo .navigate .label.disabled:before,
.author-quote-wrap .author-photo .navigate .label.disabled:after,
.author-quote-wrap .author-photo .navigate .label.disabled:hover:before,
.author-quote-wrap .author-photo .navigate .label.disabled:hover:after{ background:#bbb;
}
.author-quote-wrap .author-photo .navigate .label:hover:before,
.author-quote-wrap .author-photo .navigate .label:hover:after{ background:#fff;
}
.author-quote-wrap .quote-content{ padding:15px; width:calc(560px - 140px);
}
.quote-content .quote-like{ font-size:12px; font-weight:400; padding:4px 8px; border-radius:15px; display:inline-block; background:rgba(0,0,0,.2);
}
.quote-content .quote-like .love{ width:18px; height:10px; position:relative; display:inline-block;
}
.quote-content .quote-like .love:before,
.quote-content .quote-like .love:after { top:0; left:7px; content:''; width:7px; height:12px; background:#fff; position:absolute; transform:rotate(-45deg); transform-origin:0 100%; border-radius:20px 20px 0 0;
}
.quote-content .quote-like .love:after { left:0; transform:rotate(45deg); transform-origin :100% 100%;
}
.quote-content .quote-text,
.quote-content .quote-author{ text-transform:uppercase;
}
.quote-content .quote-text{ font-size:48px; font-weight:900; line-height:55px;
}
.quote-content .quote-author{ bottom:15px; font-size:14px; font-weight:500; position:absolute;
}
.quote-content .quote-author:before{ content:'- ';
}
| Developer | Srijon Sarker |
| Username | Creative_Srijon |
| Uploaded | November 29, 2022 |
| Rating | 3 |
| Size | 3,181 Kb |
| Views | 10,120 |
Do you need developer help for Material Design Author Quote?
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!
Srijon Sarker (Creative_Srijon) Script Codes
| Name | Size |
| CSS Slider | 3,485 Kb |
| 3D Buttons iii | 1,814 Kb |
| Material Design Image Card | 2,574 Kb |
| Material Design Square Card Components | 2,243 Kb |
| Facebook like button Emoji Reaction | 3,695 Kb |
| Springy popup card | 5,149 Kb |
| Visual Card | 1,832 Kb |
| Material Profile UI Hover | 2,764 Kb |
| Calendar Widget | 4,869 Kb |
| Condition Based Checkbox | 1,581 Kb |
Create amazing blog posts 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!
Similar Scripts & Codes
| Name | Username | Size |
| JavaScript constructors | Simboonlong | 2,415 Kb |
| Responsive scrolling text | Ashdurham | 2,259 Kb |
| Twitch API | Coderpilot | 3,412 Kb |
| Blog Concept 2 | JGallardo | 2,994 Kb |
| Css3 slide | Nakome | 3,190 Kb |
| Airbnb Homepage | SindhujaD | 2,480 Kb |
| A Pen by Miro Olma | Programiro | 2,342 Kb |
| A Pen by John Malc | F789gh | 1,420 Kb |
| Halo 5 REQ Guide Bookmarklet | Cwacht | 3,993 Kb |
| Scroll to view if element partially out of view port height | ChrisMaki | 2,104 Kb |
Do you want hide your ip address?
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!