41 Day - Blogr Landing Page

Blogr Landing Page

Bienvenido

Requerimientos

• Ver el diseño óptimo según el tamaño de pantalla del dispositivo.

• Ver estados hover para los elementos interactivos en la página.

Diseño

Desarrollo

1. Usa la plantilla base que proporcionamos.

2. Inicializa tu proyecto local con Git. Esto será útil para ayudarte a practicar los comandos básicos de Git.

3. Crea un repositorio en GitHub con el nombre del proyecto.

4. Vincula tu repositorio local con GitHub para subir los archivos locales al finalizar el proyecto.

5. Crea una cuenta en Netlify o Vercel para vincular con tu cuenta GitHub y hacer deploy del proyecto.

6. Analiza los diseños para saber cómo abordarás el proyecto. Este paso es crucial para ayudarte a pensar en el marcado HTML y las clases CSS para crear estilos reutilizables.

7. Escribe los estilos base del proyecto, incluyendo los estilos generales como font-family, font-size, etc.

8. Comienza por agregar los estilos de arriba hacia abajo. Pase a la siguiente sección una vez que esté satisfecho de haber completado el área en el que estaba trabajando.

Despliegue

• GitHub Pages

• Vercel

• Netlify

Envía tu solución

Hola Frontend Club👋,

Acabo de completar el reto # como parte del desafío #100DaysOfProjects.

Mi solución:
Página web - https://profile-card.netlify.app/
Repositorio - https://github.com/01-day-profile-card.git

Recursos

Medidas

### Widths
- Mobile: 375px
- Desktop: 1200px

Colores

### Paleta de colores
- Light red (CTA text): hsl(356, 100%, 66%)
- Very light red (CTA hover background): hsl(355, 100%, 74%)
- Very dark blue (headings): hsl(208, 49%, 24%)

- White (text): hsl(0, 0%, 100%)
- Grayish blue (footer text): hsl(240, 2%, 79%)
- Very dark grayish blue (body copy): hsl(207, 13%, 34%)
- Very dark black blue (footer background): hsl(240, 10%, 16%)

Background gradient - Intro/CTA mobile nav:
- Very light red: hsl(13, 100%, 72%)
- Light red: hsl(353, 100%, 62%)

Background gradient - body:
- Very dark gray blue: hsl(237, 17%, 21%)
- Very dark desaturated blue: hsl(237, 23%, 32%)

### Tipografia
- Fuente: [Overpass](https://fonts.google.com/specimen/Overpass?preview.text_type=custom)
- Peso: 300, 600

- Fuente: [Ubuntu](https://fonts.google.com/specimen/Ubuntu?preview.text_type=custom)
- Peso: 400, 500, 700

- Font size: 16px

Plantilla

• Puedes utilizar la plantilla base del proyecto para empezar a codificar.

• Contenido de texto del diseño.

Product Overview Pricing Marketplace Features Integrations Company About Team Blog Careers Connect Contact Newsletter LinkedIn Login Sign Up 

A modern publishing platform 
Grow your audience and build your online brand 

Start for Free Learn More 

Designed for the future 

Introducing an extensible editor Blogr features an exceedingly intuitive interface which lets you focus on one thing: creating content. The editor supports management of multiple blogs and allows easy manipulation of embeds such as images, videos, and Markdown. Extensibility with plugins and themes provide easy ways to add functionality or change the looks of a blog. 

Robust content management 
Flexible content management enables users to easily move through posts. Increase the usability of your blog by adding customized categories, sections, format, or flow. With this functionality, you’re in full control. 

State of the Art Infrastructure 
With reliability and speed in mind, worldwide data centers provide the backbone for ultra-fast connectivity. This ensures your site will load instantly, no matter where your readers are, keeping your site competitive. 

Free, open, simple 
Blogr is a free and open source application backed by a large community of helpful developers. It supports features such as code syntax highlighting, RSS feeds, social media integration, third-party commenting tools, and works seamlessly with Google Analytics. The architecture is clean and is relatively easy to learn. 

Powerful tooling 
Batteries included. We built a simple and straightforward CLI tool that makes customization and deployment a breeze, but capable of producing even the most complicated sites. 

Product Overview Pricing Marketplace Features Integrations Company About Team Blog Careers Connect Contact Newsletter LinkedIn

"Yo puedo hacer cosas que tú no puedes, tú puedes hacer cosas que yo no puedo; juntos podemos hacer grandes cosas". — Madre Teresa de Calcuta.