richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update home examples so they work with 1.0

pull/1129/head
jlukic 10 years ago
parent
d819d74132
commit
301744b32a
4 changed files with 284 additions and 312 deletions
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

Before After
Width: 1920  |  Height: 1440  |  Size: 247 KiB Width: 2248  |  Height: 1420  |  Size: 46 KiB
Write Preview
Loading…
Cancel
Save