Image Slider
This is the simple image slider which is control by side arrows.
A Pen by Md. Farzan on CodePen.
View index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <!-- navbar header --> | |
| <div class="nav-header"> | |
| <div class="nav-brand"> | |
| <img src="https://s3-us-west-2.amazonaws.com/parallax-theme/assets/bradlogo2.png"> | |
| </div> | |
| <i class="fa fa-bars fa-3x"></i> | |
| <div class="header-links"> | |
| <ul> | |
| <li data-menuanchor="fourthPage"><a href="#contact">CONTACT</a></li> |
View index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="procatCont"> | |
| <div class="bg" style="background-image: url('https://c1.staticflickr.com/3/2840/32696355133_3f26ecb560_c.jpg');"></div> | |
| <div class="bg" style="background-image: url('https://c1.staticflickr.com/4/3817/33501650195_c99acb2a45_c.jpg');"></div> | |
| <div class="bg" style="background-image: url('https://c1.staticflickr.com/1/587/32676471984_e6c0834c37_c.jpg');"></div> | |
| <div class="bg" style="background-image: url('https://c1.staticflickr.com/4/3952/32709460544_19caaf27e8_c.jpg');"></div> | |
| <div class="bg" style="background-image: url('https://c1.staticflickr.com/4/3945/33558914345_bcff4e9134_b.jpg');"></div> | |
| <div class="bg" style="background-image: url('https://c1.staticflickr.com/3/2861/33473554256_938d6663b0_b.jpg');"></div> | |
| <div class="bg" style="background-image: url('https://c1.staticflickr.com/4/3837/32645765174_309b0d363c_h.jpg');"></div> | |
| <div class="bg" style="background-image: url('https://c1.staticflickr.com/4/3916/32679136293_0b8c44629f_h.jpg');"></div> | |
| <div class="bg" s |
Aberam-w
/ e-commerce-product-delicious-apples.markdown
Created
September 7, 2023 08:04
E-commerce Product (Delicious Apples)
View e-commerce-product-delicious-apples.markdown
E-commerce Product (Delicious Apples)
A concept for a product showcase for an e-commerce, design from dribbble shot of Rodrigo Ramos.
A Pen by John Mantas on CodePen.
View index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="centeri"> | |
| <div class="card"> | |
| <img src="https://i.pinimg.com/originals/10/f7/41/10f7414c0d4984194f5e1316bd61ca0d.png" class="foto" style="width:100%"> | |
| <header> | |
| <h1>NIKE AM90id</h1> | |
| </div> | |
| </div> | |
| </body> |
Aberam-w
/ flex-product-carousel-using-slick-carousel.markdown
Created
September 1, 2023 04:27
Flex Product Carousel (Using Slick Carousel)
View index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-xs-11 col-md-10 col-centered"> | |
| <div id="carousel" class="carousel slide" data-ride="carousel" data-type="multi" data-interval="2500"> | |
| <div class="carousel-inner"> | |
| <div class="item active"> | |
| <div class="carousel-col"> | |
| <div class="block red img-responsive"></div> | |
| </div> |
Aberam-w
/ flickity-hero-slider-with-parallax-background-images.markdown
Created
April 11, 2023 07:31
Flickity - Hero Slider with Parallax Background Images
View flickity-hero-slider-with-parallax-background-images.markdown
Flickity - Hero Slider with Parallax Background Images
Flickity slider with parallax background images. The parallax effect is done with Flickity's scroll event.