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 Submission by Anny Ng #6

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

HW 2 Submission by Anny Ng #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
143 changes: 136 additions & 7 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,9 @@ body {
color: #000;
font-size: 12px;
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;
font-family: 'Open Sans', sans-serif;
background-size: cover;
font-weight: normal;
}


Expand All @@ -61,16 +61,21 @@ body {

/* Center the container */
.container {
width: 960px;
margin: auto;
height: 500px;
width: 860px;
margin: 0 auto 20px;
}

header {

background: url(../images/header_bg.jpg) no-repeat center top;
height: 350px;
color: white;
}

footer {
height: 250px;
background-color: #000;
text-align: center;


}

Expand All @@ -79,5 +84,129 @@ footer {
/*******************************************/


.content{
background-color: #f0efef;
height: 300px;
color: #606161;
font-size: 13px;
}

header > h1{
font-weight: 800;
font-size: 24px;
padding-left: 50px;
padding-top: 30px;
padding-bottom: 30px;
}

#button1{
display: block;
width: 150px;
padding: 5px;
margin: 50px auto 0 auto;
font-weight: 800;
font-size: 14px;
background-color: #f9e42e;
color: #033048;
border: 5px solid #f9e42e;
border-radius: 3px;
box-sizing: border-box;
text-align: center;
}

#button2{
width: 150px;
padding: 5px;
margin: 0 auto;
background-color: #033048;
color: white;
font-weight: 800;
font-size: 12px;
border: 5px solid #033048;
border-radius: 3px;
box-sizing: border-box;
text-align: center;
/* position: relative;
top: 25px;*/
}

.testimony{
background: url(../images/testimonial_bg.jpg) no-repeat center top;
height: 280px;
color: white;
}

.sign-up{
background-color: #f9e42e;
height: 80px;
padding-top: 20px; /*this pushes the button down towards the center of the yellow box*/
}

div.content{
font-size: 13px;
font-weight: 300;
padding-left: 50px;
padding-top: 30px;
padding-bottom: 50px;
}

div.content > h2{
color: #033048;
font-size: 20px;
font-weight: 600;
}

div.content > p{
margin-top: 10px;
}

div.content > ul{
list-style: disc inside none;
padding-left: 30px;
padding-top: 20px;
}


header > h2{
font-size: 24px;
font-weight: 600;
text-align: center;
}

blockquote {
width: 450px;
font-weight: 300;
font-size: 18px;
font-style: italic;
padding-top: 40px;
margin:0 auto;
text-align: center;
}

div.testimony > p {
font-weight: 600;
font-size: 18px;
text-align: center;
padding-top: 10px;

}

footer > h1 {
color: #f9e42e;
font-weight: 800;
font-size: 24px;
padding-top: 30px;
}

footer > p {
color:white;
font-size: 9px;
font-weight: 600;
padding-top: 30px;

}

footer li{
padding-top: 30px;
display: inline-block;
}
42 changes: 37 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,49 @@
<!-- external CSS link -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">

<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,600italic,600,400italic,400,800,800italic,300' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<div class="container">
<header>
<h1>Blank Template</h1>
<h2>Just another blank template</h2>
<h1>Relaxr</h1>
<h2>Get piece of mind with a single tap</h2>
<div id="button1">Get it Now</div>
</header>

<div class="content">
<h2>Benefits</h2>
<p>The perfect profesonal assistant. Relaxr does your job for you so you can enjoy life as it is meant to be.</p>

<ul>
<li>Scheduel meetings for you</li>
<li>Excel automation to complete you 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 class="testimony">
<blockquote>
"Relaxr changed my life. I've been able to travle the world, spend limited time working and my boss keeps thanking me for crushing work"
</blockquote>
<p>-Amanda Intuit</p>
</div>

<div class="sign-up">
<div id="button2">Sign Up Now!</div>
</div>

<footer>
&copy; Footer Goes Here
<h1>Relaxr</h1>
<ul>
<li><img src="images/facebook.png"></li>
<li><img src="images/twitter.png"></li>
</ul>

<p>&copy; Copyright 2016. Relaxr.</p>
</footer>

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