Dev nadia

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

css/main.css

@@ -1,3 +1,214 @@
-/*
- * Estilos de tu proyecto
- */
+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;
+}