BabyStore
How do I make an babystore?
What is a babystore? How do you make a babystore? This script and codes were developed by Pablo Ai on 03 October 2022, Monday.
BabyStore - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>BabyStore</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <h1>Baby<span>Store</span></h1> <button class="cambiar-col">cambiar</button> <button class="eliminar-pro">Eliminar</button> <nav> <ul> <li class="active"><a href="">Home</a></li> <li><a href="">About us</a></li> <li><a href="">Contact</a></li> </ul> </nav>
</header>
<h2>El Baby Del Momento:</h2>
<div id="babyDelMomento"></div>
<button class="newBaby">New Baby</button>
<hr />
<h3>Otros babys:</h3>
<ul class="babys"> <li> <img src="http://lorempixel.com/200/100/" alt="" /> <div>Pepo Gomez</div> <a href="mailto:[email protected]">[email protected]</a> </li>
</ul>
<footer> <form> <input class='name' placeholder='Ingrese su nombre' type="text" required/> <input class='email' placeholder='Ingrese su email' type="email" required/> <button class='send'>Enviar</button> </form> <h3 class="mensaje">Gracias <span class="nombre"></span>! Te enviaremos los newsletter a <span class="email"></span></h3> <p>BabyStore 2017</p>
</footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
BabyStore - Script Codes CSS Codes
body { font-family: sans-serif; margin: 0; padding: 0; -webkit-transition: background 1s; transition: background 1s;
}
body.otro-color { background: grey;
}
h2 { font-weight: normal; text-transform: capitalize;
}
header { background: dodgerblue; padding: 10px;
}
header h1 { color: whitesmoke; font-size: 25px;
}
header h1 span { color: darkblue;
}
nav { display: none;
}
nav ul { margin: 0; padding: 0;
}
nav ul li { border: 1px solid black; display: inline-block; margin-left: 15px; padding: 15px;
}
nav ul li.active { background: darkblue;
}
nav ul li a { color: white; text-decoration: none;
}
.babys { list-style: none; overflow: hidden; padding: 0;
}
.babys > li { background: lightgray; border-radius: 5px; cursor: pointer; float: left; margin: 10px; text-align: center; padding: 20px;
}
.babys > li.selected { background: black;
}
.babys > li img { display: block; margin-bottom: 10px;
}
footer { background: #333; color: whitesmoke; padding: 15px;
}
button.send { background-color: darkblue; border-radius: 5px; color: lightgray; padding: 8px;
}
h3.mensaje { display: none;
}
.cont { margin-top: 10px; overflow: hidden;
}
.cont p { float: left; width: 100%; overflow: hidden;
}
@media (min-width: 500px) { .cont p { width: 50%; }
}
@media (min-width: 700px) { .cont p { width: 33%; }
}
.cont .p1 { background: salmon;
}
.cont .p2 { background: lightgreen;
}
.cont .p3 { background: lightblue;
}
BabyStore - Script Codes JS Codes
$('.cambiar-col').click(function(){ $('body').toggleClass('otro-color');
});
$('.products li').on('click', function(){ $(this).toggleClass('selected');
});
$('.eliminar-pro').on('click', function(){ if($('.selected').length === 0){ alert('Seleccione un producto'); } else { $('.selected').remove(); }
});
$('.send').on('click', function(event){ event.preventDefault(); $('form').hide(); $('span.nombre').text($('input.name').val()); $('span.email').text($('input.email').val()); $('.mensaje').fadeIn();
});
mostrarBabyDelMomento();
$('.newBaby').on('click', function(){ mostrarBabyDelMomento(); });
function mostrarBabyDelMomento() { $.ajax({ url: 'https://randomuser.me/api', dataType: 'json', success: function(data){ var first = data.results[0].name.first; var last = data.results[0].name.last; var email = data.results[0].email; var picture = data.results[0].picture.medium; var temp = ''; temp += '<h2>'; temp += first; temp += ' <strong>'; temp += last; temp +='</strong> '; temp += '</h2>'; temp += '<a href="mailto:email">'; temp += email; temp += '</a>'; temp += '<img src="' + picture +'" />'; $('#babyDelMomento').html(temp); }, error: function(error){ console.log(error); } });
};
function mostrarOtrosBabys() { $.ajax({ url: 'https://randomuser.me/api/?results=15', dataType: 'json', success: function(data){ var first = data.results[1].name.first; var last = data.results[1].name.last; var email = data.results[1].email; var picture = data.results[1].picture.medium; var temp = ''; temp += '<li>' temp += '<img src="' + picture +'" />'; temp += '<div>' temp += first; temp += ' '; temp += last; temp += '</div>'; temp += '<a href="mailto:email">'; temp += email; temp += '</a>'; temp += '</li>'; $('ul.babys').html(temp); } });
};
$(document).ready(function(){ mostrarBabyDelMomento(); mostrarOtrosBabys();
});
Developer | Pablo Ai |
Username | Pablo-Ai |
Uploaded | October 03, 2022 |
Rating | 3 |
Size | 3,807 Kb |
Views | 18,216 |
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 |
Supermercado | 1,660 Kb |
Rick Sanchez | 5,442 Kb |
Mix colors with Less | 1,586 Kb |
Loading donut animation | 2,109 Kb |
A Pen by Pablo Ai | 1,427 Kb |
BabyStore v2 | 2,972 Kb |
Complex Table PoC | 2,301 Kb |
VueJS | 1,933 Kb |
Supermercado 2 | 1,515 Kb |
Responsive table POC | 2,774 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 |
Konami Code Easter Egg | Teolitto | 3,051 Kb |
A Pen by Miro Olma | Programiro | 2,342 Kb |
Playing with transition timing | Mattgrosswork | 1,993 Kb |
Blog Concept 2 | JGallardo | 2,994 Kb |
Animated Slide Hamburger Mobile Menu | BJack | 2,247 Kb |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 Kb |
Ghost Buttons with CSS3 | Mithicher | 2,509 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Portfolio page | Bhavya_j | 2,804 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!