Comercio Electronico

UNIVERSIDAD TECNOLOGICA DEL USUMACINTA.
CARRERA: TECNOLOGIAS DE LA INFORMACIN Y COMUNICACIN. AREA: NEGOCIOS Y TICS. MATERIA: COMERCIO ELECTRONICO. TEMA: "ELEMENTOS DEL SITIO DE COMERCIO ELECTRONICO TRABAJO: PGINA WEB. CATEDRATICO: M.I.S. MARTHA MARIA CASTRO LUNA. ALUMNOS: IVETTE ARISAL ARCOS ARCOS. FRANCISCO EDUARDO MARTINEZ MENDEZ. CARLOS IVAN ANDRADE CANEPA. JULIO CESAR CRZ LPEZ. GRADO: 5to. Cuatrimestre. GRUPO: A.
9 DE ABRIL DEL 2013, EMILIANO ZAPATA TABASCO.
NOMBRE PROPUESTO PARA LA URL:
Comercio electrnico de paletas La delicia.
CODIGO FUENTE DE TODO EL SITIO: Cdigo de la pagina de inicio..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Inicio</title> <meta name="keywords" content="carousel theme, free templates, image carousel, darkgray, pixelated background, templatemo, CSS, HTML" /> <meta name="description" content="Carousel Theme with darkgray background - free CSS template provided by templatemo.com" /> <link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1-4-2.min.js"></script>  <script type="text/javascript" src="js/jquery-ui.min.js"></script> <script type="text/javascript" src="js/showhide.js"></script> <script type="text/JavaScript" src="js/jquery.mousewheel.js"></script>
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/ddsmoothmenu.js">
/*********************************************** * Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/
</script>
<script type="text/javascript">
ddsmoothmenu.init({ mainmenuid: "templatemo_menu", //menu DIV id orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v" classname: 'ddsmoothmenu', //class added to menu's outer DIV //customtheme: ["#1c5a80", "#18374a"], contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] })
</script>
 <script type="text/JavaScript" src="js/cloud-carousel.1.0.5.js"></script>
<script type="text/javascript"> $(document).ready(function(){
// This initialises carousels on the container elements specified, in this case, carousel1. $("#carousel1").CloudCarousel( { reflHeight: 40, reflGap:2, titleBox: $('#da-vinci-title'), altBox: $('#da-vinci-alt'), buttonLeft: $('#slider-left-but'), buttonRight: $('#slider-right-but'),
yRadius:30, xPos: 480, yPos: 32, speed:0.15, } ); });
</script>
<style type="text/css"> <!-body,td,th { color: #DDDDDD; } body { background-color: #EEEEEE; } h1 { color: #DDDDDD; } h2 { color: #DDDDDD; } h3 { color: #DDDDDD; } h4 { color: #DDDDDD; } h5 { color: #DDDDDD; }
h6 { color: #DDDDDD; } .Estilo4 {color: #7f0d0d} .Estilo6 {color: #000000} .Estilo7 { font-size: 16px; font-style: italic; font-weight: bold; } .Estilo8 { color: #0000CC; font-family: Arial, Helvetica, sans-serif; } .Estilo9 {color: #0000FF; } .Estilo10 { font-size: 18px; color: #000000; } --> </style> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> <CENTER><SCRIPT LANGUAGE="JAVASCRIPT"> ') /* ###################################################################### ################ ################ ################ ################ SCRIPT BY BURNBLADE Visit My Site At ##################### ##################### ##################### #####################
http://www.burning.net copywrite 1997
modificado por www.creatupropiaweb.com This script may be used as long as the above lines are not changed
in any way. */ var watchID = null var watchRun = false function stopwatch(){ if(watchRun) clearTimeout(watchID) watchRun = false } function startwatch(){ stopwatch() dayTime() }
function dayTime() { day = new Date(); hour = day.getHours(); minute = day.getMinutes(); second = day.getSeconds();
if (hour > 12) { hours = hour - 12; part = 'PM'} else { part = 'AM'; if (hour == 0) { hours = 12 } else { hours = hour } } if (minute < 10) {minutes = 0}
else {minutes = ""} if (second < 10) {seconds = 0} else {seconds =""} date = ('' +""+(day.getMonth() + 1)+"/"+day.getDate()+ "/"+ '2012'); time = ('' + hours + ":"+minutes+""+minute+ ":"+seconds+""+second+ '') parts = ('' +part+ '') document.timedate.time.value = time document.timedate.date.value = date document.timedate.parts.value = parts watchID = setTimeout("dayTime()",1000) watchRun = true }
document.write('') // End Digital Watch--> </script>
<BODY onLoad="startwatch()"> <form name="timedate" onSubmit="0"> <table cellspacing=0 cellpadding=0> <tr align=center> <td><INPUT TYPE="text" NAME="time" SIZE=6 VALUE ="..Starti"></td> <td><INPUT TYPE="text" NAME="parts" SIZE=12 VALUE ="ng.."></td> <td colspan=2><INPUT TYPE="text" NAME="date" SIZE=28 VALUE ="........"></td> </tr> </table> </form></CENTER> <ul> <li class="Estilo4"><a href="Inicio.html">Inicio</a></li> <li class="Estilo4"><a href="conocenos.html">conocenos</a></li> <li class="Estilo4"><a href="catalgo.html">catalgo</a></li> <li class="Estilo4"><a href="Contacto.html">Contctanos</a></li> <head>
<title>ScriptBreaker.com - JCarosellite with pagination</title> <style type="text/css"> <!-body {margin:0; padding:0; background:#fff;} #slidebox{position:relative; border:1px solid #ccc; margin:40px auto;overflow:hidden;} #slidebox, #slidebox ul {width:600px;height:300px;} #slidebox, #slidebox ul li{width:600px;height:300px;} #slidebox ul li{position:relative; left:0; background:#eee; float:left;list-style: none; padding:15px 28px; font-family:Verdana, Geneva, sans-serif; font-size:13px;} #slidebox .next, #slidebox .previous{position:absolute; z-index:2; display:block; width:21px; height:21px;top:139px;} #slidebox .next{right:0; margin-right:10px; background:url(slidebox_next.png) no-repeat left top;} #slidebox .next:hover{background:url(slidebox_next_hover.png) no-repeat left top;} #slidebox .previous{margin-left:10px; background:url(slidebox_previous.png) no-repeat left top;} #slidebox .previous:hover{background:url(slidebox_previous_hover.png) no-repeat left top;} #slidebox .thumbs{position:absolute; z-index:2; bottom:10px; right:10px;} #slidebox .thumbs a{display:block; margin-left:5px; float:left; font-family:Verdana, Geneva, sans-serif; font-size:9px; textdecoration:none; padding:2px 4px; background:url(slidebox_thumb.png); color:#fff;} #slidebox .thumbs a:hover{background:#fff; color:#000;} #slidebox .thumbs .thumbActive{background:#fff; color:#000; display:block; margin-left:5px; float:left; font-family:Verdana, Geneva, sans-serif; font-size:9px; text-decoration:none; padding:2px 4px;} --> </style>
<script src="jquery-1.5.2.min.js" type="text/javascript"></script> <script src="jcarousellite_1.0.1c5.js" type="text/javascript"></script> <script type="text/javascript">
$(function() { $("#slidebox").jCarouselLite({ vertical: false, hoverPause:true, btnPrev: ".previous", btnNext: ".next", visible: 1,
start: 0, scroll: 1, circular: true, auto:1000, speed:500, btnGo: [".1", ".2", ".3", ".4"],
afterEnd: function(a, to, btnGo) { if(btnGo.length <= to){ to = 0; } $(".thumbActive").removeClass("thumbActive"); $(btnGo[to]).addClass("thumbActive"); } }); }); </script> </head> <body> <div id="slidebox"> <div class="next"></div> <div class="previous"></div> <div class="thumbs"> <a href="#" onClick="" class="1 ">1</a> <a href="#" onClick="" class="2">2</a> <a href="#" onClick="" class="3 ">3</a> <a href="#" onClick="" class="4">4</a> </div> <ul> <li><img src="paletas.jpg" width="501" height="281" /></li> <li><img src="paletas1.jpg" width="501" height="281" /></li>
<li><img src="paletas-de-fresa.jpg" width="501" height="281" /></li> <li><img src="p-frutas.jpg" width="501" height="281" /></li> </ul> </div>
</body> </ul>  </head>
<body id="home">
<div id="templatemo_header_wrapper">
<div id="templatemo_menu" class="ddsmoothmenu">
<br style="clear: left" /> </div>  <div class="cleaner"></div> </div> 
<h1 align="center" class="Estilo9"> </h1> <h1 align="center" class="Estilo9">RESEA HISTORICA </h1> <p align="center" class="Estilo10">La empresa lleva por nombre paleteria la delicia. Est ubicada entre esquina Gregorio Mndez y Cristbal colon,</p> <p align="center" class="Estilo10"> el dueo se dedic a vender palea de otra empresa y como solo haba una sola paleta, entonces decidi fundar</p> <p align="center" class="Estilo10"> una paleteria propia y el la llama las delicias. Cuando empez sus ganancias eran muy pocas. </p> <p align="center" class="Estilo10">Empez con dos empleados a vender en las escuelas y ahora ya son ms trabajando con l. Aproximadamente trabajan ahora 50 empleados.</p> <p align="center" class="padding_right Estilo7 Estilo6"> </p>
<div id="templatemo_main"> <div class="cleaner">
<div align="center" class="Estilo8">LA MEJOR PALETA SE ENCUENTRA EN PALETERIA "LA DELICIA" </div> </div> </div> 
</body> </html>
Cdigo del catalog y carrusel de productos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Productos</title> <meta name="keywords" content="portfolio, image carousel, darkgray, pixelated background, web design, css templates, templatemo.com" /> <meta name="description" content="Carousel Portfolio, free CSS template by templatemo.com" /> <link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1-4-2.min.js"></script>  <script type="text/javascript" src="js/jquery-ui.min.js"></script> <script type="text/javascript" src="js/showhide.js"></script> <link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" /> <script type="text/JavaScript" src="js/jquery.mousewheel.js"></script> <script type="text/JavaScript" src="js/slimbox2.js"></script>
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/ddsmoothmenu.js">
/*********************************************** * Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/
</script>
<script type="text/javascript">
ddsmoothmenu.init({ mainmenuid: "templatemo_menu", //menu DIV id orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v" classname: 'ddsmoothmenu', //class added to menu's outer DIV //customtheme: ["#1c5a80", "#18374a"], contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] }) var watchID = null var watchRun = false function stopwatch(){ if(watchRun) clearTimeout(watchID) watchRun = false } function startwatch(){ stopwatch() dayTime() }
function dayTime() { day = new Date(); hour = day.getHours(); minute = day.getMinutes(); second = day.getSeconds();
if (hour > 12) {
hours = hour - 12; part = 'PM'} else { part = 'AM'; if (hour == 0) { hours = 12 } else { hours = hour } } if (minute < 10) {minutes = 0} else {minutes = ""} if (second < 10) {seconds = 0} else {seconds =""} date = ('' +""+(day.getMonth() + 1)+"/"+day.getDate()+ "/"+ '2012'); time = ('' + hours + ":"+minutes+""+minute+ ":"+seconds+""+second+ '') parts = ('' +part+ '') document.timedate.time.value = time document.timedate.date.value = date document.timedate.parts.value = parts watchID = setTimeout("dayTime()",1000) watchRun = true }
document.write('') // End Digital Watch--> </script>
<style type="text/css"> <!-.Estilo1 {font-size: 13px} .Estilo2 {
font-size: 10px; font-style: italic; } --> </style> <BODY onLoad="startwatch()"> <form name="timedate" onSubmit="0"> <table cellspacing=0 cellpadding=0> <tr align=center> <td><INPUT TYPE="text" NAME="time" SIZE=6 VALUE ="..Starti"></td> <td><INPUT TYPE="text" NAME="parts" SIZE=12 VALUE ="ng.."></td> <td colspan=2><INPUT TYPE="text" NAME="date" SIZE=28 VALUE ="........"></td> </tr> </table>
</script> <ul> <li><a href="Inicio.html">Inicio</a></li> <li><a href="conocenos.html">Conocenos</a></li> <li><a href="catalgo.html">catalgo</a></li> <li><a href="Contacto.html">Contctanos</a></li> </ul> <head> <title>ScriptBreaker.com - JCarosellite with pagination</title> <style type="text/css"> <!-body {margin:0; padding:0; background:#fff;} #slidebox{position:relative; border:1px solid #ccc; margin:40px auto;overflow:hidden;} #slidebox, #slidebox ul {width:600px;height:300px;} #slidebox, #slidebox ul li{width:600px;height:300px;} #slidebox ul li{position:relative; left:0; background:#eee; float:left;list-style: none; padding:15px 28px; font-family:Verdana, Geneva, sans-serif; font-size:13px;} #slidebox .next, #slidebox .previous{position:absolute; z-index:2; display:block; width:21px; height:21px;top:139px;}
#slidebox .next{right:0; margin-right:10px; background:url(slidebox_next.png) no-repeat left top;} #slidebox .next:hover{background:url(slidebox_next_hover.png) no-repeat left top;} #slidebox .previous{margin-left:10px; background:url(slidebox_previous.png) no-repeat left top;} #slidebox .previous:hover{background:url(slidebox_previous_hover.png) no-repeat left top;} #slidebox .thumbs{position:absolute; z-index:2; bottom:10px; right:10px;} #slidebox .thumbs a{display:block; margin-left:5px; float:left; font-family:Verdana, Geneva, sans-serif; font-size:9px; textdecoration:none; padding:2px 4px; background:url(slidebox_thumb.png); color:#fff;} #slidebox .thumbs a:hover{background:#fff; color:#000;} #slidebox .thumbs .thumbActive{background:#fff; color:#000; display:block; margin-left:5px; float:left; font-family:Verdana, Geneva, sans-serif; font-size:9px; text-decoration:none; padding:2px 4px;} --> </style>
<script src="jquery-1.5.2.min.js" type="text/javascript"></script> <script src="jcarousellite_1.0.1c5.js" type="text/javascript"></script> <script type="text/javascript">
$(function() { $("#slidebox").jCarouselLite({ vertical: false, hoverPause:true, btnPrev: ".previous", btnNext: ".next", visible: 1, start: 0, scroll: 1, circular: true, auto:1000, speed:500, btnGo: [".1", ".2", ".3", ".4"],
afterEnd: function(a, to, btnGo) {
if(btnGo.length <= to){ to = 0; } $(".thumbActive").removeClass("thumbActive"); $(btnGo[to]).addClass("thumbActive"); } }); }); </script> </head> <body> <div id="slidebox"> <div class="next"></div> <div class="previous"></div> <div class="thumbs"> <a href="#" onClick="" class="1 ">1</a> <a href="#" onClick="" class="2">2</a> <a href="#" onClick="" class="3 ">3</a> <a href="#" onClick="" class="4">4</a> </div> <ul> <li><img src="paletas.jpg" width="501" height="281" /></li> <li><img src="paletas1.jpg" width="501" height="281" /></li> <li><img src="paletas-de-fresa.jpg" width="501" height="281" /></li> <li><img src="p-frutas.jpg" width="501" height="281" /></li> </ul> </div>
</body>
<style type="text/css"> <!-body {
background-color: #EEEEEE; } .Estilo1 {color: #EEEEEE} --> </style></head>
<body id="subpage">
</div> <div id="templatemo_menu" class="ddsmoothmenu">
<br style="clear: left" /> </div>  <div class="cleaner"></div> </div> 
<div id="templatemo_main">
<h2>Paletas "ummmm deliciosas" "la delicia" </h2>
<div class="col one_fourth gallery_box"><img src="p-frutas.jpg" width="175" height="129" /> <h5>paletas clasicas: paletas clasicas de sabores distintos, muy deliciosas </h5> </div>
<div class="col one_fourth gallery_box"><img src="paletas.jpg" width="206" height="121" /> <h5>paletas de leche: paletas echas de distintos sabores, con leche y nueces, muy deliciosas. </h5> </div> <div class="col one_fourth gallery_box"><img src="paletas1.jpg" width="220" height="124" /> <h5>Frutas: ricas paletas echas con trozos de frutas, muy deliciosas. </h5> </div>
<div class="col one_fourth gallery_box no_margin_right"><img src="../../../paletas-de-fresa.jpg" width="212" height="154" />
<h5> </h5> </div>
<div class="col one_fourth gallery_box"> <h5> </h5> </div>
<p><img src="betohhh copia.jpg" alt="a" width="900" height="600" align="right" /></p> </div>  
 </body> </html>
IMAGEN DE LA INTERFAZ GRAFICA Y JUSTIFICACIN DE LOS ELEMENTOS EMPLEADOS:
BASE DE DATOS: Pantalla de la base de datos.
PANTALLAS DEL PROSESO DE UNA TRANSICIN: Carrito y compra de productos.
PANTALLAS DEL PROCESO DE AUTENTICACIN DE USUARIOS:
Registrar a un usuario:
Despus de rellenar los campos, tenemos q rellenar el siguiente campo tambin.
Ahora q ya estamos registrado autenticaremos a nuestro usuario.
INICIO:
PANTALLA DE CATALAGO:
PANTALLA DE ALTA DE PRODUCTO:
CONTACTANOS:
PARA CAMBIAR LA IMAGEN DE NUESTRO PRODUCTO HACEMOS LO SIGUIENTE:
NOS VAMOS AL CODIGO DONDE SE ENCUENTRA NUESTRA IMAGEN QUE QUEREMOS CAMBIAR. <div id="templatemo_header_wrapper"> <div id="site_title"><img src="paletasfresa.jpg" width="480" height="320" /></div> <div id="templatemo_menu" class="ddsmoothmenu"> <br style="clear: left" /> </div>  <div class="cleaner"><img src="imagen1.jpg" width="531" height="351" /></div> </div>  <h1 align="center" class="Estilo9"> </h1> CODIGO ACTUALIZADO: <div id="templatemo_header_wrapper"> <div id="site_title"><img src="sonso.jpg" width="480" height="320" /></div> <div id="templatemo_menu" class="ddsmoothmenu"> <br style="clear: left" /> </div>  <div class="cleaner"><img src="images.jpg" width="531" height="351" /></div> </div>  <h1 align="center" class="Estilo9"> </h1>
UNA DE LAS ACTUALIZACIONES DE ESTA PAGINA ES LA FECHA Y LA HORA EN TIEMPO REAL. var watchID = null var watchRun = false function stopwatch(){ if(watchRun) clearTimeout(watchID) watchRun = false } function startwatch(){ stopwatch() dayTime() } function dayTime() { day = new Date(); hour = day.getHours(); minute = day.getMinutes(); second = day.getSeconds(); if (hour > 12) { hours = hour - 12; part = 'PM'} else { part = 'AM'; if (hour == 0) { hours = 12 } else { hours = hour } } if (minute < 10) {minutes = 0} else {minutes = ""} if (second < 10) {seconds = 0}
else {seconds =""} date = ('' +""+(day.getMonth() + 1)+"/"+day.getDate()+ "/"+ '2013'); time = ('' + hours + ":"+minutes+""+minute+ ":"+seconds+""+second+ '') parts = ('' +part+ '') document.timedate.time.value = time document.timedate.date.value = date document.timedate.parts.value = parts watchID = setTimeout("dayTime()",1000) watchRun = true } document.write('') // End Digital Watch--> </script>

Comercio Electronico

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Comercio Electronico

Uploaded by

Copyright:

Available Formats

UNIVERSIDAD TECNOLOGICA DEL USUMACINTA.

9 DE ABRIL DEL 2013, EMILIANO ZAPATA TABASCO.

NOMBRE PROPUESTO PARA LA URL:

Comercio electrnico de paletas La delicia.

CODIGO FUENTE DE TODO EL SITIO: Cdigo de la pagina de inicio..

<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />

<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/ddsmoothmenu.js">

<script type="text/javascript"> $(document).ready(function(){

yRadius:30, xPos: 480, yPos: 32, speed:0.15, } ); });

http://www.burning.net copywrite 1997

document.write('') // End Digital Watch--> </script>

<script src="jquery-1.5.2.min.js" type="text/javascript"></script> <script src="jcarousellite_1.0.1c5.js" type="text/javascript"></script> <script type="text/javascript">

</body> </ul>  </head>

<div id="templatemo_menu" class="ddsmoothmenu">

<div id="templatemo_main"> <div class="cleaner">

Cdigo del catalog y carrusel de productos

<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />

<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/ddsmoothmenu.js">

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/

if (hour > 12) {

document.write('') // End Digital Watch--> </script>

<style type="text/css"> <!-.Estilo1 {font-size: 13px} .Estilo2 {

<script src="jquery-1.5.2.min.js" type="text/javascript"></script> <script src="jcarousellite_1.0.1c5.js" type="text/javascript"></script> <script type="text/javascript">

afterEnd: function(a, to, btnGo) {

<style type="text/css"> <!-body {

background-color: #EEEEEE; } .Estilo1 {color: #EEEEEE} --> </style></head>

</div> <div id="templatemo_menu" class="ddsmoothmenu">

<h2>Paletas &quot;ummmm deliciosas&quot; &quot;la delicia&quot; </h2>

<div class="col one_fourth gallery_box no_margin_right"><img src="../../../paletas-de-fresa.jpg" width="212" height="154" />

<div class="col one_fourth gallery_box"> <h5>&nbsp;</h5> </div>

</body> </html>

IMAGEN DE LA INTERFAZ GRAFICA Y JUSTIFICACIN DE LOS ELEMENTOS EMPLEADOS:

BASE DE DATOS: Pantalla de la base de datos.

PANTALLAS DEL PROSESO DE UNA TRANSICIN: Carrito y compra de productos.

PANTALLAS DEL PROCESO DE AUTENTICACIN DE USUARIOS:

Despus de rellenar los campos, tenemos q rellenar el siguiente campo tambin.

Ahora q ya estamos registrado autenticaremos a nuestro usuario.

PANTALLA DE ALTA DE PRODUCTO:

PARA CAMBIAR LA IMAGEN DE NUESTRO PRODUCTO HACEMOS LO SIGUIENTE:

You might also like

<h2>Paletas "ummmm deliciosas" "la delicia" </h2>

<div class="col one_fourth gallery_box"> <h5> </h5> </div>