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-1/index.html

Go to file
 
 
Cannot retrieve contributors at this time
183 lines (175 sloc) 14.9 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 href="https://fonts.googleapis.com/css?family=Exo:100,200,400" rel="stylesheet">
<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">
<img src="cloudy-mountains.png" alt="cloudy mountain">
<h1> Code Out This Layout So<br >
Flawlessly It'll Make Joel<br >
Cry</h1>
</div>
<div id="button">
<p>TRY NOW</p>
</div>
<div id="text">
<p>*This should all be text</p>
</div>
<div id="column1">
<p id="date">JANUARY 28, 2016</P>
<h1>And here's a random photo of a dog <a>....</a></h1>
<p id="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
<p id="para1"> Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at! Consequatur rerum amet fuga expedita sunt et tempora saepe? </p>
</div>
<div>
<img id="column2" src="dog-image.png" alt="dog">
</div>
<div id="container">
<p>NEW FEATURES</p>
<h1>Some Awesome Columns</h1>
</div>
<div id="column3">
<img class="icon icons8-Stack-of-Photos" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAE8klEQVRoQ+2Y208cVRzHv2dmZ3fZoVwKNa5XXKRgAra2EUk1pvWWKC22D8bLE1rRJ1v4D7w8+GQFG18qNDVq1NQYQI1ptZXGRGxpgAZrtQGKNA2xQGFBtuyNY84MMx1mLzNnh2vCPM2emXP5nO/39/udHYI1fpE1vn6sA6y0ggkK/DQYpcu5qKcDkiMXrAM4VWtJFWi68ILT9SXtf3DLcb19HcC8RcYgXg4FLo1h54FK6UymUqcN4uUAuDg2p66d0iGA9BIBvYQKHXHJ9U/DQ2TICswxQEVhOQ5ue0uZp6n7MPrG/rCaE8YY0AFMvSgRdjU8LHVYDeYYoOWZI7jNt0mZ59/Qdbx+8k2rORcAdI3E4UtSCqjkvm/JFKir2I+a4t34feQsArkBHWA0NIaB4ACq/I+gbeA7NPcdtcxC73dGlHcCeQTlm0TVTUCwodKTZ7kTQOJZyCqIn7znCdTPW4ZN8PfEZZTmb1bmMt6z343dh3Fq+HTCOowW0gBuzyao9GsA9ExDpXfnsgBgvB3xK++AxKYglHwAFNTo8/IAlBYIKN0oKH0nw3TgapC+F5e9bcd2kcl0INwxIEsyXil7SbGQcp3dDISH1Xv5QWD7OeW2feB7fNLXYttCO+4UUehTl3NtmmJiVs1OFGgFJa2pYDICeLnsRTxfvCcJQAWwvUtpZzHw5V9fYyY6Y8tCTxWJejD3T8xhNpZ4pmQwLdW+fcYBuQFqivegruK1W2OMt4MOvQsanYRQcihjC9WUuPQxv7kwjTs2upHjvdU2/7Ctudq31xHAUgRxQRbBo3epATw6HcNnXartvW4BVffnwC2q+zwH8urR6qxjjgBYZy2Nnhr+BayQaXXgemgUg8ErqPJXcsWAMYVeHJnFiUv/KWvM9orYUZKjrzfmy8o3BzW3hcyG/qr6C8iST2lmAPtPvpE0cI2N5jRaXigikK8upXMwhM6hkHJf6vfh3kKP1jXBPuyBYwCmQP22A8okjd0fcR8lWB0wZqDjPVO4OqEWt8dKc+Fzq6mVErqv5Tm51bw7jgEstzvJC2YFng24IKkhgI9/vYFwdM5kHxpsrpaTVuYVB2g6HwVLoeyauhlHc+dEgn0opZ+27JZrk23WigMc6Y3qGYhZh1nIrn0WJQacWujbyzH9CKEF8MLsk9o+lgCZLI63z89DcfizVSO0902hfzSyIPuks8+qAPjtWhy5HhWAFTBWyOxkH22jVvy7kPEf2aHTY7azz6oD0AL47kIPHvCrhdHKPqvCQpoC2hGiqmSDfohLVbyMcZbyu2TjufCifiONxoFgmGJ8liIUUe/9G4iegTr6Z/DnSBiPl+XOry999klpIfbgwx6ah0ikHgRFoNhKCLbwZhfe95X8LxIu+yS1kHniuh8iWyliPV4XQZaLwCMCWRLAjuoicfRhecFULIB57WMLoPbHm0WuON1LQWsJIQuUYOd0SSSQXRQMUBIYHD8UO0J8fj7IbR9bAMZtSgdjfE92C/C6KCRCFLVkCyhWvHpGwtz24QbIBEbrw9Tyiqr1ZDeBSJhq6lGZHSGoJHJln7RBzBuAdpUxjysKRLHejVAMnnkYwF72WVQAJ8qYoewUL1t1gFeFZO9nooyd4rVsAPzK8NnHURA7USiVMrz2WTGAVMpAwNvJ/rin2yz+quNk65eg7zrAEmwq15BrXoH/Abc+vU/4mFeFAAAAAElFTkSuQmCC" width="48" height="48">
<h3>Some awesome features</h3>
<p>Modi velit odio nam nulla unde amet odit pariatur at! Tenetur quod quidem!</p>
</div>
<div id="column4">
<img class="icon icons8-Airport" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAC9klEQVRoQ+3ZMW/TQBQH8P9zIqSWphQJCTGgXhfERrsipDYiC8pAvwGJ1IV0od8g3yAsSZci8hHKULEENSxMSO0MA1eJrhAloZFQ7UNO48pYPvtsv6qpFK917/6/e0/ns0O44Rfd8PyYAa67gldSgcrHkcg5qgFgdQI8ti3aab+Yk9xgdsA4vO0cEdGSP6xSqmfnrDVuBDtg6+BsH8BLzUp/2CvPb3JW4QoAf3oA3QkLqQD5rjy/MuWAMxUVcK88z7porIO5wbcOZoBEHTarQHC5Zi2UqIHAfxaaVeA6KyCaw9WSsI6iMnSksya3F44T5tTezrYLueEB57Ak8v+dgYIzd+R5D7CKXAgWgBfePcA9X85FLu6nExvuwY4LkRngD+8mNwG493EhMgGC4ZMAuBCpAWHhkwI4EKkAuvBpAFkRiQFR4dMCsiASAeLCZwGkRRgDTMJnBaRBGAFEc1gBnEbwRT1swzfdRqMeFuMtllCVtUX3/TryigW44YnU+7iBoNSJglUvCSvy3o50qgSnDqLluDGVoqrcXmhH3RcJMAo/Ce5NZHoaHY9tAIlDaAFx4RXwGVBvg2U2BXirKlr9TYDeELCuW+kohBaw0hqEfl0YByfU5etCN2zCpIBLyO5gAwp1HeRHrRCa1RgQF9wLkhYQB0kNMA3OBdBBEgNEa9CNahVdv2atQHBcMWktWStshM0Zu43GbXXBv/sB7tk/+HCb6i9zoqGWSo9Gvz1UGKDzbe6u3KFe0oXR3c9WATc8bg0PSyLn/SaAUIC0j/F3ociF4AO0Bl13C/QfJcIA41dKoCtrhSJHFVgAotVvE+hVsN91gMmhrS23F6tZEZkB/vBJAFyIzIDgE9ukhfyrrtvfTSvDDlh/mEPeupg+2EKjc+DL6cXW6l3TBVDq5P5t+vr4nvU0T/TAD7CVOv3+C/s/h84zAp5MD6DZlwq0D1Db9Gub2B0JKHsTUBVZK1xuu6Zt478vcwulmZTzf2YAztVMM9aNr8A/DZ3CQPIwCOcAAAAASUVORK5CYII=" width="48" height="48">
<h3>Some awesome features</h3>
<p>Modi velit odio nam nulla unde amet odit pariatur at! Tenetur quod quidem!</p>
</div>
<div id="column5">
<img class="icon icons8-Idea" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAF5UlEQVRoQ9VaXWwURRz/ze6Wa+9oaSNVpNZQMIEIgmhU0IjlQd8QDPigxNh6fdEXjwd98UFI/EhMDGcUNbFn2/gRE0Ms9kl9oBUTY0ygxSigKSVtMFIl9Nru9a7d3TGz99G73Z3ZuduFhEl4YO8/O7/f7/8x858twU0+yE2OH6ERoAt960DNvaDoBEUzCJoBcm9eIDoKihkQ+98wiHqCNHRfCkO8QAQo7WtGxnoZoPuWwcrCoqMAGURUeY+Q7hnZWU67mgiUgFMk8koHGHnPJGslUjUBOp/qAnA0MHAnZ5sI7SaxnsFq5KiKANVTrwM4XM0CNdgeJrH4Edl5UgQKIXMUAFP/Rox+RJVDMrkhR0BP9d1A8EWB+kks3u2nli8BqqdYyLDQ8R+5NKyr50Az06BzlwEjl58TbQXRVoA0b4DSvAGIrPJ/V97iCInFhSErJGAnLAFTXzwy0zCnRkBnL/tZ2r+TpjYot+8AaWqXsKdPiRKbS8COe92a8Ks21uQwrCujEkDcJsqa7VDaHxPPZdUppnTw8oFPwC90jCzM8SFp1bkoo63QNu4HtHoREW4oeRKQUd88/3U+zsMYjMTmg/w3CbzgTcBH/SBhw0NJVt8NteOJqr3AIdB7hne2obNTMC8cD0N31zvUjfsFiU1HSaxnu3OSi4B9qrSsCR7CUEPHsQirTurGp/niKEqH8xTrJpBJJUDBdl33yKVhnPWvqkHco23t5u8TBIdINJ4sf7+bwHxqGASetc26/DOsv3/h44u2Qm3fBaJFYEz8AGT+zdvynnu8SWnfBWXNfZw16AkS69lXMwFR+ChtO6Cs3VGxMCPMhtK20/WcJwRpbIO6iRNGFCNkZbxTTEDnJ7AxlgIW59zJt+kASOMd9nM6Mw6aS0O5rVJF9pwNdpywR2Yaxu9fupUWllR3IrtDSE9RXowYv1aEX8lMLRIoA2UnJCuLagTmxPeg1y7a9iXbxTSMMe980h5IcMOUxOIVmEMhgEgTtM3PAmo9rCunYU3+6AmgdHQwszDOH1/OEYd1UALsYLPNC4Fx+kPAXPQEV14CbcX/+6PCjrSsh3rXk/Yzr9+LxsIcAMZILF64KMjPqKoK+e0BJYWNLAy22ZVVoeJ5R+QhG1DgJA5SRlmMr38c5JbNACNx5mNbJW3LQaCh1U5w868hbnzbFStwGQ26kWkRaNtftEEWk74Y08aZj5abHA6N4BtZCEeJEuBC1XL+n+cCn/gHZI4Sdi3XU9xEljnM1UrArmTRW3n8XAnsmcQFAsI+2O84XQsBZe1Drh3bwcSzqRE0NOYlEMLtvkUVqWoCDauhbTrA78ooTSOmrvNqK4O1lJMjoFfPuVxeFQE/8Pm3V9dS2mFkN/ViL9ib0sXvXCSkCciAF6jPzYGipFTvZbfO3wgLN6v3Zz+t2KGlCKgroG19wa+ZZ1LWdq2yTML/Ysv65zSsqeXzjwwBiaQVhk7p6CFUt/Aj1Xv7AfI819ZxNJYh4FMymfIDJNbjexfre7VYyoeMmRSR6B96VEaLkk3XnlMCezqAqJoI7XJXJpy8CBiGhbl5Aws5E7msgTl9CYZBcS2dw2fv5Bscj+F7H1o+R8oD5RPyHzho0rlHvNV7P3JZswKkyCUuAqzaEHRd1w8cJU/kv40lQGmiSOS5VwutYhlqVSVoXFmH+noVDRENjTENWp2CllURlELIBk7YJ6akTMg4RanaAxXeKBIB9r3y7pZtTpAiD3TtOTUGgH3kqwl4VVVIJjv7vrowy9qRcltRDnx+rDOQeKETePuD0Z8WdPORa+lFLBkW5vUlLu+WlsjU+2/svFNGGD+bUFRgi7yZ/G3rn+NXx0xreUlnDrBciEQUPZclD7+WuOesHziZ30MjUCRhWcYnWp3y4JrWhor1F7IGra9XvyV0RaL7mY5QvtKzBUIlUER88KWTg4SQvRUJDzrwxbHdvjurjOqB9gGZBboSJ5uXFtEPoJMQsoqCDtTVIdGf3F3znxTw1r0uHpAhGZbN/y/33U8NXwzzAAAAAElFTkSuQmCC" width="48" height="48">
<h3>Some awesome features</h3>
<p>Modi velit odio nam nulla unde amet odit pariatur at! Tenetur quod quidem!</p>
</div>
<div id="part1">
<div id="column6">
<img src="dog.png" alt="dog">
</div>
<div id="column7">
<p id="para2">Start ASAP</p>
<h1>This is a pretty big project,
you know<a>...</a></h1>
<p id="para3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
</div>
</div>
<div class="clearfix" id="imagecontainer">
<div id="column8">
<img id="Rectangle" src="Rectangle.png" alt="Rectangle.png">
<p id="para4">Jonathon Doe</p>
<p id="para5">Co Founder</p>
<p id="para6">Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
</div>
<div id="column9">
<img id="Rectangle" src="Rectangle.png" alt="Rectangle.png">
<p id="para7">Jonathon Doe</p>
<p id="para8">Co Founder</p>
<p id="para9">Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
</div>
<div id="column10">
<img id="Rectangle" src="Rectangle.png" alt="Rectangle.png">
<p id="para10">Jonathon Doe</p>
<p id="para11">Co Founder</p>
<p id="para12">Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
</div>
<div id="logo1">
<img src="logo1.png">
</div>
<div id="logo2">
<img src="logo2.png">
</div>
<div id="logo3">
<img src="logo3.png">
</div>
<div id="logo4">
<a><img src="logo4.png">
</div>
<div id="logo5">
<img src="logo5.png">
</div>
</div>
<div id="section1">
<div id="container3">
<p id="para13">SERIOUSLY</p>
<h1>So start on this soon</h1>
<p id="para14">Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at! Consequatur rerum amet fuga expedita sunt et tempora saepe?</p>
<img id="safari" src="safari.png">
</div>
</div>
<div id="container4">
<p id="para15">THIS FORM DOSEN'T HAVE TO WORK</P>
<h1>But creat it anyway. Use the right fields ...</h1>
<p id="para16"><img id="arrow" src="ARROW.png" alt="arrow">30 days free trail for all.</p>
<input type="text" name="full name" value="FULL NAME" class="button" id="button1">
<input type="text" name="full name" value="YOUR EMAIL" class="button" id="button2">
<input type="text" name="full name" value="PASWORD" class="button" id="button3">
<button input type="text" name="full name" value="TRY NOW" class="button" id="button4"><p>TRY NOW</p></button>
<p id="para17">And some small text should go here.</p>
</div>
<div id="footer">
<div id="column11">
<p>Modi velit odio nam nulla
<br>
unde amet odit pariatur at
<br>
USA & CAN:1-888-123-4567
<br>
Address: 34 Brokel Rd. NY</p>
</div>
<div id="column12">
<h2>Support</h2>
<ul>
<li><a href="#">Help Center</a></li>
<li><a href="#">Get Started</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="column13">
<h2>About Us</h2>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<div id="column14">
<h2>Get Newsletter</h2>
<input type="text" name="full name" value="EMAIL" class="button" id="button5">
<button id="button6"></button>
<a href="https://dribbble.com/"><img id="dribble" src="dribble.png" alt="dribble logo"></a>
<a href="https://www.facebook.com/"><img id="facebook" src="facebook.png" alt="facebook logo" ></a>
<a href="https://plus.google.com/"><img id="google" src="google.png" alt="google+ logo" ></a>
<a href="https://twitter.com/?lang=en"><img id="twitter" src="twitter.png" alt="twitter logo" ></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>
<!-- 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>