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 clase 3 HTML semantico Pinto_O-5620 #380

Closed
wants to merge 6 commits into from
Closed

Ejercicio clase 3 HTML semantico Pinto_O-5620 #380

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3e5abbc
Ejercicio clase 3 HTML semantico
alh3x Dec 5, 2023
915d858
Ejercicio clase 4 formulario
alh3x Dec 10, 2023
157ed0a
adiciones del repaso de la clase 1 de la semana 3
alh3x Dec 12, 2023
d18f2b6
ejercicio clase 2 - semana 3
alh3x Dec 29, 2023
c9e6e67
correccion de html
alh3x Dec 29, 2023
9c82e18
actualizacion de css
alh3x Jan 4, 2024
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
86 changes: 86 additions & 0 deletions student-cvs/Pinto_O-5620/contact.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
/*CONTACTO PAGE*/
.contact-page {
margin: 100px auto;
padding: 0 16px;
color:#333;
background-color: #b7ecf3;
}
.form{
padding: 1em;
/* background-color: #bcdffe; */
}

.form-grup {
margin: 20px 0;
}

label, input{
vertical-align: middle;
}
select{
border: 1px solid steelblue;
border-radius: 4px;
padding: 5px 10px;
color: #333;
}

.text {
width: 100%;
border: 1px solid steelblue;
border-radius: 4px;
padding: 8px 10px;
color: #333;
}
textarea.text{
display: block;
width: 100%;
resize: vertical;
}
.descripcion{
font-size: 12px;
margin-top: 10px;
color:gray
}
.labels{
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
color: #444;
vertical-align: middle;
}
fieldset {
padding: 0 .5rem .5rem;
}
fieldset .block{
display: block;
padding: .4em .2em;
}
.block label{
padding-left: 8px;
}
button{
padding: 16px 60px;
text-transform: uppercase;
font-weight: bold;
border: 1px solid #014c61;
background-color: #4fe0e7;
color: #333;
text-shadow: -1px -1px 0 #03383f;
border-radius: 8px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
button:hover{
background-color: #76cfd3;
}
button:active{
background-color: #36dae3;
box-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
}
form{
accent-color: #12848c;
}
input:focus-visible, textarea:focus-visible{
border: 1px solid #0ccece;
outline: 3px solid #186972;
}
84 changes: 84 additions & 0 deletions student-cvs/Pinto_O-5620/contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0,
maximum-scale=1.0' />
<title>Contact</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="contact.css">
</head>
<body>
<header class="header">
<p class="logo">My portfolio</p>
<nav>
<ul class="navbar">
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main class="contact-page">
<h1>Contacto</h1>

<form class="form" id="form">

<div class="form-grup">
<label class="labels" for="name">Nombre:</label>
<input class="text" id="name" name="name" type="text" required placeholder="Nombre Apellido">
</div>
<div class="form-grup">
<label class="labels" for="email">Email:</label>
<input class="text" type="email" name="email" id="email" required placeholder="qwerty@email">
</div>
<div class="form-grup">
<label class="labels" for="phone">Telefono:</label>
<input class="text" type="tel" name="phone" id="phone" required placeholder="xx xxxx xxxx">
</div>
<div class="form-grup">
<label class="labels" for="type">Tipo de Proyecto:</label>
<select name="type" id="type" required>
<option disabled selected >Seleccione una opcion</option>
<option value="webSite">Website</option>
<option value="webApp">WebApp</option>
<option value="mobileApp">Mobile</option>
</select>
</div>
<div class="form-grup">
<label class="labels" for="description">Descripcion:</label>
<textarea class="text" name="description" id="description" cols="30" rows="5" required placeholder="Escribe tu consulta"></textarea>
<div class="descripcion">Escribe una descripcion del proyecto de al menos 500 palabras</div>
</div>
<div class="form-grup">
<fieldset>
<legend class="labels">Contacto</legend>
<span class="block"><input type="radio" name="contactPrefer" id="WhatsApp" value="WhatsApp" checked required><label class="labels" for="WhatsApp">WhatsApp</label></span>
<span class="block"><input type="radio" name="contactPrefer" id="Email" value="Email"><label class="labels" for="Email">Email</label></span>
<span class="block"><input type="radio" name="contactPrefer" id="PhoneCall" value="PhoneCall"><label class="labels" for="PhoneCall">PhoneCall</label></span>
</fieldset>
<div class="descripcion">Elige el metodo de contacto preferido</div>
</div>
<div class="form-grup">
<label for="offers">
<input type="checkbox" name="promotions" id="offers" >
<span class="labels">Acepto recibir promociones y ofertas</span>
</label>
</div>
<div class="form-grup">
<label for="terms">
<input type="checkbox" name="terms" id="terms" required>
<span class="labels">Acepto los terminos y condiciones</span>
</label>
</div>

<button>Enviar</button>

</form>
</main>
<script>
let formulario = document.getElementById('form');
formulario.addEventListener('submit', event => {event.preventDefault();
console.log(event.target.elements["name"])})
</script>
</body>
</html>
82 changes: 82 additions & 0 deletions student-cvs/Pinto_O-5620/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0,
maximum-scale=1.0' />
<title>Pinto_O-6520</title>
<link rel="stylesheet" href="./styles.css">
</head>

<body>
<header class="header">
<p class="logo">My portfolio</p>
<nav>
<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home" class="home">
<h1 class="ignore">Hi there👋, I'm <strong>Oliver Pinto</strong></h1>
<h2 class="ignore"><em>a Frontend developer</em></h2>
</section>

<section id="about">
<h2>👨‍💻About me </h2>
<p>I'm a <span class="bold curly">frontend developer</span> and a <span class="bold">programming👨‍💻
enthusiast</span> from Argentina. I've focused on frontend development and acquired skills through a
<span class="bold">self-taught💪</span> journey. My passion for technology and problem-solving has led
me to
familiarize myself with
key languages and tools such as JavaScript, CSS, HTML, and React.
</p>
<p>Even though I'm still in the learning process, I've demonstrated a great ability to apply my knowledge to
practical projects. Being from Argentina, I bring a unique perspective and am eager to contribute to the
global
tech community.
</p>
</section>
<section id="skills">
<h2>🚀 Skills I possess</h2>

<ul class="skills-ul">
<li><span class="bold">Programming Languages</span>: JavaScript, CSS, Markdown</li>
<li><span class="bold">Frameworks/Libraries</span>: React</li>
<li><span class="bold">Development Tools</span>: Git, GitHub, Visual Studio Code</li>
<li><span class="bold">Development Methodologies</span>: Agile Development, Scrum</li>
<li><span class="bold">Soft Skills</span>: Self-taught, Problem-solving, Teamwork, Effective
Communication.</li>
</ul>
</section>

<section id="sMedia" class="sMedia">
<h2>👋Contact means</h2>
<article>
<h2 class="ignore">📈 GitHub Stats</h2>

<p>!GitHub Stats for Oliver <a class="github" href="https://github.com/alh3x">GitHub</a></p>
</article>
<article>
<h2 class="ignore">📝 Blogs</h2>

<p>Talk about the blogs you've written or featured in...</p>
</article>
<article>
<h2 class="ignore">📚 Latest Projects</h2>

<p> about the projects you've worked on...</p>
</article>
</section>
</main>
<footer>
<p>Creado por Oliver Pinto <time date="2023-12-04">2023</time> </p>
</footer>
</body>

</html>
123 changes: 123 additions & 0 deletions student-cvs/Pinto_O-5620/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
html, body {
box-sizing: border-box;

}

* {
margin: 0;
padding: 0;
box-sizing: inherit;
}

body {
display: flex;
flex-direction: column;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
background-color: lightblue;

}

/**fuentes modificadas*/
a {
text-decoration: none;
color: inherit;
}

.bold {
font-weight: bold
}

.curly {
font-style: italic;
}
h1:not(.ignore),
h2:not(.ignore) {
padding: 1em .5em .5em;
border-bottom: 1px solid black;
}
/* contenido del body */

section{
display: flex;
flex-flow: column wrap;
align-items: stretch;
gap: 40px;
min-height: 400px;
border: 2px solid purple;
padding: 0 0 24px 0 ;
}


/*encabezado y barra de navegacion*/
.header {
width: 100%;
height: 70px;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
color: darkcyan;
border-bottom: 1px solid gray;
}

.logo {
display: block;
width: 100%;
padding: 0 1em;
}

.navbar {
display: flex;
flex-flow: row nowrap;
list-style-type: none;
padding: 0 1em;
}

.navbar a {
padding: 1em;
}

main {
max-width: 85%;
margin: 0 auto;
}

/*section #home*/
.home {
width: 100%;
height: calc(100vh - 70px);
justify-content: center;
align-items: center;
gap: 10px;
}
.home h1,
.home h2 {
text-align: center;
font-size: 2.2rem;
}
/*section #about*/

/*section #skills*/
.skills-ul{
padding: 0 0 0 24px;
}
.skills-ul li{
padding: 8px 0;
}

/*section #media*/
.sMedia article {
padding:.5em 0;
}
.github {
text-decoration: none;
color: darkcyan;
}
/*fOOTER*/
footer {
height: 50px;
padding: 2em 1em;
text-align: center;
}