Initial commit

lmwfjb · Feb 12, 2020 · 693b52f · 693b52f
commit 693b52f
Show file tree

Hide file tree

Showing 78 changed files with 28,238 additions and 0 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/_DS_Store b/_DS_Store
diff --git a/course.css b/course.css
@@ -0,0 +1,145 @@
+.animation {
+  transition: all 0.3s ease;
+}
+#course{
+    width: 100%;
+}
+.course_title{
+    width: 100%;
+    height: 150px;
+    font-size: 26px;
+    color: #462b13;
+    text-align: center;
+    line-height: 150px;
+    /* font-family: 'STSong','STFangsong','FangSong', 'Noto Serif TC', serif; */
+    font-family: 'Noto Serif TC', serif;
+    font-weight: 600;
+}
+.course_container{
+    width: 60%;
+    margin: auto;
+    display: flex;
+    justify-content: space-around;
+}
+.cardContainer {
+    flex-basis: calc(100% /2);
+    /* min-width: 315px; */
+    min-width: 236px;
+    transition: all .3s ease;
+    perspective: 800px;
+    margin: 0px 40px;
+}
+.card {
+  width: 100%;
+  height: 450px;
+  cursor: pointer;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+}
+.front img{
+    width: 100%;
+}
+.front .course_description{
+    font-size: 20px;
+    font-family: 'STSong','STFangsong','FangSong', 'Noto Serif TC', serif;
+    font-weight: 600;
+    color:#38200b;
+    line-height: 48px;
+    /* padding-top: 20px; */
+}
+.front .seemore{
+    font-size: 20px;
+    font-family: 'STSong','STFangsong','FangSong', 'Noto Serif TC', serif;
+    font-weight: 500;
+    color:#462b13;  
+    border: 1px solid #462b13;
+    padding: 5px 7px;
+    border-radius: 4px;
+}
+.seemore .fas{
+    color:#462b13;
+}
+.card.flipped {
+  transform: rotateY( 180deg );
+}
+.card .front, .card .back {
+  display: block;
+  height: 100%;
+  width: 100%;
+  /* line-height: 60px; */
+  color: white;
+  text-align: center;
+  position: absolute;
+  backface-visibility: hidden;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
+}
+.card .back {
+  width: 100%;
+  line-height: 36px;
+  background: rgb(192, 173, 154);
+  transform: rotateY( 180deg );
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+}
+.card .back .card_title{
+    font-family: 'Noto Serif TC', serif;
+}
+.card .back .card_information{
+    padding: 0px 20px;
+    text-align: left;
+    font-size: 21px;
+    font-family: 'STSong','STFangsong','FangSong', 'Noto Serif TC', serif;
+}
+.card .back .back_button{
+    height: 35px;
+    line-height: 35px;
+    position: absolute;
+    bottom: 5%;
+    left: 20px;
+    border: 1px solid white;
+    padding: 0px 7px;
+    border-radius: 4px;
+    font-family: 'STSong','STFangsong','FangSong', 'Noto Serif TC', serif;
+    font-weight: 500;
+}
+@media screen and (max-width:640px) {
+
+    .course_container{
+        /* width: 100%; */
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+    }
+    .cardContainer {
+        /* width: 80%; */
+        min-width: 136px;
+        flex-basis: 100%;
+        margin: 40px 0px;
+    }
+    .card {
+        width: 100%;
+        height: 400px;
+    }
+    .front .course_description{
+        font-size: 18px;
+
+    }
+    .card .back{
+        line-height: 30px;
+    }
+    .card .back .card_information{
+        padding: 0px 20px;
+        text-align: left;
+        font-size: 18px;
+    }
+    .card .back .card_title{
+        font-size: 20px;
+    }
+
+}
+
+
+
+
diff --git a/course.html b/course.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="https://fonts.googleapis.com/css?family=Noto+Serif+TC:700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
+    <link rel="stylesheet" href="course.css">
+</head>
+
+<body>
+    <div id="course">
+        <div class="course_title">近期課程</div>
+        <div class="course_container">
+            <div class="cardContainer">
+                <div class="card">
+                    <div class="front">
+                        <img src="img/c1.jpg" alt="">
+                        <div class="course_description">餐桌上的漂流木 - 創意餐具手作課程<br>
+                            <span class="seemore">more&nbsp;<i class="fas fa-long-arrow-alt-right"></i></span>
+                        </div>
+                    </div>
+                    <div class="back">
+                        <div class="card_content">
+                            <h3 class="card_title">餐桌上的漂流木 - 創意餐具手作課程</h3>
+                            <div class="card_information">
+                                時間：2020/3/5 (六) 15:00-17:30<br />
+                                地點：台南市府前路二段18巷355號<br />
+                                費用：600/人、1500/3人（含材料費）<br />                              
+                            </div>
+                            <div class="back_button">
+                                <span class="backto"><i class="fas fa-long-arrow-alt-left"></i>&nbsp;back</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="cardContainer">
+                <div class="card">
+                    <div class="front">
+                        <img src="img/c2.jpg" alt="">
+                        <div class="course_description">紳士品味質感萬年筆 - 手磨鋼筆課程<br>
+                            <span class="seemore">more&nbsp;<i class="fas fa-long-arrow-alt-right"></i></span>
+                        </div>                      
+                    </div>
+                    <div class="back">
+                        <div class="card_content">
+                            <h3 class="card_title">紳士品味質感萬年筆 - 手磨鋼筆課程</h3>
+                            <div class="card_information">
+                                時間：2020/4/4 (六) 14:30-17:30<br />
+                                地點：台南市永大路永二街8號<br />
+                                費用：900/人、2500/3人（含材料費）<br />                             
+                            </div>
+                            <div class="back_button">
+                                <div class="backto"><i class="fas fa-long-arrow-alt-left"></i>&nbsp;back</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+    <script src="js/jquery-3.4.1.min.js"></script>
+    <script>
+
+        $('.card').click(function () {
+            $(this).toggleClass('flipped');
+        });
+    </script>
+</body>
+
+</html>
diff --git a/css_reset.css b/css_reset.css
@@ -0,0 +1,53 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+    font-family: "微軟正黑體";
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+a{
+    text-decoration: none;
+    color: black;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Auto detect text files and perform LF normalization
		* text=auto