A Pen by Elena
How do I make an a pen by elena?
What is a a pen by elena? How do you make a a pen by elena? This script and codes were developed by Elena on 17 December 2022, Saturday.
A Pen by Elena - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Elena</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.3/jquery.fancybox.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.3/fancybox_overlay.png'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *,
*:before,
*:after { box-sizing: border-box;
}
img,
iframe,
video { max-width: 100%; width: 100%; vertical-align: middle; border: 0; display: block; margin: 0 auto;
}
.one-product { max-width: 500px; width: 100%; margin: 2rem auto;
}
.one-product__slider { width: 60%; padding: 2rem; border: 1px solid #777; display: inline-block; vertical-align: top;
}
.one-product__slider_navigation { width: 100px; display: inline-block; vertical-align: top;
}
.one-product__slider_navigation .item { border: 1px solid #777; padding: .8rem 1.5rem; margin: 2%; width: 80px !important; height: 80px;
}
.one-product__slider_navigation .item img { max-width: 70px;
}
.zoomContainer { z-index: 9000;
}
@media screen and (max-width: 500px) { .one-product__slider { width: 100%; } .one-product__slider_navigation { width: 100%; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="one-product"> <div class="one-product__slider"> <div class="item"> <a class="fancybox" rel="group" href="http://s.4pda.to/aULgowJXGgv25ovfwi23WK8HyFmx1mTHgQOuO8tlz2j0mEY2VXK.jpg?_=0"> <img src="http://s.4pda.to/aULgowJXGgv25ovfwi23WK8HyFmx1mTHgQOuO8tlz2j0mEY2VXK.jpg?_=0" alt="" data-zoom-image="http://s.4pda.to/aULgowJXGgv25ovfwi23WK8HyFmx1mTHgQOuO8tlz2j0mEY2VXK.jpg?_=0" class="zoom"/> </a> </div> <div class="item"> <a class="fancybox" rel="group" href="http://s.4pda.to/aULgoz1BKZvXrrS8p3xw2ESS47ek8z2pRUIMcxz1Nd7x7X3mXa0Hi.jpg?_=0"> <img src="http://s.4pda.to/aULgoz1BKZvXrrS8p3xw2ESS47ek8z2pRUIMcxz1Nd7x7X3mXa0Hi.jpg?_=0" alt="" data-zoom-image="http://s.4pda.to/aULgoz1BKZvXrrS8p3xw2ESS47ek8z2pRUIMcxz1Nd7x7X3mXa0Hi.jpg?_=0" class="zoom"/> </a> </div> <div class="item"> <a class="fancybox" rel="group" href="http://s.4pda.to/aULgowJXGgv25ovfwi23WK8HyFmx1mTHgQOuO8tlz2j0mEY2VXK.jpg?_=0"> <img src="http://s.4pda.to/aULgowJXGgv25ovfwi23WK8HyFmx1mTHgQOuO8tlz2j0mEY2VXK.jpg?_=0" alt="" data-zoom-image="http://s.4pda.to/aULgowJXGgv25ovfwi23WK8HyFmx1mTHgQOuO8tlz2j0mEY2VXK.jpg?_=0" class="zoom"/> </a> </div> <div class="item"> <a class="fancybox" rel="group" href="http://s.4pda.to/aULgoz1BKZvXrrS8p3xw2ESS47ek8z2pRUIMcxz1Nd7x7X3mXa0Hi.jpg?_=0"> <img src="http://s.4pda.to/aULgoz1BKZvXrrS8p3xw2ESS47ek8z2pRUIMcxz1Nd7x7X3mXa0Hi.jpg?_=0" alt="" data-zoom-image="http://s.4pda.to/aULgoz1BKZvXrrS8p3xw2ESS47ek8z2pRUIMcxz1Nd7x7X3mXa0Hi.jpg?_=0" class="zoom"/> </a> </div> </div> <div class="one-product__slider_navigation"> <div class="item"> <img src="http://s.4pda.to/aULgowJXGgv25ovfwi23WK8HyFmx1mTHgQOuO8tlz2j0mEY2VXK.jpg?_=0" alt="" /> </div> <div class="item"> <img src="http://s.4pda.to/aULgoz1BKZvXrrS8p3xw2ESS47ek8z2pRUIMcxz1Nd7x7X3mXa0Hi.jpg?_=0" alt="" /> </div> <div class="item"> <img src="http://s.4pda.to/aULgowJXGgv25ovfwi23WK8HyFmx1mTHgQOuO8tlz2j0mEY2VXK.jpg?_=0" alt="" /> </div> <div class="item"> <img src="http://s.4pda.to/aULgoz1BKZvXrrS8p3xw2ESS47ek8z2pRUIMcxz1Nd7x7X3mXa0Hi.jpg?_=0" alt="" /> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js'></script>
<script src='https://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
A Pen by Elena - Script Codes CSS Codes
*,
*:before,
*:after { box-sizing: border-box;
}
img,
iframe,
video { max-width: 100%; width: 100%; vertical-align: middle; border: 0; display: block; margin: 0 auto;
}
.one-product { max-width: 500px; width: 100%; margin: 2rem auto;
}
.one-product__slider { width: 60%; padding: 2rem; border: 1px solid #777; display: inline-block; vertical-align: top;
}
.one-product__slider_navigation { width: 100px; display: inline-block; vertical-align: top;
}
.one-product__slider_navigation .item { border: 1px solid #777; padding: .8rem 1.5rem; margin: 2%; width: 80px !important; height: 80px;
}
.one-product__slider_navigation .item img { max-width: 70px;
}
.zoomContainer { z-index: 9000;
}
@media screen and (max-width: 500px) { .one-product__slider { width: 100%; } .one-product__slider_navigation { width: 100%; }
}
A Pen by Elena - Script Codes JS Codes
// Slider | Product $('.one-product__slider').slick({ slidesToShow: 1, slidesToScroll: 1, asNavFor: '.one-product__slider_navigation', arrows: false, dots: false, infinite: true, focusOnSelect: true, fade: true, cssEase: 'linear' }); // Slider | one-product-slider $('.one-product__slider_navigation').slick({ slidesToShow: 3, slidesToScroll: 1, arrows: true, dots: false, infinite: true, asNavFor: '.one-product__slider', focusOnSelect: true, centerMode: false, vertical: true, responsive: [ { breakpoint: 500, settings: { arrows: false, vertical: false, } } ] });
$(document).ready(function() { $(".fancybox").fancybox({ afterShow: function(){ $(".fancybox-image").elevateZoom({ //zoomType: "inner", cursor: "crosshair", zoomType : "lens", scrollZoom : true, }); }, beforeClose: function(){ $(".zoomContainer").remove(); $('.zoomWindowContainer').remove(); $(".zoomLens").remove(); } });
});
Developer | Elena |
Username | semenchenko |
Uploaded | December 17, 2022 |
Rating | 3 |
Size | 3,573 Kb |
Views | 12,144 |
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!
Name | Size |
Walking skeleton only css | 9,064 Kb |
Pricing Table | 6,784 Kb |
Css piramide | 2,681 Kb |
Fish 2d game only CSS | 9,489 Kb |
CSS hover effect | 3,256 Kb |
Slider CSS Only | 8,018 Kb |
3d css cube | 4,578 Kb |
SVG WORD Path | 3,461 Kb |
Calc.js | 4,200 Kb |
Zen cube | 2,083 Kb |
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!
Name | Username | Size |
Fixed with using Calc | Tomleo | 2,542 Kb |
Sketchy Box | Mnicpt | 3,033 Kb |
Hc first draft | Stepfray | 5,104 Kb |
About Mazano | Kiti | 2,585 Kb |
Simple, flat contact form | Zeaklous | 2,719 Kb |
Portfolio page | Bhavya_j | 2,804 Kb |
Pure CSS read more toggle | Idered | 2,344 Kb |
Automatic scroll | Skeurentjes | 4,042 Kb |
Minimelephant | Smashlee | 2,507 Kb |
Process Accordion | Devilskitchen | 31,432 Kb |
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!