Explore

Developer
Juan Lois
Size
4,052 Kb
Views
6,072
  1. Explore Previews
  2. Explore HTML Codes
  3. Explore CSS Codes

How do I make an explore?

What is a explore? How do you make a explore? This script and codes were developed by Juan Lois on 22 January 2023, Sunday.

Explore Previews
IQ Test

Explore - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Explore</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Nunito+Sans:200,200i,300,300i,400,400i,600,600i,700,700i,900|Stardos+Stencil'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid">
<div class="row">
<section class="explore categories content-max-width"> <h2 class="col-md-12"><a title="beweb estudio" href="https://bewebestudio.es">beweb template</a></h2> <hr /> <div class="content-3-block"> <article class="col-sm-4 categorie"> <div class="img-explore"><img src="https://bewebestudio.es/wp-content/uploads/categorie-1.jpg" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span>Fashion</span></a></h3></div> </article> <article class="col-sm-4 categorie"> <div class="img-explore"><img src="https://bewebestudio.es/wp-content/uploads/categorie-2.jpg" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3><a href="#"> <span>Travel</span></a></h3></div> </article> <article class="col-sm-4 categorie"> <div class="img-explore"><img src="https://bewebestudio.es/wp-content/uploads/categorie-3.jpg" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span> Lifestyle</span></a></h3></div> </article> </div> </section>
<section class="explore fashion content-max-width"> <h2 class="col-md-12"><a title="beweb estudio" href="https://bewebestudio.es">Fashion</a></h2> <div class="content-3-block"> <article class="col-sm-4 categorie"> <div class="img-explore"><img src="https://i2.wp.com/webcorporativa.bewebestudio.es/wp-content/uploads/2016/01/servicios.jpg?resize=329%2C329&ssl=1" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span>Outfits</span></a></h3></div> </article> <article class="col-sm-4 categorie"> <div class="img-explore"><img src="https://i2.wp.com/webcorporativa.bewebestudio.es/wp-content/uploads/2016/01/servicios.jpg?resize=329%2C329&ssl=1" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3><a href="#"> <span>Haul</span></a></h3></div> </article> <article class="col-sm-4 categorie"> <div class="img-explore"><img src="https://i2.wp.com/webcorporativa.bewebestudio.es/wp-content/uploads/2016/01/servicios.jpg?resize=329%2C329&ssl=1" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span> MakeUp</span></a></h3></div> </article> </div> </section> <section class="explore outfits content-max-width"> <h2 class="col-md-12"><a title="beweb estudio" href="https://bewebestudio.es">Outfits</a></h2> <div class="content-3-block"> <article class="col-xs-6 col-sm-3 categorie"> <div class="img-explore"><img src="https://i2.wp.com/webcorporativa.bewebestudio.es/wp-content/uploads/2016/01/servicios.jpg?resize=329%2C329&ssl=1" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span>Classy</span></a></h3></div> </article> <article class="col-xs-6 col-sm-3 categorie"> <div class="img-explore"><img src="https://i2.wp.com/webcorporativa.bewebestudio.es/wp-content/uploads/2016/01/servicios.jpg?resize=329%2C329&ssl=1" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3><a href="#"> <span>Casual</span></a></h3></div> </article> <article class="col-xs-6 col-sm-3 categorie"> <div class="img-explore"><img src="https://i2.wp.com/webcorporativa.bewebestudio.es/wp-content/uploads/2016/01/servicios.jpg?resize=329%2C329&ssl=1" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span> Sporty</span></a></h3></div> </article> <article class="col-xs-6 col-sm-3 categorie"> <div class="img-explore"><img src="https://i2.wp.com/webcorporativa.bewebestudio.es/wp-content/uploads/2016/01/servicios.jpg?resize=329%2C329&ssl=1" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span> Retro</span></a></h3></div> </article> <article class="col-xs-6 col-sm-3 categorie"> <div class="img-explore"><img src="https://i2.wp.com/webcorporativa.bewebestudio.es/wp-content/uploads/2016/01/servicios.jpg?resize=329%2C329&ssl=1" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span> Alternative</span></a></h3></div> </article> <article class="col-xs-6 col-sm-3 categorie"> <div class="img-explore"><img src="https://i2.wp.com/webcorporativa.bewebestudio.es/wp-content/uploads/2016/01/servicios.jpg?resize=329%2C329&ssl=1" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span> Fitness</span></a></h3></div> </article> <article class="col-xs-6 col-sm-3 categorie"> <div class="img-explore"><img src="https://i2.wp.com/webcorporativa.bewebestudio.es/wp-content/uploads/2016/01/servicios.jpg?resize=329%2C329&ssl=1" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span> Night</span></a></h3></div> </article> <article class="col-xs-6 col-sm-3 categorie"> <div class="img-explore"><img src="https://i2.wp.com/webcorporativa.bewebestudio.es/wp-content/uploads/2016/01/servicios.jpg?resize=329%2C329&ssl=1" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span> Weekday</span></a></h3></div> </article> </div> </section>
<section class="explore colors content-max-width"> <h2 class="col-md-12"><a title="beweb estudio" href="https://bewebestudio.es">Colors</a></h2> <article class="col-xs-4 col-sm-2 col-md-1 categorie"> <div class="img-explore"><img src="https://i2.wp.com/webcorporativa.bewebestudio.es/wp-content/uploads/2016/01/servicios.jpg?resize=329%2C329&ssl=1" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span>Amarillo</span></a></h3></div> </article> <article class="col-xs-4 col-sm-2 col-md-1 categorie"> <div class="img-explore"><img src="http://www.rufflefabric.com/v/vspfiles/photos/RF-10BRIGHTPINKCASCADE54-2.jpg" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3><a href="#"> <span>Pink</span></a></h3></div> </article> <article class="col-xs-4 col-sm-2 col-md-1 categorie"> <div class="img-explore"><img src="https://bewebestudio.es/wp-content/uploads/influencerlife-explore_0010_look11_3671.jpg" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span>Red</span></a></h2></div> </article> <article class="col-xs-4 col-sm-2 col-md-1 categorie"> <div class="img-explore"><img src="https://i2.wp.com/webcorporativa.bewebestudio.es/wp-content/uploads/2016/01/servicios.jpg?resize=329%2C329&ssl=1" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3><a href="#"> <span>Orange</span></a></h3></div> </article> <article class="col-xs-4 col-sm-2 col-md-1 categorie"> <div class="img-explore"><img src="https://bewebestudio.es/wp-content/uploads/influencerlife-explore_0009_SS17_LEON_TJ_SOLEIL_JERSEYa.jpg" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span>Yellow</span></a></h3></div> </article> <article class="col-xs-4 col-sm-2 col-md-1 categorie"> <div class="img-explore"><img src="https://i2.wp.com/webcorporativa.bewebestudio.es/wp-content/uploads/2016/01/servicios.jpg?resize=329%2C329&ssl=1" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3><a href="#"> <span>Green</span></a></h3></div> </article> <article class="col-xs-4 col-sm-2 col-md-1 categorie"> <div class="img-explore"><img src="https://i2.wp.com/webcorporativa.bewebestudio.es/wp-content/uploads/2016/01/servicios.jpg?resize=329%2C329&ssl=1" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span>blue</span></a></h3></div> </article> <article class="col-xs-4 col-sm-2 col-md-1 categorie"> <div class="img-explore"><img src="https://bewebestudio.es/wp-content/uploads/influencerlife-explore_0007_BRATISLAVA_1_2048x2048.jpg" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3><a href="#"> <span>Purple</span></a></h3></div> </article> <article class="col-xs-4 col-sm-2 col-md-1 categorie"> <div class="img-explore"><img src="https://i2.wp.com/webcorporativa.bewebestudio.es/wp-content/uploads/2016/01/servicios.jpg?resize=329%2C329&ssl=1" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span>brown</span></a></h3></div> </article> <article class="col-xs-4 col-sm-2 col-md-1 categorie"> <div class="img-explore"><img src="https://i2.wp.com/webcorporativa.bewebestudio.es/wp-content/uploads/2016/01/servicios.jpg?resize=329%2C329&ssl=1" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3><a href="#"> <span>Black</span></a></h3></div> </article> <article class="col-xs-4 col-sm-2 col-md-1 categorie"> <div class="img-explore"><img src="https://bewebestudio.es/wp-content/uploads/influencerlife-explore_0006_erin_fetherston_sienna_vow_to_be_chic_detail.jpg" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span>White</span></a></h3></div> </article> <article class="col-xs-4 col-sm-2 col-md-1 categorie"> <div class="img-explore"><img src="https://i2.wp.com/webcorporativa.bewebestudio.es/wp-content/uploads/2016/01/servicios.jpg?resize=329%2C329&ssl=1" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3><a href="#"> <span>Grey</span></a></h3></div> </article> </section> <section class="explore brands content-max-width"> <h2 class="col-md-12"><a title="beweb estudio" href="https://bewebestudio.es">Brands</a></h2> <article class="col-xs-4 col-sm-2 col-md-1 categorie"> <div class="img-explore"><img src="https://bewebestudio.es/wp-content/uploads/influencerlife-explore_0005_zara-logo.jpg" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span>Zara</span></a></h3></div> </article> <article class="col-xs-4 col-sm-2 col-md-1 categorie"> <div class="img-explore"><img src="https://bewebestudio.es/wp-content/uploads/influencerlife-explore_0002_Actual_logo_pull_and_bear.jpg" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3><a href="#"> <span>Pull&Bear</span></a></h3></div> </article> <article class="col-xs-4 col-sm-2 col-md-1 categorie"> <div class="img-explore"><img src="https://bewebestudio.es/wp-content/uploads/influencerlife-explore_0000_Bershka_logo.jpg" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span>Bershka</span></a></h2></div> </article> <article class="col-xs-4 col-sm-2 col-md-1 categorie"> <div class="img-explore"><img src="https://bewebestudio.es/wp-content/uploads/influencerlife-explore_0001_springfield.jpg" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span>Springfield</span></a></h3></div> </article> <article class="col-xs-4 col-sm-2 col-md-1 categorie"> <div class="img-explore"><img src="https://bewebestudio.es/wp-content/uploads/influencerlife-explore_0003_lacoste.jpg" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span>Lacoste</span></a></h3></div> </article> <article class="col-xs-4 col-sm-2 col-md-1 categorie"> <div class="img-explore"><img src="https://bewebestudio.es/wp-content/uploads/influencerlife-explore_0004_2000px-HM-Logo.svg_.jpg" alt="fashion-categorie" title="fashion"></div> <div class="panel col-md-12"><h3> <a href="#"><span>H&M</span></a></h3></div> </article> </section>
</div>
</div> <footer> <div class="content-max-width"> <div class="menu menu-footer-1 col-sm-3"> <h3>Site map</h3> <ul class="col-2"> <li><a href="#">Get premium</a></li> <li><a title="anchortext" href="#">Explore</a></li> <li><a title="anchortext" href="#">Influencers</a></li> <li><a title="anchortext" href="#">Blog</a></li> <li><a title="anchortext" href="#">New Influencer</a></li> <li><a title="anchortext" href="#">Terms&conditions</a></li> <li><a title="anchortext" href="#">Contacto</a></li> <li><a title="anchortext" href="#">Sing Up</a></li> </ul> </div> <div class="menu menu-footer-2 col-xs-4 col-sm-2"> <h3>Categories</h3> <ul> <li><a href="#">Get premium</a></li> <li><a title="anchortext" href="#">Fashion</a></li> <li><a title="anchortext" href="#">Travel</a></li> <li><a title="anchortext" href="#">Lifestyle</a></li> <li><a title="anchortext" href="#">Outfits</a></li> <li><a title="anchortext" href="#">Haul</a></li> <li><a title="anchortext" href="#">MakeUp</a></li> </ul> </div> <div class="menu menu-footer-3 col-xs-12 col-sm-3"> <h3>Outfits</h3> <ul class="col-2"> <li><a title="anchortext" href="#">Weekday</a></li> <li><a title="anchortext" href="#">Fitnes</a></li> <li><a title="anchortext" href="#">Classy</a></li> <li><a title="anchortext" href="#">Casual</a></li> <li><a title="anchortext" href="#">Alternative</a></li> <li><a title="anchortext" href="#">Night</a></li> <li><a title="anchortext" href="#">Retro</a></li> <li><a title="anchortext" href="#">Sporty</a></li> </ul> </div> <div class="menu menu-footer-4 col-xs-6 col-sm-2"> <h3>Blog</h3> <ul> <li><a title="anchortext" href="#">News</a></li> <li><a title="anchortext" href="#">Influencers</a></li> <li><a title="anchortext" href="#">Press</a></li> <li><a title="anchortext" href="#">Curious</a></li> <li><a title="anchortext" href="#">Other</a></li> </ul> </div> <div class="menu menu-footer-5 col-xs-6 col-sm-2"> <h3>Social</h3> <ul> <li><a title="anchortext" href="#">facebook</a></li> <li><a title="anchortext" href="#">Twitter</a></li> <li><a title="anchortext" href="#">Google+</a></li> <li><a title="anchortext" href="#">Instagram</a></li> </ul> </div> </div> <div class="col-md-12 logo-footer"><a href="#" title="home"><img alt="logo-influencerlife" title="logo-influencerlife" src="https://bewebestudio.es/wp-content/uploads/logo-influencerlife-footer-1.png"> </div> </footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
</body>
</html>

Explore - Script Codes CSS Codes

body{font-family: 'Nunito Sans', sans-serif;}
a, img, article{-moz-transition: all 0.4s ease-out;-o-transition: all 0.4s ease-out;-webkit-transition: all 0.4s ease-out;-ms-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
a:hover{text-decoration:none;}
.explore h2{border-bottom: solid 2px #F7CA18; padding-bottom:10px; margin-bottom:40px; margin-top:40px; background-clip:content-box;}
.explore h2 a{ color:#999; }
section{width:100%;}
section article{margin-bottom:28px; border:none;}
section.categories .content-3-block, section.fashion .content-3-block{max-width:1200px; margin:0px auto;}
section.colors{padding-left:10px; padding-right:10px;}
section.colors .panel h3 a{color:#fff; background-color: rgba(100, 100,100, 0.5);}
section.colors .panel h3 a:hover{background-color: rgba(100, 100,100, 0.0);}
section.brands .panel h3 a{color:#fff; background-color: rgba(100, 100,100, 0.0); text-indent:-5000px;}
section.brands .panel h3 a:hover{background-color: rgba(100, 100,100, 0.0); }
section.brands article .img-explore img{transform: scale(1.0); -webkit-transform: scale(1.0); -o-transform: scale(1.0); -moz-transform: scale(1.0); -ms-transform: scale(1.0);}
section.brands article:hover{transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1);}
section.colors h2{padding-left:10px; padding-right:10px;}
section.colors article{padding-left:5px; padding-right:5px; margin-bottom:9px;}
section.colors article .panel{padding-left:5px; padding-right:5px;}
section.colors article h3{font-size:17px;}
section.colors article h3 a{}
.panel{ background-clip: content-box; padding-right:15px; padding-left:15px; min-width: 100%; height: 100%; top: 0px; left:0px; text-align: center; position: absolute; background-color:rgba(0,0,0,0); display: block; }
.categorie .panel h3 a span {text-align: center; position: relative; top: 46%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.panel h3{text-shadow: 1px 1px 2px #333; font-family: 'Stardos Stencil', cursive; width: 100%; text-align: center; display: block; height: 100%; margin-top: 0px;}
.panel h3 a{ color:#fff; height:100%; width 100%; display:block; background-color: rgba(0, 0, 0, 0.5);}
.panel h3 a:hover{background-color: rgba(0, 0, 0, 0.2); }
.img-explore { width: 100%; height: auto;}
.img-explore img{ width: 100%; height: auto;}
footer{background-image:url('https://bewebestudio.es/wp-content/uploads/influencers_background.jpg'); background-size:cover; background-attachment: fixed; border-top:2px #F7CA18 solid; padding-top:30px; background-color:#333; display: inline-block; width:100%; margin-top:50px;}
footer .menu{display:inline-block;}
.content-max-width{width:100%; max-width:1200px; margin:0px auto; }
footer .content ul{margin-left:0px; padding-left:0px; dialay:block;}
.col-2{-moz-column-count: 2; -moz-column-gap: 15px; -webkit-column-count: 2; -webkit-column-gap: 15px; column-count: 2; column-gap: 15px; }
.col-2 li{display: flex; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid;}
footer ul li{ margin-bottom: 8px; list-style-type: none; }
footer ul li a{text-decoration:none; padding: 2px 9px 2px 5px; }
footer .menu-footer-1 ul li a{ color:#fff;}
footer .menu-footer-1 ul li a:hover{ color:#F7CA18; }
footer .menu-footer-3 ul li a, footer .menu-footer-2 ul li a{color:#333; background: #fff; }
footer .menu-footer-3 ul li a:hover, footer .menu-footer-2 ul li a:hover{background: #F7CA18;}
footer .menu-footer-4 ul li a{background: #F7CA18; color:#333;}
footer .menu-footer-4 ul li a:hover{background: #fff; color:#333;}
footer ul{padding:0px;}
footer h3{text-shadow: 1px 1px 1px #333; border-bottom:1px solid #F7CA18; padding-bottom:10px; color:#fff; font-weight:100; margin-bottom:30px }
.logo-footer{text-align:center; margin-top:30px; border-top:2px #F7CA18 solid; padding:20px 0px; display: inline-block; width: 100%;}
Explore - Script Codes
Explore - Script Codes
Home Page Home
Developer Juan Lois
Username beweb
Uploaded January 22, 2023
Rating 3
Size 4,052 Kb
Views 6,072
Do you need developer help for Explore?

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!

Juan Lois (beweb) Script Codes
Name
SIGN UP
GET PREMIUM
A Pen by Juan Lois
Formulario
Formulario2
Photoseries
PERFIL
Create amazing web content 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!