Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 28 additions & 49 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,80 +1,59 @@
# Freelancer

* **Track:** _Common Core_
* **Curso:** _Creando tu primer sitio web interactivo_
* **Unidad:** _Maquetado web con HTML & CSS_
* **Curso:** _Criando um site interativo_
* **Unidad:** _Layout da Web com HTML & CSS_

***

Para completar este reto, hemos creado este repositorio boilerplate (plantilla
inicial) con todos los recursos que necesitas. Esto incluye imágenes y
estructura de carpetas y archivos donde colocarás tu código.
Para completar este desafio, criamos um repositório boilerplate (template inicial) com todos os recursos necessários. Isso inclui imagens, estrutura de pastas e arquivos onde você irá escrever seu código.

## Flujo de trabajo
## Fluxo de trabalho

1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74)
de este repositorio.
1. Faça um [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74)
deste repositório.

2. Luego deberás **clonar** tu fork en tu máquina. Recuerda que el comando a usar
es `git clone` y su estructura normalmente se ve así:
2. Em seguida você deverá **clonar** esse fork em seu computador. Lembre-se do comando `git clone` e de sua estrutura, que normalmente é essa:

```bash
git clone https://github.com/<nombre-de-usuario>/freelancer.git
git clone https://github.com/<nome-de-usuario>/freelancer.git
```

## Objetivo

El reto consiste en replicar el sitio de **Freelancer**, este será el resultado
a lograr:
O desafio consiste em replicar o site **Freelancer** e o resultado desejado é este:

![Freelancer Website](docs/fullpage.png)

## Consideraciones
## Considerações

* 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).
* Encontrará um arquivo-base `index.html` no qual deverá escrever a estrutura de seu projeto e linkar seus arquivos de estilo(CSS).
* Na pasta `css` terá um arquivo-base `main.css` onde você irá adicionar os estilos necessários em seu projeto.
* Dentro da pasta `assets` se encontra a pasta `images` onde estão todas as imagens necessárias para completar seu projeto.

* En la carpeta `css` tendrás un archivo base `main.css` donde agregarás los
estilos necesarios para tu proyecto.
* Você deverá **atualizar o arquivo `README.md`** explicando o conteúdo de seu repositório.

* Dentro de la carpeta `assets` se encuentra la carpeta `images` donde
encontrarás todas las imágenes necesarias para completar tu proyecto.
* Esta página utiliza duas fontes: `Montserrat` e `Lato`.

* Deberás **actualizar el archivo `README.md`** explicando el contenido de tu
repositorio.
* A paleta de cores pode ser obtida inspecionando o site original, porém para pouparmos tempo você pode usar as seguintes: `#2c3e50`, `#18bc9c` e `#212529`.

* Esta web utiliza 2 tipografías: `Montserrat` y `Lato`.
* Os ícones das redes sociais podem ser encontrados em [Font Awesome](http://fontawesome.io/).

* La paleta de colores puedes obtenerla inspeccionado el sitio original, pero
para ganar tiempo, puedes usar los siguientes: `#2c3e50`, `#18bc9c`,
`#212529`.
* Neste desafio, encontrará coisas que possivelmente ainda não viu em classe, como formulários. Não se preocupe, temos certeza que se sairá bem. Aqui ficam algumas dicas:

* Los íconos de redes sociales puedes obtenerlos de [Font Awesome](http://fontawesome.io/).
- Para o formulário, revise tags como `form`, `input`, `button`.

* 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:
* O sublinhado com estrela que aparece em algumas seções do site, no endereço original, foi feita com um ícone e pseudo-elementos (`:after`, `:before`). Este é um desafio divertido, sendo assim não se preocupe em focar nesta parte de início, ma vez que não é o objetivo principal do desafio! :)

- Para el formulario, revisa las etiquetas como `form`, `input`, `button`.
* Pode conferir o [site original](https://blackrockdigital.github.io/startbootstrap-freelancer/) para que tenha uma ideia do resultado final.

* 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 :)
> Nota: o site original tem certos efeitos e funcionalidades que estão fora do alcance desse desafio. Mantenha o foco em obter um leiaute o mais próximo possível, usando o que aprendemos até agora :)

* Puedes ver el [sitio original](https://blackrockdigital.github.io/startbootstrap-freelancer/)
para que te des una idea de como debe quedar.
## Leve em consideração:

> 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 ;)
Neste desafio serão avaliados:

## 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 o leiaute com exatidão)
* Nomes de classes, ids e etc
* Indentação
* Arquivo `README.md` atualizado e escrito corretamente