Oscarliu117 (Talk | contribs) |
Oscarliu117 (Talk | contribs) |
||
Line 113: | Line 113: | ||
</div> | </div> | ||
</div> | </div> | ||
− | <script> | + | <style> |
+ | body { | ||
+ | background-color: #272625; | ||
+ | font-family: 'Noto Sans',"微軟雅黑","Microsoft YaHei",Helvetica,sans-serif; | ||
+ | } | ||
+ | |||
+ | h3 { | ||
+ | color: white; | ||
+ | font-size: 35px; | ||
+ | } | ||
+ | |||
+ | p { | ||
+ | color: white; | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | /* Button */ | ||
+ | .animate | ||
+ | { | ||
+ | transition: all 0.1s; | ||
+ | -webkit-transition: all 0.1s; | ||
+ | } | ||
+ | |||
+ | .action-button | ||
+ | { | ||
+ | position: relative; | ||
+ | padding: 10px 40px; | ||
+ | margin: 0px 10px 10px 0px; | ||
+ | float: right; | ||
+ | margin-right: 20px; | ||
+ | margin-bottom: 20px; | ||
+ | margin-bottom: 20px; | ||
+ | margin-right: 20px; | ||
+ | border-radius: 10px; | ||
+ | font-family: 'Pacifico', cursive; | ||
+ | font-size: 25px; | ||
+ | color: #FFF; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .blue:hover | ||
+ | { | ||
+ | background-color: #46a3ff; | ||
+ | } | ||
+ | |||
+ | |||
+ | .blue | ||
+ | { | ||
+ | background-color: #3498DB; | ||
+ | border-bottom: 5px solid #2980B9; | ||
+ | text-shadow: 0px -2px #2980B9; | ||
+ | } | ||
+ | |||
+ | /* The card */ | ||
+ | .card { | ||
+ | position: relative; | ||
+ | height: 400px; | ||
+ | width: 900px; | ||
+ | margin: 200px auto; | ||
+ | background-color: #FFF; | ||
+ | -webkit-box-shadow: 10px 10px 93px 0px rgba(0, 0, 0, 0.75); | ||
+ | -moz-box-shadow: 10px 10px 93px 0px rgba(0, 0, 0, 0.75); | ||
+ | box-shadow: 10px 10px 93px 0px rgba(0, 0, 0, 0.75); | ||
+ | } | ||
+ | |||
+ | /* Image on the left side */ | ||
+ | .thumbnail { | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | left: 30px; | ||
+ | top: -50px; | ||
+ | height: 300px; | ||
+ | width: 400px; | ||
+ | } | ||
+ | |||
+ | /*object-fit: cover; */ | ||
+ | /*object-position: center; */ | ||
+ | img.left { | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | top: 50%; | ||
+ | border-radius: 3px; | ||
+ | height: auto; | ||
+ | width: 100%; | ||
+ | -webkit-transform: translate(-50%, -50%); | ||
+ | -ms-transform: translate(-50%, -50%); | ||
+ | transform: translate(-50%, -50%); | ||
+ | } | ||
+ | |||
+ | /* Right side of the card */ | ||
+ | .right { | ||
+ | margin-left: 450px; | ||
+ | margin-right: 20px; | ||
+ | margin-top: 20px; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | #cardtext { | ||
+ | text-align: justify; | ||
+ | font-size: 1.3rem; | ||
+ | line-height: 150%; | ||
+ | color: #4B4B4B; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* DATE of release */ | ||
+ | h5 { | ||
+ | position: absolute; | ||
+ | left: 50px; | ||
+ | bottom: 45px; | ||
+ | font-size: 4.0rem; | ||
+ | } | ||
+ | |||
+ | h6 { | ||
+ | position: absolute; | ||
+ | left: 32px; | ||
+ | bottom: 10px; | ||
+ | font-size: 2.2rem; | ||
+ | } | ||
+ | |||
+ | .page-footer h5 { | ||
+ | color: #7ae26f; | ||
+ | } | ||
+ | .page-footer a { | ||
+ | color: gray; | ||
+ | } | ||
+ | .page-footer p { | ||
+ | font-size: 15px; | ||
+ | } | ||
+ | .navbar { | ||
+ | padding-top: 10px; | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | .navbar-brand { | ||
+ | font-size: 30px; | ||
+ | } | ||
+ | .nav-link { | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | a.dropdown-item { | ||
+ | color: #4F7F52; | ||
+ | } | ||
+ | a.dropdown-item:active { | ||
+ | background-color: #4F7F52; | ||
+ | } | ||
+ | .caret { | ||
+ | display: inline-block; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | margin-left: 2px; | ||
+ | vertical-align: middle; | ||
+ | border-top: 4px solid; | ||
+ | border-right: 4px solid transparent; | ||
+ | border-left: 4px solid transparent; | ||
+ | } | ||
+ | /*滑到navbar就展開*/ | ||
+ | .dropdown-menu li:hover .sub-menu {visibility: visible;} | ||
+ | .dropdown:hover .dropdown-menu {display: block;} | ||
+ | |||
+ | .head { | ||
+ | color: white; | ||
+ | width: 50%; | ||
+ | font-size: 50px; | ||
+ | font-weight: 700; | ||
+ | border-bottom: 10px solid #7ae26f; | ||
+ | position: relative; | ||
+ | margin-top: 100px; | ||
+ | } | ||
+ | .container.content { | ||
+ | margin-top: 80px; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 992px) { | ||
+ | .navbar { | ||
+ | padding-left: 80px; | ||
+ | padding-right: 80px; | ||
+ | } | ||
+ | } | ||
+ | @media (max-width: 768px) { | ||
+ | .navbar-right form { | ||
+ | display: none; | ||
+ | } | ||
+ | } | ||
+ | @media (max-width: 568px) { | ||
+ | footer { | ||
+ | text-align: center; | ||
+ | } | ||
+ | .list-group { | ||
+ | display: none; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /*folded-corner*/ | ||
+ | .post { | ||
+ | position: relative; | ||
+ | } | ||
+ | .folded-corner { | ||
+ | position: absolute; | ||
+ | bottom: 0px; | ||
+ | right: 0px; | ||
+ | border-width: 0; | ||
+ | border-style: solid; | ||
+ | background: hsla(260,100%,100%,0.2); | ||
+ | box-shadow: 0px -4px 0px rgba(0,0,0,0.3), -1px -4px 0px rgba(0,0,0,0.1); | ||
+ | border-radius: 15px 0 0 0; | ||
+ | border-color: transparent #B9DEBB transparent transparent; | ||
+ | transition: border-width 0.2s ease-out; | ||
+ | } | ||
+ | .post:hover .folded-corner { | ||
+ | border-width: 40px 40px 0 0; | ||
+ | } | ||
+ | .photo .folded-corner { | ||
+ | background: hsla(260,5%,75%,0.5); | ||
+ | } | ||
+ | |||
+ | [class*="col-"] { | ||
+ | float: left; | ||
+ | padding: 13px; | ||
+ | } | ||
+ | a.list-group-item:visited { | ||
+ | color: white; | ||
+ | } | ||
+ | a:hover { | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | .list-group { | ||
+ | margin-top: 100px; | ||
+ | } | ||
+ | .col-2.side { | ||
+ | padding: 0; | ||
+ | } | ||
+ | .list-group-item { | ||
+ | padding: .55rem .35rem; | ||
+ | background-color: #272625; | ||
+ | color: white; | ||
+ | border: none; | ||
+ | font-size: 19px; | ||
+ | } | ||
+ | a.list-group-item.list-group-item-action { | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | a.list-group-item.list-group-item-action:hover { | ||
+ | color: #98CC9B; | ||
+ | } | ||
+ | a.list-group-item.list-group-item-action.active { | ||
+ | background-color: transparent; | ||
+ | color: #7ae26f; | ||
+ | } | ||
+ | .scrollspy-example h4{ | ||
+ | font-size: 2rem; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | img.contentimg { | ||
+ | width: 100%; | ||
+ | margin: 20px 0; | ||
+ | } | ||
+ | a.link { | ||
+ | font-size: 30px; | ||
+ | color: #4F7F52; | ||
+ | } | ||
+ | #list-item-1 { | ||
+ | padding-top: 0px; | ||
+ | } | ||
+ | #list-item-2 { | ||
+ | padding-top: 0px; | ||
+ | } | ||
+ | #list-item-3 { | ||
+ | padding-top: 0px; | ||
+ | } | ||
+ | #list-item-4 { | ||
+ | padding-top: 0px; | ||
+ | } | ||
+ | #list-item-5 { | ||
+ | padding-top: 0px; | ||
+ | } | ||
+ | a.reference { | ||
+ | color: #4F7F52; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | <script> | ||
$(document).ready(function() { | $(document).ready(function() { |
Revision as of 04:01, 9 September 2018