Skip to content

Commit

Permalink
Spruce up some examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@jlukic
jlukic committed Jun 15, 2015
1 parent 271905f commit 0fcb0da
Show file tree
Hide file tree
Showing 3 changed files with 183 additions and 88 deletions.
0 examples/fixed-menu.html → examples/fixed.html
View file
File renamed without changes.
269 changes: 182 additions & 87 deletions examples/homepage.html
View file
Expand Up @@ -18,12 +18,20 @@
<link rel="stylesheet" type="text/css" href="../dist/components/menu.css">

<link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
<link rel="stylesheet" type="text/css" href="../dist/components/dropdown.css">
<link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
<link rel="stylesheet" type="text/css" href="../dist/components/button.css">
<link rel="stylesheet" type="text/css" href="../dist/components/list.css">
<link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
<link rel="stylesheet" type="text/css" href="../dist/components/sidebar.css">
<link rel="stylesheet" type="text/css" href="../dist/components/transition.css">

<style type="text/css">

.hidden.menu {
display: none;
}

.masthead.segment {
min-height: 700px;
padding: 1em 0em;
Expand All @@ -35,8 +43,8 @@
margin-left: 0.5em;
}
.masthead h1.ui.header {
margin-top: 2em;
margin-bottom: 1em;
margin-top: 3em;
margin-bottom: 0em;
font-size: 4em;
font-weight: normal;
}
Expand Down Expand Up @@ -65,8 +73,6 @@
margin: 3em 0em;
}



.quote.stripe.segment {
padding: 0em;
}
Expand All @@ -79,116 +85,205 @@
padding: 5em 0em;
}

.secondary.pointing.menu .toc.item {
display: none;
}

@media only screen and (max-width: 700px) {
.ui.fixed.menu {
display: none !important;
}
.secondary.pointing.menu .item,
.secondary.pointing.menu .menu {
display: none;
}
.secondary.pointing.menu .toc.item {
display: block;
}
.masthead.segment {
min-height: 350px;
}
.masthead h1.ui.header {
font-size: 2em;
margin-top: 1.5em;
}
.masthead h2 {
margin-top: 0.5em;
font-size: 1.5em;
}
}


</style>

<script src="assets/library/jquery.min.js"></script>
<script src="../dist/components/visibility.js"></script>
<script src="../dist/components/sidebar.js"></script>
<script src="../dist/components/transition.js"></script>
<script>
$(document)
.ready(function() {

// fix menu when passed
$('.masthead')
.visibility({
once: false,
onBottomPassed: function() {
$('.fixed.menu').transition('fade in');
},
onBottomPassedReverse: function() {
$('.fixed.menu').transition('fade out');
}
})
;

// create sidebar and attach to menu open
$('.ui.sidebar')
.sidebar('attach events', '.toc.item')
;

})
;
</script>
</head>
<body>

<!-- Following Menu -->
<div class="ui large top fixed hidden menu">
<a class="active item">Home</a>
<a class="item">Work</a>
<a class="item">Company</a>
<a class="item">Careers</a>
<div class="right menu">
<div class="item">
<a class="ui button">Log in</a>
</div>
<div class="item">
<a class="ui button">Sign Up</a>
</div>
</div>
</div>

<!-- Sidebar Menu -->
<div class="ui vertical inverted sidebar menu">
<a class="active item">Home</a>
<a class="item">Work</a>
<a class="item">Company</a>
<a class="item">Careers</a>
<a class="item">Login</a>
<a class="item">Signup</a>
</div>


<div class="ui inverted vertical masthead center aligned segment">
<!-- Page Contents -->
<div class="pusher">
<div class="ui inverted vertical masthead center aligned segment">

<div class="ui container">
<div class="ui large secondary inverted pointing menu">
<a class="active item">Home</a>
<a class="item">Work</a>
<a class="item">Company</a>
<a class="item">Careers</a>
<div class="right item">
<a class="ui inverted button">Log in</a>
<a class="ui inverted button">Sign Up</a>
<div class="ui container">
<div class="ui large secondary inverted pointing menu">
<a class="toc item">
<i class="sidebar icon"></i>
</a>
<a class="active item">Home</a>
<a class="item">Work</a>
<a class="item">Company</a>
<a class="item">Careers</a>
<div class="right item">
<a class="ui inverted button">Log in</a>
<a class="ui inverted button">Sign Up</a>
</div>
</div>
</div>
</div>

<div class="ui text container">
<h1 class="ui inverted header">
Do Something Very Easy
<div class="sub header">The World's Most Awesome Tool.</div>
</h1>
<h2>Do whatever you want when you want, <br>and you will get exactly what you want.</p>
<div class="ui massive primary button">Get Started <i class="right arrow icon"></i></div>
</div>
<div class="ui text container">
<h1 class="ui inverted header">
Imagine-a-Company
</h1>
<h2>Do whatever you want when you want to.</p>
<div class="ui huge primary button">Get Started <i class="right arrow icon"></i></div>
</div>

</div>
</div>

<div class="ui vertical stripe segment">
<div class="ui middle aligned stackable grid container">
<div class="row">
<div class="eight wide column">
<h3 class="ui header">We Help Companies and Companions</h3>
<p>We can give your company superpowers to do things that they never thought possible. Let us delight your customers and empower your needs...through pure data analytics.</p>
<h3 class="ui header">We Make Bananas That Can Dance</h3>
<p>Yes that's right, you thought it was the stuff of dreams, but even bananas can be bioengineered.</p>
</div>
<div class="six wide right floated column">
<img src="assets/images/wireframe/white-image.png" class="ui large bordered rounded image">
<div class="ui vertical stripe segment">
<div class="ui middle aligned stackable grid container">
<div class="row">
<div class="eight wide column">
<h3 class="ui header">We Help Companies and Companions</h3>
<p>We can give your company superpowers to do things that they never thought possible. Let us delight your customers and empower your needs...through pure data analytics.</p>
<h3 class="ui header">We Make Bananas That Can Dance</h3>
<p>Yes that's right, you thought it was the stuff of dreams, but even bananas can be bioengineered.</p>
</div>
<div class="six wide right floated column">
<img src="assets/images/wireframe/white-image.png" class="ui large bordered rounded image">
</div>
</div>
</div>
<div class="row">
<div class="center aligned column">
<a class="ui huge button">Check Them Out</a>
<div class="row">
<div class="center aligned column">
<a class="ui huge button">Check Them Out</a>
</div>
</div>
</div>
</div>
</div>


<div class="ui vertical stripe quote segment">
<div class="ui equal width stackable internally celled grid">
<div class="center aligned row">
<div class="column">
<h3>"What a Company"</h3>
<p>That is what they all say about us</p>
</div>
<div class="column">
<h3>"I shouldn't have gone with their competitor."</h3>
<p>
<img src="assets/images/avatar/nan.jpg" class="ui avatar image"> <b>Nan</b> Chief Fun Officer Acme Toys
</p>
<div class="ui vertical stripe quote segment">
<div class="ui equal width stackable internally celled grid">
<div class="center aligned row">
<div class="column">
<h3>"What a Company"</h3>
<p>That is what they all say about us</p>
</div>
<div class="column">
<h3>"I shouldn't have gone with their competitor."</h3>
<p>
<img src="assets/images/avatar/nan.jpg" class="ui avatar image"> <b>Nan</b> Chief Fun Officer Acme Toys
</p>
</div>
</div>
</div>
</div>
</div>

<div class="ui vertical stripe segment">
<div class="ui text container">
<h3 class="ui header">Breaking The Grid, Grabs Your Attention</h3>
<p>Instead of focusing on content creation and hard work, we have learned how to master the art of doing nothing by providing massive amounts of whitespace and generic content that can seem massive, monolithic and worth your attention.</p>
<a class="ui large button">Read More</a>
<h4 class="ui horizontal header divider">
<a href="#">Case Studies</a>
</h4>
<h3 class="ui header">Did We Tell You About Our Bananas?</h3>
<p>Yes I know you probably disregarded the earlier boasts as non-sequitor filler content, but its really true. It took years of gene splicing and combinatory DNA research, but our bananas can really dance.</p>
<a class="ui large button">I'm Still Quite Interested</a>
<div class="ui vertical stripe segment">
<div class="ui text container">
<h3 class="ui header">Breaking The Grid, Grabs Your Attention</h3>
<p>Instead of focusing on content creation and hard work, we have learned how to master the art of doing nothing by providing massive amounts of whitespace and generic content that can seem massive, monolithic and worth your attention.</p>
<a class="ui large button">Read More</a>
<h4 class="ui horizontal header divider">
<a href="#">Case Studies</a>
</h4>
<h3 class="ui header">Did We Tell You About Our Bananas?</h3>
<p>Yes I know you probably disregarded the earlier boasts as non-sequitor filler content, but its really true. It took years of gene splicing and combinatory DNA research, but our bananas can really dance.</p>
<a class="ui large button">I'm Still Quite Interested</a>
</div>
</div>
</div>


<div class="ui inverted vertical footer segment">
<div class="ui container">
<div class="ui stackable inverted divided equal height stackable grid">
<div class="three wide column">
<h4 class="ui inverted header">About</h4>
<div class="ui inverted link list">
<a href="#" class="item">Sitemap</a>
<a href="#" class="item">Contact Us</a>
<a href="#" class="item">Religious Ceremonies</a>
<a href="#" class="item">Gazebo Plans</a>
<div class="ui inverted vertical footer segment">
<div class="ui container">
<div class="ui stackable inverted divided equal height stackable grid">
<div class="three wide column">
<h4 class="ui inverted header">About</h4>
<div class="ui inverted link list">
<a href="#" class="item">Sitemap</a>
<a href="#" class="item">Contact Us</a>
<a href="#" class="item">Religious Ceremonies</a>
<a href="#" class="item">Gazebo Plans</a>
</div>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header">Services</h4>
<div class="ui inverted link list">
<a href="#" class="item">Banana Pre-Order</a>
<a href="#" class="item">DNA FAQ</a>
<a href="#" class="item">How To Access</a>
<a href="#" class="item">Favorite X-Men</a>
<div class="three wide column">
<h4 class="ui inverted header">Services</h4>
<div class="ui inverted link list">
<a href="#" class="item">Banana Pre-Order</a>
<a href="#" class="item">DNA FAQ</a>
<a href="#" class="item">How To Access</a>
<a href="#" class="item">Favorite X-Men</a>
</div>
</div>
<div class="seven wide column">
<h4 class="ui inverted header">Footer Header</h4>
<p>Extra space for a call to action inside the footer that could help re-engage users.</p>
</div>
</div>
<div class="seven wide column">
<h4 class="ui inverted header">Footer Header</h4>
<p>Extra space for a call to action inside the footer that could help re-engage users.</p>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion examples/sticky-menu.html → examples/sticky.html
View file
Expand Up @@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

<!-- Site Properities -->
<title>Fixed Menu Example - Semantic</title>
<title>Sticky Example - Semantic</title>

<link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
<link rel="stylesheet" type="text/css" href="../dist/components/site.css">
Expand Down

0 comments on commit 0fcb0da

Please sign in to comment.