Anais Nin Quote Typography
How do I make an anais nin quote typography?
I used some typography and CSS shapes in order to illustrate this beautiful quote. Many of the main words change when you hover on them.. What is a anais nin quote typography? How do you make a anais nin quote typography? This script and codes were developed by Sindhuja on 14 September 2022, Wednesday.
Anais Nin Quote Typography Previews
Anais Nin Quote Typography - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Anais Nin Quote Typography</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="quote"> <center> <div id="life">Life</div> <div id="banner-left"></div> <div id="triangle-left"></div> <div id="banner-right"></div> <div id="triangle-right"></div> </br><span id="top-line"><span id="shrink">shrinks</span> <span class="small">or</span> <span id="expand">expands </span></span> </br><span id="row-2"><span class="small" id="in">in</span> <span id="final">proportion </span><span><span class="small">to</span> <span id="one">one's<span id="you">your</span></span> </span> </br><span id="strong"><img src="http://openclipart.org/image/2400px/svg_to_png/171124/Biceps.png">COURAGE<span id="img"><img src="http://openclipart.org/image/2400px/svg_to_png/171124/Biceps.png"></span></span> </center>
</div>
<div id="author">- Anais Nin<span id="info">author of "<u>delta of venus</u>" and "<u>little birds</u>"</span></div>
</body>
</html>Anais Nin Quote Typography - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Rouge+Script|Clicker+Script|Open+Sans+Condensed:300|Julius+Sans+One|Strait|Amatic+SC|Lato);
body { background-color: #FFF8DE;
}
#quote { margin-top: 25px; font-size: 50px;
}
#life { font-family: Rouge Script, Clicker Script; font-size: 150px; background-color: #DEE5FF; width: 400px;
}
#banner-left { border-top: 80px solid #D2DAFA; border-bottom: 80px solid #D2DAFA; border-right: 80px solid #D2DAFA; border-left: 80px solid #FFF8DE; position: relative; z-index: -2; height: 0px; width: 0px; margin-left: -425px; margin-top: -125px;
}
#banner-right { border-top: 80px solid #D2DAFA; border-bottom: 80px solid #D2DAFA; border-left: 80px solid #D2DAFA; border-right: 80px solid #FFF8DE; position: relative; z-index: -2; height: 0px; width: 0px; margin-left: 425px; margin-top: -160px;
}
#triangle-left { margin-top: -35px; margin-left: -330px; border-top: 17px solid #ADBFFF; border-bottom: 17px solid #D2DAFA; border-left: 35px solid #D2DAFA; border-right: 35px solid #ADBFFF; width: 0px; height: 0px;
}
#triangle-right { margin-top: -35px; margin-left: 330px; border-top: 17px solid #ADBFFF; border-bottom: 17px solid #D2DAFA; border-right: 35px solid #D2DAFA; border-left: 35px solid #ADBFFF; width: 0px; height: 0px;
}
#top-line { position: Initial; font-size: 80px;
}
#shrink { font-family: Open Sans Condensed;
}
#shrink:hover { letter-spacing: -10px;
}
#expand { font-family: Julius Sans One;
}
#expand:hover { letter-spacing: 15px;
}
.small { position: relative; font-size: 60px; font-family: Clicker Script;
}
#real-2 { poition: fixed;
}
#one { font-family: Julius Sans One; position: relative; z-index: 1; font-size: 70px;
}
#strong { position: relative; left: -100px; font-size: 80px; font-family: Strait;
}
#strong:hover { font-size: 90px;
}
#strong:hover img { height: 90px;
}
#strong img { height: 80px; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH";
}
#img img { -moz-transform: scaleX(1); -o-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); filter: FlipV; -ms-filter: "FlipV";
}
#author { font-size: 80px; font-family: Amatic SC; position: relative; float: right;
}
#you { -webkit-text-stroke: 0.3px black; position: relative; left: -180px; visibility: hidden;
}
#one:hover { visibility: hidden;
}
#one:hover #you { visibility: visible; font-weight: bold; color: #DEE5FF;
}
#row-2 { position: relative; left: 90px;
}
#info { font-size: 40px; underline: 1px;
}
#final { font-family: Lato;
}
| Developer | Sindhuja |
| Username | SindhujaD |
| Uploaded | September 14, 2022 |
| Rating | 4 |
| Size | 2,507 Kb |
| Views | 30,360 |
Do you need developer help for Anais Nin Quote Typography?
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!
Sindhuja (SindhujaD) Script Codes
| Name | Size |
| A Pen by Sindhuja | 1,981 Kb |
| Animated CodePen Logo | 1,704 Kb |
| Earth Orbit | 2,120 Kb |
| Airbnb Homepage | 2,480 Kb |
| Cocoa Brownies Recipe | 3,035 Kb |
| Website | 4,654 Kb |
| Mobile Email Wireframe | 3,028 Kb |
| SVG Fill Animation | 2,145 Kb |
| Pizza Order Form | 1,995 Kb |
| A Pen by Sindhuja | 2,242 Kb |
Create amazing SEO content 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 |
| Responsive Advert | James_zedd | 2,354 Kb |
| Rain Landing in a Pond | Edball | 3,009 Kb |
| Filter inputs | Rowinf | 1,721 Kb |
| Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
| Twitch Live Channels | Inkblotty | 4,956 Kb |
| Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
| Rows with image hover effect | Amit-webdesigner | 12,875 Kb |
| Bootstrap 4 Gridsystem Demo | Rivella50 | 1,535 Kb |
| CSS3 Selectables with information rollover | Jasonmayes | 9,565 Kb |
| A Pen by Adrien Clerbois | AClerbois | 6,501 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!