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

HW 2 Lea Masatsugu #4

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

HW 2 Lea Masatsugu #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3c4b53d
hw_02 edits
lmasatsugu May 26, 2016
7bb6609
HW 2 Corrections
lmasatsugu Jun 2, 2016
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
149 changes: 144 additions & 5 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ Developer @GA in NYC
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
font-family: 'Open Sans';
}

/* Clear fix hack */
Expand Down Expand Up @@ -51,7 +52,7 @@ body {
line-height: 1.4;
font-family: Helvetica, Arial, sans-serif;
background: url(../images/header_bg.jpg) no-repeat center top rgb(134,141,157);
background-size: cover;
background-size: 100%, 100%;
}


Expand All @@ -60,18 +61,156 @@ body {
/*******************************************/

/* Center the container */
.container {
.container_one {
position: relative;
width: 960px;
margin: auto;
height: 500px;
height: 100%;
z-index: 1;
}

header {
header h1 {
font-size: 34px;
font-weight: 800;
color: white;
padding: 40px;
margin-left: 40px;
}

header h2 {
font-size: 34px;
text-align: center;
font-weight: 600;
color: white;
padding: 90px;
}

.button_one {
position: absolute;
top: 350px;
left: 400px;
width: 150px;
height: 40px;
background-color: #f9e42e;
font-size: 15.5px;
font-weight: 800;
padding-top: 10px;
text-align: center;
border-radius: 5px;
color: #033048;
}

.container_two {
position: relative;
top: 100px;
z-index: 2;
background-color: white;
background-size: cover;
font-family: 'Lato', sans-serif;
}

.benefits {
width: 540px;
margin: auto;
font-size: 18px;
font-weight: 300px;
padding: 25px;
margin-left:50px;
color: #606161;
}

footer {
ul {
list-style-type: disc;
line-height: 1.8;
width: 320px;
font-size: 18px;
font-weight: 300;
padding: 5px;
color: #606161;
margin-left: 45px;
margin-top: 20px;
}

p {
margin-left: 10px;
}

h3 {
font-size: 30px;
font-weight: 600px;
color: #033048;
padding: 5px;
}

.container_three {
position: relative;
top: 100px;
padding: 35px;
z-index: 3;
background: url(../images/testimonial_bg.jpg) no-repeat center top rgb(134,141,157);
background-size: 100%;
}

.quote {
width: 420px;
margin: auto;
text-align: center;
font-size: 24px;
color: white;
}

blockquote {
font-style: italic;
margin: 5px;
}

.container_four {
position: relative;
top: 100px;
z-index: 4;
background-color: #f9e42e;
background-size: cover;
padding: 25px;
}

.button_two {
position: relative;
left: 45%;
width: 150px;
height: 40px;
background-color: #033048;
font-size: 14px;
font-weight: 800;
padding-top: 10px;
text-align: center;
border-radius: 5px;
color: white;
}

.container_five {
position: relative;
top: 100px;
background-color: #121212;
background-size: cover;
text-align: center;
}

.logo {
font-size: 34px;
font-weight: 800;
color: #f9e42e;
padding-top: 35px;
}

img {
padding: 25px;
}

#copyright {
color: white;
padding-bottom: 25px;
font-size: 11px;
font-weight: 600;
}

/******************************************
Expand Down
65 changes: 56 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,72 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Your description goes here">
<meta name="Relaxr" content="Relaxr - Get peace of mind">
<meta name="keywords" content="one, two, three">

<title>Blank Template</title>
<title>Relaxr - Get peace of mind</title>

<!-- external CSS link -->
<link rel="stylesheet" href="css/reset.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,700,300italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">

</head>

<body>
<div id="container">

<div class="container_one">

<header>
<h1>Blank Template</h1>
<h2>Just another blank template</h2>
<h1>Relaxr</h1>
<h2>Get peace of mind with a single tap</h2>
</header>
<footer>
&copy; Footer Goes Here
</footer>
</div><!-- #container -->
<div class="button_one">Get it Now</div>

</div><!-- #container -->

<div class="container_two">

<div class="benefits">
<h3>Benefits</h3>
<p>The perfect personal assistant. Relaxr does your job for you so you can enjoy life as it is meant to be.</p>
<ul>
<li>Schedule meetings for you</li>
<li>Excel automation to complete your work for you</li>
<li>Responds to emails on your behalf</li>
<li>Does all your work for you with our revolutionary AI technology</li>
</ul>
</div>

</div>

<div class="container_three">

<div class="quote">
<blockquote>"Relaxr changed my life. I've been able to travel the world, spend limited time working, and my boss keeps thanking me for crushing work."</blockquote>
<div>-Amanda, Intuit</div>
</div>
</div>

<div class="container_four">
<div class="end">
<div class="button_two">Sign Up Now!</div>
</div>
</div>

<footer class="container_five">
<div class="logo">Relaxr</div>
<div>
<img src="images/twitter.png" title="Twitter" alt="Twitter">
<img src="images/facebook.png" title="Facebook" alt="Facebook">
</div>
<div id="copyright">
&copy; Copyright 2015. Relaxr.
</div>
</footer>



</body>

</html>