0

HTML

<!DOCTYPE HTML> <html lang="es"> <head>     <meta charset="utf-8" />    <title>Revol INC.</title>   <link rel="stylesheet" href="assets/css/main.css" />    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">  <script src="assets/js/jquery.min"></script>    <script src="assets/js/send-email.js"></script> </head> <body>  <a href="inicio.html"><img src="images/logo-001.jpg" alt="" /></a>  <header>        <nav>           <ul>
                <li><a href="inicio.html">Inicio</a></li>
                <li><a href="que-hacemos.html">¿Qué hacemos?</a></li>
                <li><a href="como-lo-hacemos.html">Cómo lo hacemos</a></li>
                <li><a href="proyectos.html">Proyectos</a></li>
                <li><a href="contacto.html">Contacto</a></li>           </ul>   </header>   <section id="main">         <div class="main">          <div class="first">
                <p><center>¡Hola! Sigue nuestros <strong>proyectos</strong> a fondo y conoce más acerca de <strong><em>Revol INC.</em></strong> ¡Sólo deja tu email abajo! Es totalmente <strong><em>GRATIS</em></strong>.</center><p>
                <center><input type="email" placeholder="Ingresa tu Email">
                <a href="inicio.html"><input type="submit" onclick="send()"></a></center>           </div>      </div>  </section> </body> <footer>     <p>Revol INC.&copy; Todos los derechos reservados. <strong>2018</strong></p>    <a href="#"><i class="fab fa-instagram"></i></a> </footer> </html>

CSS

body {  text-align: center;     font-size: 22px;    font-family: verdana;   color: white;   background: url(../../images/bck-001.jpg);  background-size: cover;     background-position: center;    margin: 0;  padding: 0; } p {   font-size: 18px;    line-height: 20px; } div p {    text-align: left; } img {   border-radius: 100%;    width: 100px;   height: 100px;  margin-top: 18px; } .main {     margin-left: auto;  margin-right: auto;     margin-top: 95px;   margin-bottom: 95px; } .first, .second, .third, .fourth {   background: rgba(50,50,50,.8);  padding: 20px;  border-radius: 2px; } input {   margin: 20px 10px 0 0;  padding: 10px;  border: 0;  border-radius: 2px; } input[type="email"] {     margin-top: 30px;    } input[type="submit"] {   background: rgba(247,38,53,1);  color: white;   margin-top: 50px; }
#msg {  margin: 20px 10px 0 0;  padding: 10px;  border: 0;  border-radius: 2px; } ol, ul {  list-style: none; } li {    display: inline-block;  padding: 5px; } a {     text-decoration: none;  color: white; } i {     position: relative;     float: right;   margin: 5px; } header {     margin-top: 20px;   background: rgba(247,38,53,.8);     border-radius: 2px; } footer {  background: rgba(50,50,50,.8);  padding: 1px;   border-radius: 2px; }

SCREENSHOT

FÍSICO DE MI PROBLEMA

Hola, soy un amateur en los códigos y quisiera saber como alinear el ícono de instagram con el texto del footer hacia la derecha. Agradezco su ayuda, saludos. Buen día geeks!

2
  • Hola, te doy la bienvenida a Stack Overflow en español, te sugiero completar el recorrido de bienvenida para que te familiarices con el funcionamiento del lugar y de paso ganar tu primera medalla. También puedes revisar la sección de Cómo preguntar para que tus preguntas sean bien recibidas por la comunidad y obtengas respuestas de calidad.
    – user22721
    Commented el 8 jul. 2018 a las 15:23
  • ¡Gracias! Lo haré.
    – Slowpex
    Commented el 8 jul. 2018 a las 15:35

1 respuesta 1

2

Solo tienes que meterlo en un contenedor y y en un li, y al li le tienes que dar posición relative y lo posicionas a tu gusto. Si quieres que sea responsive tienes que reescribir tu codigo saludos.

body {
            text-align: center;
            font-size: 22px;
            font-family: verdana;
            color: white;
            background: url(../../images/bck-001.jpg);
            background-size: cover;
            background-position: center;
            margin: 0;
            padding: 0;
        }

        p {
            font-size: 18px;
            line-height: 20px;
        }

        div p {
            text-align: left;
        }

        img {
            border-radius: 100%;
            width: 100px;
            height: 100px;
            margin-top: 18px;
        }

        .main {
            margin-left: auto;
            margin-right: auto;
            margin-top: 95px;
            margin-bottom: 95px;
        }

        .first,
        .second,
        .third,
        .fourth {
            background: rgba(50, 50, 50, .8);
            padding: 20px;
            border-radius: 2px;
        }

        input {
            margin: 20px 10px 0 0;
            padding: 10px;
            border: 0;
            border-radius: 2px;
        }

        input[type="email"] {
            margin-top: 30px;
        }

        input[type="submit"] {
            background: rgba(247, 38, 53, 1);
            color: white;
            margin-top: 50px;
        }

        #msg {
            margin: 20px 10px 0 0;
            padding: 10px;
            border: 0;
            border-radius: 2px;
        }

        ol,
        ul {
            list-style: none;
        }

        li {
            display: inline-block;
            padding: 5px;
        }

        a {
            text-decoration: none;
            color: white;
        }

        i {
            position: relative;
            float: right;
            margin: 5px;
        }

        header {
            margin-top: 20px;
            background: rgba(247, 38, 53, .8);
            border-radius: 2px;
        }

        footer {
            background: rgba(50, 50, 50, .8);
            padding: 1px;
            border-radius: 2px;
        }
        
        footer li {
            position: relative;
            float: right;
            top: -50px;
            list-style-type: none;
            float: right;
        }
        
        footer .container {
            position: relative;
            
        }
<!DOCTYPE HTML>
<html lang="es">

<head>
    <meta charset="utf-8" />
    <title>Revol INC.</title>
    <link rel="stylesheet" href="assets/css/main.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <script src="assets/js/jquery.min"></script>
    <script src="assets/js/send-email.js"></script>
</head>

<body>
    <a href="inicio.html"><img src="images/logo-001.jpg" alt="" /></a>
    <header>
        <nav>
            <ul>
                <li><a href="inicio.html">Inicio</a></li>
                <li><a href="que-hacemos.html">¿Qué hacemos?</a></li>
                <li><a href="como-lo-hacemos.html">Cómo lo hacemos</a></li>
                <li><a href="proyectos.html">Proyectos</a></li>
                <li><a href="contacto.html">Contacto</a></li>
            </ul>
        </nav>
    </header>
    <section id="main">
        <div class="main">
            <div class="first">

                <center>
                    <p>¡Hola! Sigue nuestros <strong>proyectos</strong> a fondo y conoce más acerca de <strong><em>Revol INC.</em></strong> ¡Sólo deja tu email abajo! Es totalmente <strong><em>GRATIS</em></strong>.</p>
                </center>

                <center><input type="email" placeholder="Ingresa tu Email">
                    <a href="inicio.html"><input type="submit" onclick="send()"></a></center>
            </div>
        </div>
    </section>

    <footer>
        <p>Revol INC.&copy; Todos los derechos reservados. <strong>2018</strong></p>
        <div class="container">
            <li><a href="#"><i class="fab fa-instagram" style="color: #262626"></i></a></li>
        </div>
    </footer>
</body>

</html>

1
  • Gracias por tu ayuda :).
    – Slowpex
    Commented el 8 jul. 2018 a las 15:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.