首頁 探索 說明
登入
RevolvingCow
/
agilesavants
關註 2
讚好 0
派生 0
代碼 問題管理 0 合併請求 0 提交歷史 1 版本發佈 0
瀏覽代碼

initial commit with parallax. need to reduce image sizes for better load times

Bryan Allred 8 年之前
當前提交
391cdec08b
共有 1 個文件被更改，包括 294 次插入 和 0 次删除
分割檢視 顯示文件統計
  1. 294 0
      index.html

+ 294 - 0
index.html
查看文件 

@ -0,0 +1,294 @@
1 
<!DOCTYPE html>
2 
<html lang="en">
3 
    <head>
4 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
5 
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
6 
        <title>Agile Savant</title>
7
8 
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
9 
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.min.css" />
10 
        <link type="text/css" rel="stylesheet" media="screen,projection" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" />
11 
        <style type="text/css" media="screen,projection">
12 
         nav ul a,
13 
         nav .brand-logo {
14 
             color: #444;
15 
         }
16
17 
         nav .brand-logo img {
18 
             height: 64px;
19 
         }
20
21 
         p {
22 
             line-height: 2rem;
23 
         }
24
25 
         .button-collapse {
26 
             color: #26a69a;
27 
         }
28
29 
         .parallax-container {
30 
             min-height: 380px;
31 
             line-height: 0;
32 
             height: auto;
33 
             color: rgba(255,255,255,.9);
34 
         }
35 
         .parallax-container .section {
36 
             width: 100%;
37 
         }
38 
         .parallax img {
39 
             width: 100%;
40 
             height: auto;
41 
         }
42 
         .header {
43 
             text-shadow: 2px 2px #000;
44 
         }
45
46 
         @media only screen and (max-width : 992px) {
47 
             .parallax-container .section {
48 
                 position: absolute;
49 
                 top: 40%;
50 
             }
51 
             #index-banner .section {
52 
                 top: 10%;
53 
             }
54 
         }
55
56 
         @media only screen and (max-width : 600px) {
57 
             #index-banner {
58 
                height: 100vh;
59 
             }
60 
             #index-banner .section {
61 
                 top: 0;
62 
             }
63 
         }
64
65 
         .icon-block {
66 
             padding: 0 15px;
67 
         }
68 
         .icon-block .material-icons {
69 
             font-size: inherit;
70 
         }
71
72 
         footer.page-footer {
73 
             margin: 0;
74 
         }
75 
        </style>
76 
    </head>
77 
    <body>
78 
        <div class="navbar-fixed">
79 
            <nav class="white" role="navigation">
80 
                <div class="nav-wrapper container">
81 
                    <a id="logo-container" href="#" class="brand-logo hide-on-med-and-down"><img src="http://nebula.wsimg.com/d73ce014e3a46a9cf814c3ca4f5f2232?AccessKeyId=847F649127164C94869F&disposition=0&alloworigin=1" /></a>
82 
                    <ul class="right hide-on-med-and-down">
83 
                        <li><a href="#contact">Contact Us</a></li>
84 
                    </ul>
85
86 
                    <ul id="nav-mobile" class="side-nav">
87 
                        <li><a href="#about">About</a></li>
88 
                        <li><a href="#services">Services</a></li>
89 
                        <li><a href="#contact">Contact Us</a></li>
90 
                    </ul>
91 
                    <a href="#" data-activates="nav-mobile" class="button-collapse text-light-blue"><i class="material-icons">menu</i></a>
92 
                </div>
93 
            </nav>
94 
        </div>
95
96 
        <div id="index-banner" class="parallax-container">
97 
            <div class="section no-pad-bot">
98 
                <div class="container">
99 
                    <br><br>
100 
                    <h1 class="header center cyan-text text-lighten-5">Agile Savant</h1>
101 
                    <div class="row center">
102 
                        <h5 class="header col s12 light">Expertise you can rely on</h5>
103 
                    </div>
104 
                    <div class="row center">
105 
                        <a href="#contact" id="download-button" class="btn-large waves-effect waves-light cyan lighten-1">Say Hello!</a>
106 
                    </div>
107 
                    <br><br>
108 
                </div>
109 
            </div>
110 
            <div class="parallax"><img src="https://static.pexels.com/photos/41170/architecture-blue-building-business-41170.jpeg" alt="Unsplashed background img 1"></div>
111 
        </div>
112
113 
        <div class="container">
114 
            <div class="section">
115 
                <a id="services"></a>
116
117 
                <!--   Icon Section   -->
118 
                <div class="row">
119 
                    <div class="col s12 m4">
120 
                        <div class="icon-block">
121 
                            <h2 class="center cyan-text text-darken-2"><i class="material-icons">flash_on</i></h2>
122 
                            <h5 class="center">Management Services</h5>
123
124 
                            <p class="light">Customized for each client</p>
125 
                            <!-- <p class="light">We provide project and program management (PPM) services that are based on PMI and Scrum Alliance best practices and methodologies.  Each PPM engagement is customized to our clients' organizational culture, preferences and are mapped to their own internal processes.  Whenever possible, we work within the framework of your existing organizational processes while pointing out and educating our clients on potential areas of improvement that can lead to a higher level of certainty of project success</p> -->
126 
                        </div>
127 
                    </div>
128
129 
                    <div class="col s12 m4">
130 
                        <div class="icon-block">
131 
                            <h2 class="center cyan-text text-darken-2"><i class="material-icons">group</i></h2>
132 
                            <h5 class="center">Agile Development</h5>
133
134 
                            <p class="light">Led by certified Scrum Masters and Agile certified practitioners</p>
135 
                            <!-- <p class="light">Don't have internal agile application development talent?  AgileSavant, LLC also provides agile application development, integration and lifecycle management (ALM) services.  We understand that application development, integration and ALM capabilities are an important component to possess in the rapidly changing world of Information Technology. Many applications now have web components, while the border between custom development and commercial applications is getting thinner. New development technologies, new connected devices, and new cloud-oriented business models create rich opportunity for application developers to drive greater innovation and creativity. With AgileSavant's proven expertise and methodologies, our clients can build the next generation of continuous services that are dynamic, scalable and optimized to connect with a next-generation multi-device world.</p> -->
136 
                        </div>
137 
                    </div>
138
139 
                    <div class="col s12 m4">
140 
                        <div class="icon-block">
141 
                            <h2 class="center cyan-text text-darken-2"><i class="material-icons">settings</i></h2>
142 
                            <h5 class="center">Dev-Ops</h5>
143
144 
                            <p class="light">Minimized your risks along the way through tight collaboration between developers and IT operations professionals</p>
145 
                            <!-- <p class="light">Having problems with effectively managing the necessary collaboration between your application developers and IT operations professionals?  AgileSavant, LLC provides development and operations consulting services (DevOps) that can assist your organization in obtaining the goals of an optimized and effective DevOps competency.  The professionals at AgileSavant can help your organization attain the specific goals of a DevOps approach which spans the entire delivery pipeline, and these goals include improved deployment frequency, which can lead to faster time to market, lower failure rate of new releases, shortened lead time between fixes, and faster mean time to recovery in the event of a new release crashing or otherwise disabling the current system. We can assist you in making simple processes become increasingly programmable and dynamic, using a DevOps approach to application delivery and operations, which aims to maximize the predictability, efficiency, security, and maintainability of operational processes. AgileSavant can partner with your organization by consulting you on developing and implementing a DevOps approach that leverages existing staff, or be engaged to build a DevOps competency that we then manage for you.  Whatever your DevOps needs, we'll leverage our consultative sales process to recommend the right approach for your organization.</p> -->
146 
                        </div>
147 
                    </div>
148 
                </div>
149
150 
            </div>
151 
        </div>
152
153 
        <div class="parallax-container valign-wrapper">
154 
            <div class="section no-pad-bot">
155 
                <div class="container">
156 
                    <div class="row center">
157 
                        <h5 class="header col s12 light">Dev Ops that deliver</h5>
158 
                    </div>
159 
                </div>
160 
            </div>
161 
            <div class="parallax"><img src="http://hdwallpaperfun.com/wp-content/uploads/2014/10/Mac-Keyboard-Wallpaper-High-Res-Stock-Photos-65326.jpg" alt="Unsplashed background img 2"></div>
162 
        </div>
163
164 
        <div class="container">
165 
            <div class="section">
166 
                <a id="contact"></a>
167
168 
                <div class="row">
169 
                    <div class="col s12 center">
170 
                        <h3><i class="mdi-content-send brown-text"></i></h3>
171 
                        <h4>Get in touch</h4>
172 
                    </div>
173
174 
                    <div class="col m6 s12">
175 
                        <div class="row">
176 
                            <div class="col s12">
177 
                                <div class="map" style="height: 20em;"><iframe src="https://maps.google.com/maps?v=2&amp;f=q&amp;ie=UTF8&amp;t=m&amp;iwloc=&amp;q=8160+Maple+Lawn+Blvd%2c+Suite+200%2c+Fulton%2c+MD+20759&amp;hl=en&amp;z=14&amp;source=s_q&amp;output=embed" style="width: 100%; height: 100%" scrolling="no" height="100%"></iframe><div style="overflow:hidden"><a href="//maps.google.com/maps?v=2&amp;f=q&amp;ie=UTF8&amp;t=m&amp;iwloc=&amp;q=8160+Maple+Lawn+Blvd%2c+Suite+200%2c+Fulton%2c+MD+20759&amp;z=14&amp;source=embed" target="_blank">View Larger Map</a></div></div>
178 
                            </div>
179 
                        </div>
180 
                        <div class="row">
181 
                            <div class="col s12">
182 
                                <p class="left-align light">
183 
                                    8160 Maple Lawn Blvd, Suite 200<br/>
184 
                                    Fulton, MD 20759
185 
                                </p>
186 
                                <p class="left-align light">
187 
                                    Telephone: <a href="tel:443-527-6086">(443) 527-6086</a>
188 
                                </p>
189 
                                <p class="left-align light">
190 
                                    E-mail: <a href="mailto:kristen.tilghman@agilesavant.com">kristen.tilghman@agilesavant.com</a>
191 
                                </p>
192 
                            </div>
193 
                        </div>
194 
                    </div>
195
196 
                    <form class="col m6 s12">
197 
                        <div class="row">
198 
                            <div class="input-field col s6">
199 
                                <input id="name" type="text" class="validate">
200 
                                <label for="name">Name</label>
201 
                            </div>
202 
                        </div>
203 
                        <div class="row">
204 
                            <div class="input-field col s12">
205 
                                <input id="email" type="email" class="validate">
206 
                                <label for="email">Email</label>
207 
                            </div>
208 
                        </div>
209 
                        <div class="row">
210 
                            <div class="input-field col s12">
211 
                                <input id="subject" type="text" class="validate">
212 
                                <label for="subject">Subject</label>
213 
                            </div>
214 
                        </div>
215 
                        <div class="row">
216 
                            <div class="input-field col s12">
217 
                                <textarea id="message" class="materialize-textarea"></textarea>
218 
                                <label for="message">Message</label>
219 
                            </div>
220 
                        </div>
221 
                        <div class="row">
222 
                            <div class="col s12">
223 
                                <button class="btn light-blue waves-effect waves-light" type="submit" name="action">
224 
                                    Submit
225 
                                    <i class="material-icons right">send</i>
226 
                                </button>
227 
                            </div>
228 
                        </div>
229 
                    </form>
230 
                </div>
231
232 
            </div>
233 
        </div>
234
235 
        <div class="parallax-container valign-wrapper">
236 
            <div class="section no-pad-bot">
237 
                <div class="container">
238 
                    <div class="row center">
239 
                        <h5 class="header col s12 light">Approaches that work</h5>
240 
                    </div>
241 
                </div>
242 
            </div>
243 
            <div class="parallax"><img src="https://static.pexels.com/photos/7097/people-coffee-tea-meeting.jpg" alt="Unsplashed background img 3"></div>
244 
        </div>
245
246 
        <footer class="page-footer light-blue darken-1">
247 
            <div class="container">
248 
                <a id="about"></a>
249
250 
                <div class="row">
251 
                    <div class="col l9 s12">
252 
                        <h5 class="white-text">Company Bio</h5>
253 
                        <p class="grey-text text-lighten-4">AgileSavant, LLC specializes in managing projects using both Agile Scrum and traditional Waterfall methodologies. We customize our services delivery approach to each unique customer engagement. Our experience, best practices and standards, combined with effective communication, strategic planning and risk management support, are all leveraged to ensure the success of our clients' product and program management objectives.</p>
254 
                        <p class="grey-text text-lighten-4">Though we have professionals certified in the delivery of Waterfall based project management methodologies, AgileSavant strongly encourages its clients to explore the merits and real benefits that an Agile Scrum software delivery approach provides to developer teams, clients, end users, and IT operations professionals.  We educate our clients on what Scrum is, the benefits of "iterative" development and acceptance of software feature sets, the agile project / program management lifecycle, as well as what it takes to ensure the optimal collaboration between software developers and IT operations professionals (DevOps).  All of these components are then pulled together to arm our clients with trust and confidence in the process, while delivering an exceptional product development experience.</p>
255 
                    </div>
256 
                    <div class="col l3 s12">
257 
                        <h5 class="white-text">Connect</h5>
258
259 
                        <div class="row">
260 
                            <!-- <a href="#" class="white-text" title="Follow us on Facebook" target="_blank"><i class="icon fa facebook-square fa-2x"></i></a> -->
261 
                            <div class="col s4">
262 
                                <a href="#" class="white-text" title="Follow us on Twitter" target="_blank"><i class="icon fa fa-twitter fa-2x"></i></a>
263 
                            </div>
264 
                            <div class="col s4">
265 
                                <a href="#" class="white-text" title="Follow us on Goolge+" target="_blank"><i class="icon fa fa-google-plus fa-2x"></i></a>
266 
                            </div>
267 
                            <div class="col s4">
268 
                                <a href="#" class="white-text" title="Follow us on LinkedIn" target="_blank"><i class="icon fa fa-linkedin fa-2x"></i></a>
269 
                            </div>
270 
                        </div>
271 
                    </div>
272 
                </div>
273 
            </div>
274 
            <div class="footer-copyright light-blue darken-2">
275 
                <div class="container">
276 
                    &copy; 2015 | AgileSavant, LLC
277 
                </div>
278 
            </div>
279 
        </footer>
280
281 
        <!--  Scripts-->
282 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
283 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
284 
        <script type="text/javascript">
285 
         (function ($) {
286 
             $(function () {
287 
                 $('.button-collapse').sideNav();
288 
                 $('.parallax').parallax();
289 
             });
290 
         })(jQuery);
291 
        </script>
292
293 
    </body>
294 
</html>