lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update home examples so they work with 1.0

1.0
jlukic 10 years ago
parent
d819d74132
commit
301744b32a
4 changed files with 284 additions and 312 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 129
      build/examples/homepage.css
  2. 465
      build/examples/homepage.html
  3. 2
      build/examples/homepage.js
  4. BIN
      build/examples/images/bg.jpg

129
build/examples/homepage.css
View File

@ -2,126 +2,75 @@
Global
*******************************/
html,
body {
font-size: 15px;
height: 100%;
html {
font-size: 14px;
}
body {
font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
background: #FFFFFF;
margin: 0px;
padding: 0px;
color: #555555;
text-rendering: optimizeLegibility;
min-width: 320px;
}
/*******************************
UI Overrides
*******************************/
.ui.header {
font-family: 'Source Sans Pro', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.ui.header,
h1,
h2 {
font-weight: normal !important;
}
h1.ui.header {
font-size: 3em;
}
h4.ui.header,
h5.ui.header,
.ui.icon.header {
font-weight: bold !important;
}
.ui.button {
font-weight: normal;
text-decoration: none;
}
a {
color: #009FDA;
text-decoration: none;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
}
a:hover {
color: #00BAFF;
}
p a {
font-weight: bold;
}
/*******************************
Global
*******************************/
.menu .right.menu > .mobile.item {
#home .menu .right.menu > .mobile.item {
display: none;
}
.ui.page.grid.segment {
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
/*--------------
Masthead
---------------*/
.masthead.segment {
#home .masthead {
background-image: url(images/bg.jpg);
background-size: cover;
margin: 0em;
padding-top: 4rem;
overflow: hidden;
box-shadow: 0 -20px 10px 0 rgba(0, 0, 0, 0.1) inset !important;
padding: 5rem 0rem;
}
.masthead.segment .column {
#home .masthead .column {
position: relative;
}
.masthead.segment .information {
margin: 3em 1em 1em 280px;
#home .masthead .information {
margin: 10em 1em 1em 350px;
}
.masthead.segment .information p {
#home .masthead .information p {
max-width: 600px;
margin: 0em 0px 2em 0em;
font-size: 1.2em;
}
.masthead.segment h1.ui.header .sub {
font-size: 0.7em;
}
.masthead.segment .image {
#home .masthead .image {
position: absolute;
left: 0%;
bottom: -110px;
}
.overview .divided.grid .header + p {
min-height: 100px;
/*--------------
Ribbons
---------------*/
#home .vertical.segment {
padding: 6rem 0rem;
}
.ui.shape .icon,
.link.list .icon {
margin: 0em;
padding: 0em;
#home .feature.segment {
padding: 2rem 0rem;
}
#home .feature.segment p {
min-height: 50px;
}
#home .selection.list {
margin: 0em -0.5em;
}
.ui.cube.shape .side {
background-color: transparent;
#home .logo.row {
height: 10rem;
}
/*--------------
Footer
---------------*/
#home .footer {
background-color: #000000;
}
/*******************************
Responsive
*******************************/

465
build/examples/homepage.html
View File

@ -11,282 +11,305 @@
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../packaged/css/semantic.css">
<link rel="stylesheet" type="text/css" href="../packaged/definitions/css/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="../packaged/javascript/semantic.js"></script>
<script src="../packaged/definitions/javascript/semantic.js"></script>
<script src="homepage.js"></script>
</head>
<body id="home">
<div class="ui inverted page grid masthead segment">
<div class="column">
<div class="inverted secondary pointing ui menu">
<div class="header item">Cat University</div>
<div class="right menu">
<div class="ui top right pointing 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 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>
<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 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>
<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">
Your Cat is Dumb
</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>
<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 page grid overview segment">
<div class="ui two wide column"></div>
<div class="twelve wide column">
<div class="ui three column center aligned stackable divided grid">
<div class="column">
<div class="ui icon header">
<i class="circular book link icon"></i>
Courses
<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="circular book link 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>
<p>Take your kitty to a cat-ducation course and learn how to treat her well.</p>
<p><a class="ui teal right labeled icon button" href="#">Learn <i class="right long arrow icon"></i></a></p>
</div>
<div class="column">
<div class="ui icon header">
<i class="circular code link icon"></i>
Library
<div class="column">
<div class="ui icon header">
<i class="circular code link 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>
<p>Dig through our cat library to found out amazing things you can do with your kitty.</p>
<p><a class="ui teal right labeled icon button" href="#">Research <i class="right long arrow icon"></i></a></p>
</div>
<div class="column">
<div class="ui icon header">
<i class="circular user link icon"></i>
Community
<div class="column">
<div class="ui icon header">
<i class="circular user link 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>
<p>Get feedback on your cat from a community of loving pet owners on our online bulletin board system.</p>
<p><a class="ui teal right labeled icon button" href="#">Share <i class="right long arrow icon"></i></a></p>
</div>
</div>
</div>
</div>
<div class="ui inverted page grid stackable relaxed feature segment">
<div class="row">
<div class="column">
<h1 class="center aligned ui header">
Cat Tips Right In Your Inbox
</h1>
</div>
</div>
<div class="row">
<div class="ten wide column">
<h2 class="ui header">How to Win Your Cats Attention</h2>
<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 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">
Cat Tips Right In Your Inbox
</h1>
</div>
<div class="ui inverted section divider"></div>
<h3 class="ui 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="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="item">
Much ado about yarn
<div class="right floated">Dec 20, 2022</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>
<div class="six wide column">
<div class="ui secondary 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 teal submit button">Sign up</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 class="ui error message"></div>
</div>
</div>
</div>
</div>
<div class="ui page grid stackable segment">
<div class="row">
<div class="column">
<h1 class="center aligned ui header">
Many Companies Rely on Our Cat Knowledge
</h1>
<div class="ui horizontal divider"><i class="heart icon"></i></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>
<div class="center four column aligned row">
<div class="column">
<div class="ui text shape">
<div class="sides">
<div class="active side">
<i class="huge circular github icon"></i>
</div>
<div class="side">
<i class="huge circular facebook icon"></i>
</div>
<div class="side">
<i class="huge circular maxcdn icon"></i>
</div>
<div class="side">
<i class="huge circular pinterest icon"></i>
</div>
<div class="side">
<i class="huge circular weibo icon"></i>
</div>
<div class="side">
<i class="huge circular flickr icon"></i>
<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>
<div class="column">
<div class="ui text shape">
<div class="sides">
<div class="side">
<i class="huge circular github icon"></i>
</div>
<div class="side">
<i class="huge circular facebook icon"></i>
</div>
<div class="active side">
<i class="huge circular maxcdn icon"></i>
</div>
<div class="side">
<i class="huge circular pinterest icon"></i>
</div>
<div class="side">
<i class="huge circular weibo icon"></i>
</div>
<div class="side">
<i class="huge circular flickr icon"></i>
<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>
<div class="column">
<div class="ui text shape">
<div class="sides">
<div class="side">
<i class="huge circular github icon"></i>
</div>
<div class="side">
<i class="huge circular facebook icon"></i>
</div>
<div class="side">
<i class="huge circular maxcdn icon"></i>
</div>
<div class="side">
<i class="huge circular pinterest icon"></i>
</div>
<div class="active side">
<i class="huge circular weibo icon"></i>
</div>
<div class="side">
<i class="huge circular flickr icon"></i>
<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>
<div class="column">
<div class="ui text shape">
<div class="sides">
<div class="side">
<i class="huge circular github icon"></i>
</div>
<div class="side">
<i class="huge circular facebook icon"></i>
</div>
<div class="side">
<i class="huge circular maxcdn icon"></i>
</div>
<div class="side">
<i class="huge circular pinterest icon"></i>
</div>
<div class="side">
<i class="huge circular weibo icon"></i>
</div>
<div class="active side">
<i class="huge circular flickr icon"></i>
<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 teal page grid segment">
<div class="ten wide column">
<div class="ui three column stackable grid">
<div class="column">
<div class="ui header">Courses</div>
<div class="ui inverted link list">
<a class="item">Registration</a>
<a class="item">Course Calendar</a>
<a class="item">Professors</a>
<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>
<div class="column">
<div class="ui header">Library</div>
<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 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>
<div class="column">
<div class="ui header">Community</div>
<div class="ui inverted link list">
<a class="item">BBS</a>
<a class="item">Careers</a>
<a class="item">Privacy Policy</a>
<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>
<div class="six wide right floated aligned column">
<h3 class="ui header">Contact Us</h3>
<addr>
237 Catberry Road <br>
Milton Keynes, London <br>
</addr>
<p>(404) 867-5309</p>
<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>

2
build/examples/homepage.js
View File

@ -48,7 +48,7 @@ $(document)
;
$('.masthead .information')
.transition('scale in')
.transition('scale in', 1000)
;
setInterval(changeSides, 3000);

BIN
build/examples/images/bg.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 247 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Write Preview
Loading…
Cancel
Save