Maquetando un Clon de Twitter - tercera sesión, 9 de mayo
Contenido del curso
Juan Diaz
Misael Gomez
Janet Guadalupe Torres Ménera
diego gomez
Victor Manuel Carreño Peña
Daniel Alberto Méndez Pérez
Axel Yaguana
Team Platzi
Yorlys Oropeza
Percy Pablo Barriga Ponce
Joao Ivan Garduño Salgado
Nelson Ezequiel Del Valle Chirinos Cepeda
Diego Toro Cárdenas
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 ...Activen 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 "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
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'; }
cual es el grupo de telegram
¡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! 💚
El grupo se envía en lo que te registras al challenge
Alguien tiene el link del script de font awesome porfa ?
<!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>
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.
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