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..5bb950e9 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,3 +1,123 @@
-/*
- * 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;
+ grid-template-columns: 1fr auto;
+}
+a {
+ color: white;
+}
+body {
+ margin-top: 8%;
+ font-family: "Montserrat", sans-serif;
+ font-family: "Lato", sans-serif;
+ *background-color: aqua;
+
+}
+
+
+
+.home_container {
+ background-color: #18bc9c;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ color: white;
+}
+
+.title {
+ font-size: 70px;
+}
+
+
+.portafolio_container{
+justify-content: center;
+}
+.portafolio_container__img{
+ 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;
+}
+.contact_container > h1 {
+ font-size: 40px;
+ *padding: 0px 0px 0px 0px;
+ margin: 30px 0px 10px 0px;
+ color: rgb(37, 37, 37);
+}
+.fa-star {
+ color: gray;
+ padding: 10px 0px 10px 0px;
+}
+.formContact {
+ display: flex;
+ flex-direction: column;
+ align-items: left;
+ font-family: "Montserrat", sans-serif;
+}
+.formContact > input,
+.formContact > textarea {
+ padding: 20px 5px 10px 5px;
+ font-size: 15px;
+ border-top: none;
+ border-left: none;
+ border-right: none;
+}
+.formContact::placeholder {
+ color: gray;
+}
+.formContact > button {
+ font-family: "Lato", sans-serif;
+ color: white;
+ font-size: 15px;
+ font-weight: bold;
+ color: white;
+ background-color: #24ccbe;
+ border: none;
+ border-radius: 2px;
+ cursor: pointer;
+ height: 35px;
+ width: 55px;
+ margin: 20px 0px 0px 0px;
+}
+
diff --git a/index.html b/index.html
index 67324f35..03ae9d50 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,116 @@
-
+
+
+
+
+
+ Freelancer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
START BOOTSTRAP
+ ---- * ---
+
Web Developer - Graphic Artis - User Experience Designer
+ 
+
+
+
+
+
+