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

Cursos Empresas Blog Live Conf Precios

Contenido del curso

Fase 1: HTML y CSS

Fase 2: JavaScript

Fase 3: React.js

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

Comentarios

Juan Diaz

Estudiante

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

Twitter Clone

Misael Gomez

Estudiante

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

Janet Guadalupe Torres Ménera

Estudiante

Les dejo aquí el código que tiene que insertar en el head para tener acceso a los íconos gratis de Font Awesome ...Activen la pestañita FREE que está en el costado izquierdo.

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

diego gomez

Estudiante

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 "text-overflow: ellipsis;" le ponemos los 3 puntos (...) a un texto superior al cajón donde vive. Así lo resolví yo y espero les sirva

Victor Manuel Carreño Peña

Estudiante

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';
}

Daniel Alberto Méndez Pérez

Estudiante

cual es el grupo de telegram

Axel Yaguana

Team Platzi

¡Hola! :D

Aquí te dejo una explicación de los grupos de Telegram y aquí el link para que te puedas unir a ellos.

También te invito a unirte al grupo de Facebook de la comunidad dando clic aquí.

¡Nunca pares de aprender! 💚

Yorlys Oropeza

Estudiante

El grupo se envía en lo que te registras al challenge

Challenge

Percy Pablo Barriga Ponce

Estudiante

Alguien tiene el link del script de font awesome porfa ?

Joao Ivan Garduño Salgado

Estudiante

<!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/boxicons@2.1.2/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</h2>
                <h2 class="titles--title">unete a twitter hoy mismo.</h3>
            </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>
                <h4>¿ya tienes cuenta?</h4>
                <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>

Nelson Ezequiel Del Valle Chirinos Cepeda

Estudiante

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

Diego Toro Cárdenas

Estudiante

Sabes qué... he clonado el clon de don Leo.

Fui al comentario de Juan Diaz y seguí el enlace.
Luego en mi consola creé la branch cloneTwitter siguiendo con la instrucción git clone git@github.com: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 :P

@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/boxicons@2.1.2/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</h2>
                <h2 class="titles--title">unete a twitter hoy mismo.</h3>
            </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>
                <h4>¿ya tienes cuenta?</h4>
                <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>

Fase 1: HTML y CSS

Inicio del reto - primera sesión, 2 de mayo

Maquetación del portafolio - segunda sesión, 6 de mayo