---
title: Mores Slides Style
tags: Styles
description: 利用 {%hackmd @hackmd-mores/slides-style %} 方式引入
lintConfig:
MD033: false
---

<style>

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&family=Roboto&display=swap');

/* 封面 */
.slide-coverText {
font-size: 50px;
font-family: Impact, fantasy;
font-weight: 400;
text-align: center;
display: flex;
justify-content: center;
padding: 10px;
}
.slide-cover1 {
border-radius: 100%;
background-color: #CB3655;
filter: opacity(90%);
position: absolute;
top: 110px;
left: 90px;
width: 300px;
height: 300px;
}
.slide-cover2 {
border-radius: 100%;
background-color: #892f47;
filter: opacity(60%);
position: absolute;
top: 95px;
left: 245px;
width: 70px;
height: 70px;
}
.slide-cover3 {
border-radius: 100%;
background-color: #e48328;
filter: opacity(90%);
padding: 10px;
position: absolute;
top: 420px;
left: 220px;
width: 200px;
height: 200px;
}

.slide-cover4 {
border: 2px dashed #ccc3b0;
border-radius: 100%;
position: absolute;
top: 70px;
left: 60px;
width: 400px;
height: 400px;
}
.slide-cover5 {
border-radius: 100%;
background-color: #5388a7;
padding: 10px;
position: absolute;
top: 200px;
left: 450px;
width: 300px;
height: 300px;
}
.slide-cover6 {
border-radius: 100%;
background-color: #62d1da;
filter: opacity(80%);
padding: 10px;
position: absolute;
top: 150px;
left: 650px;
width: 150px;
height: 150px;
}
.slide-cover7 {
border-radius: 100%;
background-color: #62d1da;
filter: opacity(80%);
padding: 10px;
position: absolute;
top: 30px;
left: 460px;
width: 50px;
height: 50px;
}
.slide-cover8 {
border: 2px dashed #ccc3b0;
border-radius: 100%;
position: absolute;
top: 130px;
left: 280px;
width: 450px;
height: 450px;
}
.slide-cover9 {
border: 2px solid #dfd1c6;
border-radius: 100%;
background-color: #fefefe;
padding: 10px;
position: absolute;
top: 120px;
left: 250px;
width: 350px;
height: 350px;
display: flex;
}
.slide-cover9 p {
margin: auto;
}

/* 目錄 */
.slide-contentsOut{
display: flex;
align-items: center;
}
.slide-MainPoint {
border-radius: 100%;
font-size: 70px;
color: #ffffff;
text-align: center;
background: linear-gradient(45deg, #94233E 35%, #BD3250 60%);
filter: opacity(90%);
line-height: 300px;
width: 300px;
height: 300px;
display: inline-block;
}
.slide-MainPoint1{
border-radius: 100%;
background: linear-gradient(500deg, #BE3555 56%, #463C3E 90%);;
width: 90px;
height: 90px;
position: absolute;
top: 270px;
left: 270px;
}
.slide-MainPoint2{
border-radius: 100%;
background: linear-gradient(230deg, #be3555 35%, #463c3e 80%);
width: 40px;
height: 40px;
position: absolute;
left: 20px;
top: 390px;
}
.slide-MainPoint3{
border-radius: 100%;
border: 2px dashed #ccc3b0;
width: 150px;
height: 150px;
position: absolute;
left: -55px;
top: 260px;
}
.slide-contentsBox {
margin-left: 80px;
text-align:left;
}
.slide-contents {
margin: 30px;
}
.slide-contents h4 {
display: inline-block;
}
.slide-contentsText {
font-size: 25px;
color: #ffffff;
text-align: center;
line-height: 60px;
}
.slide-contentsNumber {
border-radius: 100%;
width: 60px;
height: 60px;
display: inline-block;
}
.slide-contentsColor1 {
background-color: #17324d;
}
.slide-contentsColor2 {
background-color: #536b55;
}
.slide-contentsColor3 {
background-color: #984c50;
}
.slide-contentsColor4 {
background-color: #d9742c;
}
.slide-contentsColor5 {
background-color: #e7b552;
}

/* 方框條列頁 */

.slide-shortlist-background{
text-align: center;
margin:30px;
background-color: #AAA09E;
}
.slide-shortlist-title{
text-align: left;
font-size: 30px;
width: 80%;
background-color: #fefefe;
padding: 20px;
margin: 90px;
display: inline-block;
}
.slide-shortlist-title h3{
margin-left: 150px;
}
.slide-shortlist-title p{
margin-left: 150px;
}
.slide-shortlist-circle1{
border-radius: 100%;
background-color: #EBDACA;
position: absolute;
top: 350px;
left: 60px;
width: 30px;
height: 30px
}
.slide-shortlist-circle2{
border-radius: 100%;
background-color: #AAA09E;
filter: opacity(90%);
position: absolute;
top: 200px;
left: 180px;
width: 60px;
height: 60px;
}
.slide-shortlist-circle3{
border-radius: 100%;
background-color: #BDC8C2;
filter: opacity(90%);
position: absolute;
top: 490px;
left: 220px;
width: 80px;
height: 80px
}
.slide-shortlist-circle4{
border-radius: 100%;
background-color: #BDC8C2;
/* filter: opacity(90%); */
position: absolute;
top: 105px;
right: 280px;
width: 30px;
height: 30px
}
.slide-shortlist-circle5{
border-radius: 100%;
background-color: #AAA09E;
/* filter: opacity(90%); */
position: absolute;
top: 420px;
right: 260px;
width: 30px;
height: 30px;
}
.slide-shortlist-circle6{
border-radius:0 0 100px 100px;
background-color: #EBDACA;
/* filter: opacity(90%); */
position: absolute;
top: 30px;
right: 150px;
width: 80px;
height: 40px;
}
.slide-shortlist-circle7{
border-radius: 100%;
background-color: #BDC8C2;
filter: opacity(90%);
position: absolute;
top: 300px;
right:80px;
width: 80px;
height: 80px
}

/* 方框條列頁2 */
.slide-shortlist2-background{
text-align: center;
margin:30px;
background: #404040;
}
.slide-shortlist2-title{
text-align: left;
width: 80%;
background-color: #fefefe;
padding: 20px;
margin: 90px;
display: inline-block;
}
.slide-shortlist2-title h3{
margin-left: 200px;
}
.slide-shortlist2-title p{
margin-left: 150px;
font-size: 20px;

}
.slide-shortlist2-circle1{
border-radius: 100%;
background-color: #EBDACA;
position: absolute;
top: 350px;
left: 60px;
width: 30px;
height: 30px
}
.slide-shortlist2-circle2{
border-radius: 100%;
background-color: #2B6A6C;
position: absolute;
top: 200px;
left: 180px;
width: 60px;
height: 60px;
}
.slide-shortlist2-circle3{
border-radius: 100%;
background-color: #984c50;
position: absolute;
top: 490px;
left: 220px;
width: 80px;
height: 80px
}
.slide-shortlist2-circle4{
border-radius: 100%;
background-color: #984c50;
position: absolute;
top: 105px;
right: 280px;
width: 30px;
height: 30px
}
.slide-shortlist2-circle5{
border-radius: 100%;
background-color: #2B6A6C;
position: absolute;
top: 470px;
right: 210px;
width: 30px;
height: 30px;
}
.slide-shortlist2-circle6{
border-radius:0 0 100px 100px;
background-color: #EBDACA;
position: absolute;
top: 30px;
right: 150px;
width: 80px;
height: 40px;
}
.slide-shortlist2-circle7{
border-radius: 100%;
background-color: #984c50;
position: absolute;
top: 300px;
right:80px;
width: 80px;
height: 80px
}
.highlight-red {
color: #F73F63;
margin-bottom: 5px;
}
/* 條列內頁 */

.slide-list-box2{
text-align: center;
padding-left:400px;
}
.slide-list-text{
border: 3px solid #AAA09E;
width: calc(100% -100px);
margin: 15px;
padding: 15px;
text-align:left;
font-size: 20px;
}
.slide-LongList-square1{
background-color: #9FA79C;
width: 280px;
height: 280px;
position: absolute;
top:100px;
left:30px;
}
.slide-LongList-square{
background-color: #A37E7F;
width: 280px;
height: 280px;
position: absolute;
top:120px;
font-size: 50px;
color:#fefefe;
display: flex;
align-items: center;
justify-content: center;
}
/* 長條條列頁 */
.slide-listbox h3{
padding: 5px;
margin: 20px;
}
.slide-list{
border: 3px solid #AAA09E;
width: calc(100% - 80px);
margin: 25px ;
padding: 18px;
font-size: 22px;
text-align: left;
padding-left: 160px;

}
.slide-listsquare{
width: 120px;
height: 50px;
background-color: #404040;
color:#fefefe;
font-family: Impact, fantasy;

}
.slide-listsquare1{
position: absolute;
top:110px;
left:40px;
}
.slide-listsquare2{
position: absolute;
top:212px;
left:40px;
}
.slide-listsquare3{
position: absolute;
top:307px;
left:40px;
}
.slide-listsquare4{
position: absolute;
top:407px;
left:40px;
}
.slide-listsquare5{
position: absolute;
top:507px;
left:40px;
}

/* THREE TABLE頁 */
.slide-threetable{
text-align: center;
margin:10px;
}
.slide-threetable div{
border: 4px solid #AAA09E;
display: inline-grid;
width: calc(100% / 3 - 10px);
height: 450px;
margin: 10px 0;
padding: 30px;
}
.slide-threetable p{
font-size: 20px;
}
.slide-threetable1{
background-color: #fefefe;
color:#000000;
}
.slide-threetable2{
background-color: #CEB481;
color:#ffffff;
}
.slide-threetable3{
background-color: #fefefe;
color:#000000;
}

/* 圓框圖片內文頁 */
.slide-circle {
display: inline-grid;
margin-top: 150px;
}
.slide-circle img {
border: 5px solid #984C50;
width: 300px;
height: 300px;
border-radius: 99em;
margin: 0 auto;
}
.slide-circleText {
padding: 10px;
text-align: center;
width:300px;
height:300px;
}
.slide-circleText p {
font-size: 20px;
}
/* 方框圖片內文頁 */
.slide-square {
display: inline-grid;
margin-top: 150px;
}
.slide-square img {
border: 5px solid #2B6A6C;
width: 300px;
height: 300px;
margin: 0 auto;
}
.slide-square-Text {
padding: 10px;
text-align: center;
width: 300px;
height:300px;
}
.slide-square-Text p {
font-size: 20px;
}

/*表格頁*/
.slide-table table{
text-align:center;
width: 800px;
height: 300px;
margin-top: 30px;
border: 2px solid #404040;
border-collapse: collapse;
font-size: 20px;
}
.slide-table h3{
color:#495867;
font-weight:bold;
font-family: Impact, fantasy;
}
.slide-table hr{
border:3px solid #495867;
width:800px;
}
.slide-table th {
border: 2px solid #404040;
border-collapse: collapse;
width: 200px;
text-align:center;
}
.slide-table td {
border: 2px solid #404040;
border-collapse:collapse;
font-family: Impact, fantasy;
}
.slide-th-green{
background-color:#9AA18F;
}
.slide-th-blue{
background-color:#8C93A6;
}
.slide-th-yellow{
background-color:#C3B5A8;
}
.slide-th-red{
background-color:#9F7F82;
}
.slide-td-green{
background-color:rgba(154,161,143,0.4);
}
.slide-td-blue{
background-color:rgba(140,147,166,0.4)

}
.slide-td-yellow{
background-color:rgba(195,181,168,0.4);

}
.slide-td-red{
background-color:rgba(159,127,130,0.4);
}

/* 封底頁THANKS */
.slide-end {
text-align: center;
font-weight: 400;
display: inline-block;
font-family: Impact, fantasy;
}
.slide-endT {
width: 100px;
height: 150px;
background-color: #f4b544;
color: #000000;
font-size: 165px;
}
.slide-endH {
width: 80px;
height: 80px;
background-color: #000000;
color: #B91D28;
font-size: 100px;
}
.slide-endA {
width: 80px;
height: 100px;
background-color: #f4b544;
color: #000000;
font-size: 110px;
}
.slide-endN {
width: 60px;
height: 70px;
background-color: #000000;
color: #B91D28;
font-size: 75px;
}
.slide-endK {
width: 100px;
height: 120px;
background-color: #f4b544;
color: #000000;
font-size: 130px;
}
.slide-endS {
width: 80px;
height: 80px;
background-color: #000000;
color: #B91D28;
font-size: 85px;
}
/*HackMD 教育訓練簡報*/
.slide-image {
margin:0 auto;
height: 80%;
width: 80%;
}
.slide-title {
display: inline-block;
background-color: #B5C9CB;
position:absolute;
top: 35px;
left: 260px;
}
.title-slide-square{
background-color: #D3ACB1;
width: 370px;
height: 75px;
position:absolute;
top: 25px;
left: 270px;
}
</style>