Jump to content

Conrad AV

Members
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

About Conrad AV

  • Birthday 08/14/1989

Previous Fields

  • Languages
    HTML CSS and a bit of Javascript

Profile Information

  • Location
    Mex
  • Interests
    Star Wars, Mass Effect, Xbox, Books, Pets

Conrad AV's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Conrad AV
    I found this video, just in case someone in the future have the same problem: https://youtu.be/FCDr0okbJaM
  2. Conrad AV
    Thank you, gonna check it right now.
  3. Conrad AV
    Hello I am new with web development and I have an question, I have tried to serach at differente sites but i do not why this is not working for me. I want to put the footer of the page at the bottom (I mean, the footer should always be at the bottom, even if the content is not enough to push it down). Here is my HTML and my CSS. Hope you can help me, thank you! <---HTML---> <!DOCTYPE-html> <html> <head> <meta charset="UTF-8"> <title> CV y Portafolio </title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/estilos.css"> </head> <body> <header> <nav class="center"> <ul> <li> <a href="#"> SOBRE MÍ </a> </li> <li> <a href="#"> PORTAFOLIO </a> </li> <li> <a href="#"> CONTACTO </a> </li> </ul> </nav> </header> <div class="center"> <section id="SobreMi"> <div id="Cont-SobreMi"> <img src="img/Diego.jpg"> <h1>Sobre mí</h1> <p>Mi nombre es Diego, soy diseñador gráfico graduado el 11 de Diciembre de 2014. Desde niño he sido amante de los juegos de video y comenzando mi adolescencia descubrí el gusto por la lectura. Me gusta leer novelas históricas, ciencia ficción y fantasía.</p> <br> <br> <p>Debido al trabajo de mi padre, me mudé constantemente a distintos estados de la república mexicana, siempre que llegaba a un nuevo lugar era comenzar desde cero, creo que esto me ayudó a aceptar los cambios que se presentan en la vida con relativa facilidad.</p> </div> <div id="Cont-Intereses"> <h1>Intereses</h1> <div id="Intereses"></div> <div id="Intereses"></div> <div id="Intereses"></div> <div id="Intereses"></div> <div id="Intereses2"></div> <div id="Intereses2"></div> <div id="Intereses2"></div> <div id="Intereses2"></div> </div> <div id="Vida-Laboral"> <h1>Vida laboral</h1> </div> </section> <aside> </aside> </div> <footer> <div class="center"> <div id="cont-footer"> Contenido del Footer </div> </div> </footer> </body> </html> <---CSS RESET---> @charset "utf-8"; * { margin:0; padding:0; border:0; outline:0; font-size:100%; font-weight:normal; font:inherit; vertical-align:baseline; box-sizing:border-box; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display:block; } body { line-height:1; } h1, h2, h3, h4, h5, h6 { font-weight:bold; } ol, ul { list-style:none; } b, strong { font-weight:bold; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } table { border-collapse:collapse; border-spacing:0; } <---CSS---> .center {margin: auto; max-width: 1200px; position: relative; height: initial;} body {background-color: ghostwhite; font-family: Ebrima, Arial, Helvetica; height: auto;} header { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: #1d1d1d; color: ghostwhite; z-index: 3; font-family: sans-serif; font-weight: bold; border-style: solid; border-bottom-width: 1px; border-color: ghostwhite; display: block;} #menu-prinicipal {position: absolute; left: 0;} #menu-principal li {display: inline-block; margin-top: 16px; margin-left: 0;} #menu-principal a { text-decoration: none; color: ghostwhite; padding: 15px; opacity: 1;} #menu-principal a:hover {background-color: #42BAC8; color: ghostwhite;} section {width: 100%; height: 100%; margin-top: 40px; margin-bottom: 40px; padding: 0; display:block; /*background-color: ghostwhite;background: url(../img/Galaxia2.jpg) no-repeat center center / cover;*/ } #contenido {position: absolute; margin-top: 50px; margin-bottom: 0; width: 900px; height: auto; /*background-color: white;*/ padding: 30px; vertical-align: middle; font-size: 11pt; font-family: sans-serif; color: #1d1d1d;} #contenido img {float: left; margin-right: 30px; margin-bottom: 10px; /*max-width: 50%; max-height: 50%;*/ width: 300px; height: 300px; border-radius: 1%} #contenido h3 {margin-top: 0; margin-bottom: 40px; font-size: 1.5em; color: #42BAC8;} #contenido h2 {margin-top: 0; margin-bottom: 10px; font-family: sans-serif; font-size: 1.5em;} #contenido p + h2 {margin-top: 40px;} #contenido p {text-align: justify; padding-right: 0; font-family: sans-serif; line-height: 1.3; text-indent: 3em;} #contenido ul + h2 {margin-top: 40px;} #contenido li {text-indent: 1em; line-height: 1.3em;} #Portafolio {margin-bottom: 100px; display: block;} /*Index*/ #contenido-index {padding-top: 300px; color: #1d1d1d;} #contenido-index h3, h2 {font-size: 3em; font-style: normal;} /*Sobre mi*/ aside { margin-top: 50px; margin-bottom: 50px; padding: 5px; width: 280px; height: 645px; float: right; font-family: sans-serif;} #contenido-aside {border-style: inset; border-bottom-width: 1px; border-color: #42BAC8;} #contenido-aside h3 {color: #42BAC8; margin-bottom: 0px; padding: 5px; border-style: solid; border-bottom-width: 0; border-bottom-color: #42BAC8; color: ghostwhite; background-color: #42BAC8;} #contenido-aside {width 100%; height: 160px; color: #1d1d1d; /*background-color: white;*/ padding: 10px;} #contenido-aside p {line-height: 1.3;} #contenido-aside + #contenido-aside {margin-top: 10px;} #contenido-aside a {text-decoration: none; color: #1d1d1d;} .ver-mas {color: #42BAC8; text-align: center;margin-bottom: 15px;} #intereses {width: 838px; height: auto; margin-top: 15px; padding: 0; background-color: none; display:inline-block;} #intereses h2 {margin-bottom: 15px; font-size: 1.5em; color: #42BAC8;} #contenido-intereses {width: 146px; height: 109px; display: inline-block; background-color: 2b2b2b;} #contenido-intereses img {width: 146px; height:109px;} #contenido-intereses + #contenido-intereses {margin-left: 21px;} #descripcion-foto {width: 146px; height: 20px; position: absolute; margin-top: 89px; background-color: #42BAC8;} #texto-intereses {padding-left: 5px; padding-top: 3px; font-size: 1em; color: white; font-style: normal;} /*Experiencia Laboral*/ #contenido-ExpLab {position: absolute; margin-top: 50px; margin-bottom: 0px; width: 900px; height: auto; /*background-color: white;*/ padding: 20px; vertical-align: middle; font-family: sans-serif; color: #1d1d1d;} #contenido-ExpLab img {float:left; margin-top: 20px; margin-left: 0; margin-bottom: 20px; max-width: 50%; max-height: 50%;} #contenido-ExpLab h3 {margin-top: 0; margin-bottom: 40px; font-size: 2em; color: #42BAC8;} #contenido-ExpLab h2 {margin-top: 0; margin-bottom: 10px; font-family: sans-serif; font-size: 1.5em;} #contenido-ExpLab p + h2 {margin-top: 40px;} #contenido-ExpLab p {text-align: justify; padding-right: 0; font-family: sans-serif; line-height: 1.3; text-indent: 1em;} #contenido-ExpLab ul + h2 {margin-top: 50px;} #contenido-ExpLab li {text-indent: 1em; line-height: 1.3em;} /*Portafolio*/ #contenido-portafolio {position: absolute; margin-top: 30px; margin-bottom: 50px; padding: 20px 20px 20px 20px; width: 100%; height: 645px; font-family: sans-serif; background-color: transparent;} #contenido-portafolio h2 { margin-bottom: 10px; color: #42BAC8; font-size: 2em;} #contenido-portafolio img {max-width: 90%; max-height: 100%; margin-bottom: 0px; margin-left: 0px; padding-top: 30px;} #contenido-portafolio p {line-height: 1.3; text-align: justify; text-indent: 2em;} #contenido-portafolio #Contenedor {margin-left: 25px;} #contenido-portafolio #Prueba { float:left; width: 900px; height: 600px; margin-left: 10px; margin-bottom: 0px; margin-right: 10px; /*background-color: red;*/ display: inline-block;} /*#contenido-portafolio #Btn {float: left; width: 100px; margin-top: 175px;; height: 300px; background-color: #42BAC8; display: inline-block;}*/ #contenido-portafolio #Izquierda {float: left; width: 100px; height: 300px; margin-top: 175px; padding-top: 5px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; background-color: #42BAC8; color: ghostwhite; font-weight: bold; cursor: pointer; display:inline-block; font-size: 1em;} #contenido-portafolio #Derecha {float: left; width: 100px; height: 300px; margin-top: 175px; padding-top: 20px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; background-color: #42BAC8; color: ghostwhite; font-weight: bold; cursor: pointer; display: inline-block; font-size: 1em;} #contenido-portafolio #texto { width: 900px; height: 100px; margin-left: 220px; margin-bottom: 10px; padding-top: 0px; display: inline-block; font-weight: bold; color: #2b2b2b; font-size: 1em;} #contenido-portafolio a:hover {text-decoration: none; color: #2b2b2b;} #contenido-portafolio a {text-decoration: none; color: #42BAC8;} #contenido-portafolio #texto #texto_cont1 {margin-right: 20px; display: inline-block;} #contenido-portafolio #texto #texto_cont2 {margin-right: 20px; display: inline-block;} #contenido-portafolio #texto #texto_cont3 {display: inline-block;} /*Contacto*/ #contenido-contacto{position: absolute; margin-top: 200px; width: 100%; height: auto; padding: 20px; color: #1d1d1d;} #contenido-contacto img {max-width: 10%; margin-bottom: 30px;} #contenido-contacto h3 {font-size: 1.5em;} #contenido-contacto img + h3 {margin-bottom: 50px;} /*Footer*/ footer {position: relative; margin-top: 20px; bottom: 45%; padding: 20px; width: 100%; height: 80px; color: white; background-color: black; display: block;} #Frase {font-style: italic;} #Nombre {text-indent: 2em;}
×
×
  • Create New...