R

Developer
Calvin
Size
4,338 Kb
Views
38,456
  1. R Previews
  2. R HTML Codes
  3. R CSS Codes

How do I make an r?

What is a r? How do you make a r? This script and codes were developed by Calvin on 19 August 2022, Friday.

R Previews
IQ Test

R - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>r</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/grd/1.2.3/grd.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="decoline scaledown1"></div>
<div class="decoline scaleleft2abovework"></div>
<div class="decoline scaledown"></div>
<div class="decoline scaleleft"></div>
<div class="decoline scaleright"></div>
<div class="decoline scaleright2"></div>
<body> <div id="container"> <div class="wrapper"> <div class="Grid social topsocial"> <div class="clearfix"></div> <div class="Cell -12of12 padding "> <a href="" class="pulse">Email</a><span></span> <a href="" class="pulse">LinkedIn</a><span></span> <a href="" class="pulse">Google+</a><span></span> <a href="" class="pulse">Slack</a><span></span> <a href="" class="pulse">Twitter</a><span></span> <a href="" class="pulse">Instagram</a><span></span> </div> </div> <div class="Grid intro"> <div class="clearfix"></div> <div class="Cell -12of12 padding title"> <div class="fadein"> Collin <strong>Badger</strong> <BR><span>Art Director / Senior Designer / UX Designer</span> </div> </div> </div> <div class="Grid intro"> <div class="clearfix"></div> <div class="Cell -6of12 padding summary fadein-delay2 splitearly"> Creative with over 15 years experience in <strong>design, creative process, art direction, branding strategy</strong> and <strong>visual initiatives</strong> through print, digital and multimedia channels. </div> <div class="Cell -6of12 padding summary fadein-delay3 splitearly"> Specialized in the management and art direction for creative teams, consultants and vendors as well as running small to mid-level graphic design departments to execute fulllifecycle branding initiatives for clients. </div> </div> <div class="Grid firstworkgrid fadein-delay4"> <div class="clearfix"></div> <div class="Cell -fill work"> <h1>Bolton</h1></div> <div class="Cell -fill work odd"> <h1>Drive House</h1></div> <div class="Cell -fill work"> <h1>Swift</h1></div> <div class="Cell -fill work odd"> <h1>Poncho</h1></div> <div class="Cell -fill work"> <h1>Learn Craft</h1></div> <div class="Cell -fill work odd"> <h1>Firestorm</h1></div> </div> <div class="Grid workgrid fadein-delay5"> <div class="clearfix"></div> <div class="Cell -fill work"> <h1>Sound Bombin</h1></div> <div class="Cell -fill work odd"> <h1>Sendisk</h1></div> <div class="Cell -fill work"> <h1>Solid Stones</h1></div> <div class="Cell -fill work odd"> <h1>Rough Soup</h1></div> <div class="Cell -fill work "> <h1>Forces</h1></div> <div class="Cell -fill work odd"> <h1>Kid with the Golden Arm</h1></div> </div> <div class="Grid workgrid fadein-delay6"> <div class="clearfix"></div> <div class="Cell -fill work"> <h1>Twitter</h1></div> <div class="Cell -fill work odd"> <h1>XXX</h1></div> <div class="Cell -fill work"> <h1>Hex #3</h1></div> <div class="Cell -fill work odd"> <h1>Nine Inch Nails</h1></div> <div class="Cell -fill work"> <h1>Z</h1></div> <div class="Cell -fill work odd"> <h1>Led 15</h1></div> </div> </div> </div> <div class="Grid"> <div class="clearfix"></div> <div class="Cell -12of12 padding "> </div> <link href="https://fonts.googleapis.com/css?family=Playfair+Display|Questrial" rel="stylesheet">
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/1.0.0/anime.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.min.js'></script>
</body>
</html>

R - Script Codes CSS Codes

* { box-sizing: border-box;
}
body,
html { padding:0; min-height: 100vh; background: #666;
}
html { -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: scroll
}
html { margin: 0; padding: 0; height: 100%; width: 100%; overflow-x: hidden; overflow-y: scroll;
}
body { opacity: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: 'Playfair Display', serif; font-family: 'Questrial', sans-serif; background: #777;
}
.noborder-bottom { border-bottom: none!important;
}
.intro { color: #fff; font-family: 'Questrial', sans-serif; font-size: 23pt; margin: 16pt 0; padding: 4px 0 24px; line-height: 3.1999rem; height: auto; z-index: 22;
}
.intro a { text-decoration: none; padding: 2rem; background: #333; color: #fff; transition-duration: 250ms !important;
}
.intro a:hover { transition-duration: 666ms !important; text-decoration: none; letter-spacing: .5rem; background: #333; color: #fff;
}
.intro span { padding-right: 20px; white-space: nowrap; font-size: 23px; color: #ccc; font-weight: normal;
}
.social { margin: 0 auto;
}
.social a { vertical-align: middle; padding: .5em; color: #444; display: inline-block; text-decoration: none;
}
.social a:hover { transition-duration: 666ms !important; text-decoration: none; background: rgba(255, 255, 255, .1); color: #eee; border-radius: 0;
}
.social span { padding-right: 20px;
}
.topsocial { text-align: center;
}
.intro p { white-space: nowrap; margin: 0; line-height: 1.25rem; color: #444; font-size: 16px;
}
.title { padding: .25rem 0; margin: .25rem 0; line-height: 1.81rem; top: 10px;
}
.clearfix:after { opacity: 0; content: ""; //adds content display: block; //block display makes it 100% of the width clear: both; //clear puts the period below the divs children visibility: hidden; height: 0; //bc height is 0, the div's height is set to the max height of its children line-height: 0;
}
#container { margin: 0 0 5% 0; width: 100%;
}
.wrap { position: relative; width: 100%; max-width: 960px; margin: 0 auto; text-align: center; clear: both;
}
@media (min-width: 1140px) { .wrapper { margin: 0 auto; background: transparent; max-width: 1140px; }
}
p { font-size: 2vmin;
}
/*** Product Listing ***/
.Cell,
.work { overflow: hidden; position: relative; box-sizing: border-box; color: #fff; /* hover off */ -webkit-transition: all 0.250ms cubic-bezier(0.485, 0.155, 0.24, 1.245); transition: all 250ms cubic-bezier(0.485, 0.155, 0.24, 1.245);
}
.padding { padding: 1rem;
}
.firstworkgrid { padding-top: 80px; margin-top: 0; z-index: 999;
}
.workgrid { z-index: 999;
}
.work { color: #eee; height: 150px; text-indent: -25%; padding: .5rem .1rem; text-align: center;
}
.work:hover { z-index: 99; -webkit-transform: scale(1.05); transform: scale(1.05); box-shadow: 0px 14px 20px -5px rgba(0, 0, 0, 0.25); background: #777; -webkit-transition: all 0.250ms cubic-bezier(0.485, 0.155, 0.24, 1.245); transition: all 250ms cubic-bezier(0.485, 0.155, 0.24, 1.245);
}
.work:hover { color: #333;
}
.even { color: #eee;
}
.odd { color: #ccc;
}
.Cell h1 { transform: rotate(42.5deg); font-size: 100px; word-spacing: -.123rem; word-break: normal; letter-spacing: 2rem; line-height: 0; opacity: .5;
}
h2 { font-size: 3.0vh;
}
.clearbg { background: transparent;
}
@media (max-width: 568px) { .Cell { flex: 50%; }
}
@media (max-width: 500px) { .Cell { flex: 50%; } .splitearly{ flex: 75%!important; } .intro{ font-size:5vw!important; line-height:2; margin:0 0 -22%; } .intro span{ opacity:0; }
}
.decolines { z-index: 1; pointer-events: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; position: absolute;
}
.decoline { position: absolute;
}
.scaleleft2abovework { transform: scaleX(0); animation: scaleX 2s 1; animation-fill-mode: forwards; -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */ animation-delay: 2s; width: 400vh; height: 1px; overflow: hidden; top: 675px; left: 0; right: 0; background: rgb(102, 102, 102); opacity: 1; transform-origin: 50% 0% 0px;
}
.scaleleft2 { transform: rotate(45deg); transform: scaleX(0); animation: scaleX 3s 1; animation-fill-mode: forwards; -webkit-animation-delay: 1.725s; /* Safari 4.0 - 8.0 */ animation-delay: 2s; width: 100vh; height: 1px; overflow: hidden; top: 145px; left: 50%; background: rgb(102, 102, 102); opacity: 1; transform-origin: 50% 0% 0px;
}
.summary { color: rgba(255, 255, 255, 0.901961)!important; font-weight: 300; font-style: normal;
}
body { animation: fadein 2s 1; animation-fill-mode: backwards; -webkit-animation-delay: .025; /* Safari 4.0 - 8.0 */ animation-delay: .025;
}
.fadein { animation: fadein 1s 1; animation-fill-mode: backwards; -webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */ animation-delay: 1s;
}
.fadein-delay2 { animation: fadein 1s 1; animation-fill-mode: backwards; -webkit-animation-delay: 1.5s; /* Safari 4.0 - 8.0 */ animation-delay: 1.5s;
}
.fadein-delay3 { animation: fadein 1.5s 1; animation-fill-mode: backwards; -webkit-animation-delay: 2.2s; /* Safari 4.0 - 8.0 */ animation-delay: 2.2s;
}
.fadein-delay4 { animation: fadein 2s 1; animation-fill-mode: backwards; -webkit-animation-delay: 3s; /* Safari 4.0 - 8.0 */ animation-delay: 3s;
}
.fadein-delay5 { animation: fadein 2.25s 1; animation-fill-mode: backwards; -webkit-animation-delay: 3.25s; /* Safari 4.0 - 8.0 */ animation-delay: 3.25s;
}
.fadein-delay6 { animation: fadein 4s 1; animation-fill-mode: backwards; -webkit-animation-delay: 3.5s; /* Safari 4.0 - 8.0 */ animation-delay: 3.5s;
}
@keyframes fadein { 0% { opacity: 0; transform: scaleY(100px); } 100% { opacity: 1; transform: scaleY(100px); }
}
.scaledown { transform: scaleY(0); animation: scaleY 1.7s 1; animation-fill-mode: forwards; -webkit-animation-delay: 1.725s; /* Safari 4.0 - 8.0 */ animation-delay: 1.725s; width: 1px; height: 148px; overflow: hidden; left: 50%; margin-top: 65px; background: rgb(102, 102, 102); opacity: 1; transform-origin: 50% 0% 0px;
}
.scaleright2 { transform: scaleY (0); animation: scaleX 1.25s 1; animation-fill-mode: backwards; -webkit-animation-delay: 1.725s; animation-delay: 2s; width: 400vh; height: 1px; right: 50%; top: 220px; background: #666; opacity: 1;
}
.scaleright { transform: scaleX (0); animation: scaleX 5s 1; animation-fill-mode: forwards; width: 400vh; height: 1px; left: 0; top: 72px; background: #666; opacity: 1;
}
.scaleleft { transform: scaleX (0); animation: scaleX 5s 1; animation-fill-mode: forwards; width: 400vh; height: 1px; right: 0; top: 72px; background: #666; opacity: 1;
}
@keyframes scaleY { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); }
}
@keyframes scaleX { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); }
}
.topsocial a { display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-shadow: 0 1px 0 #666; text-transform: uppercase; font-size: 11.75px; letter-spacing: 2px;
}
.topsocial a:hover,
.topsocial a:focus { outline: none;
}
@media screen and (max-width:55em) { .topsocial a { display: block; } .decoline { opacity: 0; visibility: hidden; } .topsocial:after { opacity: 0; visibility: hidden; background: transparent; }
}
.work,.pulse a { box-shadow: 0 0 0 rgba(255, 255, 255, 0.2); animation: none;
}
.work:hover,.pulse:hover { animation: pulse 2s infinite;
}
@-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2); } 70% { -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@keyframes pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2); } 70% { -moz-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
a:active, a:hover { outline-width: 0;
}
R - Script Codes
R - Script Codes
Home Page Home
Developer Calvin
Username CalvinMorett
Uploaded August 19, 2022
Rating 3
Size 4,338 Kb
Views 38,456
Do you need developer help for R?

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!

Calvin (CalvinMorett) Script Codes
Name
Portfolio Xperiment
CoNTENT
DILLA - PORT
A Pen by Calvin
Port
CLG Web Design Concept
Portfolio Idea
The word good is bad.
Social Button Transition
IDEA BLOCKS
Create amazing love letters 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!