You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<!DOCTYPE html><html><head> <!-- Standard Meta --> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities --> <title>Homepage Example - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/semantic.css"> <link rel="stylesheet" type="text/css" href="homepage.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script> <script src="../dist/semantic.js"></script> <script src="homepage.js"></script>
</head><body id="home"> <div class="ui inverted masthead segment"> <div class="ui page grid"> <div class="column"> <div class="ui inverted blue menu"> <div class="header item">Cat University</div> <div class="right menu"> <div class="ui mobile dropdown link item"> Menu <i class="dropdown icon"></i> <div class="menu"> <a class="item">Classes</a> <a class="item">Cocktail Hours</a> <a class="item">Community</a> </div> </div> <div class="ui dropdown link item"> Courses <i class="dropdown icon"></i> <div class="menu"> <a class="item">Petting</a> <a class="item">Feeding</a> <a class="item">Mind Reading</a> </div> </div> <a class="item">Library</a> <a class="item">Community</a> </div> </div> <img src="images/cat.png" class="ui medium image"> <div class="ui hidden transition information"> <h1 class="ui inverted header"> An Old Cat Can Learn New Tricks </h1> <p>At least he won't reach his highest potential unless you enroll him in Cat University's 2013 class.</p> <div class="large basic inverted animated fade ui button"> <div class="visible content">Come to ICU 2013</div> <div class="hidden content">Register Now</div> </div> </div> </div> </div> </div> <div class="ui vertical feature segment"> <div class="ui centered page grid"> <div class="fourteen wide column"> <div class="ui three column center aligned stackable divided grid"> <div class="column"> <div class="ui icon header"> <i class="student icon"></i> Courses </div> <p>Take your kitty to a cat-ducation course and learn how to treat her well.</p> <p> <a class="ui button" href="#"> Learn </a> </p> </div> <div class="column"> <div class="ui icon header"> <i class="code icon"></i> Library </div> <p>Dig through our cat library to found out amazing things you can do with your kitty.</p> <p> <a class="ui blue right labeled icon button" href="#"> Research <i class="right chevron icon"></i> </a> </p> </div> <div class="column"> <div class="ui icon header"> <i class="user icon"></i> Community </div> <p>Get feedback on your cat from a community of loving pet owners on our online bulletin board system.</p> <p> <a class="ui button" href="#"> Share </a> </p> </div> </div> </div> </div> </div>
<div class="ui inverted vertical segment"> <div class="ui very relaxed stackable page grid"> <div class="row"> <div class="column"> <h1 class="center aligned ui inverted header"> The Best Cat Articles </h1> </div> </div> <div class="row"> <div class="ten wide column"> <h3 class="ui inverted header">How to Win Your Cats Attention</h3> <p>Getting your cat to notice you is a large part of being a pet owner. Although I have a lot of patience for writing things about cats, perhaps this might be enough body copy to make this section of text look filled out.</p> <p>This and other tips can be found in our newsletter, amazing right?</p> <div class="ui basic inverted animated button button"> <div class="visible content">Read More</div> <div class="hidden content"><i class="right arrow icon"></i></div> </div> <div class="ui inverted section divider"></div> <h3 class="ui inverted header">More articles</h3> <div class="ui inverted animated selection list"> <div class="item"> How to win in a fight with a cat <div class="right floated">Jan 20, 2023</div> </div> <div class="item"> A Supposedly Fun Cat Toy I will Never Buy Again <div class="right floated">Jan 1, 2023</div> </div> <div class="item"> Much ado about yarn <div class="right floated">Dec 20, 2022</div> </div> </div> </div> <div class="six wide column"> <div class="ui form segment"> <h3 class="ui header">Get Our Amazing Newsletter Bi-Daily</h3> <p>Sign up and get spammed with cats every day. We have no unsubscribe button!</p> <div class="field"> <div class="ui left icon action input"> <i class="user icon"></i> <input name="email" type="text" placeholder="name@email.com"> <div class="ui black submit button">Sign up</div> </div> </div> <div class="ui error message"></div> </div> </div> </div> </div> </div>
<div class="ui vertical segment"> <div class="ui stackable center aligned page grid"> <div class="row"> <div class="column"> <h1 class="ui header"> Many Companies Rely on Our Cat Knowledge </h1> <div class="ui horizontal divider"><i class="heart icon"></i></div> </div> </div> <div class="four column logo row"> <div class="column"> <div class="ui shape"> <div class="sides"> <div class="active side"> <i class="huge github icon"></i> </div> <div class="side"> <i class="huge facebook icon"></i> </div> <div class="side"> <i class="huge maxcdn icon"></i> </div> <div class="side"> <i class="huge pinterest icon"></i> </div> <div class="side"> <i class="huge weibo icon"></i> </div> <div class="side"> <i class="huge flickr icon"></i> </div> </div> </div> </div> <div class="column"> <div class="ui shape"> <div class="sides"> <div class="side"> <i class="huge github icon"></i> </div> <div class="side"> <i class="huge facebook icon"></i> </div> <div class="active side"> <i class="huge maxcdn icon"></i> </div> <div class="side"> <i class="huge pinterest icon"></i> </div> <div class="side"> <i class="huge weibo icon"></i> </div> <div class="side"> <i class="huge flickr icon"></i> </div> </div> </div> </div> <div class="column"> <div class="ui shape"> <div class="sides"> <div class="side"> <i class="huge github icon"></i> </div> <div class="side"> <i class="huge facebook icon"></i> </div> <div class="side"> <i class="huge maxcdn icon"></i> </div> <div class="side"> <i class="huge pinterest icon"></i> </div> <div class="active side"> <i class="huge weibo icon"></i> </div> <div class="side"> <i class="huge flickr icon"></i> </div> </div> </div> </div> <div class="column"> <div class="ui shape"> <div class="sides"> <div class="side"> <i class="huge github icon"></i> </div> <div class="side"> <i class="huge facebook icon"></i> </div> <div class="side"> <i class="huge maxcdn icon"></i> </div> <div class="side"> <i class="huge pinterest icon"></i> </div> <div class="side"> <i class="huge weibo icon"></i> </div> <div class="active side"> <i class="huge flickr icon"></i> </div> </div> </div> </div> </div> </div> </div>
<div class="ui inverted footer vertical segment"> <div class="ui stackable page grid"> <div class="ten wide column"> <div class="ui three column stackable grid"> <div class="column"> <h5 class="ui inverted header">Courses</h5> <div class="ui inverted link list"> <a class="item">Registration</a> <a class="item">Course Calendar</a> <a class="item">Professors</a> </div> </div> <div class="column"> <h5 class="ui inverted header">Library</h5> <div class="ui inverted link list"> <a class="item">A-Z</a> <a class="item">Most Popular</a> <a class="item">Recently Changed</a> </div> </div> <div class="column"> <h5 class="ui inverted header">Community</h5> <div class="ui inverted link list"> <a class="item">BBS</a> <a class="item">Careers</a> <a class="item">Privacy Policy</a> </div> </div> </div> </div> <div class="six wide column"> <h5 class="ui inverted header">Contact Us</h5> <addr> 237 Catberry Road <br> Milton Keynes, London <br> </addr> <p>(404) 867-5309</p> </div> </div> </div></body>
</html>
|
