313 lines
8.4 KiB
HTML
313 lines
8.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<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">
|
||
|
|
<title>Theming - Semantic</title>
|
||
|
|
|
||
|
|
<!--- Site CSS -->
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/reset.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/site.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">
|
||
|
|
|
||
|
|
<!--- Component CSS -->
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/icon.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/button.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/card.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/label.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/image.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/reveal.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/dimmer.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/rating.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/transition.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/popup.css">
|
||
|
|
|
||
|
|
<!--- Component JS -->
|
||
|
|
<script src="../assets/library/jquery.min.js"></script>
|
||
|
|
<script src="../assets/library/iframe-content.js"></script>
|
||
|
|
<script type="text/javascript" src="../../dist/components/popup.js"></script>
|
||
|
|
<script type="text/javascript" src="../../dist/components/dimmer.js"></script>
|
||
|
|
<script type="text/javascript" src="../../dist/components/rating.js"></script>
|
||
|
|
<script type="text/javascript" src="../../dist/components/transition.js"></script>
|
||
|
|
|
||
|
|
<!--- Show Names -->
|
||
|
|
<script src="../assets/show-examples.js"></script>
|
||
|
|
|
||
|
|
<!--- Example CSS -->
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
padding: 1em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<!--- Example Javascript -->
|
||
|
|
<script>
|
||
|
|
$(document)
|
||
|
|
.ready(function() {
|
||
|
|
$('.special.card .image').dimmer({
|
||
|
|
on: 'hover'
|
||
|
|
});
|
||
|
|
$('.star.rating')
|
||
|
|
.rating()
|
||
|
|
;
|
||
|
|
$('.card .dimmer')
|
||
|
|
.dimmer({
|
||
|
|
on: 'hover'
|
||
|
|
})
|
||
|
|
;
|
||
|
|
})
|
||
|
|
;
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="ui four cards">
|
||
|
|
<div class="ui card">
|
||
|
|
<div class="image">
|
||
|
|
<div class="ui blurring inverted dimmer">
|
||
|
|
<div class="content">
|
||
|
|
<div class="center">
|
||
|
|
<div class="ui teal button">Add Friend</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<img src="../assets/images/wireframe/image.png">
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<div class="header">Title</div>
|
||
|
|
<div class="meta">
|
||
|
|
<a class="group">Meta</a>
|
||
|
|
</div>
|
||
|
|
<div class="description">One or two sentence description that may go to several lines</div>
|
||
|
|
</div>
|
||
|
|
<div class="extra content">
|
||
|
|
<a class="right floated created">Arbitrary</a>
|
||
|
|
<a class="friends">
|
||
|
|
Arbitrary</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="ui card">
|
||
|
|
<div class="blurring dimmable image">
|
||
|
|
<div class="ui dimmer">
|
||
|
|
<div class="content">
|
||
|
|
<div class="center">
|
||
|
|
<div class="ui inverted button">Call to Action</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<img src="../assets/images/wireframe/image.png">
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<a class="header">Name</a>
|
||
|
|
<div class="meta">
|
||
|
|
<span class="date">Date</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="extra content">
|
||
|
|
<a>
|
||
|
|
<i class="users icon"></i>
|
||
|
|
Users
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="ui card">
|
||
|
|
<div class="ui slide right reveal image">
|
||
|
|
<div class="visible content">
|
||
|
|
<img class="ui fluid image" src="../assets/images/avatar/nan.jpg">
|
||
|
|
</div>
|
||
|
|
<div class="hidden content">
|
||
|
|
<img class="ui fluid image" src="../assets/images/avatar/tom.jpg">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="ui card">
|
||
|
|
<div class="ui move reveal image">
|
||
|
|
<div class="visible content">
|
||
|
|
<img class="ui fluid image" src="../assets/images/avatar/tom.jpg">
|
||
|
|
</div>
|
||
|
|
<div class="hidden content">
|
||
|
|
<img class="ui fluid image" src="../assets/images/avatar/nan.jpg">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="ui four cards">
|
||
|
|
<div class="ui card">
|
||
|
|
<div class="extra content">
|
||
|
|
<span class="left floated like">
|
||
|
|
<i class="like icon"></i>
|
||
|
|
Like
|
||
|
|
</span>
|
||
|
|
<span class="right floated star">
|
||
|
|
<i class="star icon"></i>
|
||
|
|
Favorite
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="ui card">
|
||
|
|
<div class="content">
|
||
|
|
<div class="header">
|
||
|
|
<img src="../assets/images/wireframe/square-image.png" class="ui avatar right spaced image">
|
||
|
|
Abbreviated Header
|
||
|
|
</div>
|
||
|
|
<div class="description">
|
||
|
|
<img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="ui two bottom attached buttons">
|
||
|
|
<div class="ui button">
|
||
|
|
Action 1
|
||
|
|
</div>
|
||
|
|
<div class="ui button">
|
||
|
|
Action 2
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a href="#" class="ui card">
|
||
|
|
<div class="content">
|
||
|
|
<div class="header">Cute Dog</div>
|
||
|
|
<div class="meta">
|
||
|
|
<span class="category">Animals</span>
|
||
|
|
</div>
|
||
|
|
<div class="description">
|
||
|
|
<img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="extra content">
|
||
|
|
<div class="right floated author">
|
||
|
|
<img src="../assets/images/wireframe/square-image.png" class="ui avatar image"> Username
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<div class="ui card">
|
||
|
|
<div class="ui two top attached basic buttons">
|
||
|
|
<div class="ui button">
|
||
|
|
Action 1
|
||
|
|
</div>
|
||
|
|
<div class="ui button">
|
||
|
|
Action 2
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">
|
||
|
|
</div>
|
||
|
|
<div class="ui two bottom attached basic buttons">
|
||
|
|
<div class="ui button">
|
||
|
|
Action 3
|
||
|
|
</div>
|
||
|
|
<div class="ui button">
|
||
|
|
Action 4
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="ui four cards">
|
||
|
|
<div class="card">
|
||
|
|
<div class="content">
|
||
|
|
Content 1
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
Content 2
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
Content 3
|
||
|
|
</div>
|
||
|
|
<div class="extra content">
|
||
|
|
Extra Content
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="content">
|
||
|
|
Content 1
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
Content 2
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
Content 3
|
||
|
|
</div>
|
||
|
|
<div class="extra content">
|
||
|
|
Extra Content
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="content">
|
||
|
|
Content 1
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
Content 2
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
Content 3
|
||
|
|
</div>
|
||
|
|
<div class="extra content">
|
||
|
|
Extra Content
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="content">
|
||
|
|
Content 1
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
Content 2
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
Content 3
|
||
|
|
</div>
|
||
|
|
<div class="extra content">
|
||
|
|
Extra Content
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ui four cards">
|
||
|
|
<div class="card">
|
||
|
|
<div class="image">
|
||
|
|
<img src="../assets/images/wireframe/image.png">
|
||
|
|
</div>
|
||
|
|
<div class="extra center aligned">
|
||
|
|
<div data-rating="4" class="ui star rating"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="image">
|
||
|
|
<img src="../assets/images/wireframe/image.png">
|
||
|
|
</div>
|
||
|
|
<div class="extra center aligned">
|
||
|
|
<div data-rating="2" class="ui star rating"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="image">
|
||
|
|
<img src="../assets/images/wireframe/image.png">
|
||
|
|
</div>
|
||
|
|
<div class="extra center aligned">
|
||
|
|
<div data-rating="3" class="ui star rating"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="image">
|
||
|
|
<img src="../assets/images/wireframe/image.png">
|
||
|
|
</div>
|
||
|
|
<div class="extra center aligned">
|
||
|
|
<div data-rating="4" class="ui star rating"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|