Difference between revisions of "Team:RPI Troy NY"

Line 1: Line 1:
−
<!doctype html>
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
−
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
+
−
<!--[if IE 7]>        <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
+
−
<!--[if IE 8]>        <html class="no-js lt-ie9" lang=""> <![endif]-->
+
−
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
+
−
    <head>
+
−
        <meta charset="utf-8">
+
−
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
 
<!--
 
<!--
 +
Design by TEMPLATED
 +
http://templated.co
 +
Released for free under the Creative Commons Attribution License
  
−
Template 2091 Ziggy
+
Name      : Lorikeet
−
 
+
Description: A two-column, fixed-width design with dark color scheme.
−
http://www.tooplate.com/view/2091-ziggy
+
Version    : 1.0
 +
Released  : 20140314
  
 
-->
 
-->
−
        <title>Ziggy HTML Template</title>
+
<html xmlns="http://www.w3.org/1999/xhtml">
−
        <meta name="description" content="">
+
<head>
−
        <meta name="viewport" content="width=device-width, initial-scale=1">
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
−
       
+
<title></title>
−
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
+
<meta name="keywords" content="" />
−
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
+
<meta name="description" content="" />
 +
<link href="http://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet" />
 +
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
 +
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
 +
 
 +
<!--[if IE 6]><link href="default_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
 +
 
 +
</head>
 +
<body>
 +
<div id="header-wrapper">
 +
<div id="header" class="container">
 +
<div id="logo">
 +
<h1><a href="#">Lorikeet</a></h1>
 +
</div>
 +
<div id="menu">
 +
<ul>
 +
<li class="active"><a href="#" accesskey="1" title="">Homepage</a></li>
 +
<li><a href="#" accesskey="2" title="">Our Clients</a></li>
 +
<li><a href="#" accesskey="3" title="">About Us</a></li>
 +
<li><a href="#" accesskey="4" title="">Careers</a></li>
 +
<li><a href="#" accesskey="5" title="">Contact Us</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
<div id="banner" class="container">
 +
<div class="title">
 +
<h2>Consectetuer adipiscing elit</h2>
 +
<span class="byline">Donec pulvinar ullamcorper metus</span>
 +
</div>
 +
<ul class="actions">
 +
<li><a href="#" class="button">Etiam posuere</a></li>
 +
<li><a href="#" class="button">Pulvinar mollis</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
<div id="wrapper">
 +
<div id="three-column" class="container">
 +
    <div class="banner">
 +
        <img src="images/pic01.jpg" alt="" />
 +
        </div>
 +
<div class="title">
 +
<h2>Feugiat lorem ipsum dolor sed veroeros</h2>
 +
<span class="byline">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue</span>
 +
</div>
 +
<div class="boxA">
 +
<p>Phasellus pellentesque, ante nec iaculis dapibus, eros justo auctor lectus, a lobortis lorem mauris quis nunc. Praesent pellentesque facilisis elit. Class aptent taciti sociosqu ad  torquent per conubia nostra.</p>
 +
<a href="#" class="button button-alt">More Info</a>
 +
</div>
 +
<div class="boxB">
 +
<p>Etiam neque. Vivamus consequat lorem at nisl. Nullam  wisi a sem semper eleifend. Donec mattis. Phasellus pellentesque, ante nec iaculis dapibus, eros justo auctor lectus, a lobortis lorem mauris quis nunc.</p>
 +
<a href="#" class="button button-alt">More Info</a>
 +
</div>
 +
<div class="boxC">
 +
<p> Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus. Phasellus pellentesque, ante nec iaculis dapibus, eros justo auctor lectus, a lobortis lorem mauris quis nunc.</p>
 +
<a href="#" class="button button-alt">More Info</a>
 +
</div>
 +
</div>
 +
</div>
 +
<div id="welcome">
 +
<div class="container">
 +
<div class="title">
 +
<h2>Fusce ultrices fringilla metus</h2>
 +
<span class="byline">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue</span>
 +
</div>
 +
<p>This is <strong>Lorikeet</strong>, a free, fully standards-compliant CSS template designed by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>. The photos in this template are from <a href="http://fotogrph.com/"> Fotogrph</a>. This free template is released under the <a href="http://templated.co/license">Creative Commons Attribution</a> license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you give us credit for it. Have fun :) </p>
 +
<ul class="actions">
 +
<li><a href="#" class="button">Etiam posuere</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
<div id="copyright" class="container">
 +
<p>&copy; Untitled. All rights reserved. | Photos by <a href="http://fotogrph.com/">Fotogrph</a> | Design by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>.</p>
 +
</div>
 +
</body>
 +
{
 +
height: 100%;
 +
}
 +
 +
body
 +
{
 +
margin: 0px;
 +
padding: 0px;
 +
background: #111111;
 +
font-family: 'Didact Gothic', sans-serif;
 +
font-size: 12pt;
 +
font-weight: 200;
 +
color: #FFF;
 +
}
 +
 +
 +
h1, h2, h3
 +
{
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 +
p, ol, ul
 +
{
 +
margin-top: 0;
 +
}
 +
 +
ol, ul
 +
{
 +
padding: 0;
 +
list-style: none;
 +
}
 +
 +
p
 +
{
 +
line-height: 180%;
 +
}
 +
 +
strong
 +
{
 +
}
 +
 +
a
 +
{
 +
color: #ee0000;
 +
}
 +
 +
a:hover
 +
{
 +
text-decoration: none;
 +
}
 +
 +
.container
 +
{
 +
overflow: hidden;
 +
margin: 0em auto;
 +
width: 1200px;
 +
}
 +
 +
/*********************************************************************************/
 +
/* Image Style                                                                  */
 +
/*********************************************************************************/
 +
 
 +
.image
 +
{
 +
display: inline-block;
 +
}
 +
 +
.image img
 +
{
 +
display: block;
 +
width: 100%;
 +
}
 +
 +
.image-full
 +
{
 +
display: block;
 +
width: 100%;
 +
margin: 0 0 2em 0;
 +
}
 +
 +
.image-left
 +
{
 +
float: left;
 +
margin: 0 2em 2em 0;
 +
}
 +
 +
.image-centered
 +
{
 +
display: block;
 +
margin: 0 0 2em 0;
 +
}
 +
 +
.image-centered img
 +
{
 +
margin: 0 auto;
 +
width: auto;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* List Styles                                                                  */
 +
/*********************************************************************************/
 +
 
 +
ul.style1
 +
{
 +
}
 +
 +
ul.actions
 +
{
 +
}
 +
 +
ul.actions li
 +
{
 +
display: inline-block;
 +
padding: 0em 0.50em;
 +
}
 +
 
 +
 
 +
/*********************************************************************************/
 +
/* Social Icon Styles                                                            */
 +
/*********************************************************************************/
 +
 
 +
ul.contact
 +
{
 +
margin: 0;
 +
padding: 2em 0em 0em 0em;
 +
list-style: none;
 +
}
 +
 +
ul.contact li
 +
{
 +
display: inline-block;
 +
padding: 0em 0.30em;
 +
font-size: 1em;
 +
}
 +
 +
ul.contact li span
 +
{
 +
display: none;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 +
ul.contact li a
 +
{
 +
color: #FFF;
 +
}
 +
 +
ul.contact li a:before
 +
{
 +
display: inline-block;
 +
background: #3f3f3f;
 +
width: 40px;
 +
height: 40px;
 +
line-height: 40px;
 +
border-radius: 20px;
 +
text-align: center;
 +
color: #FFFFFF;
 +
}
 +
 +
ul.contact li a.icon-twitter:before { background: #2DAAE4; }
 +
ul.contact li a.icon-facebook:before { background: #39599F; }
 +
ul.contact li a.icon-dribbble:before { background: #C4376B; }
 +
ul.contact li a.icon-tumblr:before { background: #31516A; }
 +
ul.contact li a.icon-rss:before { background: #F2600B; }
 +
 
 +
/*********************************************************************************/
 +
/* Button Style                                                                  */
 +
/*********************************************************************************/
 +
 
 +
.button
 +
{
 +
display: inline-block;
 +
padding: 1em 2em 1em 2em;
 +
letter-spacing: 0.10em;
 +
margin-top: 2em;
 +
padding: 1.40em 3em;
 +
border: 2px solid rgba(255,255,255,1);
 +
border-radius: 6px;
 +
text-decoration: none;
 +
font-weight: 700;
 +
font-size: 1em;
 +
color: #FFF;
 +
}
 +
 +
.button-alt
 +
{
 +
padding: 1em 2em;
 +
border-color: rgba(0,0,0,.8);
 +
color: rgba(0,0,0,.8);
 +
}
 +
 +
/*********************************************************************************/
 +
/* 4-column                                                                      */
 +
/*********************************************************************************/
 +
 
 +
.box1,
 +
.box2,
 +
.box3,
 +
.box4
 +
{
 +
width: 235px;
 +
}
 +
 +
.box1,
 +
.box2,
 +
.box3,
 +
{
 +
float: left;
 +
margin-right: 20px;
 +
}
 +
 +
.box4
 +
{
 +
float: right;
 +
}
 +
 +
/*********************************************************************************/
 +
/* 3-column                                                                      */
 +
/*********************************************************************************/
 +
 
 +
.boxA,
 +
.boxB,
 +
.boxC
 +
{
 +
width: 384px;
 +
}
 +
 
 +
.boxA,
 +
.boxB
 +
{
 +
float: left;
 +
margin-right: 20px;
 +
}
 +
 +
.boxC
 +
{
 +
float: right;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* 2-column                                                                      */
 +
/*********************************************************************************/
 +
 
 +
.tbox1,
 +
.tbox2
 +
{
 +
width: 575px;
 +
}
 +
 +
.tbox1
 +
{
 +
float: left;
 +
}
 +
 
 +
.tbox2
 +
{
 +
float: right;
 +
}
 +
 
 +
 +
/*********************************************************************************/
 +
/* Heading Titles                                                                */
 +
/*********************************************************************************/
 +
 
 +
.title
 +
{
 +
margin-bottom: 3em;
 +
}
 +
 +
.title h2
 +
{
 +
font-size: 2.7em;
 +
}
 +
 +
.title .byline
 +
{
 +
font-size: 1.3em;
 +
color: rgba(255,255,255,0.60);
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Header                                                                        */
 +
/*********************************************************************************/
 +
 
 +
#wrapper
 +
{
 +
position: relative;
 +
padding: 5em 0em 7em 0em;
 +
background: #FFF;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Header                                                                        */
 +
/*********************************************************************************/
 +
 
 +
#header-wrapper
 +
{
 +
position: relative;
 +
padding: 5em 0em 7em 0em;
 +
background: #111111 url(images/header-bg.jpg) no-repeat center;
 +
background-size: cover;
 +
}
 +
 
 +
#header
 +
{
 +
position: relative;
 +
padding: 5em 0em;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Logo                                                                          */
 +
/*********************************************************************************/
 +
 
 +
#logo
 +
{
 +
position: absolute;
 +
top: 3.6em;
 +
left: 0;
 +
}
 +
 +
#logo h1
 +
{
 +
font-size: 2.6em;
 +
color: #79C255;
 +
}
 +
 +
#logo a
 +
{
 +
text-decoration: none;
 +
color: rgba(255,255,255,1);
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Menu                                                                          */
 +
/*********************************************************************************/
 +
 
 +
#menu
 +
{
 +
position: absolute;
 +
top: 4.5em;
 +
right: 0;
 +
}
 +
 +
#menu ul
 +
{
 +
display: inline-block;
 +
}
 +
 +
#menu li
 +
{
 +
display: block;
 +
float: left;
 +
text-align: center;
 +
}
 +
 +
#menu li a, #menu li span
 +
{
 +
padding: 1em 1.5em;
 +
letter-spacing: 1px;
 +
text-decoration: none;
 +
text-transform: uppercase;
 +
font-size: 0.8em;
 +
color: rgba(255,255,255,0.80);
 +
}
 +
 +
#menu li:hover a, #menu li.active a, #menu li.active span
 +
{
 +
}
 +
 +
#menu .active a
 +
{
 +
border: 2px solid rgba(255,255,255,1);
 +
border-radius: 6px;
 +
color: rgba(255,255,255,1);
 +
}
 +
 +
#menu .icon
 +
{
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Banner                                                                        */
 +
/*********************************************************************************/
 +
 
 +
#banner
 +
{
 +
padding-top: 10em;
 +
text-align: center;
 +
}
 +
 +
#banner .title h2
 +
{
 +
font-size: 4em;
 +
}
 +
 +
#banner .title .byline
 +
{
 +
font-size: 2em;
 +
}
 +
 +
#banner .button
 +
{
 +
margin-top: 2em;
 +
padding: 1.40em 3em;
 +
border: 2px solid rgba(255,255,255,1);
 +
border-radius: 6px;
 +
font-weight: 700;
 +
font-size: 1em;
 +
 +
}
 +
 +
.banner
 +
{
 +
margin-bottom: 5em;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Page                                                                          */
 +
/*********************************************************************************/
 +
 
 +
#page
 +
{
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Content                                                                      */
 +
/*********************************************************************************/
 +
 
 +
#content
 +
{
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Sidebar                                                                      */
 +
/*********************************************************************************/
 +
 
 +
#sidebar
 +
{
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Footer                                                                        */
 +
/*********************************************************************************/
  
−
        <link rel="stylesheet" href="css/bootstrap.min.css">
+
#footer
−
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
+
{
−
        <link rel="stylesheet" href="css/fontAwesome.css">
+
}
−
        <link rel="stylesheet" href="css/tooplate-style.css">
+
  
−
        <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
+
/*********************************************************************************/
−
    </head>
+
/* Copyright                                                                    */
−
    <body>
+
/*********************************************************************************/
−
       
+
  
−
        <section class="first-section">
+
#copyright
−
          <div class="container">
+
{
−
            <div class="row">
+
overflow: hidden;
−
              <div class="col-md-12">
+
padding: 5em 0em;
−
                <div class="text-content">
+
border-top: 1px solid rgba(0,0,0,0.08);
−
                  <h2>Welcome To Ziggy</h2>
+
}
−
                  <div class="line-dec"></div>
+
−
                  <span>This is clean &amp; professional html template</span>
+
#copyright p
−
                </div>
+
{
−
              </div>
+
text-align: center;
−
            </div>
+
font-size: 1em;
−
          </div>
+
color: rgba(255,255,255,0.3);
−
        </section>
+
}
 +
 +
#copyright a
 +
{
 +
text-decoration: none;
 +
color: rgba(255,255,255,0.6);
 +
}
  
−
        <section class="second-section">
 
−
          <div class="container">
 
−
            <div class="row">
 
−
              <div class="col-md-3 col-sm-6">
 
−
                <div class="service-item">
 
−
                  <div class="icon">
 
−
                    <img src="img/first-icon.png" alt="">
 
−
                  </div>
 
−
                  <h4>Quick Editing</h4>
 
−
                  <p>Aliquam ex velit, viverra eu tristique vel, rhoncus nec ligula. In vel massa sed dolor pharetra interdum vitae posuere.</p>
 
−
                </div>
 
−
              </div>
 
−
              <div class="col-md-3 col-sm-6">
 
−
                <div class="service-item">
 
−
                  <div class="icon">
 
−
                    <img src="img/second-icon.png" alt="">
 
−
                  </div>
 
−
                  <h4>Responsive Layout</h4>
 
−
                  <p>Sed pulvinar ipsum id leo volutpat, in convallis lectus molestie. Aliquam nisi sapien, faucibus eu consequat id, egestas vitae augue.</p>
 
−
                </div>
 
−
              </div>
 
−
              <div class="col-md-3 col-sm-6">
 
−
                <div class="service-item">
 
−
                  <div class="icon">
 
−
                    <img src="img/third-icon.png" alt="">
 
−
                  </div>
 
−
                  <h4>Quick Support</h4>
 
−
                  <p>Aliquam ex velit, viverra eu tristique vel, rhoncus nec ligula. In vel massa sed dolor pharetra interdum vitae posuere.</p>
 
−
                </div>
 
−
              </div>
 
−
              <div class="col-md-3 col-sm-6">
 
−
                <div class="service-item">
 
−
                  <div class="icon">
 
−
                    <img src="img/fourth-icon.png" alt="">
 
−
                  </div>
 
−
                  <h4>Voice Chat</h4>
 
−
                  <p>Sed pulvinar ipsum id leo volutpat, in convallis lectus molestie. Aliquam nisi sapien, faucibus eu consequat id, egestas vitae augue.</p>
 
−
                </div>
 
−
              </div>
 
−
            </div>
 
−
          </div>
 
−
        </section>
 
  
−
        <section class="third-section">
+
/*********************************************************************************/
−
          <div class="container">
+
/* Welcome                                                                      */
−
            <div class="row">
+
/*********************************************************************************/
−
              <div class="col-md-10 col-md-offset-1">
+
−
                <div class="left-image col-md-4">
+
−
                  <img src="img/left-image.png" alt="">
+
−
                </div>
+
−
                <div class="right-text col-md-8">
+
−
                  <h4><em>Integer suscipit</em><br>Nullam volutpat mi vel</h4>
+
−
                  <p>Nulla tempor lectus at mauris bibendum porttitor. Aenean ultrices orci id nibh sodales, vel suscipit arcu vulputate. Pellentesque hendrerit diam quis leo dignissim, lacinia interdum nunc volutpat. Morbi lobortis mattis lectus, a dictum augue lobortis non. Fusce eu nulla sagittis, scelerisque eros fringilla, commodo dolor.</p>
+
−
                </div>
+
−
              </div>
+
−
            </div>
+
−
          </div>
+
−
        </section>
+
  
−
        <section class="fourth-section">
+
#welcome
−
          <div class="container">
+
{
−
            <div class="row">
+
position: relative;
−
              <div class="col-md-3 col-sm-6">
+
padding: 7em 0em 7em 0em;
−
                <div class="portfolio-item first-item">
+
background: #3d3f15;
−
                  <div class="image">
+
background-size: cover;
−
                    <a href="img/01-big-item.jpg" data-lightbox="image-1"><img src="img/first-item.jpg"></a>
+
text-align: center;
−
                  </div>
+
}
−
                  <div class="text">
+
−
                    <span>Nature</span>
+
#welcome .container
−
                    <h4>Robotic Light</h4>
+
{
−
                  </div>
+
width: 1000px;
−
                </div>
+
padding: 0px 100px;
−
              </div>
+
color: rgba(255,255,255,0.8);
−
              <div class="col-md-3 col-sm-6">
+
}
−
                <div class="portfolio-item second-item">
+
−
                  <div class="image">
+
#welcome a
−
                    <a href="img/02-big-item.jpg" data-lightbox="image-1"><img src="img/second-item.jpg"></a>
+
{
−
                  </div>
+
color: rgba(255,255,255,1);
−
                  <div class="text">
+
}
−
                    <span>Architect</span>
+
−
                    <h4>Rock Solid</h4>
+
−
                  </div>
+
−
                </div>
+
−
              </div>
+
−
              <div class="col-md-3 col-sm-6">
+
−
                <div class="portfolio-item third-item">
+
−
                  <div class="image">
+
−
                    <a href="img/03-big-item.jpg" data-lightbox="image-1"><img src="img/third-item.jpg"></a>
+
−
                  </div>
+
−
                  <div class="text">
+
−
                    <span>Focus</span>
+
−
                    <h4>Clean Design</h4>
+
−
                  </div>
+
−
                </div>
+
−
              </div>
+
−
              <div class="col-md-3 col-sm-6">
+
−
                <div class="send-to-portfolio">
+
−
                  <span>Do you want to see more?</span>
+
−
                  <div class="primary-button">
+
−
                    <a href="portfolio-page.html">Visit gallery</a>
+
−
                  </div>
+
−
                </div>
+
−
              </div>
+
−
            </div>
+
−
          </div>
+
−
        </section>
+
  
−
        <section class="fivth-section">
 
−
          <div class="container">
 
−
            <div class="row">
 
−
              <div class="col-md-10 col-md-offset-1">
 
−
                <div class="left-text col-md-8">
 
−
                  <h4><em>Aliquam efficitur</em><br>augue et libero vulputate feugiat</h4>
 
−
                  <p>Mauris eget orci porta, aliquam neque sit amet, porttitor dui. Donec efficitur vehicula justo quis varius. Vivamus pharetra lorem eget turpis ornare tempus. Vivamus ac sodales lectus. Morbi rhoncus feugiat neque ultrices rhoncus. Maecenas ultrices, nisl pellentesque hendrerit dignissim, ante purus hendrerit urna, eu tristique est massa quis risus.</p>
 
−
                </div>
 
−
                <div class="right-image col-md-4">
 
−
                  <img src="img/right-image.png" alt="">
 
−
                </div>
 
−
              </div>
 
−
            </div>
 
−
          </div>
 
−
        </section>
 
  
−
        <section class="sixth-section">
+
/*********************************************************************************/
−
          <div class="container">
+
/* Extra                                                                        */
−
            <div class="row">
+
/*********************************************************************************/
−
              <div class="col-md-6">
+
−
                <div class="row">
+
−
                  <form id="contact" action="" method="post">
+
−
                    <div class="col-md-6">
+
−
                      <fieldset>
+
−
                        <input name="name" type="text" class="form-control" id="name" placeholder="Your name..." required="">
+
−
                      </fieldset>
+
−
                    </div>
+
−
                    <div class="col-md-6">
+
−
                      <fieldset>
+
−
                        <input name="email" type="email" class="form-control" id="email" placeholder="Your email..." required="">
+
−
                      </fieldset>
+
−
                    </div>
+
−
                    <div class="col-md-12">
+
−
                      <fieldset>
+
−
                        <textarea name="message" rows="6" class="form-control" id="message" placeholder="Your message..." required=""></textarea>
+
−
                      </fieldset>
+
−
                    </div>
+
−
                    <div class="col-md-12">
+
−
                      <fieldset>
+
−
                        <button type="submit" id="form-submit" class="btn">Send Message</button>
+
−
                      </fieldset>
+
−
                    </div>
+
−
                  </form>
+
−
                </div>
+
−
              </div>
+
−
              <div class="col-md-5">
+
−
                <div class="right-info">
+
−
                  <ul>
+
−
                    <li><a href="#"><i class="fa fa-envelope"></i>hello@company.com</a></li>
+
−
                    <li><a href="#"><i class="fa fa-phone"></i>050 060 0780 / 050 060 0110</a></li>
+
−
                    <li><a href="#"><i class="fa fa-map-marker"></i>1186 New Street, ST 10990</a></li>
+
−
                  </ul>
+
−
                </div>
+
−
              </div>
+
−
            </div>
+
−
          </div>
+
−
        </section>
+
  
−
        <footer>
+
#three-column
−
          <div class="container">
+
{
−
            <div class="row">
+
text-align: center;
−
              <div class="col-md-12">
+
color: rgba(0,0,0,0.6);
−
                <ul>
+
}
−
                  <li><a href="https://www.facebook.com/tooplate"><i class="fa fa-facebook"></i></a></li>
+
−
                  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
+
−
                  <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
+
−
                  <li><a href="#"><i class="fa fa-rss"></i></a></li>
+
−
                  <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
+
−
                </ul>
+
−
                <p>Copyright &copy; 2017 Company Name
+
−
                       
+
−
                        | Design: <a href="http://www.tooplate.com" target="_parent">Tooplate</a></p>
+
−
              </div>
+
−
            </div>
+
−
          </div>
+
−
        </footer>
+
  
−
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+
#three-column .fa
−
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
+
{
 +
display: block;
 +
padding: 1em 0em;
 +
color: rgba(0,0,0,1);
 +
font-size: 2em;
 +
}
 +
 +
#three-column .title h2
 +
{
 +
font-weight: bold;
 +
color: rgba(0,0,0,0.8);
 +
}
  
−
        <script src="js/vendor/bootstrap.min.js"></script>
+
#three-column .title .byline
 +
{
 +
text-align: center;
 +
color: rgba(0,0,0,.5);
 +
}
  
−
        <script src="js/plugins.js"></script>
 
−
        <script src="js/main.js"></script>
 
  
−
    </body>
 
 
</html>
 
</html>

Revision as of 01:09, 10 October 2017

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Feugiat lorem ipsum dolor sed veroeros

Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue

Phasellus pellentesque, ante nec iaculis dapibus, eros justo auctor lectus, a lobortis lorem mauris quis nunc. Praesent pellentesque facilisis elit. Class aptent taciti sociosqu ad torquent per conubia nostra.

More Info

Etiam neque. Vivamus consequat lorem at nisl. Nullam wisi a sem semper eleifend. Donec mattis. Phasellus pellentesque, ante nec iaculis dapibus, eros justo auctor lectus, a lobortis lorem mauris quis nunc.

More Info

Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus. Phasellus pellentesque, ante nec iaculis dapibus, eros justo auctor lectus, a lobortis lorem mauris quis nunc.

More Info

Fusce ultrices fringilla metus

Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue

This is Lorikeet, a free, fully standards-compliant CSS template designed by TEMPLATED. The photos in this template are from Fotogrph. This free template is released under the Creative Commons Attribution license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you give us credit for it. Have fun :)

{ height: 100%; } body { margin: 0px; padding: 0px; background: #111111; font-family: 'Didact Gothic', sans-serif; font-size: 12pt; font-weight: 200; color: #FFF; } h1, h2, h3 { margin: 0; padding: 0; } p, ol, ul { margin-top: 0; } ol, ul { padding: 0; list-style: none; } p { line-height: 180%; } strong { } a { color: #ee0000; } a:hover { text-decoration: none; } .container { overflow: hidden; margin: 0em auto; width: 1200px; } /*********************************************************************************/ /* Image Style */ /*********************************************************************************/ .image { display: inline-block; } .image img { display: block; width: 100%; } .image-full { display: block; width: 100%; margin: 0 0 2em 0; } .image-left { float: left; margin: 0 2em 2em 0; } .image-centered { display: block; margin: 0 0 2em 0; } .image-centered img { margin: 0 auto; width: auto; } /*********************************************************************************/ /* List Styles */ /*********************************************************************************/ ul.style1 { } ul.actions { } ul.actions li { display: inline-block; padding: 0em 0.50em; } /*********************************************************************************/ /* Social Icon Styles */ /*********************************************************************************/ ul.contact { margin: 0; padding: 2em 0em 0em 0em; list-style: none; } ul.contact li { display: inline-block; padding: 0em 0.30em; font-size: 1em; } ul.contact li span { display: none; margin: 0; padding: 0; } ul.contact li a { color: #FFF; } ul.contact li a:before { display: inline-block; background: #3f3f3f; width: 40px; height: 40px; line-height: 40px; border-radius: 20px; text-align: center; color: #FFFFFF; } ul.contact li a.icon-twitter:before { background: #2DAAE4; } ul.contact li a.icon-facebook:before { background: #39599F; } ul.contact li a.icon-dribbble:before { background: #C4376B; } ul.contact li a.icon-tumblr:before { background: #31516A; } ul.contact li a.icon-rss:before { background: #F2600B; } /*********************************************************************************/ /* Button Style */ /*********************************************************************************/ .button { display: inline-block; padding: 1em 2em 1em 2em; letter-spacing: 0.10em; margin-top: 2em; padding: 1.40em 3em; border: 2px solid rgba(255,255,255,1); border-radius: 6px; text-decoration: none; font-weight: 700; font-size: 1em; color: #FFF; } .button-alt { padding: 1em 2em; border-color: rgba(0,0,0,.8); color: rgba(0,0,0,.8); } /*********************************************************************************/ /* 4-column */ /*********************************************************************************/ .box1, .box2, .box3, .box4 { width: 235px; } .box1, .box2, .box3, { float: left; margin-right: 20px; } .box4 { float: right; } /*********************************************************************************/ /* 3-column */ /*********************************************************************************/ .boxA, .boxB, .boxC { width: 384px; } .boxA, .boxB { float: left; margin-right: 20px; } .boxC { float: right; } /*********************************************************************************/ /* 2-column */ /*********************************************************************************/ .tbox1, .tbox2 { width: 575px; } .tbox1 { float: left; } .tbox2 { float: right; } /*********************************************************************************/ /* Heading Titles */ /*********************************************************************************/ .title { margin-bottom: 3em; } .title h2 { font-size: 2.7em; } .title .byline { font-size: 1.3em; color: rgba(255,255,255,0.60); } /*********************************************************************************/ /* Header */ /*********************************************************************************/ #wrapper { position: relative; padding: 5em 0em 7em 0em; background: #FFF; } /*********************************************************************************/ /* Header */ /*********************************************************************************/ #header-wrapper { position: relative; padding: 5em 0em 7em 0em; background: #111111 url(images/header-bg.jpg) no-repeat center; background-size: cover; } #header { position: relative; padding: 5em 0em; } /*********************************************************************************/ /* Logo */ /*********************************************************************************/ #logo { position: absolute; top: 3.6em; left: 0; } #logo h1 { font-size: 2.6em; color: #79C255; } #logo a { text-decoration: none; color: rgba(255,255,255,1); } /*********************************************************************************/ /* Menu */ /*********************************************************************************/ #menu { position: absolute; top: 4.5em; right: 0; } #menu ul { display: inline-block; } #menu li { display: block; float: left; text-align: center; } #menu li a, #menu li span { padding: 1em 1.5em; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; font-size: 0.8em; color: rgba(255,255,255,0.80); } #menu li:hover a, #menu li.active a, #menu li.active span { } #menu .active a { border: 2px solid rgba(255,255,255,1); border-radius: 6px; color: rgba(255,255,255,1); } #menu .icon { } /*********************************************************************************/ /* Banner */ /*********************************************************************************/ #banner { padding-top: 10em; text-align: center; } #banner .title h2 { font-size: 4em; } #banner .title .byline { font-size: 2em; } #banner .button { margin-top: 2em; padding: 1.40em 3em; border: 2px solid rgba(255,255,255,1); border-radius: 6px; font-weight: 700; font-size: 1em; } .banner { margin-bottom: 5em; } /*********************************************************************************/ /* Page */ /*********************************************************************************/ #page { } /*********************************************************************************/ /* Content */ /*********************************************************************************/ #content { } /*********************************************************************************/ /* Sidebar */ /*********************************************************************************/ #sidebar { } /*********************************************************************************/ /* Footer */ /*********************************************************************************/ #footer { } /*********************************************************************************/ /* Copyright */ /*********************************************************************************/ #copyright { overflow: hidden; padding: 5em 0em; border-top: 1px solid rgba(0,0,0,0.08); } #copyright p { text-align: center; font-size: 1em; color: rgba(255,255,255,0.3); } #copyright a { text-decoration: none; color: rgba(255,255,255,0.6); } /*********************************************************************************/ /* Welcome */ /*********************************************************************************/ #welcome { position: relative; padding: 7em 0em 7em 0em; background: #3d3f15; background-size: cover; text-align: center; } #welcome .container { width: 1000px; padding: 0px 100px; color: rgba(255,255,255,0.8); } #welcome a { color: rgba(255,255,255,1); } /*********************************************************************************/ /* Extra */ /*********************************************************************************/ #three-column { text-align: center; color: rgba(0,0,0,0.6); } #three-column .fa { display: block; padding: 1em 0em; color: rgba(0,0,0,1); font-size: 2em; } #three-column .title h2 { font-weight: bold; color: rgba(0,0,0,0.8); } #three-column .title .byline { text-align: center; color: rgba(0,0,0,.5); }