Skip to content

changing images url to realtive paths #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 16, 2021
Merged
Show file tree
Hide file tree
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
2 changes: 1 addition & 1 deletion exercises/06-Practicing-Rules/README.es.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@


1. Establece esta URL como la imagen de fondo de la página y repítela solo verticalmente:
https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/background-vertical.jpg?raw=true
[06- backgrund vertical](../../.learn/assets/background-vertical.jpg?raw=true)

2. Cambia el tipo de fuente (`font-type`) del `h1` a `Courier` y el resto del sitio web a `Times New Roman`.

Expand Down
2 changes: 1 addition & 1 deletion exercises/06-Practicing-Rules/tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ describe("All the styles should be applied", function () {
let body=document.querySelector("body");
let styles=window.getComputedStyle(body);
expect(styles["background"]).toBe(
`url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/background-vertical.jpg?raw=true) repeat-y`
`url(../../.learn/assets/background-vertical.jpg?raw=true) repeat-y`
);
});
it("the font-family should be 'Times New Roman'", function () {
Expand Down
2 changes: 1 addition & 1 deletion exercises/07-Very-Specific-Rules/README.es.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ En este ejercicio, puedes agregar tu código solo arriba del **READ ONLY BLOCK**
3. Haz que las filas impares de las tablas tengan fondo amarillo usando `tr:nth-child`.


![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/07-1.png?raw=true)
![Example Image](../../.learn/assets/07-1.png?raw=true)



2 changes: 1 addition & 1 deletion exercises/07-Very-Specific-Rules/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ In this exercise, you can add your code only above the **READ ONLY BLOCK** of th
3. Change the odd rows of the tables to a yellow background using `tr:nth-child`.


![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/07-1.png?raw=true)
![Example Image](../../.learn/assets/07-1.png?raw=true)



2 changes: 1 addition & 1 deletion exercises/08-Rounded-Image/README.es.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ Muchos sitios web usan imágenes de perfil redondeadas ¡una técnica que realme

La forma obvia de crear una imagen de perfil redondeada es crear una etiqueta de imagen y aplicar un `border-radius: 100%`. El problema con este enfoque es que solo funciona para imágenes cuadradas... Las imágenes de perfil generalmente tienen diferente altura y ancho no se verán como un círculo, se verán como óvalos:

![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/08-1.png?raw=true)
![Example Image](../../.learn/assets/08-1.png?raw=true)

## 📝 Instrucciones:

Expand Down
2 changes: 1 addition & 1 deletion exercises/08-Rounded-Image/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ A lot of websites use rounded profile images, a technique that really makes a we

The obvious way create a rounded profile picture is to create an image tag and apply `border-radius:100%`. The problem with this approach, is that it only works for squared pictures... Profile pictures with different height and width will not look like a circle, they will look like ovals:

![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/08-1.png?raw=true)
![Example Image](../../.learn/assets/08-1.png?raw=true)

## 📝 Instructions:

Expand Down
2 changes: 1 addition & 1 deletion exercises/09-Anchor-Styles/README.es.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

A las personas les gusta sentir que están haciendo clic en algo, uuna manera de lograrlo es fingir un efecto 3D. Para hacerlo, los diseñadores normalmente juegan con los bordes, por ejemplo:

![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/09-1.png?raw=true)
![Example Image](../../.learn/assets/09-1.png?raw=true)

Puedes controlar qué reglas css se aplican a cada estado de un `anchor` utilizando los selectores: `:hover` (para el mouse) o `active` (para presionar el mouse), por ejemplo:

Expand Down
2 changes: 1 addition & 1 deletion exercises/09-Anchor-Styles/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

People like to feel that they are clicking on something, a great approach to accomplish that is by faking a 3D effect. To do so, designers normally play with the borders, for example:

![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/09-1.png?raw=true)
![Example Image](../../.learn/assets/09-1.png?raw=true)

You can control what css rules apply to each state of an anchor by using the `:hover` (for mouse hover) or `:active` (for mouse pressing) selectors, example:

Expand Down
2 changes: 1 addition & 1 deletion exercises/12-Relative-Length-EM-REM/README.es.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,6 @@ rem: Relativo al font-size original de la página.

El resultado debería verse así:

![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/raw/master/.learn/assets/12-1.png?raw=true)
![Example Image](../../.learn/assets/12-1.png?raw=true)


2 changes: 1 addition & 1 deletion exercises/12-Relative-Length-EM-REM/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,6 @@ REM: Relative to the original font-size of the page.


The result should look like this:
![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/12-1.png?raw=true)
![Example Image](../../.learn/assets/12-1.png?raw=true)


2 changes: 1 addition & 1 deletion exercises/13-Anchor-Like-Button/README.es.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,4 @@ Siga estos pasos para que su enlace (anchor) se vea así

6. Dentro del selector de hover: cambie el fondo del botón a un color naranja más oscuro.

![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/13-1.gif?raw=true)
![Example Image](../../.learn/assets/13-1.gif?raw=true)
2 changes: 1 addition & 1 deletion exercises/13-Anchor-Like-Button/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,4 @@ Anchors are not only used within text- when you are going to use anchors outside

6. Inside of the :hover selector change the background of the button to a darker orange.

![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/13-1.gif?raw=true)
![Example Image](../../.learn/assets/13-1.gif?raw=true)