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

Finishes homepage example

pull/329/head
jlukic 11 years ago
parent
c6f5537d16
commit
1295e35a30
8 changed files with 351 additions and 77 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      build/examples/feed.css
  2. 8
      build/examples/feed.html
  3. 100
      build/examples/homepage.css
  4. 264
      build/examples/homepage.html
  5. 50
      build/examples/homepage.js
  6. BIN
      build/examples/images/bg.jpg
  7. BIN
      build/examples/images/logo.png
  8. BIN
      build/examples/images/sds.jpg

6
build/examples/feed.css
View File

@ -76,9 +76,13 @@ body {
padding: 1em 2em;
}
#feed .middle.column h2 {
margin-top: 0em;
}
#feed .right.column {
padding: 1em 2em;
background-color: #FFFFFF;
background-color: #FAFAFA;
}
/*******************************

8
build/examples/feed.html
View File

@ -51,11 +51,11 @@
</div>
<div class="ui celled grid">
<div class="seven wide middle column">
<div class="ui right floated black launch button">
<i class="list layout icon"></i> Menu
</div>
<h2 class="ui header">
<i class="inbox icon"></i>
<div class="ui right floated black launch button">
<i class="list layout icon"></i> Menu
</div>
Inbox
</h2>
<div class="ui tabular filter menu">
@ -135,7 +135,7 @@
</div>
<div class="nine wide right column">
<h1 class="ui header">Weekly Webcomic Wrapup fought the law, and the law won</h1>
Tags: <a class="ui label">Unread</a> <a class="ui label">Comics</a>
Tags: <a class="ui teal label">Unread</a> <a class="ui teal label">Comics</a>
<p>So there's this video game coming out Tuesday called Grand Theft Auto 5. Don't know if you've heard of it. Anyways, it's all about crime and gangs and some roughneck ne'er-do-wells, so I thought this would be the perfect time to talk about times when we've been... well, less than perfect.</p>
<p>When I was a young'un, I was a frequent visitor to the local swimming pool. I was also a frequent lover of AirHeads candy, which the pool happened to sell. Waiting, watching, stalking the counter like a big cat in the savannah, I waited for the perfect opportunity to strike. While the lifeguards were busy, I snuck through the gate, reached up and took both cherry and "mystery white" AirHeads. I quickly ran out to the sidewalk and reveled in my sweet, delicious victory... for all of ten seconds, before I felt guilty enough to sneak back in and return the .20 worth of candy I had stolen.</p>
<p>While you confess your crimes - hopefully minor, and nothing you can be persecuted for - take a moment to enjoy this week's webcomics, and vote for your favorite after the jump.</p>

100
build/examples/homepage.css
View File

@ -18,35 +18,44 @@ body {
min-width: 320px;
}
/*******************************
UI Overrides
*******************************/
.ui.header {
font-family: 'Source Sans Pro', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.ui.header,
.header,
h1,
h2,
h3,
h4,
h5 {
h2 {
font-weight: normal !important;
}
h1.ui.header, {
font-size: 2.5em;
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 {
opacity: 0.8;
color: #009FDA;
text-decoration: none;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
}
a:hover {
opacity: 1;
color: #00BAFF;
}
p a {
@ -57,15 +66,24 @@ p a {
Global
*******************************/
.menu .right.menu > .mobile.item {
display: none;
}
.ui.page.grid.segment {
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.masthead.segment {
background-image: url(images/bg.jpg);
-webkit-background-size: cover;
background-size: cover;
margin: 0em;
padding-top: 4rem;
overflow: hidden;
-webkit-box-shadow: 0 -20px 10px 0 rgba(0, 0, 0, 0.1) inset !important;
box-shadow: 0 -20px 10px 0 rgba(0, 0, 0, 0.1) inset !important;
}
.masthead.segment .column {
@ -73,12 +91,12 @@ p a {
}
.masthead.segment .information {
margin: 3em 1em;
margin: 3em 1em 1em 280px;
}
.masthead.segment .information p {
max-width: 600px;
margin: 2em 290px 2em 0em;
margin: 0em 0px 2em 0em;
font-size: 1.2em;
}
@ -88,7 +106,7 @@ p a {
.masthead.segment .image {
position: absolute;
right: 0%;
left: 0%;
bottom: -110px;
}
@ -96,6 +114,16 @@ p a {
min-height: 100px;
}
.ui.shape .icon,
.link.list .icon {
margin: 0em;
padding: 0em;
}
.ui.cube.shape .side {
background-color: transparent;
}
/*******************************
Responsive
*******************************/
@ -103,34 +131,60 @@ p a {
/* Mobile Only */
@media only screen and (max-width : 768px) {
.ui.page.grid.segment {
padding-top: 2rem;
padding-bottom: 2rem;
}
.menu .right.menu > .item {
display: none;
}
.menu .right.menu > .mobile.item {
display: block;
}
h1.ui.header {
font-size: 1.5em;
}
.masthead.segment {
-webkit-background-size: auto;
background-size: auto;
}
.masthead.segment .information {
margin-right: 190px;
margin-left: 190px;
}
.masthead.segment .image {
bottom: -10px;
bottom: -65px;
width: 150px;
}
.masthead.segment .button {
font-size: 1rem;
}
.overview > .column:first-child {
width: 100% !important;
}
.overview > .column:last-child {
display: none;
}
.overview .divided.grid .header .icon {
font-size: 1em;
font-size: 1.5em;
}
.overview .divided.grid .header + p {
min-height: 0px;
}
.masthead.segment .column {
font-size: 0.7rem;
}
.masthead.segment .column p {
display: none;
}
.selection.list .right.floated {
display: none;
}
}
@media only screen and (max-width : 1000px) {

264
build/examples/homepage.html
View File

@ -19,105 +19,273 @@
</head>
<body id="home">
<div class="inverted fixed ui menu">
<div class="borderless item"><b>The Cat Foundation</b></div>
<div class="right menu">
<a class="item">Courses</a>
<a class="item">Library</a>
<a class="item">BBS</a>
</div>
</div>
<div class="ui inverted orange page grid masthead segment">
<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">BBS</a>
</div>
</div>
<div class="ui pointing 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">BBS</a>
</div>
</div>
<img src="images/cat.png" class="ui medium image">
<div class="information">
<div class="ui hidden transition information">
<h1 class="ui inverted header">
Learn more about your Cat
Educate Your Cat
</h1>
<p>An introduction to living with cats. The most interesting species on earth!</p>
<div class="large black animated fade ui button">
<div class="visible content">Seminar November 15th</div>
<p>Think you know your stuff? Join us live in New York for the international cat festival.</p>
<div class="large basic inverted animated fade ui button">
<div class="visible content">Come to ICF Conn 2013</div>
<div class="hidden content">Buy Tickets</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 icon"></i>
<i class="circular book link icon"></i>
Courses
</div>
<p>Get you and your team up and running with our online training courses. We think they’re pretty awesome.</p>
<p><a class="ui right labeled icon button" href="#">Archive<i class="right icon"></i></a></p>
<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="#">Classes<i class="right long arrow icon"></i></a></p>
</div>
<div class="column">
<div class="ui icon header">
<i class="circular code icon"></i>
<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><a class="ui right labeled icon button" href="#">Cat library<i class="right icon"></i></a></p>
<p><a class="ui teal right labeled icon button" href="#">Library<i class="right long arrow icon"></i></a></p>
</div>
<div class="column">
<div class="ui icon header">
<i class="circular user icon"></i>
<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 right labeled icon button" href="#">BBS<i class="right icon"></i></a></p>
<p><a class="ui teal right labeled icon button" href="#">BBS<i class="right long arrow icon"></i></a></p>
</div>
</div>
</div>
<div class="ui four wide column">
<h4 class="ui top attached header">Things Cats Like</h4>
<div class="ui bottom attached segment">
<div class="ui relaxed divided list">
</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>
<div class="ui inverted section divider"></div>
<h3 class="ui header">More articles</h3>
<div class="ui inverted animated selection list">
<div class="item">
<div class="header">Yarn</div>
<div class="description">This one is a bit self explanatory, you've seen cartoons right?</div>
How to win in a fight with a cat
<div class="right floated">Jan 20, 2023</div>
</div>
<div class="item">
<div class="header">Other Cats</div>
<div class="description">Cats are social creatures, right? I'm pretty sure. At least I think i saw cats play together once before.</div>
A Supposedly Fun Cat Toy I will Never Buy Again
<div class="right floated">Jan 1, 2023</div>
</div>
<div class="item">
<div class="header">Cat Food</div>
<div class="description">A cats got to eat. Some cats eat more than others. Everybody loves a good fat cat.</div>
Much ado about yarn
<div class="right floated">Dec 20, 2022</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 everyday. 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>
</div>
<div class="ui error message"></div>
</div>
</div>
</div>
</div>
<div class="ui page grid feature segment">
<div class="ui page grid stackable segment">
<div class="row">
<div class="column">
<h1 class="center aligned ui header">
Cat Tips Right In Your Inbox
Many Companies Rely on Our Cat Knowledge
</h1>
<div class="ui horizontal divider"><i class="heart icon"></i></div>
</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 fluid basic button">Read More</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>
</div>
</div>
</div>
<div class="six wide column">
<div class="ui secondary segment">
<h3 class="ui header">Sign up for Our Newsletter</h3>
<div class="ui form">
<div class="field">
<div class="ui icon input">
<i class="user icon"></i>
<input type="text" placeholder="name@email.com">
<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>
</div>
</div>
<div class="ui primary button">Sign up</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>
</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>
</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>
</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>
</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>
</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>
</div>
</body>

50
build/examples/homepage.js
View File

@ -1,9 +1,57 @@
$(document)
.ready(function() {
var
changeSides = function() {
$('.ui.shape')
.eq(0)
.shape('flip over')
.end()
.eq(1)
.shape('flip over')
.end()
.eq(2)
.shape('flip back')
.end()
.eq(3)
.shape('flip back')
.end()
;
},
validationRules = {
firstName: {
identifier : 'email',
rules: [
{
type : 'empty',
prompt : 'Please enter an e-mail'
},
{
type : 'email',
prompt : 'Please enter a valid e-mail'
}
]
}
}
;
$('.ui.dropdown')
.dropdown()
.dropdown({
on: 'hover'
})
;
$('.ui.form')
.form(validationRules, {
on: 'blur'
})
;
$('.masthead .information')
.transition('scale in')
;
setInterval(changeSides, 3000);
})
;

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

Before After
Width: 1920  |  Height: 1440  |  Size: 247 KiB

BIN
build/examples/images/logo.png
View File

Before After
Width: 200  |  Height: 149  |  Size: 37 KiB

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

Before After
Width: 1920  |  Height: 1440  |  Size: 255 KiB
Write Preview
Loading…
Cancel
Save