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.

Sign up for GitHub

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

Ejercicio-2.6-Media-queries.html #76

Open
wants to merge 19 commits into
base: master
Choose a base branch
from
Open

Ejercicio-2.6-Media-queries.html #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
6a28332
new
chemaso May 9, 2018
a06b8dc
ejercicios todos
chemaso May 9, 2018
0f088d9
Ejercicio 1.1 Hello World
chemaso May 9, 2018
4a7225f
Ejercicio 1.2 My Todo List
chemaso May 9, 2018
04d8c0f
m
chemaso May 9, 2018
fdfa025
Ejercicio 1.4 my expenses
chemaso May 9, 2018
a37f780
Ejercicio 1.5 Multimedia
chemaso May 9, 2018
3092a48
Ejercicio 1.6 Contact Form
chemaso May 9, 2018
a9dc7e9
Ejercicio 3 Accesibilidad
chemaso May 9, 2018
21f6a86
Ejercicio 2.1 basics
chemaso May 9, 2018
22ed2b8
Ejercicio 2.2 Selectors and properties
chemaso May 9, 2018
f5bceda
Ejercicios 2.3 Especificidad del 1 al 6, en el ejercicio 6 cree un se…
chemaso May 9, 2018
dc7fc08
Ejercicio 2.7 Respuesta en block de texto
chemaso May 9, 2018
a92fee8
Ejercicio 2.5 Layout
chemaso May 9, 2018
9a1b80f
Ejercicio 2.5.2 Layout
chemaso May 9, 2018
976654b
Ejercicio 2.6 Media queries
chemaso May 9, 2018
f355372
Correccion de ejercicio 1.2 My todo list
chemaso May 9, 2018
88e9639
Correciones ejercicio 1.4 my expenses
chemaso May 9, 2018
9249277
Corrections
chemaso May 11, 2018
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
Empty file removed 00-HTML-CSS-basics/.empty
View file
Open in desktop
Empty file.
46 changes: 46 additions & 0 deletions 00-HTML-CSS-basics/2-3Specificity.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!doctype html>
<html class="no-js" lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>2.1 CSS Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="site.webmanifest">
<link rel="icon" href="sandia.png" type="image/gif" sizes="16x16">
<!-- Place favicon.ico in the root directory -->

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style-selectors.css">
</head>

<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<header class="header">
HEADER
</header>
<nav class="navigation">
NAVIGATION
</nav>
<section class="content">
SECTION
<header class="header-section">
HEADER
</header>
<article>
ARTICLE
</article>
<footer class="footer-section">
FOOTER SECTION
</footer>
</section>
<aside class="sidebar">
ASIDE
</aside>
<footer class="footer">
FOOTER
</footer>
</body>
</html>
11 changes: 11 additions & 0 deletions 00-HTML-CSS-basics/Exercise answers 2.3 apart 7.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
Question:

Imagine there is a declaration like class=�oh-no-inline-styles� style=�background:red� and you need to change the background to green without changing the inline style. How could you accomplish this?

Answer:

I will add the next code:

.oh-no-inline-styles{
background-color: green !important;
}
Binary file added 00-HTML-CSS-basics/Resources/labrador-barking-daniel_simon.mp3
View file
Open in desktop
Binary file not shown.
29 changes: 29 additions & 0 deletions 00-HTML-CSS-basics/accessibility.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title id="title">Multimedia site</title>
</head>
<body>
<!-- Embedded multimedia resources -->
<header>
<h1>Multimedia Test on HTML5</h1>
</header>
<!-- Embedded Videos -->
<article>
<h2>Video Test</h2>
<video src="https://www.chemas.ga/wp-content/uploads/2018/03/Che_Marketing__Social_Portadayoutube.com_.mp4" width="620" controls>
<p>Sorry, your browser doesn't support embedded videos. Here is a <a href="https://www.chemas.ga/wp-content/uploads/2018/03/Che_Marketing__Social_Portadayoutube.com_.mp4">link to the video</a> instead.</p>
</video>
<!-- Embedded Audio -->
<h2>Audio Test</h2>
<audio src="Resources/labrador-barking-daniel_simon.mp3" controls autoplay loop>
<p>Sorry, your browser doesn't support embedded audio. Here is a <a href="Resources/labrador-barking-daniel_simon.mp3">link to the audio</a> instead.</p>
</audio>
<!-- Embedded Image -->
<h2>Image Test</h2>
<img src="https://www.chemas.ga/wp-content/uploads/2018/05/monitablet.png" alt="Desktop computer and tablet image">
</article>
</body>
</html>
52 changes: 52 additions & 0 deletions 00-HTML-CSS-basics/contact-form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us</title>
</head>
<body>
<header>
<!-- Contact form title and items -->
<h1 align="center">Contact Form:</h1>
</header>
<form action="/contact-control" method="post" align="center">
<div>
<label for="name">First Name:</label><br>
<input type="text" id="name" required>
</div><br>
<div>
<label for="last-name">Last Name:</label><br>
<input type="text" id="last-name" required>
</div><br>
<div>
<label for="mail">Email:</label><br>
<input type="email" id="mail" required>
</div><br>
<div>
<label for="birthday">Birthday:</label><br>
<input id="date" type="date" required>
</div><br>
<!-- Dropdown list for favorite sport -->
<div>
<label for="Favorite sport">Favorite Sport:</label><br>
<select name="Sports">
<option value="Futbol">Futbol</option>
<option value="Tennis">Tennis</option>
<option value="Golf">Golf</option>
<option value="Baseball">Baseball</option>
</select>
</div><br>
<div>
<label for="Bio">Add your Short Bio:</label><br>
<textarea id="Bio" required></textarea>
</div><br>
<!-- Send form button and Reset form button -->
<div class="button">
<button type="submit">Send Message</button>
<button type="reset" value="Reset">Clear form</button>
</div>

</form>
</body>
</html>
111 changes: 111 additions & 0 deletions 00-HTML-CSS-basics/css/estilos.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
* {
font-size: 14px;
font-family: "lato", "serif";
padding: 0;
margin: 0;
box-sizing: border-box;
}
.top-container {
font-size: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.top-header {
padding-left: 10px;
margin:20px;
width: 30%;
}
.header-article {
margin: 20px;
width: 60%;
}
p {
font-size: 1.1rem;
}
strong {
font-size: 1.2rem;
}

.center-container {
box-sizing: content-box;
margin: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
text-align: center;
border-radius: 15px;
}
.bottom-container {
box-sizing: content-box;
margin: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
color: orange;
background-color: #666666;
color:white;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 15px;
padding-top: 30px;
padding-bottom: 30px;
}
.side-navigation {
background-color: #939393;
padding-top: 168px;
padding-bottom: 168px;
color: white;
width: 20%;
margin-right: 10px;
border-radius: 15px;
}
.center-section {
background-color: #666666;
color: white;
width: 60%;
border-radius: 15px;
}
.aside-left {
background-color: #939393;
padding-top: 168px;
padding-bottom: 168px;
color: white;
width: 20%;
margin-left: 10px;
border-radius: 15px;
}
.section-header {
background-color: #999999;
color: white;
margin: 10px;
padding-top: 15px;
padding-bottom: 15px;
border-radius: 15px;
}
.section-article {
background-color: #999999;
padding-top: 65px;
padding-bottom: 65px;
color: white;
margin: 10px;
border-radius: 15px;
}
.section-footer {
background-color: #999999;
padding-top: 15px;
padding-bottom: 15px;
color: white;
margin: 10px;
border-radius: 15px;
}
.bottom-footer {
color:white;
align-items: center;
text-align: center;
border-radius: 15px;
}
Loading