A Pen by Sooba

Developer
Size
2,516 Kb
Views
14,168

How do I make an a pen by sooba?

What is a a pen by sooba? How do you make a a pen by sooba? This script and codes were developed by Sooba on 29 November 2022, Tuesday.

A Pen by Sooba Previews

A Pen by Sooba - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Sooba</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="rope"> <s class="cf left"><i></i></s> <s class="cf right"><i></i></s> <div id="banner">Nothin' to see here</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/webfont/1.3.0/webfont.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Sooba - Script Codes CSS Codes

#rope{ width:80%;height:210px;position:relative; margin:0 auto
}
#rope s{ width:14px;display:inline-block;margin:0 10%
}
#rope .left{
}
#rope .right{ float:right
}
#rope i{ height:14px;display:block;position:relative;z-index:2; border-radius:25% 50% 25% 50%;margin:-3px 0 0; box-shadow:inset 0 -2px 5px rgba(0,0,0,.52); background-color:#ffbe13;
background-image: -moz-radial-gradient(25% 50%, ellipse farthest-side, #ffbe13, #b05e25 100%);
background-image: -webkit-radial-gradient(25% 50%, ellipse farthest-side, #ffbe13, #b05e25 100%);
background-image: -o-radial-gradient(25% 50%, ellipse farthest-side, #ffbe13, #b05e25 100%);
background-image: -ms-radial-gradient(25% 50%, ellipse farthest-side, #ffbe13, #b05e25 100%);
background-image: radial-gradient(25% 50%, ellipse farthest-side, #ffbe13, #b05e25 100%); -webkit-transform:skewY(22.5deg); -moz-transform:skewY(22.5deg); transform:skewY(22.5deg); -webkit-animation:stretch .87s infinite alternate
}
#rope i:before,#rope i:after{ content:'';width:10%;height:100%;position:absolute; border-left:1px solid rgba(0,0,0,.07); border-right:1px solid rgba(0,0,0,.07)
}
#rope i:before{ left:20%
}
#rope i:after{ right:20%
}
#rope i:nth-last-child(1){ border-radius:50%;width:140%;height:16px;margin:-7px -20% -50px; box-shadow:inset 0 -2px 7px rgba(0,0,0,.52), 0 2px 1px rgba(0,0,0,.7), 0 4px 2px rgba(255,255,255,.25), 0 -2px 5px rgba(0,0,0,.7); z-index:1
}
#banner{ width:90%;height:210px;margin:0 auto;border-radius:15px; background:url(http://www.uradi-sam.hr/files/bbg.png) #ffce29; border:3px solid rgba(0,0,0,.18); border-top:3px solid rgba(255,255,255,.34); border-left:3px solid rgba(255,255,255,.34); box-shadow:inset 5px 5px 18px rgba(255,255,255,.34), inset -5px -5px 18px rgba(0,0,0,.18); text-align:center;z-index:9999998; box-sizing:border-box;-moz-box-sizing:border-box; font:italic 700 70px/201px 'Roboto Condensed',sans-serif; text-transform:uppercase;letter-spacing:-4px; color:rgba(75,34,5,.52); text-shadow:2px 2px 1px rgba(255,189,18,.34), -1px -1px 1px rgba(0,0,0,.07)
}
@-webkit-keyframes stretch{ 0%{ height:12px } 100%{ height:16px }
}
.cf:before,.cf:after{ content:'';display: table
}
.cf:after{ clear:both
}

A Pen by Sooba - Script Codes JS Codes

var e = $('#rope i');
for (var i = 0; i < 7; i++) { e.clone().insertAfter(e);
}
WebFont.load({ google: { families: ['Roboto Condensed'] }
});
A Pen by Sooba - Script Codes
A Pen by Sooba - Script Codes
Home Page Home
Developer Sooba
Username sooba
Uploaded November 29, 2022
Rating 3
Size 2,516 Kb
Views 14,168
Do you need developer help for A Pen by Sooba?

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!

Sooba (sooba) Script Codes
Name
Love
Add Photo
Eye
UFO
Loading Animation
Vertically aligned responsive header
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!