-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
145 lines (128 loc) · 5.84 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="zh-hant-tw">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/vendor/reseter.css">
<link rel="stylesheet" href="assets/layout/layout-large.css">
<link rel="stylesheet" href="assets/layout/layout-medium.css">
<link rel="stylesheet" href="assets/layout/layout-small.css">
<link rel="stylesheet" href="assets/components.css">
<link rel="stylesheet" href="assets/typography.css">
<title>SITCON 品牌</title>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-34467841-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<header>
<h1 class="header-logo">
<span class="left">
<img src="assets/logos/withname.svg" alt="SITCON">
</span>
<span class="right">品牌使用規範</span>
</h1>
<ul>
<li><a href="index.html">中文</a></li>
<li><a href="english.html">English</a></li>
</ul>
</header>
<main class="grid">
<section class="logo-block">
<img src="assets/logos/withname.svg" alt="SITCON Logo">
<div class="text-block">
<h2>我們的 Logo</h2>
<p>
SITCON 的 Logo 提供名稱搭配 Logo 及純 Logo 的版本下載使用。
請遵守我們的使用規範，在任何情況下，都請不要針對 Logo 本身進行變形、重製、換色、特殊效果。
</p>
<a href="assets/logos/SITCON-Logo.ai" download class="button">下載 AI 檔</a>
</div>
</section>
<section class="logo-usage">
<div class="title text-block">
<h2>Logo 的使用規範</h2>
</div>
<section class="background">
<div class="text-block">
<h3>背景</h3>
<p>
在白色或淺色背景時請使用綠色標準 Logo，深色背景時則使用白色。
您可以點擊圖片下載 svg 檔案，講個秘訣，有 png，自己改路徑。
</p>
</div>
<div class="icon-images">
<a href="assets/logos/withname.svg" download>
<img src="assets/logos/withname.svg" alt="SITCON Logo with name">
</a>
<a href="assets/logos/withname-white.svg" download style="background-color: #000">
<img src="assets/logos/withname-white.svg" alt="SITCON Logo with name (white)">
</a>
<a href="assets/logos/logo.svg" download>
<img src="assets/logos/logo.svg" alt="SITCON Logo">
</a>
<a href="assets/logos/logo-white.svg" download style="background-color: #000">
<img src="assets/logos/logo-white.svg" alt="SITCON Logo (white)">
</a>
</div>
</section>
<section class="standard-color">
<div class="text-block">
<h3>標準色</h3>
</div>
<div class="color-cards">
<div class="color-card" style="background-color: #77B55A">
<div class="name">SITCON 綠</div>
<div class="code">
#77B55A<br>
CMYK 37 0 44 30<br>
PANTONE P 151-14 C
</div>
</div>
<div class="color-card" style="background-color: #FFF">
<div class="name">白色</div>
<div class="code">
#FFFFFF<br>
CMYK 0 0 0 0
</div>
</div>
</div>
</section>
</section>
<section class="write-style">
<div class="text-block description">
<h2>書寫方式</h2>
<p>
當在純文字下使用簡稱提及 SITCON 時，六個字母請全大寫；若版面許可，也可以使用全稱「SITCON 學生計算機年會」。
請務必注意英文與中文間的空格。Students' Information Technology Conference 為完整的英文全稱。
</p>
</div>
<div class="example">
<section class="text-block correct">
<h3>正確範例</h3>
<ul>
<li>自從我參加 SITCON 考試都考 100 分了！</li>
<li>同學，要不要一起參加 SITCON 學生計算機年會？</li>
</ul>
</section>
<section class="text-block wrong">
<h3>錯誤範例</h3>
<ul>
<li>Sitcon</li>
<li>學生計算機年會（SITCON）</li>
</ul>
</section>
</div>
</section>
</main>
</body>
</html>