Skip to content

Commit

Permalink
web
Browse files Browse the repository at this point in the history
  • Loading branch information
@littlemoonstones
littlemoonstones committed Apr 28, 2019
1 parent b900fef commit a64b7a8
Show file tree
Hide file tree
Showing 19 changed files with 394 additions and 0 deletions.
Binary file added .DS_Store
View file
Binary file not shown.
Binary file added css/.DS_Store
View file
Binary file not shown.
62 changes: 62 additions & 0 deletions css/base.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
.suspend {
position: fixed;
top: 7%;
left: 0;
right: 0;
width: 75%;
margin: auto;
z-index: 2;
overflow: auto;
text-align: center;
}

.btn-primary {
background-color: #FF7F50;
color: white;
border-color: rgb(215, 103, 63);
}

.bg-light {
background-color: #FF7F50 !important;
color: white;
}

.navbar-light .navbar-nav .nav-link {
color: rgba(255, 255, 255, .8);
}

.navbar-light .navbar-toggler-icon {}

.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link {
color: rgba(255, 255, 255, .9);
}

.navbar-light .navbar-brand {
color: white;
}

.btn-primary:hover {
color: white;
background-color: rgb(201, 88, 47);
border-color: #FF7F50;
}

.btn-primary.focus,
.btn-primary:focus {
box-shadow: 0 0 0 .2rem rgb(255, 147, 65)
}

.btn-primary.focus,
.btn-primary:focus {
box-shadow: 0 0 0 .2rem rgb(255, 147, 65)
}

.spec{
color: black !important;
}
.spec:hover{
color: gray!important;
}
Binary file added img/.DS_Store
View file
Binary file not shown.
Binary file added img/A1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/A10.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/A11.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/A12.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/A13.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/A2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/A3.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/A4.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/A5.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/A6.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/A7.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/A8.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/A9.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/ntusteng.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
332 changes: 332 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,332 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="./css/base.css">
<title>NTUST Engineering</title>
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
<a class="navbar-brand" href="#">Welcome!</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">首頁 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">投票</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">投票結果</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link spec" href="#">Login</a></li>
<li class="nav-item"><a class="nav-link spec" href="#">Sign up</a></li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid">
<div class="container-fluided">
<div class="row">
<div class="col-md-6 py-5 ml-md-4">
<h1 class="display-4">工程學士</h1>
<p class="lead">聲帶物理震動饗宴</p>
<p>活動時間：2019/04/24(星期三) 18:00-21:30</p>
<p>參賽地點：AU-101（貝殼廳)</p>
<a class="btn btn-outline-light" href="#" role="button">Sign Up</a>
<a class="btn btn-light" href="#" role="button">Login</a>
</div>
<div class="col-md-6 py-3">

</div>
</div>
<div class="row px-md-5 block">
<div class="col-12 my-5">
<div class="text-center">
<h1># 活動內容</h1><br>
</div>
<p class="lead"> 由於不同歌風評分方法不一，這次活動分為六大組，分別為：</p>

<ul class="lead">
<li>饒舌嘻哈組</li>
<li>男女對唱組</li>
<li>外文歌曲組</li>
<li>流行音樂組</li>
<li>台語金曲組</li>
<li>其他類別組</li>
</ul>

<p class="lead">
由大家的專長或喜好自由報名。
每一組都將經過觀眾投票選出一名優勝者，並獲得系學會準備的精美獎品。在活動過程中也會穿插活動讓教授和觀眾能上台參與！
</p>
</div>
</div>
</div>
<div class="container-fluided">
<div class="row justify-content-center py-4 my-4">
<div class="col-12 text-center">
<h1 class="decorate people">活動人員</h1>
</div>
</div>
<div class="row">
<!-- 1 -->
<div class="col-md-6 col-lg-4 py-md-3 mb-3">
<div class="row bg align-items-center people ">
<div class=" col-4 text-right">
<img class="rounded-circle img-fluid" src="./img/A1.jpg">
</div>
<div class="col-8 pt-3">
<h3 class="display-4">會長</h3>
<p class="lead">鄭維昕</p>
</div>
</div>
</div>

<!-- 2 -->
<div class="col-md-6 col-lg-4 py-md-3 mb-3">
<div class="row bg align-items-center people ">
<div class=" col-4 text-right">
<img class="rounded-circle img-fluid" src="./img/A2.jpg">
</div>
<div class="col-8 pt-3">
<h3 class="display-4">副會長</h3>
<p class="lead">珈君</p>
</div>
</div>
</div>

<!-- 3 -->
<div class="col-md-6 col-lg-4 py-md-3 mb-3">
<div class="row bg align-items-center people ">
<div class=" col-4 text-right">
<img class="rounded-circle img-fluid" src="./img/A3.jpg">
</div>
<div class="col-8 pt-3">
<h3 class="display-4">總召</h3>
<p class="lead"> 韋之皓</p>
</div>
</div>
</div>

<!-- 4 -->
<div class="col-md-6 col-lg-4 py-md-3 mb-3">
<div class="row bg align-items-center people ">
<div class=" col-4 text-right">
<img class="rounded-circle img-fluid" src="./img/A4.jpg">
</div>
<div class="col-8 pt-3">
<h3 class="display-4">總召</h3>
<p class="lead"> 鄭喬宇 <span style="color:darkgrey">台科湯母克魯斯</span></p>
<!-- <p class="lead" style="color:darkgrey"> 台科湯母克魯斯</p> -->

</div>
</div>
</div>

<!-- 5 -->
<div class="col-md-6 col-lg-4 py-md-3 mb-3">
<div class="row bg align-items-center people ">
<div class=" col-4 text-right">
<img class="rounded-circle img-fluid" src="./img/A5.jpg">
</div>
<div class="col-8 pt-3">
<h3 class="display-4">活動</h3>
<p class="lead"> 陳威典</p>
</div>
</div>
</div>

<!-- 6 -->
<div class="col-md-6 col-lg-4 py-md-3 mb-3">
<div class="row bg align-items-center people ">
<div class=" col-4 text-right">
<img class="rounded-circle img-fluid" src="./img/A6.jpg">
</div>
<div class="col-8 pt-3">
<h3 class="display-4">公關</h3>
<p class="lead"> 吳亞倫</p>
</div>
</div>
</div>

<!-- 7 -->
<div class="col-md-6 col-lg-4 py-md-3 mb-3">
<div class="row bg align-items-center people ">
<div class=" col-4 text-right">
<img class="rounded-circle img-fluid" src="./img/A7.jpg">
</div>
<div class="col-8 pt-3">
<h3 class="display-4">權益</h3>
<p class="lead"> 林泰濬</p>
</div>
</div>
</div>

<!-- 8 -->
<div class="col-md-6 col-lg-4 py-md-3 mb-3">
<div class="row bg align-items-center people ">
<div class=" col-4 text-right">
<img class="rounded-circle img-fluid" src="./img/A8.jpg">
</div>
<div class="col-8 pt-3">
<h3 class="display-4">體育</h3>
<p class="lead">黃安妤</p>
</div>
</div>
</div>

<!-- 9 -->
<div class="col-md-6 col-lg-4 py-md-3 mb-3">
<div class="row bg align-items-center people ">
<div class=" col-4 text-right">
<img class="rounded-circle img-fluid" src="./img/A9.png">
</div>
<div class="col-8 pt-3">
<h3 class="display-4">文宣</h3>
<p class="lead"> 張育誠</p>
</div>
</div>
</div>

<!-- 10 -->
<div class="col-md-6 col-lg-4 py-md-3 mb-3">
<div class="row bg align-items-center people ">
<div class=" col-4 text-right">
<img class="rounded-circle img-fluid" src="./img/A10.png">
</div>
<div class="col-8 pt-3">
<h3 class="display-4">美宣</h3>
<p class="lead"> 鍾家慈</p>
</div>
</div>
</div>

<!-- 11 -->
<div class="col-md-6 col-lg-4 py-md-3 mb-3">
<div class="row bg align-items-center people ">
<div class=" col-4 text-right">
<img class="rounded-circle img-fluid"
src="./img/A11.jpg">
</div>
<div class="col-8 pt-3">
<h3 class="display-4">攝影</h3>
<p class="lead">佘瑋倫</p>
</div>
</div>
</div>

<!-- 12 -->
<div class="col-md-6 col-lg-4 py-md-3 mb-3">
<div class="row bg align-items-center people ">
<div class=" col-4 text-right">
<img class="rounded-circle img-fluid"
src="./img/A12.jpg">
</div>
<div class="col-8 pt-3">
<h3 class="display-4">總務</h3>
<p class="lead">劉馨婷</p>
</div>
</div>
</div>

<!-- 13 -->
<div class="col-md-6 col-lg-4 py-md-3 mb-3">
<div class="row bg align-items-center people ">
<div class=" col-4 text-right">
<img class="rounded-circle img-fluid"
src="./img/A13.jpg">
</div>
<div class="col-8 pt-3">
<h3 class="display-4">總務</h3>
<p class="lead">廖炯皓</p>
</div>
</div>
</div>
</div>
</div>

</div>
</body>
<style>
.btn-light:hover {
background-color: rgba(255, 0, 0, 0);
color: #f8f9fa;
}

.jumbotron {
background: url("./img/ntusteng.jpg")no-repeat fixed bottom center;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
color: white;
min-height: 100px;
max-height: 500px;
/* padding-bottom: 10em;
padding-top: 10em; */
/* display: table; */
/* height: 100%; */
}

.row {
margin: 0;
}

.block {
background-color: #FF7F50;
line-height: 2.0;
}

.bg {
background: linear-gradient(60deg, coral 29%, white 29%);
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
}

*:after {
box-sizing: border-box;
}

h3 {
color: coral;
}

.people {
color: rgb(50, 50, 50);
}

.decorate::before {
content: "# ";
color: #FF7F50;
}

.decorate {
margin: 0;
}

hr {
margin: 0 0 2rem 0;
}
</style>

</html>

0 comments on commit a64b7a8

Please sign in to comment.