Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

layout-practice-2/index.html

Go to file
 
 
Cannot retrieve contributors at this time
171 lines (154 sloc) 8.24 KB
Raw Blame
Open in GitHub Desktop
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="icon" href="http://grad.uconn.edu/fragrant-fog/wp-content/uploads/joel.png">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div id="header">
<div id="headercnt">
<h1>Notify<class id="period">.</class></h1>
<p>A great new free psd theme to showcase your new application.</p>
<div class="headericon">
<a href="#" class="headerlink"><img src="img/apple.png" id=apple></a>
<a href="#" class="headerlink"><img src="img/android.png" id=apple></a>
<a href="#" class="headerlink"><img src="img/windows.png" id=apple></a>
</div>
</div>
<img src="img/hand.png" id="hand">
</div>
<div class="container clearfix " id="container1">
<div class="theme" id="edit">
<img src="img/wheel.png" id="icons" alt="wheel">
<h4 class="header">Editable Theme</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p>
</div>
<div class="theme" id="design">
<img src="img/star.png" id="icons" alt="star">
<h4 class="header">Flat Design</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p>
</div>
<div class="theme" id="audience">
<img src="img/world.png" id="icons" alt="world">
<h4 class="header">Reach Your Audience </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p>
</div>
</div>
<div class="container clearfix" id="container2">
<div id="updates">
<h4>Get Notified Of Any Updates!</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare luctus id sollicitudin ante lobortis at.</p>
<div class="wrapper">
<input type="text" placeholder="Email Address" />
<button>Notify</button>
</div>
</div>
<div class="videowrapper">
<iframe src="https://www.youtube.com/embed/5ALwObvKxs0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="container clearfix" id="container3">
<div id="intro">
<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu commodo nulla dapib us. Donec id sollicitudin urna. Integer at dui ac leo fermentum varius eleifend ut.”</p>
<h5>Jane Hunt</h5>
</div>
<div class id="photos">
<img src="img/person1.png" class="pics" alt="#">
<img src="img/person2.png" class="pics" alt="#">
<img src="img/person3.png" class="pics" alt="#">
<img src="img/person4.png" class="pics" alt="#">
<img src="img/person5.png" class="pics" alt="#">
<img src="img/person6.png" class="pics" alt="#">
<img src="img/person7.png" class="pics" alt="#">
<img src="img/person8.png" class="pics" alt="#">
<img src="img/person9.png" class="pics" alt="#">
<img src="img/person10.png" class="pics" alt="#">
<img src="img/person11.png" class="pics" alt="#">
<img src="img/person12.png" class="pics" alt="#">
<img src="img/person13.png" class="pics" alt="#">
<img src="img/person14.png" class="pics" alt="#">
<img src="img/person15.png" class="pics" alt="#">
<img src="img/person16.png" class="pics" alt="#">
<img src="img/person17.png" class="pics" alt="#">
<img src="img/person18.png" class="pics" alt="#">
<img src="img/person19.png" class="pics" alt="#">
<img src="img/person20.png" class="pics" alt="#">
<img src="img/person21.png" class="pics" alt="#">
</div>
</div>
<div class="container clearfix" id="container4">
<h4>Say Hi & Get in Touch</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.</p>
<div class="socials">
<a href="#" class="sociallink"><img src="img/twitter.png" class="socialimg" alt="twitter"></a>
<a href="#" class="sociallink"><img src="img/facebook.png" class="socialimg"alt="facebook"></a>
<a href="#" class="sociallink"><img src="img/pinterest.png" class="socialimg"alt="pinterest"></a>
<a href="#" class="sociallink"><img src="img/google.png" class="socialimg"alt="google+"></a>
<a href="#" class="sociallink"><img src="img/linkedin.png" class="socialimg"alt="linkedin"></a>
<a href="#" class="sociallink"><img src="img/youtube.png" class="socialimg"alt="youtube"></a>
</div>
</div>
</div>
<div id="footer">
<div class="infolinks">
<a href="#" class="links">Contact</a>
<a href="#" class="links">Download</a>
<a href="#" class="links">Press</a>
<a href="#" class="links">Email</a>
<a href="#" class="links">Support</a>
<a href="#" class="links">Privacy Policy</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script>// Find all YouTube videos
var $allVideos = $("iframe[src^='//www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
</script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>