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

Jump to bottom

Desafío Semana 1 #4

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Desafío Semana 1 #4

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
8449007
Add files via upload
Ruiz-Karla May 28, 2021
54ebede
Update main.css
Ruiz-Karla May 28, 2021
7cbb45c
Update index.html
Ruiz-Karla May 28, 2021
7a663b8
Update main.css
Ruiz-Karla May 28, 2021
883b00a
Update index.html
Ruiz-Karla May 28, 2021
3616297
Update main.css
Ruiz-Karla May 28, 2021
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
104 changes: 104 additions & 0 deletions challenges/week1/Semana1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Desafío Semana 1</title>

<!--<link rel="stylesheet" href="resets.css">-->
<link rel="stylesheet" href="main.css">

</head>
<body id="top">
<header class="main_header">
<nav class="nav_header1">
<a class="logo">Blogr</a>
<br>
pablomdd marked this conversation as resolved.
Show resolved Hide resolved
<div class=menus>
<a class=menu1>Company</a>
<a class=menu2>Connect</a>
<a class=menu3>Login</a>
<a class=menu4>Sign up</a>
</div>

</nav>
<div class="hero">
<h1 class="text-white"> A modern publishing platform</h1>
<h5 class="text-white">Grow your audience and build your online brand</h5>
</div>
<nav class="header2">
<a class=boton1>Start for Free</a>
<a class=boton2>Learn More</a>
</nav>
</header>
<section>
<h2 class="dsc1">Designed for the future</h2>
<div class="izquierda">
<img src="https://media.istockphoto.com/vectors/futuristic-infographic-information-aesthetic-design-complex-data-vector-id825197830?s=612x612"
alt="Grafica muestra aleatoria" class="graph">
<p id="descripcion">Introducing an extendible editor</p>
<p id="contenido"> Lorem ipsum dolor sit amet consectetur adipiscing elit per taciti justo, purus curae proin viverra facilisi scelerisque odio vitae porttitor, sodales gravida conubia integer lectus ridiculus diam curabitur habitant. Est praesent ridiculus ultricies eu curae parturient venenatis nostra facilisi imperdiet per cum, laoreet tincidunt integer neque varius quis sagittis ornare felis mus viverra, quisque conubia etiam facilisis natoque at bibendum pulvinar molestie ullamcorper ut. Tristique enim orci vulputate malesuada placerat fames diam turpis tempor ridiculus, imperdiet cubilia taciti blandit feugiat commodo purus accumsan velit.</p>
<p id="descripcion">Robust content manager</p>
<p id="contenido"> Lorem ipsum dolor sit amet consectetur adipiscing elit per taciti justo, purus curae proin viverra facilisi scelerisque odio vitae porttitor, sodales gravida conubia integer lectus ridiculus diam curabitur habitant. Est praesent ridiculus ultricies eu curae parturient venenatis nostra facilisi imperdiet per cum, laoreet tincidunt integer neque varius quis sagittis ornare felis mus viverra, quisque conubia etiam facilisis natoque at bibendum pulvinar molestie ullamcorper ut. Tristique enim orci vulputate malesuada placerat fames diam turpis tempor ridiculus, imperdiet cubilia taciti blandit feugiat commodo purus accumsan velit.</p>


</div>
<div class="derecha">
<img src="https://res.cloudinary.com/dz209s6jk/image/upload/v1615479876/Challenges/n4uf9zl8yiqiyfsxtn2o.jpg"
alt="Página muestra" class="imagen1">
<article>
<p id="titulo_articulo">State of the art infrastructure</p>
<p id="articulo"> Lorem ipsum dolor sit amet consectetur adipiscing elit per taciti justo, purus curae proin viverra facilisi scelerisque odio vitae porttitor, sodales gravida conubia integer lectus ridiculus diam curabitur habitant. Est praesent ridiculus ultricies eu curae parturient venenatis nostra facilisi imperdiet per cum, laoreet tincidunt integer neque varius quis sagittis ornare felis mus viverra, quisque conubia etiam facilisis natoque at bibendum pulvinar molestie ullamcorper ut. Tristique enim orci vulputate malesuada placerat fames diam turpis tempor ridiculus, imperdiet cubilia taciti blandit feugiat commodo purus accumsan velit.</p>
</article>
<p id="descripcion">Free open simple</p>
<p id="contenido"> Lorem ipsum dolor sit amet consectetur adipiscing elit per taciti justo, purus curae proin viverra facilisi scelerisque odio vitae porttitor, sodales gravida conubia integer lectus ridiculus diam curabitur habitant. Est praesent ridiculus ultricies eu curae parturient venenatis nostra facilisi imperdiet per cum, laoreet tincidunt integer neque varius quis sagittis ornare felis mus viverra, quisque conubia etiam facilisis natoque at bibendum pulvinar molestie ullamcorper ut. Tristique enim orci vulputate malesuada placerat fames diam turpis tempor ridiculus, imperdiet cubilia taciti blandit feugiat commodo purus accumsan velit.</p>
<p id="descripcion">Powerful tooling</p>
<p id="contenido"> Lorem ipsum dolor sit amet consectetur adipiscing elit per taciti justo, purus curae proin viverra facilisi scelerisque odio vitae porttitor, sodales gravida conubia integer lectus ridiculus diam curabitur habitant. Est praesent ridiculus ultricies eu curae parturient venenatis nostra facilisi imperdiet per cum, laoreet tincidunt integer neque varius quis sagittis ornare felis mus viverra, quisque conubia etiam facilisis natoque at bibendum pulvinar molestie ullamcorper ut. Tristique enim orci vulputate malesuada placerat fames diam turpis tempor ridiculus, imperdiet cubilia taciti blandit feugiat commodo purus accumsan velit.</p>
</div>

<!-- Span -->
<!--<p>Pronto estaremos <span class="tooltip">escribiendo HTML</span> como los mejores desarrolladores.</p>
<a href="about.html">Ir about html</a>-->

<!-- Abrir nueva página -->
<!--<p><a href="https://www.google.com/" target="_blank">Salir de esta pagina</a></p> -->
</section>
<footer>
<nav class="nav_footer">
<h2 class="blogr_foot">Blogr</h2>
<div class="row">
<div class="column1" >
<a class="principal">Product</a> <br>
<ul>
<li >Overview</li>
<li>Pricing</li>
<li>Marketplace</li>
<li>Features</li>
<li>Integrations</li>
</ul>

</div>
<div class="column2" >
<a class="principal">Company</a> <br>
<ul>
<li>About</li>
<li>Team</li>
<li>Blog</li>
<li>Careers</li>
</ul>

</div>
<div class="column3" >
<a class="principal">Connect</a> <br>
<ul>
<li>Contact</li>
<li>Newsletter</li>
<li>Linkedln</li>
</ul>
</div>
</div>
<img src=https://rotulosmatesanz.com/wp-content/uploads/2017/09/2000px-Google_G_Logo.svg_.png
alt="google logo" class="google">
</nav>
</footer>
</body>
</html>
164 changes: 164 additions & 0 deletions challenges/week1/Semana1/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
body{
background-color:ivory;
padding: 5em;
}
.main_header{
background-color: rgba(255,101,99,255);
height: 30%;
padding: 3px 10px;
border:darkred 5px solid;
border-radius: 20px;
}

.main_header .nav_header1{
font-style: normal;
font-weight: lighter;
color: ivory;
}
.nav_header1 .logo{
font-size: 40px;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
padding: 20px;
}
.main_header .menus{
text-align: center;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 30px;
}
.main_header .hero{
text-align: center;
font-size: 40px;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bolder;
}
.text-white{
color:white;
}
.header2{
padding: 2em;
text-align: center;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
}
.header2 .boton1{
color: rgba(255,101,99,255);
padding: 10px;
border: white 3px solid;
border-radius: 20px;
background-color: white;
}
.header2 .boton2{
color: white;
padding: 10px;
border: white 3px solid;
border-radius: 20px;
background-color: rgba(255,101,99,255);
}
section .dsc1{
color:rgba(60,63,96,255);
text-align: center;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bolder;
}
section .izquierda{
text-align: left;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
section .graph{
width: 300px;
height: 200px;
float:right;
}
#descripcion{
color:rgba(60,63,96,255);
font-size: 20px;
}
#contenido{
color:black;
font-size: 10px;
}

section .derecha{
text-align: right;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
article{
padding: 1em;
background-color: rgba(60,63,96,255);
height: 45%;
text-align: right;
border:rgba(61,64,97,255) 3px dashed;
border-radius: 20px
}
#titulo_articulo{
color:white;
font-size: 20px;
}
#articulo{
color:white;
font-size: 15px;
}
section .imagen1{
width: 200px;
height: 350px;
float:left;

}
footer{
background-color:rgba(36,36,44,255);
height: 30%;
border:rgba(36,36,44,255) 5px double;
border-radius: 20px
}
.blogr_foot{
font-size: 35px;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
padding: 20px;
}
.nav_footer .google{
padding-left: 3em;
padding-bottom: 3em;
width: 50px;
height: 50px;

}
.row{
padding-bottom: 2em;
padding-left: 3em;
}
.column1 {
float: right;
width: 20%;
padding: 20px;
height: 100px;
}

.column3 {
float: right;
width: 20%;
padding: 20px;
height: 100px;
}

.column2 {
float: right;
width: 20%;
padding: 20px;
height: 100px;
}
.nav_footer{
font-style: normal;
font-weight:lighter;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
.principal{
font-weight: bold;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
48 changes: 48 additions & 0 deletions challenges/week1/Semana1/resets.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/* main.css */
/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}