A Pen by Alexandr

Developer

Size

12,106 Kb

Views

68,816

A Pen by Alexandr Previews
A Pen by Alexandr HTML Codes
A Pen by Alexandr CSS Codes
A Pen by Alexandr JS Codes

How do I make an a pen by alexandr?

What is a a pen by alexandr? How do you make a a pen by alexandr? This script and codes were developed by Alexandr on 30 July 2022, Saturday.

A Pen by Alexandr Previews

A Pen by Alexandr - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Alexandr</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300|Noto+Sans|Roboto:700,400,300" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--script(type="text/javascript", src="///code.jquery.com/ui/1.11.4/jquery-ui.js")-->
<base href="http://aortan1.github.io/"/>
<div class="onsticky"> </div>
<section class="me"> <a class="ongit" href="http://aortan1.github.io/" target="_blank"></a> <div class="main"> <div class="div-i"><img class="img-me" src="http://aortan1.github.io/port-i/nick-img1-.jpg" alt=""/></div> <h1>Alexandr Vasilyevich</h1> <p class="coder">HTML Coder</p> <p class="about">I will fulfill all your dreams. I will fulfill all your dreams. I will fulfill all your dreams. I will fulfill all your dreams. I will fulfill all your dreams. </p><a class="contact-me" href="#">contact me</a> </div>
</section>
<section class="info"> <div class="main"> <ul class="ul-info"> <li class="call"> <p>Call me </p><a href="#">+38(066) 287 75 71</a> </li> <li class="skype"> <p>Skype me </p><a href="skype:aortan3?chat">aortan3</a> </li> <li class="mail"> <p>Email me </p><a href="mailto:[email protected]?subject=About job">[email protected]</a> </li> <li class="git"> <p>Watch me </p><a href="https://github.com/Aortan1" target="_blank">aortan1.github.io</a> </li> </ul> </div>
</section>
<section class="knowlidge"> <div class="main"> <h2>My knowlidge </h2> <div class="skills"> <div class="skill s_html"> <h3>html</h3> <div class="circle light"></div> <div class="circle black"></div> <div class="circle bg"> </div> <div class="wrapper" data-anim="base wrapper"> <div class="circle" data-anim="base left"></div> <div class="circle" data-anim="base right"></div> </div> </div> <div class="skill s_css"> <h3>css</h3> <div class="circle light"></div> <div class="circle black"></div> <div class="circle bg"> </div> <div class="wrapper" data-anim="base wrapper"> <div class="circle" data-anim="base left"></div> <div class="circle" data-anim="base right"></div> </div> </div> <div class="skill s_js"> <h3>js</h3> <div class="circle light"></div> <div class="circle black"></div> <div class="circle bg"> </div> <div class="wrapper" data-anim="base"> <div class="circle" data-anim="base left"></div> </div> </div> <div class="skill s_jquery"> <h3>jquery</h3> <div class="circle light"></div> <div class="circle black"></div> <div class="circle bg"> </div> <div class="wrapper" data-anim="base wrapper"> <div class="circle" data-anim="base left"></div> <div class="circle" data-anim="base right"> </div> </div> </div> <div class="skill s_jade"> <h3>jade</h3> <div class="circle light"></div> <div class="circle black"></div> <div class="circle bg"> </div> <div class="wrapper" data-anim="base wrapper"> <div class="circle" data-anim="base left"></div> <div class="circle" data-anim="base right"></div> </div> </div> <div class="skill s_sass"> <h3>sass</h3> <div class="circle light"></div> <div class="circle black"></div> <div class="circle bg"> </div> <div class="wrapper" data-anim="base"> <div class="circle" data-anim="base left"></div> </div> </div> <div class="skill s_php"> <h3>php</h3> <div class="circle light"></div> <div class="circle black"></div> <div class="circle bg"> </div> <div class="wrapper" data-anim="base"> <div class="circle" data-anim="base left"></div> </div> </div> </div> </div>
</section>
<section class="my-pro"> <div class="main"> <h2>My projects</h2><a class="to-top" href="#top"> <div class="line n1"></div> <div class="line n2"></div></a> <div class="pro"><a href="http://aortan1.github.io/decoblog/" target="_blank"> <div class="mask"> <p class="view">view site html</p> <p class="name">Decoblog</p> </div><img src="port-i/pro-decoblog-2.jpg"/></a></div> <div class="pro"><a href="http://aortan1.github.io/magazine/" target="_blank"> <div class="mask"> <p class="view">view site html</p> <p class="name">Blog Magazine</p> </div><img src="port-i/pro-magazine.jpg"/></a></div> <div class="pro"><a href="http://aortan1.github.io/skybox/" target="_blank"> <div class="mask"> <p class="view">view site html</p> <p class="name">Skybox</p> </div><img src="port-i/pro-skybox.jpg"/></a></div> <div class="pro"><a href="http://aortan1.github.io/viewport/" target="_blank"> <div class="mask"> <p class="view">view site html</p> <p class="name">Viewport</p> </div><img src="port-i/pro-viewport.jpg"/></a></div> <div class="pro"><a href="http://aortan1.github.io/notify/" target="_blank"> <div class="mask"> <p class="view">view site html </p> <p class="name">Notify</p> </div><img src="port-i/pro-notify.jpg"/></a></div> <div class="pro"><a href="http://aortan1.github.io/mastermind" target="_blank"> <div class="mask"> <p class="view">view site html</p> <p class="name">Game Mastermind</p> </div><img src="port-i/pro-mastermind-58b.jpg"/></a></div> <div class="pro"><a href="http://aortan1.github.io/rubiks-cube/" target="_blank"> <div class="mask"> <p class="view">view site html</p> <p class="name">Game Rubik’s Cube</p> </div><img src="port-i/pro-rubiks-cube4.jpg"/></a></div> <div class="pro"><a href="https://youtu.be/ViwUo4oVN8Y" target="_blank"> <div class="mask"> <p class="view">view promo video</p> <p class="name">Online Poker Game. PHP.</p> </div><img src="port-i/pro-poker.jpg"/></a></div> </div>
</section>
<section class="footer"> <div class="main"> <form action=""><a class="contact-me" type="submit">contact me</a></form> <p class="thanks">Thank you for your watching!</p> </div>
</section> <script src="js/index.js"></script>
</body>
</html>

A Pen by Alexandr - Script Codes CSS Codes

* { padding: 0; margin: 0; outline: 0;
}
img { border: 0;
}
ul { list-style: none;
}
body { font: 400 normal 16px "Roboto", "Open Sans", sans-serif; color: #fff; background: #161613;
}
body a.contact-me { position: relative; overflow: hidden; bottom: -20px; display: block; width: 268px; padding: 15px 0 0 32px; height: 40px; background: #83ad05 url("http://fs65.www.ex.ua/get/760196138981/266899895/sprite_p06.png") 56px -89px; color: white; font-size: 20px; text-transform: uppercase; text-decoration: none; cursor: pointer; margin: 0px auto; border-radius: 5px;
}
body a.contact-me:after { content: ""; position: absolute; transition-property: left, top, opacity; transition-duration: 1.5s, 1.5s, 0.5s; transition-timing-function: ease; top: -550%; left: -210%; width: 200%; height: 500%; opacity: 0; transform: rotate(30deg); background: rgba(255, 255, 255, 0.13); background: linear-gradient(to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 88%, rgba(255, 255, 255, 0.5) 96%, rgba(255, 255, 255, 0) 100%);
}
body a.contact-me:hover:after { opacity: 1; top: -300%; left: -70%; transition-property: left, top, opacity; transition-duration: 1s, 1s, 0.15s; transition-timing-function: ease;
}
body a.contact-me:active:after { opacity: 0;
}
body a.ongit { border: 0px solid red;
}
body .main { text-align: center; margin: 0 auto; border: 0px solid red;
}
body .main h1 { color: #fff; font-size: 40px; font-weight: 300; margin: 45px 0 0 0; transition: 0.5s;
}
body .main h2 { width: 250px; margin: 0px auto; padding: 30px 0; font-size: 24px; color: #5e5f58; border: 0px solid green;
}
body .onsticky { width: 100%; height: 320px; background: #161613; display: none;
}
body section { border-top: 1px dotted #444;
}
body section.me { position: relative; height: 460px; background-color: black; margin: 0 auto; background: url("http://aortan1.github.io/port-i/gb-cod-02.png"); background-size: cover; background-attachment: fixed;
}
body section.me a.ongit { position: absolute; top: 220px; width: 100%; height: 190px;
}
body section.me .main { text-align: center; padding-top: 65px;
}
body section.me .main .div-i { width: 100px; height: 100px; margin: 0 auto; transition: 0.7s;
}
body section.me .main .div-i img.img-me { width: 100px; height: 100px; border-radius: 50%; transition: 0.5s; box-shadow: 0 0 0 #222;
}
body section.me .main .div-i:hover img.img-me { transform: scale(2); transition: 0.7s; box-shadow: 10px 5px 10px #111;
}
body section.me .main .div-i:hover + h1 { transform: translateY(20px);
}
body section.me .main .div-i:hover + h1 + p.coder { transform: translateY(15px);
}
body section.me .main p.coder { color: #dcd067; font-size: 25px; margin: 5px 0 0 0; transition: 0.5s;
}
body section.me .main p.about { color: #888; font-size: 14px; margin: 40px auto; width: 585px;
}
body section.info { height: 320px; background-color: #272822;
}
body section.info ul.ul-info { position: relative; width: 560px; height: 165px; border: 0px solid red; margin: 100px auto 0; padding: 0 0 0 70px; transition: 0.5s;
}
body section.info ul.ul-info li { position: relative; float: left; height: 50%; padding: 0px 0 0 0; text-align: left; font-size: 14px; width: 49%; border: 0px solid green; opacity: 0.9;
}
body section.info ul.ul-info li:before, body section.info ul.ul-info li:after { content: ""; position: relative; float: left; display: block; width: 55px; height: 45px; margin-top: -3px; background: url("http://fs65.www.ex.ua/get/760196138981/266899895/sprite_p06.png"); opacity: 1; transition: 0.5s;
}
body section.info ul.ul-info li:after { position: absolute; top: 0; opacity: 0;
}
body section.info ul.ul-info li p { padding: 0 0 5px 0; font-weight: 600; opacity: 0.5; transition: 0.5s;
}
body section.info ul.ul-info li:hover p { opacity: 1; transition: 0.5s;
}
body section.info ul.ul-info li a { text-decoration: none; color: white; font-size: 20px; border-bottom: 1px dotted transparent; transition: 0.5s;
}
body section.info ul.ul-info li:hover a { border-bottom: 1px dotted; transition: 0.5s;
}
body section.info ul.ul-info li:nth-child(1), body section.info ul.ul-info li:nth-child(2) { clear: left;
}
body section.info ul.ul-info li:nth-child(3), body section.info ul.ul-info li:nth-child(4) { float: right; top: -51%;
}
body section.info ul.ul-info li.call, body section.info ul.ul-info li.call a { color: #ac85ff; cursor: default;
}
body section.info ul.ul-info li.call:hover, body section.info ul.ul-info li.call a:hover { color: #ad85ff;
}
body section.info ul.ul-info li.skype, body section.info ul.ul-info li.skype a { color: #67d9f0;
}
body section.info ul.ul-info li.skype:hover, body section.info ul.ul-info li.skype a:hover { color: #68d9f1;
}
body section.info ul.ul-info li.mail, body section.info ul.ul-info li.mail a { color: #f82840;
}
body section.info ul.ul-info li.mail:hover, body section.info ul.ul-info li.mail a:hover { color: #f92a42;
}
body section.info ul.ul-info li.git, body section.info ul.ul-info li.git a { color: #a8e000;
}
body section.info ul.ul-info li.git:hover, body section.info ul.ul-info li.git a:hover { color: #a9e100;
}
body section.info ul.ul-info li:hover:before { opacity: 0;
}
body section.info ul.ul-info li:hover:after { opacity: 1;
}
body section.info ul.ul-info li.call:before { background-position: 0 -36px;
}
body section.info ul.ul-info li.skype:before { background-position: -159px -38px;
}
body section.info ul.ul-info li.mail:before { background-position: -76px -31px;
}
body section.info ul.ul-info li.git:before { background-position: -240px -38px;
}
body section.info ul.ul-info li.call:after { background-position: 0 -276px;
}
body section.info ul.ul-info li.skype:after { background-position: -159px -278px;
}
body section.info ul.ul-info li.mail:after { background-position: -76px -271px;
}
body section.info ul.ul-info li.git:after { background-position: -240px -278px;
}
.sticky .onsticky { display: block;
}
.sticky section.me .main { width: 100%; height: 60px; background-color: rgba(23, 23, 20, 0.9); position: fixed; padding: 0; margin: 0; z-index: 2; top: 0;
}
.sticky section.me .main .div-i { position: absolute; top: 0; left: 161px; width: 80px; height: 80px; transition: 0.5s;
}
.sticky section.me .main .div-i .img-me { width: 80px; height: 80px;
}
.sticky section.me .main h1 { transition: 0.5s; position: absolute; margin: 0; top: 9px; left: 271px; font-size: 20px; transition: 0.5s;
}
.sticky section.me .main p.coder { position: absolute; margin: 0; top: 37px; left: 271px; font-size: 16px; transition: 0.5s;
}
.sticky section.me .main p.about, .sticky section.me .main a.contact-me { display: none;
}
.sticky section.info { position: fixed; z-index: 3; width: 100%; border: 0px solid white; height: 0; top: 5px;
}
.sticky section.info .main { position: absolute; width: 100%;
}
.sticky section.info .main ul.ul-info { transition: 0.5s; width: 100%; height: 60px; margin: 0; padding: 0 0 0 500px; border: 0px solid blue;
}
.sticky section.info .main ul.ul-info li:nth-child(n) { top: 0; min-width: 155px; width: 11%; clear: right; display: inline-block; float: left; height: 60px; padding: 13px 0 0 10px;
}
.sticky section.info .main ul.ul-info li:nth-child(n) p { display: none;
}
.sticky section.info .main ul.ul-info li:nth-child(n) a { font-size: 14px;
}
.sticky section.info .main ul.ul-info li:nth-child(n):before, .sticky section.info .main ul.ul-info li:nth-child(n):after { position: relative; width: 22px; height: 22px; padding-right: 8px; transition: 0.5s;
}
.sticky section.info .main ul.ul-info li:nth-child(n):after { position: absolute; top: 14px;
}
.sticky section.info .main ul.ul-info li:nth-child(n).call:before { background-position: 0 -180px;
}
.sticky section.info .main ul.ul-info li:nth-child(n).skype:before { background-position: -159px -180px;
}
.sticky section.info .main ul.ul-info li:nth-child(n).mail:before { background-position: -76px -180px;
}
.sticky section.info .main ul.ul-info li:nth-child(n).git:before { background-position: -240px -180px;
}
.sticky section.info .main ul.ul-info li:nth-child(n).call:after { background-position: 0 -420px;
}
.sticky section.info .main ul.ul-info li:nth-child(n).skype:after { background-position: -159px -420px;
}
.sticky section.info .main ul.ul-info li:nth-child(n).mail:after { background-position: -76px -420px;
}
.sticky section.info .main ul.ul-info li:nth-child(n).git:after { background-position: -240px -420px;
}
.sticky section.info .main ul.ul-info li:nth-child(3) { border: 0px solid red; margin-left: -50px;
}
.for-to-top section.my-pro a.to-top { position: fixed; top: calc(100% - 120px);
}
body section.knowlidge { height: 280px; background: url("http://aortan1.github.io/port-i/gb-cod-02.png"); background-size: cover; background-attachment: fixed;
}
body section.knowlidge h3 { font-size: 24px; margin-top: 45px; text-transform: uppercase;
}
body section.knowlidge .skills { position: relative; width: 1050px; height: 120px; margin: 0 auto; border: 0px solid white;
}
body section.knowlidge .skills .wrapper { margin: 0px 0px; width: 120px; height: 120px; position: absolute; top: 0; clip: rect(0px, 120px, 120px, 60px);
}
body section.knowlidge .skills .skill { float: left; width: 120px; height: 120px; position: relative; margin-right: 35px; border: 0px solid red; transition: 5s; opacity: 0.9;
}
body section.knowlidge .skills .skill:hover, body section.knowlidge .skills .skill.ho { opacity: 1; transition: 0.3s;
}
body section.knowlidge .skills .skill:hover .circle.bg, body section.knowlidge .skills .skill.ho .circle.bg { opacity: 0.5; transition: 0.2s;
}
body section.knowlidge .skills .skill.s_html { color: #f2273e;
}
body section.knowlidge .skills .skill.s_html .circle { border-color: #f2273e;
}
body section.knowlidge .skills .skill.s_html:hover .circle.bg, body section.knowlidge .skills .skill.s_html.ho .circle.bg { box-shadow: -24px 15px 50px #f2273e;
}
body section.knowlidge .skills .skill.s_css { color: #a781f8;
}
body section.knowlidge .skills .skill.s_css .circle { border-color: #a781f8;
}
body section.knowlidge .skills .skill.s_css:hover .circle.bg, body section.knowlidge .skills .skill.s_css.ho .circle.bg { box-shadow: -16px 15px 50px #a781f8;
}
body section.knowlidge .skills .skill.s_js { color: #ff9a05;
}
body section.knowlidge .skills .skill.s_js .circle { border-color: #ff9a05;
}
body section.knowlidge .skills .skill.s_js:hover .circle.bg, body section.knowlidge .skills .skill.s_js.ho .circle.bg { box-shadow: -8px 15px 50px #ff9a05;
}
body section.knowlidge .skills .skill.s_jquery { color: #a5db00;
}
body section.knowlidge .skills .skill.s_jquery .circle { border-color: #a5db00;
}
body section.knowlidge .skills .skill.s_jquery:hover .circle.bg, body section.knowlidge .skills .skill.s_jquery.ho .circle.bg { box-shadow: 0px 15px 50px #a5db00;
}
body section.knowlidge .skills .skill.s_jade { color: #67dcf3;
}
body section.knowlidge .skills .skill.s_jade .circle { border-color: #67dcf3;
}
body section.knowlidge .skills .skill.s_jade:hover .circle.bg, body section.knowlidge .skills .skill.s_jade.ho .circle.bg { box-shadow: 8px 15px 50px #67dcf3;
}
body section.knowlidge .skills .skill.s_sass { color: #FFEB3B;
}
body section.knowlidge .skills .skill.s_sass .circle { border-color: #FFEB3B;
}
body section.knowlidge .skills .skill.s_sass:hover .circle.bg, body section.knowlidge .skills .skill.s_sass.ho .circle.bg { box-shadow: 16px 15px 50px #FFEB3B;
}
body section.knowlidge .skills .skill.s_php { color: #9E9E9E;
}
body section.knowlidge .skills .skill.s_php .circle { border-color: #9E9E9E;
}
body section.knowlidge .skills .skill.s_php:hover .circle.bg, body section.knowlidge .skills .skill.s_php.ho .circle.bg { box-shadow: 24px 15px 50px #9E9E9E;
}
body section.knowlidge .skills .skill:last-child { margin-right: 0;
}
body section.knowlidge .skills .circle { width: 110px; height: 110px; border: 5px solid red; border-radius: 50%; position: absolute; top: 0; clip: rect(0px, 60px, 120px, 0px); transition: 5s;
}
body section.knowlidge .skills .circle.bg { clip: auto; opacity: 0.4;
}
body section.knowlidge .skills .circle.black { clip: auto; opacity: 1; border: 5px solid #161613 !important;
}
body section.knowlidge .skills .circle.light { clip: auto; opacity: 1; width: 120px; height: 120px; border-width: 0;
}
body .ani { transition: 5s;
}
body .ani div[data-anim~=base] { animation-iteration-count: 1; animation-fill-mode: forwards; animation-timing-function: linear;
}
body .ani .wrapper[data-anim~=wrapper] { animation-duration: 0.01s; animation-delay: 0.4s; animation-name: close-wrapper;
}
@keyframes blow { 0% { box-shadow: 0 0 0; opacity: 0.5; } 5% { box-shadow: 0 0 50px; opacity: 1; } 100% { box-shadow: 0 0 0; opacity: 0.7; }
}
body .ani .circle.light { animation-iteration-count: 1; animation-duration: 20s; animation-name: blow;
}
body .ani .circle[data-anim~=left] { animation-duration: 0.8s; animation-name: left-spin;
}
body .ani .circle[data-anim~=right] { animation-duration: 0.4s; animation-name: right-spin;
}
body .ani .s_html .circle[data-anim~=left] { animation-duration: 0.6s; animation-name: left-spin-ht;
}
body .ani .s_css .circle[data-anim~=left] { animation-duration: 0.6s; animation-name: left-spin-cs;
}
body .ani .s_js .circle[data-anim~=left] { animation-duration: 0.264s; animation-name: left-spin-js;
}
body .ani .s_jquery .circle[data-anim~=left] { animation-duration: 0.4s; animation-name: left-spin-jq;
}
body .ani .s_jade .circle[data-anim~=left] { animation-duration: 0.528s; animation-name: left-spin-ja;
}
body .ani .s_sass .circle[data-anim~=left] { animation-duration: 0.264s; animation-name: left-spin-sa;
}
body .ani .s_php .circle[data-anim~=left] { animation-duration: 0.2s; animation-name: left-spin-ph;
}
body .ani .s_html div[data-anim~=wrapper] { animation-delay: 0.4s;
}
body .ani .s_css div[data-anim~=base], body .ani .s_css .light { animation-delay: 0.4s;
}
body .ani .s_css div[data-anim~=wrapper] { animation-delay: 0.8s;
}
body .ani .s_js div[data-anim~=base], body .ani .s_js .light { animation-delay: 0.8s;
}
body .ani .s_js div[data-anim~=wrapper] { animation-delay: 1.2s;
}
body .ani .s_jquery div[data-anim~=base], body .ani .s_jquery .light { animation-delay: 1.2s;
}
body .ani .s_jquery div[data-anim~=wrapper] { animation-delay: 1.6s;
}
body .ani .s_jade div[data-anim~=base], body .ani .s_jade .light { animation-delay: 1.6s;
}
body .ani .s_jade div[data-anim~=wrapper] { animation-delay: 2s;
}
body .ani .s_sass div[data-anim~=base], body .ani .s_sass .light { animation-delay: 2s;
}
body .ani .s_sass div[data-anim~=wrapper] { animation-delay: 2.4s;
}
body .ani .s_php div[data-anim~=base], body .ani .s_php .light { animation-delay: 2.4s;
}
body .ani .s_php div[data-anim~=wrapper] { animation-delay: 2.8s;
}
@keyframes right-spin { from { transform: rotate(0deg); } to { transform: rotate(180deg); }
}
@keyframes left-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
@keyframes left-spin-ht { from { transform: rotate(0deg); } to { transform: rotate(270deg); }
}
@keyframes left-spin-cs { from { transform: rotate(0deg); } to { transform: rotate(270deg); }
}
@keyframes left-spin-js { from { transform: rotate(0deg); } to { transform: rotate(118.8deg); }
}
@keyframes left-spin-jq { from { transform: rotate(0deg); } to { transform: rotate(180deg); }
}
@keyframes left-spin-ja { from { transform: rotate(0deg); } to { transform: rotate(237.6deg); }
}
@keyframes left-spin-sa { from { transform: rotate(0deg); } to { transform: rotate(118.8deg); }
}
@keyframes left-spin-ph { from { transform: rotate(0deg); } to { transform: rotate(90deg); }
}
@keyframes close-wrapper { to { clip: rect(auto, auto, auto, auto); }
}
body section.my-pro { position: relative; background-color: #272822; border: 1px dotted #444; border-width: 1px 0 1px 0;
}
body section.my-pro h2 { padding: 60px 0;
}
body section.my-pro a.to-top { position: absolute; top: 320px; left: 170px; width: 54px; height: 54px; border: 4px solid #fff; opacity: 0.2; border-radius: 50%; background-color: transparent;
}
body section.my-pro a.to-top .line { position: absolute; top: 8px; left: 20px; z-index: 1; width: 10px; height: 0px; border: 2px solid #fff;
}
body section.my-pro a.to-top .line.n1 { transform: rotate(-40deg); top: 23px; left: 15px;
}
body section.my-pro a.to-top .line.n2 { transform: rotate(40deg); top: 23px; left: 25px;
}
body section.my-pro a.to-top:hover { opacity: 0.4;
}
body section.my-pro .pro { position: relative; width: 940px; margin: 0 auto 80px; border: 0px solid white;
}
body section.my-pro .pro img { width: 940px;
}
body section.my-pro .pro .mask { position: absolute; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.9) 100%); transition: 0.5s; overflow: hidden;
}
body section.my-pro .pro .mask p.view { width: 300px; height: 40px; padding-top: 16px; margin: 90px auto; border-radius: 5px; border: 2px solid white; font-size: 22px; color: white; text-transform: uppercase; background: rgba(0, 0, 0, 0.6); opacity: 0.5;
}
body section.my-pro .pro .mask:hover { background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
}
body section.my-pro .pro .mask:hover p.view { opacity: 0.9; color: #a5db00; border-color: #a5db00; transition: 0.5s;
}
body section.my-pro .pro .mask p.name { position: absolute; width: 100%; bottom: -40px; color: #fff; text-shadow: #222 1px 1px; text-align: left; font-size: 20px; padding: 10px 0 10px 20px; background: rgba(0, 0, 0, 0.5); opacity: 0.8; transition: 0.5s;
}
body section.my-pro .pro .mask:hover p.name { bottom: 0px; transition: 0.5s;
}
body section.footer { padding-top: 20px; height: 300px; background-color: #272822;
}
body section.footer a.contact-me { margin: 35px auto 80px;
}
body section.footer p.thanks { font-size: 18px;
}

A Pen by Alexandr - Script Codes JS Codes

// $(document).ready (function(){ window.onscroll = function() { var scrolled = window.pageYOffset; var winh = window.innerHeight; var h_light=00, h_ani=300, h_panel=670, h_to_top=1500; if (scrolled<h_ani) $('.skills').removeClass('ani'); if (scrolled>h_ani) { $('.skills').removeClass('ani').addClass('ani'); } // if (scrolled>h_light && scrolled<h_light+200) $('.skill').removeClass('ho').delay(2000).addClass('ho'); // if (scrolled<h_light || scrolled>h_light+200) $('.skill').removeClass('ho'); if (scrolled>h_panel) $('body').addClass('sticky'); if (scrolled<h_panel) $('body').removeClass('sticky'); if (scrolled>h_to_top-winh) $('body').addClass('for-to-top'); if (scrolled<h_to_top-winh) $('body').removeClass('for-to-top'); }; // }); // $('a.to-top').click(function () { // $('body,html').animate({ // scrollTop: 0 // }, 1000); // return false; // });
// $(".animating").each(function () {
// var block = $(this);
// $(window).scroll(function() {
// var top = block.offset().top;
// var bottom = block.height()+top;
// top = top - $(window).height();
// var scroll_top = $(this).scrollTop();
// if ((scroll_top > top) && (scroll_top < bottom)) {
// if (!block.hasClass("animated")) {
// block.addClass("animated");
// }
// } else {
// //block.removeClass("animated");
// }
// });
// });
// else $(".animating").removeClass("animating")
// $(window).scroll();
$(document).ready (function(){
// $('a.contact-me').hover(function fadeedge0(){
// $('h1').fadeTo(300,0.1);
// }); $('a.contact-me').click(function ffade(){ $('img.img-me').fadeTo(1000,0.0).fadeTo(1000,0.1).fadeTo(1000,1.0);	}); $('a.to-top').click(function(){ $("body").animate({scrollTop: 0}, 'slow'); $('section.me').fadeTo(1000,0.5).fadeTo(1000,1.0).fadeTo(1000,0.5).fadeTo(3000,1.0); }); // $("ul.ul-info li").hover(function() { // $(this).effect("shake", {distance: 5}, {direction: 'down'}); // });
});

Home Page	Home
Developer	Alexandr
Username	Aortan
Uploaded	July 30, 2022
Rating	3
Size	12,106 Kb
Views	68,816

Do you need developer help for A Pen by Alexandr?

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!

Alexandr (Aortan) Script Codes

Name	Size
Tooltips with BEM	3,455 Kb
Shape-outside	3,286 Kb
Mastermind	7,180 Kb
Overflow-wrap and white-space	2,790 Kb
Colorful flexblock	2,699 Kb
Tooltips	3,353 Kb
Webkit-scrollbar	3,612 Kb
My slider	5,494 Kb
Dir_tree	3,651 Kb
Color Game of Life	5,809 Kb

Create amazing marketing copy 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
Sencha Touch 2.3.1 Basic Grid Example	Trozdol	2,770 Kb
Break Out	AzazelN28	12,431 Kb
Filtering with shuffle.js	Deyand	2,712 Kb
Wip elementary os navbar	Nickcolley	2,993 Kb
Dragonball Dragon Radar	DouglasGlover	2,157 Kb
Spinners using Font Icons	Keyamoon	3,007 Kb
Word Wrap Algorithm for Multiline Canvas Text	Peterhry	2,349 Kb
My Interests	Anshusaxenaarora	2,015 Kb
Blockquote design	Sjmcpherson	1,863 Kb
Side Sliding Menu CSS	EduardL	4,388 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!