Skip to content
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

Topic02 #93

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
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
3,091 changes: 3,091 additions & 0 deletions .vscode/settings.json

Large diffs are not rendered by default.

Empty file removed 00-HTML-CSS-basics/.empty
Empty file.
16 changes: 16 additions & 0 deletions 00-HTML-CSS-basics/Topic0-exc1.2/expenses_table.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
header{
margin: auto;
width: 400px;
}

table {
/* Centro la tabla y quito espacios entre las filas y columnas*/
margin: 0 auto;
width: 350px;
border-collapse: collapse;
}

td, th {
/* Agrego bordes a las filas y columnas */
border: 1px solid black;
}
73 changes: 73 additions & 0 deletions 00-HTML-CSS-basics/Topic0-exc1.2/expenses_table.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="utf-8" />
<meta name="author" content="Etchegaray Gonzalo" />
<meta name="description" content="expenses_table" />
<link rel="stylesheet" href="./expenses_table.css" type="text/css" />
<title>Expenses Table</title>
</head>

<body>
<header>Expenses Table</header>

<table>
<!-- 'tr' representa las filas de la tabla. -->
<!-- 'td' representa las columnas de la tabla. -->
<thead>
<tr>
<th>Month</th>
<th>July</th>
<th>August</th>
<th>September</th>
</tr>
</thead>

<tbody>
<tr>
<td>Medicines</td>
<td>$300</td>
<td>$600</td>
<td>$450</td>
</tr>

<tr>
<td>Transport</td>
<td>$750</td>
<td>$620</td>
<td>$700</td>
</tr>

<tr>
<td>Food</td>
<td>$200</td>
<td>$350</td>
<td>$150</td>
</tr>

<tr>
<td>Clothing</td>
<td>$210</td>
<td>$685</td>
<td>$100</td>
</tr>

<tr>
<td>Otros</td>
<td>$200</td>
<td>$150</td>
<td>$50</td>
</tr>

<tr>
<td>Total</td>
<td>$1660</td>
<td>$2405</td>
<td>$1450</td>
</tr>
</tbody>
</table>
</body>

</html>
16 changes: 16 additions & 0 deletions 00-HTML-CSS-basics/Topic0-exc1.2/hellow_world.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="utf-8">
<meta name="author" content="Etchegaray Gonzalo"/>
<meta name="description" content="Display Hello World"/>
<meta name="viewport" content="width=device-width">
<title>Topic-0</title>
</head>

<body>
<header>Hello World!</header>
</body>

</html>
10 changes: 10 additions & 0 deletions 00-HTML-CSS-basics/Topic0-exc1.2/multimedia.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
img{
/* Redimensiono la imagen */
width:85px;
height:85px;
}

div {
/* Centro todas las etiquetas div */
text-align: center;
}
31 changes: 31 additions & 0 deletions 00-HTML-CSS-basics/Topic0-exc1.2/multimedia.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="author" content="Etchegaray Gonzalo"/>
<meta name="description" content="multimedia"/>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./multimedia.css" type="text/css"/>
<title>Topic-0</title>
</head>

<body>
<!-- Agrego una etiqueta div para cada elemento audiovisual para poder centrarlo en columna -->
<div>
<!-- Permito que se pueda ver el video en pantalla completa y dimensiono el tamaño del video -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/wV5AFxEnuBo" allowfullscreen></iframe>
</div>

<div>
<!-- Paso la imagen desde una direccion -->
<img src="https://static.giantbomb.com/uploads/scale_medium/0/1099/900262-474260_banana_boy_worm_from_worms_2992_large.png" alt="Worms">
</div>

<div>
<!-- Paso el audio desde un archivo local -->
<audio src="./worms_estornudo.mp3" controls></audio>
</div>

</body>

</html>
23 changes: 23 additions & 0 deletions 00-HTML-CSS-basics/Topic0-exc1.2/my_todo_list.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="utf-8">
<meta name="author" content="Etchegaray Gonzalo"/>
<meta name="description" content="My todo list"/>
<meta name="viewport" content="width=device-width">
<title>Topic-0</title>
</head>

<body>
<header>My todo list</header>
<ul>
<li> Study. </li>
<li> Go to supermarket. </li>
<li> Make dinner. </li>
<li> Go to work. </li>
<li> Go to sleep. </li>
</ul>
</body>

</html>
36 changes: 36 additions & 0 deletions 00-HTML-CSS-basics/Topic0-exc1.2/sign_up.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
header {
margin: 0 auto;
width: 400px;
}

form {
/* Centro el formulario */
margin: 0 auto;
width: 400px;
/* Agrego un borde al formulario */
padding: 1em;
border: 1px solid black;
border-radius: 1em;
}

form div+div {
/* Agrego un espacio entre cada caja. */
margin-top: 1em;
}

label {
/* Alineo las etiquetas label */
display: inline-block;
width: 80px;
text-align: right;
}

textarea {
vertical-align: top;
}

.button {
/* Posiciono los botones */
padding-left: 80px;
/* Misma posicion que los elementos label para que esten alineados */
}
58 changes: 58 additions & 0 deletions 00-HTML-CSS-basics/Topic0-exc1.2/sign_up.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="utf-8">
<meta name="author" content="Etchegaray Gonzalo" />
<meta name="description" content="Sign up form" />
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./sign_up.css" type="text/css" />
<title>Sign Up</title>
</head>

<body>
<header>Sign Up</header>
<form>

<div>
<label for="name">Name</label>
<input type="text" id="name" required="required" placeholder="Gonzalo">
</div>

<div>
<label for="surname">Surname</label>
<input type="text" id="surname" required="required" placeholder="Etchegaray">
</div>
<div>
<label for="birthday">Birthday</label>
<input type="date" id="birthday" required="required">
</div>
<div>
<label for="email">Email</label>
<input type="email" id="email" required="required" placeholder="[email protected]">
</div>
<div>
<label>Select your favorite sport</label>
<select name="sport" required="required">
<option value="">None</option>
<option value="football">Football</option>
<option value="volley">Volley</option>
<option value="swimming">Swimming</option>
<option value="basketball">Basketball</option>
<option value="others">Others</option>
</select>
</div>
<div>
<label for="bio">Bio</label>
<textarea id="bio" placeholder="Who are you?" required="required"></textarea>
</div>
<div class="button">
<button type="submit">Send message</button>
</div>
<div class="button">
<button type="reset">Reset form</button>
</div>
</form>
</body>

</html>
Binary file not shown.
82 changes: 82 additions & 0 deletions 00-HTML-CSS-basics/Topic0-exc2.1-2.2-2.3/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
.column {
text-align: center;
}

.column.header,
h1 {
margin: 5px 10px 5px 10px;
/* line-height: 80px; */
}

.column.navigation {
background: coral;
margin: 0px 10px 0px 10px;
float: left;
width: 14%;
line-height: 86px;
}

.column.sidebar {
margin: 0px 10px 0px 10px;
float: right;
width: 14%;
line-height: 26px;
}

.column.content {
margin: auto;
width: 70%;
line-height: 75px;
}

.column.footer {
margin: 10px 10px 10px 10px;
}

.header,
.footer,
.sidebar {
background: magenta;
}


/* FONT-SIZE */

.header {
font-size: 46px;
}

.footer {
font-size: 10px;
}

.content {
font-size: 14px;
}

.navigation {
font-size: 12px;
}

.sidebar {
font-size: 10px;
}


/* SPECIFICITY */

.sidebar li:nth-child(2) {
border: 5px solid yellow;
}

.sidebar ul+li {
border: 5px solid brown;
}

.sidebar #items .lista_items {
background: green;
}

.content h1:first-of-type {
background: yellowgreen;
}
Loading