-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
159 lines (150 loc) · 7.11 KB
/
index.html
File metadata and controls
159 lines (150 loc) · 7.11 KB
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<a name="top"></a>
<!-- Navigation and Top Banner Container -->
<div class="top-container">
<header class="top-nav">
<h1 class="logo"><a href="index.html">S&J</a></h1>
<div class="hamburger-menu">
<span></span>
<span></span>
<span></span>
</div>
</header>
<nav class="nav-links">
<a href="index.html" class="selected">Home</a>
<a href="services.html">Services</a>
<a href="projects.html">Projects</a>
<a href="#end" id="scroll">Contact</a>
</nav>
<section class="home-banner">
<h1>Integrity,<br>
Excellence,<br>
Progress.</h1>
</section>
</div>
<!-- Information Container -->
<section class="content-container">
<div class="info-containers hidden">
<div class="info-container image-left">
<img class="desktop-img" src="img/home/home-img-1.png" alt="Architecture interior sketch">
<img class="mobile-img" src="img/home/home-mobile-img-1.png" alt="Architecture interior sketch">
<div class="info-content info-left">
<h2>Smith & Jones Architects</h2>
<p>Don't forget to tell these special people in your life just how special they are to you. There we go. Everything's not great in life, but we can still find beauty in it.</p>
<a href="services.html"><button>Learn More</button></a>
</div>
</div>
<div class="info-container hidden">
<img class="desktop-img" src="img/home/home-img-2.png" alt="Exterior building image in courtyard">
<img class="mobile-img" src="img/home/home-mobile-img-2.png" alt="Architecture interior sketch">
<div class="info-content info-left">
<div class="info-content info-right">
<h2>Futuristic Designs</h2>
<p>Take your time. Speed will come later. Just go back and put one little more happy tree in there. Don't forget to tell these special people in your life just how special they are to you.</p>
<a href="projects.html"><button>View Designs</button></a>
</div>
</div>
</div>
<!-- Recent Projects Container -->
<section class="recent-projects">
<h2>Recent Projects</h2>
<div class="projects-container">
<div class="project hidden">
<img class="desktop-img" src="img/home/home-villas-img.png" alt="Exterior photo of modern home">
<img class="mobile-img mobile-project-image" src="img/home/home-mobile-villas-img.png" alt="Exterior photo of modern home">
<h3 class="title-card title-card-right">THE VILLAS</h3>
<div class="project-content">
<p>The Villas bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runwa heading towards a streamlined cloud solution.</p>
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>
</div>
</div>
<div class="project hidden">
<img class="desktop-img" src="img/home/home-outskirts-img.png" alt="Exterior photo of modern home with water feature">
<img class="mobile-img mobile-project-image" src="img/home/home-mobile-outskirts-img.png" alt="Exterior photo of modern home">
<h3 class="title-card">OUTSKIRTS</h3>
<div class="project-content">
<p>The Outskirts are amazing to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution.</p>
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>
</div>
</div>
<div class="project hidden">
<img class="desktop-img" src="img/home/home-the-blocks-img.png" alt="Exterior photo of cityhousing">
<img class="mobile-img mobile-project-image" src="img/home/home-mobile-the-blocks-img.png" alt="Exterior photo of cityhousing">
<h3 class="title-card title-card-right">THE BLOCKS</h3>
<div class="project-content">
<p>The Blocks are amazing to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. </p>
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>
</div>
</div>
</div>
</section>
</section>
<!-- Footer Container -->
<a name="end"></a>
<footer>
<div class="footer-blocks hidden">
<div class="footer-block news-letter-cta">
<h4>Interested in starting a project?</h4>
<div class="name-inputs">
<input class="name-input" type="text" placeholder="Name">
</div>
<input type="text" placeholder="Enter email">
<select name="options">
<option value="placeholder">Select One</option>
<option value="">I am a small business</option>
<option value="fiat">I am a residential owner</option>
<option value="audi">I am a corporation</option>
</select>
<textarea rows="4" placeholder="Write your message here." class="input-message"></textarea>
<input class="submit-button" type="submit">
<p class="sign-up-policy">We'll never share your information with anyone.</p>
</div>
<div class="footer-block new-york-address">
<h4>New York</h4>
<address>
123 Lane<br>
Suite 100<br>
Albany, NY 12345<br>
202 555 0144
</address>
</div>
<div class="footer-block florida-address">
<h4>Florida</h4>
<address>
Ocean Drive<br>
Suite 201<br>
Orlando, FL 22345<br>
502 555 0144
</address>
</div>
<div class="footer-block california-address">
<h4>California</h4>
<address>
Mountain Street<br>
Suite 105<br>
San Diego, CA 22345<br>
702 555 0144
</address>
</div>
</div>
<a href="#top"><img class="home-button" align="middle" src="img/arrow.png" alt="up-arrow"></a>
<p class="copyright">Copyright © 2018 Smith and Jones</p>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>