Target
Pintest
Appendix
Build a Project based on Semantic UI
Copy these basic folder from semantic files.
Here I am using a new TextEdit named "atom" by github.
Start with a empty html
fulfil the header with semantic word:
<head>
<meta charset="utf-8">
<title> Made by Jet </title>
<link rel="stylesheet" href="css/semantic.css">
<script src="js/jquery.min.js"></script>
<script type="js/semantic.js"></script>
</head>
Add a menu in top
<div class="ui top attached menu">
<div class="ui item">
<div class="item">
<div class="item">
<div class="right menu">
Top Menu
Add Containers
Here I don't know which container I should use, So get some idea from inspector:
Inspector
Placed with cards
All code here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Made by Jet </title>
<link rel="stylesheet" href="css/semantic.css">
<script src="js/jquery.min.js"></script>
<script type="js/semantic.js"></script>
</head>
<body>
<div class="ui top attached menu">
<div class="ui item">
<i class="wrench icon"></i>
Config
</div>
<div class="item">
<i class="save icon"></i>
Save
</div>
<div class="item">
<i class="user icon"></i>
Log
</div>
<div class="right menu">
<div class="ui right aligned category search item">
<div class="ui transparent icon input">
<input class="prompt" type="text" placeholder="Search ...">
<i class="search link icon"></i>
</div>
<div class="results"></div>
</div>
</div>
</div>
<div class="ui link cards">
<div class="card">
<div class="image">
<img src="images/pic1.jpg">
</div>
<div class="content">
<div class="header">Matt Giampietro</div>
<div class="meta">
<a>好友</a>
</div>
<div class="description">Matthew is an interior designer living in New York. </div>
</div>
<div class="extra content">
<span class="right floated">2013年加入 </span>
<span><i class="user icon"></i> 75 Friends </span>
</div>
</div>
<div class="card">
<div class="image">
<img src="images/pic2.jpg">
</div>
<div class="content">
<div class="header">Molly</div>
<div class="meta">
<span class="date">Coworker</span>
</div>
<div class="description">Molly is a personal assistant living in Paris. </div>
</div>
<div class="extra content">
<span class="right floated">2011年加入 </span>
<span><i class="user icon"></i> 35 Friends </span>
</div>
</div>
<div class="card">
<div class="image">
<img src="images/pic3.jpg">
</div>
<div class="content">
<div class="header">Elyse</div>
<div class="meta">
<a>Coworker</a>
</div>
<div class="description">Elyse is a copywriter working in New York. </div>
</div>
<div class="extra content">
<span class="right floated">2014年加入 </span>
<span><i class="user icon"></i> 151 Friends </span>
</div>
</div>
<div class="card">
<div class="image">
<img src="images/pic4.jpg">
</div>
<div class="content">
<div class="header">Matt Giampietro</div>
<div class="meta">
<a>好友</a>
</div>
<div class="description">Matthew is an interior designer living in New York. </div>
</div>
<div class="extra content">
<span class="right floated">2013年加入 </span>
<span><i class="user icon"></i> 75 Friends </span>
</div>
</div>
<div class="card">
<div class="image">
<img src="images/pic5.jpg">
</div>
<div class="content">
<div class="header">Matt Giampietro</div>
<div class="meta">
<a>好友</a>
</div>
<div class="description">Matthew is an interior designer living in New York. </div>
</div>
<div class="extra content">
<span class="right floated">2013年加入 </span>
<span><i class="user icon"></i> 75 Friends </span>
</div>
</div>
<div class="card">
<div class="image">
<img src="images/pic6.jpg">
</div>
<div class="content">
<div class="header">Matt Giampietro</div>
<div class="meta">
<a>好友</a>
</div>
<div class="description">Matthew is an interior designer living in New York. </div>
</div>
<div class="extra content">
<span class="right floated">2013年加入 </span>
<span><i class="user icon"></i> 75 Friends </span>
</div>
</div>
<div class="card">
<div class="image">
<img src="images/pic7.jpg">
</div>
<div class="content">
<div class="header">Matt Giampietro</div>
<div class="meta">
<a>好友</a>
</div>
<div class="description">Matthew is an interior designer living in New York. </div>
</div>
<div class="extra content">
<span class="right floated">2013年加入 </span>
<span><i class="user icon"></i> 75 Friends </span>
</div>
</div>
</div>
<div class="ui bottom attached segment">
<p> Nothing around here</p>
</div>
</body>
</html>
