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

pull #3

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

pull #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
5a5e017
subiendo estructura inicial
Lizncq Oct 31, 2017
53579eb
actualizando css
Lizncq Oct 31, 2017
64c7300
subiendo archivos
Lizncq Oct 31, 2017
24043ee
añadiendo segunda seccion
Amandir01 Oct 31, 2017
e884612
añadiendo margin
Amandir01 Oct 31, 2017
eb8384c
actualizando css y html
Lizncq Oct 31, 2017
e2df640
verificando los cambios
Amandir01 Nov 1, 2017
7c0f2ec
actualizando
Amandir01 Nov 2, 2017
b9c6294
añadiendo
Amandir01 Nov 2, 2017
6d977a0
second section
Amandir01 Nov 2, 2017
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
140 changes: 137 additions & 3 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,137 @@
/*
* Estilos de tu proyecto
*/
/*Estilos de tu proyecto
*/
* {
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
margin: 0px;
width: 100%;
text-decoration: none;
list-style: none;
}
.fontcolor {
color: #352384;
}
#menu {
/*outline: 1px solid orange ;*/
/*position: relative;*/
/*float: right;*/

}

.container {
background-image: url("../assets/images/hero.gif");
background-size: cover;
height: 610px;
/*margin-top: -100px;*/
background-position: bottom;

}

.navigator {
/*margin-top: 70px;*/
outline: 1px solid red ;
position: fixed;
width: 100%;
height: 115px;
font-size: 18px;
background-color: transparent;
}
.lyft-white {
/*outline: 1px solid green;*/
width: 68px;
height: 46px;
margin-left: 7%;
margin-top: 3%;
position: absolute;
}
.navigator ul {
padding-right: 130px;
padding-top: 45px;
}
.navigator ul li{
/*outline: 1px solid red ;*/
float: right;
display: inline;
width:100px;
text-align: center;
margin: 7px;
padding: 10px;
}
.li-border {
border-radius: 13%;
border-bottom-style: groove;
border: 2px solid white;
}
.navigator ul li a {
color: white;
}

.container2 {
/*outline: 1px solid black ;*/
width: 525px;
height: 420px;
background-color: white;
float: right;
margin-top: 185px;
text-align:left;
}
.form1 {
width: 482px;
height: 283px;
}
.pinkbutton {
width: 186px;
height: 53px;

}
.uppercase {
text-transform: uppercase;
}

.firstsection {
color: white;
width: 100%;
background:linear-gradient(#76278F, #2B1E66);
column-count: 2;
height: 640px;
text-align: left;

}
.information {
margin-top: 12%;
margin-left: 21%;
width: 569px;
height: 437px;
}
.tittle1 {
margin-bottom: 3%;
font-size: 25px;
}
.information p {
margin-bottom: 7%;
}

.aplicationpic img {
width: 477px;
height: 484px;
margin-top: 9%;
margin-left: -5%;
}
.section2 {
width: 100%;
height: 527px;
text-align: left;
display: inline;

}
.about1 {
outline: 1px solid red;
width: 367px;
display: block;
margin: 9%;
}
.firstvideo iframe{
float: none;
width: 935px;
height: 524px;
}
78 changes: 78 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,79 @@
<!-- Agrega aquí la estructura HTML de tu sitio web -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="http://fontawesome.io/">
<title>lyft</title>
</head>
<body>
<div id="menu">
<header class="container">
<!--<img class="lyabackground" src="assets/images/hero.gif" alt="">-->
<nav class="navigator">
<img class="lyft-white"src="assets/images/logo-white.png" alt="">
<ul>
<li class="li-border"><a href="#">Log in</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Explore</a></li>
<li><a href="#">Drive</a></li>
</ul>
</nav>
<div class="container2">
<div class="form1">
<div class="uppercase fontcolor">
<h1>turn miles </h1>
<h2>into money</h2>
<p>sign up to drive with lyft.</p>
</div>
<form class="" action="index.html" method="post">
<div class="">
<input type="number" name="" placeholder="Phone number">
</div>
<div class="">
<button class="pinkbutton" type="button" name="button">Become a dtiver</button>
<button class="pinkbutton" type="button" name="button">Sign up to ride</button>
</div>
</form>
<p>Already applied? <a href="#">Check the status of your application here.</a></p>
<p>Earn money for inviting friends to drive. <a href="#">Learn more</a></p>
</div>
</div>

</header>
</div>
<section class="firstsection">
<div class="information">
<h1 class=" tittle1 uppercase">a ride in minutes</h1>
<p>Request a ride and you´ll be on your way in minutes. Request. Ride. Repeat.</p>
<br>
<h1 class=" tittle1 uppercase">serious about safety</h1>
<p>From knowing the color of your driver´s car our 24/7 Trust & Safety Team, we got you</p>
<br>
<h1 class="tittle1 uppercase">happy drivers.</h1>
<h1 class="tittle1 uppercase">happy riders.</h1>
<p>Ride with us and you´ll see why 9 out of 10 rides end with five stars.</p>
<div class="aplicationpic">
<img src="assets/images/phone.png" alt="">
</div>
</div>
</section>
<section>
<div class="section2">
<div class="about1">
<p class="uppercase">watch</p>
<h2 class="uppercase">amplify your ride</h2>
<p>Lyft´s new emblem, Amp, is the secret to smooth pickups. Lighting up dashboards nationwide, the device makes it easy for passengers and drivers to find each other.</p>
</div>
<div class="firstvideo">
<iframe width="560" height="315" src="https://www.youtube.com/embed/fLSmUWOYpKw?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

</div>
</section>

</body>
</html>