PROY78: Oracle Landing Page

Oracle Landing Page

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

• Ver un texto decorado (text-decoration) sobre las opciones del menú.

• Ver un estado hover sobre los botones.

Ideas para comenzar

1. Analiza: Analiza el diseño para saber cómo abordarás el proyecto. Este paso es crucial para ayudarte a pensar en el marcado HTML y las clases CSS.

2. Plantilla: Utiliza cualquiera de las plantillas que proporcionamos.

3. Git: Inicia el proyecto con Git. Este paso será muy útil para ayudarte a practicar los comandos básicos de Git.

4. HTML: Comience por el marcado HTML. Utilice las etiquetas que sean coherentes con el contenido.

5. CSS: De arriba hacia abajo, comience escribiendo los estilos base del proyecto, estilos generales, estilos reutilizables, etc.

6. Documenta: Agrega un archivo README.md al proyecto y describe tu experiencia con el desafío.

7. GitHub: Crea un repositorio en GitHub con el nombre del proyecto y enlaza para subir los archivos.

8. Despliega: Deja que el mundo sepa lo que has construido. Puedes utilizar un hosting gratuito como Netlify, Vercel, GitHub Pages.

9. Comparte: Envía tu solución a nuestro grupo de Facebook para que lo vea el resto de la comunidad.

10. Crea: Escribe un artículo en LinkedIn sobre este proyecto, estaremos encantados de leer y apoyarte. Puedes agregarnos como colaboradores para ayudarte a completar el artículo.

Recursos del proyecto

• Oracle Landing Page - Figma

• Plantilla: descargar proyecto

• Plantilla en línea: duplicar proyecto

Montserrat: (https://fonts.google.com/specimen/Montserrat)

body background: #EEF1FC
card background: #FFFFFF
button background: #597FE2
footer background: #E2E7FA

menu options: #13274F
text body: #000000

Color Oracle
How To
Manual
Design Tips
Useful Links

Design for the color impaired
Color Oracle is a free color blindness simulator for Windows, Mac and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see.

Download for Mac

Download for Windows
Requires Java 6 or higher

Download for Linux
Requires Java 6 or higher

About
Development: Bernie Jenny, Monash University, Australia. Ideas, testing and icon: Nathaniel Vaughn Kelso, California.

Feedback
Color Oracle is a work in progress and will improve with time and your input. Please share your Color Oracle testimonial with us and send us an email.

Source
Color Oracle is open source, available on GitHub for Mac and Windows/Java.

© 2006–2018 by Bernie Jenny, Monash University, Melbourne, Australia. Last site update: 5 May 2018.

Recursos adicionales

• Boxicons

• Boostrap Icons

• Heroicons

• Readme

• GitHub Profile README Generator

• LinkedIn

• Hashnode

• Medium

Ejemplos de código

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    display: grid;
    place-items: center;
}

.container{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.circle {
    width: 2rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid #333;
    background-color: #fb98f3;
}

body {
    /* Sympathy */
    background: linear-gradient(to right, #5a5bf3, #91e7d9);
    /* Pacific */
    background: linear-gradient(to right, #8aedf6, #60a2f5);
    /* Butterfly */
    background: linear-gradient(to right, #edaef9, #81b1fa);
    /* Cryptic */
    background: linear-gradient(to right, #7ec9f5, #3957ed);
    /* Aqua */
    background: linear-gradient(to right, #65f4cd, #4799e9);
}

/* Mobile devices */
@media screen and (min-width: 375px) and (max-width: 480px) {
    /* Aquí los estilos */
}

/* iPads, Tablets */
@media screen and (min-width: 481px) and (max-width: 768px) {
    /* Aquí los estilos */
}

/* Small screens, laptops */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* Aquí los estilos */
}

/* Desktops, large screens */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
    /* Aquí los estilos */
}

<meta name="author" content="Nombre del autor">
<meta name="title" content="Título del proyecto">
<meta name="description" content="Breve descripción del contenido del proyecto">
<meta name="keywords" content="Palabra clave 1, Palabra clave 2, Palabra clave 3">

Tutoriales recomendados

• CSS Grid

• CSS Flexbox

• BEM Cheat Sheet

• Modelo de caja CSS

• Guía paso a paso: despliega un proyecto en Netlify

Referencias

• W3Schools

• UI Design Daily

• Frontend Mentor

Preguntas frecuentes

Hola Frontend Club,

Acabo de completar el proyecto #.

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

La mejor forma de escribir buen código es practicando todos los días⚡