first commit
This commit is contained in:
hugo cabrera diaz
@@ -0,0 +1,36 @@
|
||||
# portalEditorialFront
|
||||
|
||||
Aquí se encuentra el front del portal
|
||||
|
||||
Todos los comentarios estan en ingles, para tener en cuenta, como la industria escribe sus documentos.
|
||||
las clases tambien estan en ingles y cada vez que hay una nueva palabra se separa mediante - todo en minusculas
|
||||
|
||||
La pagina esta estrucuturada mediante secciones las cuales se indican en Mayusculas y como comentarios, mientras que las subsecciones igualmente se encuentran comentadas y cada palabra del comentario comienza en mayuscula
|
||||
|
||||
(Favor de respetar el estandar de arriba al escribir cosas nuevas)
|
||||
|
||||
HEADER:
|
||||
Todos los elementos del header se encuentran en un contenedor llamado "header-image-container", ya que solo hay imagenes se opto por ese titulo, asi mismo hay comentarios en donde se indica que imagen se debe colocar
|
||||
|
||||
NAVIGATION BAR:
|
||||
Tiene la clase "nav-container" que es el contenedor principal de los elementos de la barra de navegacion, los elementos se definen como una lista. A manera de aviso: "Se encuentra comentado un <ul> dentro de otro, ese sera un submenu que aun no esta terminado(comenzar)"
|
||||
|
||||
CAROUSEL BEGINS:
|
||||
Este espacio esta destinado al slider que esta pendiente.
|
||||
|
||||
MAIN SECTION OF BOOKS:
|
||||
Es el contenedor principal de la galeria de libros y se divide por articulos con clases haciendo referencia a la posicion de los articulos(top, mid y low respectivamente)
|
||||
|
||||
SOCIAL NETWORKS:
|
||||
Este espacio como su nombre lo indica, es el contenedor principal de los botones con iconos para las redes sociales, en donde por cada division esta una clase link que referencia una red social
|
||||
|
||||
FOOTER:
|
||||
Es el pie de pagina, no tiene clase y contiene todos los botones que estan dentro de un div de clase "footer-buttons", ademas de tener el texto del mismo en una etiqueta <pre></pre>
|
||||
|
||||
¿QUE SIGUE?
|
||||
- colocar todas las imagenes que se usaran dentro de la carpeta img y referenciarlas en donde tienen que ir dentro del documento html
|
||||
- Descargar todas las fuentes requeridas en el sitio y colocarlas en una nueva carpeta llamada "fonts"
|
||||
- En caso de usar fuentes de internet, adjuntar las fuentes en el archivo html
|
||||
- Descargar todos los iconos y colocarlos ya sea en la carpeta img o fonts(segun sea conveniente)
|
||||
- Definir todos los colores que se van a usar(comentarlos en la parte de arriba de estilos CSS e indicarlos)
|
||||
Terminar de escribir el archivo .html, es IMPORTANTE hacerlo antes de darle estilos
|
||||
@@ -0,0 +1 @@
|
||||
/*Define WebSite Colors*/
|
||||
+130
@@ -0,0 +1,130 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Portal Editorial</title>
|
||||
<link rel="stylesheet" href="estilos.css"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--HEADER-->
|
||||
<header class="header-image-container">
|
||||
<!--Logo Unam-->
|
||||
<img src="" alt="">
|
||||
<!--Logo Fesa-->
|
||||
<img src="" alt="">
|
||||
<!--Logo Ediciones Acatlan-->
|
||||
<figure class="header-vertical-line">
|
||||
<img src="" alt="">
|
||||
</figure>
|
||||
</header>
|
||||
|
||||
<!--NAVIGATION BAR-->
|
||||
<nav class="nav-container">
|
||||
<ul class="nav-list">
|
||||
<!--Home Icon and Home Button-->
|
||||
<li class="home-btn"> <a href="#"> <img src="" alt="">Inicio</a></li>
|
||||
<li class="book-material-btn">Producción Editorial
|
||||
<!-- <ul class="nav-sublist">
|
||||
<li>Sub item #1</li>
|
||||
<li>Sub item #2</li>
|
||||
<li>Sub item #3</li>
|
||||
</ul>
|
||||
-->
|
||||
</li>
|
||||
<li class="search-btn"> <a href="#"> <img src="" alt="">Buscar</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!--CAROUSEL BEGINS-->
|
||||
|
||||
<!--CAROUSEL ENDS-->
|
||||
<div class="main-title">
|
||||
<h1>Novedades Semestrales</h1>
|
||||
</div>
|
||||
|
||||
<!--MAIN SECTION OF BOOKS-->
|
||||
<section class="main-section-books">
|
||||
<!--Top Position Of The Articles-->
|
||||
<article class="top-pos-books">
|
||||
<img src="" alt="">
|
||||
<p> <strong>Lorem ipsum</strong> </p>
|
||||
|
||||
<img src="" alt="">
|
||||
<p> <strong>Lorem ipsum</strong> </p>
|
||||
|
||||
<img src="" alt="">
|
||||
<p> <strong>Lorem ipsum</strong> </p>
|
||||
|
||||
<img src="" alt="">
|
||||
<p> <strong>Lorem ipsum</strong> </p>
|
||||
</article>
|
||||
<!--Middle Position Of The Articles-->
|
||||
<article class="mid-pos-books">
|
||||
<img src="" alt="">
|
||||
<p> <strong>Lorem ipsum</strong> </p>
|
||||
|
||||
<img src="" alt="">
|
||||
<p> <strong>Lorem ipsum</strong> </p>
|
||||
|
||||
<img src="" alt="">
|
||||
<p> <strong>Lorem ipsum</strong> </p>
|
||||
|
||||
<img src="" alt="">
|
||||
<p> <strong>Lorem ipsum</strong> </p>
|
||||
</article>
|
||||
<!--Low Position Of The Articles-->
|
||||
<article class="low-pos-books">
|
||||
<img src="" alt="">
|
||||
<p> <strong>Lorem ipsum</strong> </p>
|
||||
|
||||
<img src="" alt="">
|
||||
<p> <strong>Lorem ipsum</strong> </p>
|
||||
|
||||
<img src="" alt="">
|
||||
<p> <strong>Lorem ipsum</strong> </p>
|
||||
|
||||
<img src="" alt="">
|
||||
<p> <strong>Lorem ipsum</strong> </p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<!--SOCIAL NETWORKS-->
|
||||
<section class="social">
|
||||
<div class="link-facebook">
|
||||
<a href="#" target="_blank"><img src="" alt=""> <p>facebook</p></a>
|
||||
</div>
|
||||
|
||||
<div class="link-youtube">
|
||||
<a href="#" target="_blank"><img src="" alt=""> <p>Youtube</p></a>
|
||||
</div>
|
||||
|
||||
<div class="link-instagram">
|
||||
<a href="#" target="_blank"><img src="" alt=""> <p>Instagram</p></a>
|
||||
</div>
|
||||
|
||||
<div class="link-twitter">
|
||||
<a href="#" target="_blank"><img src="" alt=""> <p>twitter</p></a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--FOOTER-->
|
||||
<footer>
|
||||
<div class="footer-buttons">
|
||||
<input type="button" value="Comité Editorial">
|
||||
<input type="button" value="Política Editorial y Lineamientos">
|
||||
<input type="button" value="Libreria">
|
||||
<input type="button" value="Contáctanos">
|
||||
</div>
|
||||
|
||||
<pre class="footer-info">
|
||||
<small>
|
||||
Hecho en México, todos los derechos reservados 2018.
|
||||
Esta página puede ser reproducida con fines no lucrativos, siempre y cuando no se mutile, se cite la fuente
|
||||
completa y su dirección electrónica. De otra forma, requiere permiso previo por escrito de la institución.
|
||||
</small>
|
||||
</pre>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user