135

4

AK Web

11/23 Part 2- Jquery

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8" />
<meta name="description" content="Rad Site.">
<meta name="author" content="Adam Kunes">
<meta name="keywords" content="how to build a website">
<title>Adam Kunes' Website</title>

<link href="assets/css/layout.css" rel="stylesheet">
<link href="assets/css/theme.css" rel="stylesheet">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


</head>
<body>

<nav class="nav">
<div class="container">
<div class="logo">
<img src="assets/images/logo.png" alt="Cloudie"/>
</div>
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
</nav>

<header>
<div class='title-wrapper'>
<h1 class='header-title'>my first website</h1>
<h3 class="header-subtitle">HTML5, CSS3 & JAVASCRIPT</h3>
</div>


</header>

<section class='call-to-action'>
<div class="container">
<div class="intro">
<h3 class='section-title white'>Call to action</h3>
<p>You should really click on this.</p>

</div>

<div class="intro right">
<a href='/'class='call-button'>Click here</a>
</div>
</div>

</section>

<section class="works">
<div class="container">
<h3 class='section-title gray works'>Works</h3>
<div class='column'>
<img src="assets/images/cards1.jpg" alt="Works" />
</div>

<div class='column'>
<img src="assets/images/cards2.jpg" alt="Works" />
</div>

<div class='column'>
<img src="assets/images/cards1.jpg" alt="Works" />
</div>

<div class='column'>
<img src="assets/images/cards2.jpg" alt="Works" />
</div>

</section>

<section class="testimonials">
<div class="container">
<h3 class="section-title gray2">Testimonials</h3>
<p>Applicake chocolate cake wafer toffee pie soufflé wafer. Tart marshmallow wafer macaroon cheesecake jelly. Gingerbread cookie soufflé sweet roll sweet roll jelly-o.</p>
</div>
</section>

<section class="located">
<div class="container">
<h3 class="section-title white">Located</h3>
</div>
</section>

<footer>
<div class="container">
<ul class="footer-menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</footer>

<script>
$(".header-subtitle").on("click",function(){
$(".call-to-action").slideToggle();
}};

</script>

</body>
</html>

Update: 11/23

Can't seem to get my footer text to align properly. Looks like this: 

Here is my code:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8" />
<meta name="description" content="Rad Site.">
<meta name="author" content="Adam Kunes">
<meta name="keywords" content="how to build a website">
<title>Adam Kunes' Website</title>

<link href="assets/css/layout.css" rel="stylesheet">
<link href="assets/css/theme.css" rel="stylesheet">


</head>
<body>

<nav class="nav">
<div class="container">
<div class="logo">
<img src="assets/images/logo.png" alt="Cloudie"/>
</div>
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
</nav>

<header>
<div class='title-wrapper'>
<h1 class='header-title'>my first website</h1>
<h3 class="header-subtitle">HTML5, CSS3 & JAVASCRIPT</h3>
</div>


</header>

<section class='call-to-action'>
<div class="container">
<div class="intro">
<h3 class='section-title white'>Call to action</h3>
<p>You should really click on this.</p>

</div>

<div class="intro right">
<a href='/'class='call-button'>Click here</a>
</div>
</div>

</section>

<section class="works">
<div class="container">
<h3 class='section-title gray works'>Works</h3>
<div class='column'>
<img src="assets/images/cards1.jpg" alt="Works" />
</div>

<div class='column'>
<img src="assets/images/cards2.jpg" alt="Works" />
</div>

<div class='column'>
<img src="assets/images/cards1.jpg" alt="Works" />
</div>

<div class='column'>
<img src="assets/images/cards2.jpg" alt="Works" />
</div>

</section>

<section class="testimonials">
<div class="container">
<h3 class="section-title gray2">Testimonials</h3>
<p>Applicake chocolate cake wafer toffee pie soufflé wafer. Tart marshmallow wafer macaroon cheesecake jelly. Gingerbread cookie soufflé sweet roll sweet roll jelly-o.</p>
</div>
</section>

<section class="located">
<div class="container">
<h3 class="section-title white">Located</h3>
</div>
</section>

<footer>
<div class="container">
<ul class="footer-menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</footer>

</body>
</html>

-------

body {
margin: 0;
}

section {
overflow: hidden;
}

a {
text-decoration: none;
color: inherit;
}

p, h1, h3 {
margin: 0;
}

h3 {
padding-bottom: 20px;
padding-top: 20px;
}


ul {
list-style: none;
margin: 0;
padding: 0;
}

.nav {
height: 100px;
width: 100%;
}

.container {
margin: auto;
max-width: 960px;
width: 100%;
}

.logo {
float: left;
width: 320px;
}

.menu {
display: inline-block;
float: right;
width: 300px;
}

.menu > li {
font-size: 20px;
display: inline-block;
}

.title-wrapper {
padding-top: 100px;
text-align: center;
width: 100%;
}

.intro {
padding-top: 40px;
float:left;
width: 50%;
}

.right {
float: left;
width: 50%;

}

.testimonials p {
padding-top: 20px;
padding-bottom: 20px;
}

.footer-menu > li {
display: inline-block;
float: right;
width: 300px;

}

----

body {
font-family:Helvetica;
}
.white {
color: #fff;
}

.gray {
color:#515f67;
}

.gray2 {
color:#8c9498;
}

*{
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.nav {
background-color: #293137;
}


.menu {
color: #fff;
padding-top: 40px;
}

.menu > li {
font-size: 20px;
padding: 0 10px 0 0;
}

header {
background-image: url('../images/header.jpg');
background-position: center center;
background-size: cover;
height: 586px;
width: 100%;
}

.header-title {
background-color: #2f3539;
color: #fff;
font-size: 65px;
font-weight: bold;
margin: auto;
text-transform: uppercase;
width: 700px;
}

.header-subtitle {
background-color: #2b8bd2;
color: #fff;
font-size: 30px;
font-weight: 100;
margin: 50px auto 0 auto;
width: 450px;

}

.call-to-action {
background-color: #e25b40;
height: 213px;
width: 100%;
}

.section-title {
font-size: 30px;
font-weight: 100;
text-transform: uppercase;
}


.call-button {
color:#fff;
border: 5px solid #fff;
font-size: 30px;
padding: 10px 30px;
text-transform: uppercase;
}

.right {
text-align: center;
padding-top: 60px;
}

.intro p {
color: #fff;
font-size: 25px;
line-height: 40px;
margin-top: 5px;
padding-top: 50px;
}

.column {
float: left;
width: 50%;
}

.column img {
margin: auto;
max-width: 80%;
padding-top: 20px;
padding-bottom: 20px;
}


.testimonials {
background-color:#ebebeb ;
}

.testimonials p {
color: #788288;
font-size:28px;
font-family:helvetica;
font-weight: 100;
}

.located {
background-color: #353f47;
background-image: url('../images/map.png');
background-size: cover;
height: 586px;
}

---------

Fairly new to coding. Trying to follow the tutorials as best as possible. For some reason, I can't get the 

p tag closer to the "call to action" text. Here is what I have.

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8" />
<meta name="description" content="Rad Site.">
<meta name="author" content="Adam Kunes">
<meta name="keywords" content="how to build a website">
<title>Adam Kunes' Website</title>

<link href="assets/css/layout.css" rel="stylesheet">
<link href="assets/css/theme.css" rel="stylesheet">


</head>
<body>

<nav class="nav">
<div class="container">
<div class="logo">
<img src="assets/images/logo.png" alt="Cloudie"/>
</div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>

<header>
<div class='title-wrapper'>
<h1 class='header-title'>my first website</h1>
<h3 class="header-subtitle">HTML5, CSS3 & JAVASCRIPT</h3>
</div>


</header>

<section class='call-to-action'>
<div class="container">
<div class="intro">
<h3 class='section-title white'>Call to action</h3>
<p>You should really click on this.</p>

</div>

<div class="intro right">
<a href='/'class='call-button'>Click here</a>
</div>
</div>

</section>

</body>
</html>

-----------------

body {
margin: 0;
}

a {
text-decoration: none;
}

p, h1, h3 {
margin: 0;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

.nav {
height: 100px;
width: 100%;
}

.container {
margin: auto;
max-width: 960px;
width: 100%;
}

.logo {
float: left;
width: 320px;
}

.menu {
display: inline-block;
float: right;
width: 300px;
}

.menu > li {
font-size: 20px;
display: inline-block;
}

.title-wrapper {
padding-top: 100px;
text-align: center;
width: 100%;
}

.intro {
padding-top: 40px;
float:left;
width: 50%;
}

.right {
float: left;
width: 50%;

}

--------------

body {
font-family:Helvetica;
}
.white {
color: #fff;
}

*{
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.nav {
background-color: #293137;
}


.menu {
color: #fff;
padding-top: 40px;
}

.menu > li {
font-size: 20px;
padding: 0 10px 0 0;
}

header {
background-image: url('../images/header.jpg');
background-position: center center
;
height: 700px;
width: 100%;
}

.header-title {
background-color: #2f3539;
color: #fff;
font-size: 65px;
font-weight: bold;
margin: auto;
text-transform: uppercase;
width: 700px;
}

.header-subtitle {
background-color: #2b8bd2;
color: #fff;
font-size: 30px;
font-weight: 100;
margin: 50px auto 0 auto;
width: 450px;

}

.call-to-action {
background-color: #e25b40;
height: 230px;
width: 100%;
}

.section-title {
font-size: 30px;
font-weight: 100;
text-transform: uppercase;
}


.call-button {
color:#fff;
border: 5px solid #fff;
font-size: 30px;
padding: 10px 30px;
text-transform: uppercase;
}

.right {
text-align: center;
}

.intro p {
color: #fff;
font-size: 25px;
line-height: 40px;
margin-top: 5px;
padding-top: 50px;
}

Comments

Please sign in or sign up to comment.