diff --git a/README.md b/README.md index 1265a92a..a932b22e 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ -# Freelancer +# Freelancer.. -* **Track:** _Common Core_ -* **Curso:** _Creando tu primer sitio web interactivo_ -* **Unidad:** _Maquetado web con HTML & CSS_ +- **Track:** _Common Core_ +- **Curso:** _Creando tu primer sitio web interactivo_ +- **Unidad:** _Maquetado web con HTML & CSS_..... -*** +--- Para completar este reto, hemos creado este repositorio boilerplate (plantilla inicial) con todos los recursos que necesitas. Esto incluye imágenes y @@ -31,50 +31,50 @@ a lograr: ## Consideraciones -* Encontrarás un archivo base `index.html` en el cual deberás escribir la +- Encontrarás un archivo base `index.html` en el cual deberás escribir la estructura de tu proyecto y enlazar tus archivos de estilos (CSS). -* En la carpeta `css` tendrás un archivo base `main.css` donde agregarás los +- En la carpeta `css` tendrás un archivo base `main.css` donde agregarás los estilos necesarios para tu proyecto. -* Dentro de la carpeta `assets` se encuentra la carpeta `images` donde +- Dentro de la carpeta `assets` se encuentra la carpeta `images` donde encontrarás todas las imágenes necesarias para completar tu proyecto. -* Deberás **actualizar el archivo `README.md`** explicando el contenido de tu +- Deberás **actualizar el archivo `README.md`** explicando el contenido de tu repositorio. -* Esta web utiliza 2 tipografías: `Montserrat` y `Lato`. +- Esta web utiliza 2 tipografías: `Montserrat` y `Lato`. -* La paleta de colores puedes obtenerla inspeccionado el sitio original, pero +- La paleta de colores puedes obtenerla inspeccionado el sitio original, pero para ganar tiempo, puedes usar los siguientes: `#2c3e50`, `#18bc9c`, `#212529`. -* Los íconos de redes sociales puedes obtenerlos de [Font Awesome](http://fontawesome.io/). +- Los íconos de redes sociales puedes obtenerlos de [Font Awesome](http://fontawesome.io/). -* Para este reto, encontrarás ciertas cosas que probablemente aun no has visto +- Para este reto, encontrarás ciertas cosas que probablemente aun no has visto en clase (formularios). No te preocupes, estamos seguros que lo afrontarás con éxito, de igual forma aquí unos tips: - Para el formulario, revisa las etiquetas como `form`, `input`, `button`. -* El subrayado que incluye la estrella en las diversas secciones del sitio, en +- El subrayado que incluye la estrella en las diversas secciones del sitio, en la web original se hace con un ícono y pseudoelementos (`:after`, `:before`), es un reto entretenido, sin embargo, no trates de enfocarte en esa parte desde un inicio ya que no es el objetivo principal del reto :) -* Puedes ver el [sitio original](https://blackrockdigital.github.io/startbootstrap-freelancer/) +- Puedes ver el [sitio original](https://blackrockdigital.github.io/startbootstrap-freelancer/) para que te des una idea de como debe quedar. > Nota: El sitio original tiene ciertos efectos y funcionalidades que -están fuera del alcance de este reto. Enfócate en obtener la maquetación -lo más parecido posible, usando lo aprendido en clase ;) + > están fuera del alcance de este reto. Enfócate en obtener la maquetación + > lo más parecido posible, usando lo aprendido en clase ;) ## A tener en cuenta Este reto será evaluado sobre lo siguiente: -* Pixel perfect (replicar el diseño con exactitud) -* Nombramiento de clases, id, etc -* Indentación -* Archivo `README.md` actualizado y correctamente redactado -* Uso de comentarios para hacer tu código más legible +- Pixel perfect (replicar el diseño con exactitud) +- Nombramiento de clases, id, etc +- Indentación +- Archivo `README.md` actualizado y correctamente redactado +- Uso de comentarios para hacer tu código más legible diff --git a/css/main.css b/css/main.css index 839fb7d0..c1e4e516 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,214 @@ -/* - * Estilos de tu proyecto - */ \ No newline at end of file +html { + scroll-behavior: smooth; +} + +#portafolio #about #contact { + scroll-margin-top: 70px; +} + +header { + width: 100%; + background-color: #2c3e50; + position: fixed; + top: 0; + color: white; +} +nav { + display: grid; + margin: 10px; + grid-template-columns: 1fr auto; +} +a { + margin: 10px; + top: 20px; + color: white; +} +body { + margin-top: 5%; + font-family: "Montserrat", sans-serif; + font-family: "Lato", sans-serif; + *background-color: aqua; + padding: 0; + margin: 0; +} + +.home_container { + padding: 7%; + background-color: #18bc9c; + display: flex; + align-items: center; + flex-direction: column; + color: white; +} + +.title { + font-size: 70px; +} + +.portafolio_container { + margin: 7%; + justify-content: center; +} +.portafolio_container__img { + margin: 7%; + align-content: center; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + padding: 0px; + row-gap: 2%; + column-gap: 2%; +} + +.portafolio_container__img > img { + padding: 0px; + margin: 0px; +} +.portafolio_container > h1 { + text-align: center; + font-size: 50px; +} + +/* .fas fa-star { + height: 10px; + width: 10px; +} */ + +.contact_container { + display: flex; + flex-direction: column; + align-items: center; + font-family: "Lato", sans-serif; + background: white; + width: 100%; + padding: 60px 0px 60px 0px; +} +.contact_container > h1 { + font-size: 50px; + *padding: 0px 0px 0px 0px; + margin: 30px 0px 0px 0px; + color: rgb(37, 37, 37); +} + +.iForm { + color: rgb(48, 48, 51); + font-size: 25px; + padding: 0px 0px 10px 0px; +} +.formContact { + display: flex; + flex-direction: column; + align-items: left; + font-family: "Lato", sans-serif; +} +.formContact > input, +.formContact > textarea { + padding: 0px 10px 0px 10px; + font-size: 18px; + border-top: none; + border-left: none; + border-right: none; + border-bottom: solid 2px rgb(223, 219, 219); + width: 700px; + height: 60px; + margin-bottom: 10px; + font-family: "Lato", sans-serif; + font-weight: bold; +} +.formContact > textarea { + padding-top: 10px; + width: 700px; + height: 100px; +} +.formContact > input::placeholder, +.formContact > textarea::placeholder { + color: rgb(177, 174, 174); +} +.formContact > input:focus, +.formContact > textarea:focus { + outline-color: rgb(177, 174, 174); +} +.btnForm { + color: white; + font-size: 15px; + font-weight: bold; + color: white; + background-color: #18bc9c; + border: none; + border-radius: 2px; + cursor: pointer; + height: 35px; + width: 55px; + margin: 20px 0px 0px 0px; +} + +.about_container { + background-color: #18bc9c; + text-align: center; + width: 100%; + height: 100%; + color: white; +} +.title { + padding-top: 40px; + font-size: 50px; +} +.text_about { + column-count: 2; + width: 100%; + margin-left: 40px; + margin-right: 40px; +} +.first { + margin-left: 100px; +} +.second { + margin-right: 200px; +} +.text_about p { + display: flex; + justify-content: center; + text-align: center; + font-size: 30px; + padding: 0 20px; + text-align: justify; + width: 80%; + color: white; + font-family: "Montserrat", sans-serif; + font-weight: bold; +} + +.about_container button { + background-color: #18bc9c; + color: white; + border-radius: 2px; + border: 2px solid white; + text-align: center; + font-family: "Montserrat", sans-serif; + font-weight: bold; + height: 80px; + font-size: 40px; + margin-top: 40px; +} + +.info_container { + background-color: #2c3e50; + color: white; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + text-align: center; + font-family: "Lato", sans-serif; + padding: 15px 0px 30px 0px; + font-size: 15px; +} + +.iconWeb { + padding: 20px 5px 0px 5px; + font-size: 30px; +} +footer { + background-color: #2c3e50; + text-align: center; + color: white; + padding: 10px 0px 20px 0px; + font-size: 14px; +} diff --git a/index.html b/index.html index 67324f35..fbeccf95 100644 --- a/index.html +++ b/index.html @@ -1 +1,125 @@ - + + + + + + + Freelancer + + + + + + + + + + + + + + + + +
+ + +
+ +
+
+
+ logo +

START BOOTSTRAP

+ ---- * --- +

Web Developer - Graphic Artis - User Experience Designer

+ +
+ + +
+

PORTFOLIO

+ +
+ + + + + + +
+
+ +
+

ABOUT

+ +
+
+

Freelancer is a free bootstrap theme created by Start Bootstrap. + The download includes the complete source files including HTML,CSS, + and Javascript as well as options LESS stylesheets for easy customization.

+
+
+

Whether you're a student looking to showcase you work, a professional looking to + share + your projects, this template is the perfect starting point!

+
+
+ +
+
+ +
+

CONTACT ME

+ +
+ + + + + +
+ + +
+ +
+
+

LOCATION

+

3481 Melrose Place

+

Beverly Hills, CA 90210

+
+ +
+

ARROUND THE WEB

+
+ + + + + +
+
+ +
+

ABOUT FREELANCER

+

Freelance is a free to use, open sourse

+

Bootstrap theme created by Start Bootstrap.

+
+ + +
+ + + + + + + \ No newline at end of file