como muchos saben las paginas , son prácticamente creadas con Html y Css entre otros lenguajes como Javascript y php , eso depende de tus gustos , en el caso de que adquieras un hosting independiente ...
Bueno antes que nada de comenzar , te recomiendo que uses un editor de código que sea a tu gusto , en este caso yo te recomiendo dos los cuales son : Sublime text 3 (Ultima versión la #3) y lógicamente que no puede falta el editor de código abierto el cual es Notepad++ la ventaja de Notepad es que es gratis y de código abierto , Sublime text 3 así como todas sus versiones , son de pago , de igual manera puedes buscar algún crack o serial que te pueda servir en nuestro caso nosotros usamos este serial espero que te sirva ¨
– BEGIN LICENSE —–
TwitterInc
200 User License
EA7E-890007
1D77F72E 390CDD93 4DCBA022 FAF60790
61AA12C0 A37081C5 D0316412 4584D136
94D7F7D4 95BC8C1C 527DA828 560BB037
D1EDDD8C AE7B379F 50C9D69D B35179EF
2FE898C4 8E4277A8 555CE714 E1FB0E43
D5D52613 C3D12E98 BC49967F 7652EED2
9D2D2E61 67610860 6D338B72 5CF95C69
E36B85CC 84991F19 7575D828 470A92AB
—— END LICENSE ——
Bien comenzamos con el código de html : en pocas palabras html es la estructura que contendrá , todo el contenido que vera tu usuario en su pantalla o por decirlo así en la nube del navegador...
Esta en la parte de código de html con esto la estructura básica que contendrá el archivo principal en este caso seria el index.html el cual puedes ver en siguiente enlace ---> index.html recuerda que el aspecto que estas viendo es únicamente porque no le hemos dado estilos con css
Esta en la parte de código de html con esto la estructura básica que contendrá el archivo principal en este caso seria el index.html el cual puedes ver en siguiente enlace ---> index.html recuerda que el aspecto que estas viendo es únicamente porque no le hemos dado estilos con css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Menu Lateral Animado Responsive</title> <link rel="stylesheet" href="icon/css/fontello.css"> <link rel="stylesheet" href="css/estilos.css"> </head> <body> <main> <div class="content-all"> <header></header> <input type="checkbox" id="check"> <label for="check" class="icon-menu">Menu</label> <h2>HACKGOGE</h2> <nav class="menu"> <ul> <li>Inicio</li> <li>Productos</li> <li>Tutoriales</li> <li>Programacion</li> <li>Desarrollo Web</li> <li>Cursos</li> <li>Nosotros</li> <li>Diseño Web</li> <li>Contactos</li> </ul> </nav> <article> <h1>PCsystemsolutions Canal de Diseño Web</h1> <p class="parrafo1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti qui, quibusdam adipisci? Tempora, vitae voluptatem veritatis et consequatur laborum aliquam.</p> <img src="image/image2.jpg"> <p class="parrafo2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia expedita unde asperiores ipsum suscipit autem tenetur similique quia aperiam, quos minima, id explicabo qui. Adipisci unde, facere temporibus sequi quasi cum quidem nihil optio, nobis sint asperiores. Sint totam, commodi.</p> <p class="parrafo2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, dolor, ut dicta est reiciendis beatae rerum corporis quia asperiores vitae.</p> <p class="parrafo2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima rem ipsam nostrum soluta ratione corporis, optio voluptates, praesentium aut quae nemo totam fugit consequatur magni. Excepturi nam, dolores est eius perspiciatis impedit! Nisi delectus sequi tempora. Suscipit molestiae deserunt qui consectetur totam, harum cupiditate iste, impedit assumenda, corporis dolores nihil.</p> <br> <br> <center> <iframe width="560" height="315" src="https://www.youtube.com/embed/OK2h56ycKIo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></center> <p class="parrafo2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae at delectus perferendis modi nostrum laudantium earum animi sapiente, atque amet ullam doloremque quibusdam? Harum consequatur ut voluptates tempore repudiandae non distinctio, officia neque saepe beatae reprehenderit ratione animi pariatur tenetur obcaecati. Repellendus omnis tenetur libero quasi labore vitae vel, hic eligendi esse qui non, architecto, impedit eveniet eaque voluptatem dignissimos?</p> <p class="parrafo2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum eos exercitationem sit odit ipsa sed nemo eaque odio debitis iste, veritatis ullam esse iure optio praesentium sint nihil temporibus alias.</p> <p class="parrafo2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum eos exercitationem sit odit ipsa sed nemo eaque odio debitis iste, veritatis ullam esse iure optio praesentium sint nihil temporibus alias.</p> <p class="parrafo2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum eos exercitationem sit odit ipsa sed nemo eaque odio debitis iste, veritatis ullam esse iure optio praesentium sint nihil temporibus alias.</p> <p class="parrafo2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum eos exercitationem sit odit ipsa sed nemo eaque odio debitis iste, veritatis ullam esse iure optio praesentium sint nihil temporibus alias.</p> <p class="parrafo2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum eos exercitationem sit odit ipsa sed nemo eaque odio debitis iste, veritatis ullam esse iure optio praesentium sint nihil temporibus alias.</p> <p class="parrafo2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum eos exercitationem sit odit ipsa sed nemo eaque odio debitis iste, veritatis ullam esse iure optio praesentium sint nihil temporibus alias.</p> <p class="parrafo2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum eos exercitationem sit odit ipsa sed nemo eaque odio debitis iste, veritatis ullam esse iure optio praesentium sint nihil temporibus alias.</p> </article> <hr/> <article> <h1>BIENVENIDOS A NUESTRO SITIO WEB</h1> <img src="image/WB8UZ.gif" height="200" width="120"> <p class="parrafo1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <center><iframe autoplay="true" width="560" height="315" src="https://www.youtube.com/embed/9jI-z9QN6g8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></center><br><br> <br><br> <hr/> </article> <article> <H1>CRACK PARA CAMTASIA STUDIO 9 + SERIAL ORIGINAL</H1> <img src="image/643x0w.jpg" height="500" width="150"> <p class="parrafo1"><strong><font color="#000" face="arial">Camtasia Studio</font></strong> y Camtasia para Mac (pronunciación: /kæmˈteɪʒə/) son unos conjuntos de programas, creados y publicados por TechSmith,1 para crear tutoriales en vídeo y presentaciones vía screencast, o a través de un plug-in de grabado directo en Microsoft PowerPoint. El área de la pantalla que se va a grabar se puede elegir libremente, y se pueden registrar otras grabaciones de audio o multimedia al mismo tiempo, o añadirse por separado de cualquier otra fuente e integrarse en el componente de Camtasia Studio del producto. Ambas versiones de Camtasia empezaron como programas de captura de pantalla mejorados y han evolucionado para integrar herramientas de captura de pantalla y de post-procesamiento dirigidos al mercado de desarrollo educativo y de información multimedia.</p> <!-- imagenes de entrada --> <img src="image/camtasia-video-editing-assets.png"> <!-- fin de imagenes de entrada --> <center><h1>Camtasia Studio Recorder</h1></center> <p class="parrafo1">En Camtasia Recorder, el usuario puede empezar a grabar y detener la grabación en cualquier momento en formato CAMREC. Los archivos CAMREC se pueden guardar en un disco, o pueden ser importados directamente en Camtasia Studio para editarlos. Camtasia Recorder permite grabar el audio al mismo tiempo que se graba la pantalla. Camtasia también es compatible con el doblaje de otras pistas de audio o de voz durante la postedición del vídeo.</p> <center><h1>Camtasia Studio editor</h1></center> <p class="parrafo1"> En el editor de Camtasia Studio puedes importar archivos en varios formatos a la biblioteca de clips y ordenarlos por tiempo y por pista usando el timeline, lo cual es bastante común en los editores de vídeo actuales. Se pueden añadir superposiciones de distintos tipos, incluyendo los ajustes que quiera hacer el usuario, como cuándo y cómo mostrar el cursor, o algunos efectos de visión panorámica y zoom, como el efecto Ken Burns. Camtasia Studio 8 y Camtasia Mac 2 ofrecen numerosas opciones para mejorar las sesiones de la pantalla grabada para atraer la atención con el cursor o para resaltar sección(es) de la pantalla; o para ilustrar mejor en la pantalla las acciones del presentador. </p> <div class="descargas-dowloand"> <h1><font color="#000" face="aria">Descargas de camtasia studio</font></h1> <a href="https://www.techsmith.com/download/camtasia/" download="Gracias por descargar este programa de este sitio web" target="_blank"><img border="0" data-original-height="15" data-original-width="200" src="image/Mega.png" /></a> </div> <a href="https://www.techsmith.com/download/camtasia/" download="Gracias por descargar este programa de este sitio web" target="_blank"><img border="0" data-original-height="15" data-original-width="200" src="image/mdf.png" /></a> <a href="https://www.youtube.com/watch?v=iECNTQs7eSM" download="Gracias por descargar este programa de este sitio web" target="_blank"><img border="0" data-original-height="15" data-original-width="200" src="image/boton-VIDEO.png" /></a> <center><iframe width="560" height="315" src="https://www.youtube.com/embed/iECNTQs7eSM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></center><hr/> </article> </div> </main> </body> </html>
este es el código css ..
una vez ya tengas el código html en tu plantilla , lo único que tienes que llamar los estilos que son estos que estas viendo ¿como los llamas ? es muy sencillo
<link href="icon/css/fontello.css" rel="stylesheet"></link> de esta forma llamas los archivos css desde el index.html
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
main{
width: 100%;
height: auto;
background: #34495E;
position: absolute;
}
.content-all{
width: 100%;
max-width: 1000px;
background: #17A086;
margin: auto;
margin-top: 80px;
border: 2px solid purple;
}
header{
width: 100%;
height: 60px;
position: fixed;
left: 0;
top: 0;
background: #19BC9D;
}
#check{
display: none;
}
#check:checked ~ .menu{
width: 400px;
}
.menu{
position: fixed;
top: 60px;
width: 0px;
height: 100vh;
background: #2D3E50;
transition: all 500ms cubic-bezier(1,0,0,1);
transition-timing-function: cubic-bezier(1,0,0,1);
overflow: hidden;
}
.menu li{
list-style: none;
padding: 16px;
color: white;
cursor: pointer;
transition: all 300ms;
display: block;
width: 400px;
}
.menu li:hover{
background: rgba(0,0,0,0.2);
}
article{
padding: 40px;
}
.content-all label{
position: fixed;
width: 100%;
max-width: 1000px;
top: 14px;
font-size: 26px;
color: white;
cursor: pointer;
z-index: 10;
}
.content-all h2{
position: fixed;
width: 100%;
max-width: 1000px;
top: 14px;
font-size: 26px;
text-align: right;
color: white;
}
article h1{
font-size: 30px;
color: white;
font-weight: 100;
margin-top: 20px;
}
article .parrafo1{
font-size: 20px;
color: white;
margin-top: 40px;
letter-spacing: 2px;
}
article img{
width: 100%;
border: 4px solid white;
margin-top: 40px;
}
article .parrafo2{
font-size: 20px;
color: white;
margin-top: 40px;
letter-spacing: 1px;
}
Recuerda que si tienes alguna duda puedes dejar tu comentario para sacar tus dudas , para poder conseguir la plantilla , es necesario que mandes un correo electrónico, ya que es de vital importancia mantener lo que es los derechos de autor y no esta disponible para libre, circulación para ver el demo completo ve aquí ----> enlace
Hola mi nombre es Agustin ,soy informático desde los 15 años, soy apasionado ala informatica. 
No hay comentarios.:
Publicar un comentario