-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (129 loc) · 5.63 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Codedge</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/icons/foundation-icons.css" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/vendor/modernizr.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="parallax">
<div id="cover-slide" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="top-title hide-for-small-only">
<a href="mailto:[email protected]">E-MAIL</a> -
<a href="http://codedge.io/blog">BLOG</a> -
<a href="http://github.com/codedge-llc">GITHUB</a>
</div>
<div class="top-title-small show-for-small-only">
<a href="mailto:[email protected]">E-MAIL</a> -
<a href="http://codedge.io/blog">BLOG</a> -
<a href="http://github.com/codedge-llc">GITHUB</a>
</div>
<div class="title">
<img src="img/codedge-blue.png" />
</div>
<div class="down-arrow" id="down" href="#">
<img src="img/down-arrow.png" />
</div>
</div>
</div>
<div id="what-we-do" class="parallax__group">
<div class="parallax__layer parallax__layer--fore">
<div class="top-title hide-for-small-only">
<h1>a development boutique and tech consultancy</h1>
</div>
<div class="left-content hide-for-small-only">
<div class="size-48">
<i class="fi-social-apple size-48"></i> +
<i class="fi-social-android size-48"></i> +
<i class="fi-laptop size-48"></i>
</div>
<h3>iOS, Android, and Web</h3>
<p>With our full-stack development, we create solutions that can fulfill a wide array of client needs. Whether it's a simple website redesign or a full-scale mobile application, we can build it.</p>
</div>
<div class="top-title show-for-small-only">
<h1>what we do</h1>
</div>
<div class="left-content-small show-for-small-only">
<div class="size-48">
<i class="fi-social-apple size-48"></i> +
<i class="fi-social-android size-48"></i> +
<i class="fi-laptop size-48"></i>
</div>
<h3>iOS, Android, and Web</h3>
<p>With our full-stack development, we create solutions that can fulfill a wide array of client needs. Whether it's a simple website redesign or a full-scale mobile application, we can build it.</p>
</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div class="phone">
<img src="img/iphone2.png" />
</div>
</div>
</div>
<div id="meet-the-team" class="parallax__group">
<div class="parallax__layer parallax__layer--fore">
<div class="team">
<div class="row">
<div class="small-4 small-centered large-uncentered columns">
<a class="caption" href="#" data-title="Henry Popp" data-description="iOS and Ruby on Rails artisan. With his strong graphic design background and love of UX design, Henry strives to deliver products that not only work well but look beautiful.">
<img src="img/henry.jpg" alt="Henry Popp"/>
</a>
</div>
<div class="small-4 small-centered large-uncentered columns">
<a class="caption" href="#" data-title="Tyler Hurst" data-description="Android and server specialist. Having worked in industry as an automation consultant, Tyler implements solutions that are both effective and efficient.">
<img src="img/tyler.jpg" alt="Tyler Hurst"/>
</a>
</div>
<div class="small-4 small-centered large-uncentered columns">
<a class="caption" href="#" data-title="Bonnie Helm" data-description="Social media manager and WordPress guru. When Bonnie isn't working tirelessly to foster Codedge's web and social media presence, she sets up WordPress sites for clients that require simpler solutions.">
<img src="img/bonnie.jpg" alt="Bonnie Helm"/>
</a>
</div>
</div>
</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div class="top-title">
<h1>meet the team</h1>
</div>
</div>
</div>
<div id="contact-us" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">
<h1>contact us</h1>
<div class="size-48">
<a href="mailto:[email protected]">[email protected]</a><br/>
<a href="http://facebook.com/CodedgeLLC"<i class="fi-social-facebook size-48"></i></a>
<a href="https://twitter.com/codedgellc"><i class="fi-social-twitter size-48"></i></a>
<a href="http://github.com/codedge-llc"><i class="fi-social-github size-48"></i></a>
</div>
</div>
</div>
</div>
</div>
<script>
var debugInput = document.querySelector("input");
function updateDebugState() {
document.body.classList.toggle('debug-on', debugInput.checked);
}
debugInput.addEventListener("click", updateDebugState);
updateDebugState();
$(document).ready(function (){
$("#down").click(function() {
$('.parallax').animate({
scrollTop: $("#what-we-do").offset().top
}, {
easing: 'swing',
duration: 800,
});
});
});
</script>
</body>
</html>