No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Maquetando un Clon de Twitter - tercera sesi贸n, 9 de mayo

3/22
Recursos

Aportes 8

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Aca les dejo el repo de la clase para que puedan hacer el fork en Github:

Twitter Clone

Si les es de utilidad les comparto una p谩gina donde pueden sacar la g de google, pueden solo copiar el link de la direccion de la imagen y ya, la saque de esta p谩gina
https://www.flaticon.es/resultados?word=google
Nota: es una p谩gina donde pueden sacar varios iconos

Les dejo aqu铆 el c贸digo que tiene que insertar en el head para tener acceso a los 铆conos gratis de Font Awesome 鈥ctiven la pesta帽ita FREE que est谩 en el costado izquierdo.

    <script src="https://kit.fontawesome.com/af0bf7190a.js" crossorigin="anonymous"></script>

para lo de los 3 puntos (鈥) en el elemento de texto que es m谩s grande al caj贸n en donde vive, podemos utilizar overflow: hidden; y white-space: nowrap;" para determinar el desbordamiento de un texto superior a su contenedor , y luego con 鈥渢ext-overflow: ellipsis;鈥 le ponemos los 3 puntos (鈥) a un texto superior al caj贸n donde vive. As铆 lo resolv铆 yo y espero les sirva

Aqu铆 dejo las fuentes originales de Twitter por si deseean utilizarlas en su CSS:

@font-face {
  font-family: TwitterChirpExtendedHeavy;
  src: url(https://abs.twimg.com/fonts/v1/chirp-extended-heavy-web.woff2) format('woff2');
  src: url(https://abs.twimg.com/fonts/v1/chirp-extended-heavy-web.woff) format('woff');
  font-weight: 800;
  font-style: 'normal';
  font-display: 'swap';
}
@font-face {
  font-family: TwitterChirp;
  src: url(https://abs.twimg.com/fonts/v2/chirp-regular-web.woff2) format('woff2');
  src: url(https://abs.twimg.com/fonts/v2/chirp-regular-web.woff) format('woff');
  font-weight: 400;
  font-style: 'normal';
  font-display: 'swap';
}
@font-face {
  font-family: TwitterChirp;
  src: url(https://abs.twimg.com/fonts/v2/chirp-medium-web.woff2) format('woff2');
  src: url(https://abs.twimg.com/fonts/v2/chirp-medium-web.woff) format('woff');
  font-weight: 500;
  font-style: 'normal';
  font-display: 'swap';
}
@font-face {
  font-family: TwitterChirp;
  src: url(https://abs.twimg.com/fonts/v2/chirp-bold-web.woff2) format('woff2');
  src: url(https://abs.twimg.com/fonts/v2/chirp-bold-web.woff) format('woff');
  font-weight: 700;
  font-style: 'normal';
  font-display: 'swap';
}
@font-face {
  font-family: TwitterChirp;
  src: url(https://abs.twimg.com/fonts/v2/chirp-heavy-web.woff2) format('woff2');
  src: url(https://abs.twimg.com/fonts/v2/chirp-heavy-web.woff) format('woff');
  font-weight: 800;
  font-style: 'normal';
  font-display: 'swap';
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- FONTS -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <!-- CSS -->
    <link rel="stylesheet" href="./src/css/base.css">
    <link rel="stylesheet" href="./src/css/index.css">
     <!-- FONTS -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"></script>
     <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/brands.min.css"></script>    -->
     <!-- <script src="https://kit.fontawesome.com/3a08761389.js" crossorigin="anonymous"></script> -->
     <!-- <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'> -->
    <title>Twitter</title>
</head>
<body>

    <header class="header">
        <span class="header--icon"><i class="fa-brands fa-twitter"></i></span>
    </header>

    <main class="main">
        

        <div>
            <div class="main--titles">
                <h1 class="titles--title">lo que esta pasando ahora</h1>
                <h2 class="titles--title">unete a twitter hoy mismo.</h2>
            </div>

            <div class="main--buttons">
                <button class="main--button main--button__white">
                    <span><i class="fa-brands fa-google"></i></span> registrate con google
                </button>
                <button class="main--button main--button__white">
                    <span><i class="fa-brands fa-apple"></i></span> registrate con apple
                </button>
                <div class="main--division">
                    <span>o</span>
                </div>
                <button class="main--button main--button__blue">registrate con el numero de telefono</button>
                <p class="main--text">al registrarte, aceptas <a class="text--link" href="#">Terminos y Servicios</a> de uso de cookies</p>
            </div>
    
            <div>
                <h3>驴ya tienes cuenta?</h3>
                <button class="main--button main--button__white main--button__white-blue">iniciar sesion</button>
            </div>
        </div>

        <div class="main--background">
            <span class="header--icon header--icon__white"><i class="fa-brands fa-twitter"></i></span>
        </div>
        
    </main>
    <footer class="footer">
        <ul class="footer--list">
            <li class="list--item"><a href="">acerca de</a>   </li>
            <li><a href="">centro de ayuda</a></li>
            <li><a href="">condiciones de servicio</a></li>
        </ul>
    </footer>

</body>
</html>

Hola a todos, aqui les dejo el link de la imagen de fondo de twitter https://abs.twimg.com/sticky/illustrations/lohp_1302x955.png

Sabes qu茅鈥 he clonado el clon de don Leo.

  1. Fui al comentario de Juan Diaz y segu铆 el enlace.

  2. Luego en mi consola cre茅 la branch cloneTwitter siguiendo con la instrucci贸n git clone [email protected]:LeoCode0/PlatziChallenge-portafolio-2.git para despu茅s escribir el comando git push --set-upstream origin cloneTwitter y ya esta.

驴quieres ver? Pues mira


Y no es por darme de mero mero, pero a diferencia del profe. Yo utilizo Debian 馃槢