[Update] complete home without RWD
This commit is contained in:
barrystone
parent
63c6980a58
commit
87467524e1
BIN
src/assets/images/home/home-sponsors.png
Normal file
BIN
src/assets/images/home/home-sponsors.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
@ -1,26 +1,27 @@
|
||||
@import "../color.scss";
|
||||
$font-home: "Noto Serif CJK TC -SemiBold";
|
||||
$font-home-h1: "Noto Serif CJK TC -Bold";
|
||||
$font-home-h2: "Letter Gothic Std Bold";
|
||||
$font-home-button: "Noto Serif CJK TC -Black";
|
||||
|
||||
.section {
|
||||
&-title {
|
||||
margin-top: 150px;
|
||||
height: 500px;
|
||||
height: 583px;
|
||||
// background-color: chartreuse;
|
||||
}
|
||||
&-content {
|
||||
height: 1000px;
|
||||
height: 1900px;
|
||||
// background-color: cornsilk;
|
||||
}
|
||||
}
|
||||
|
||||
.home {
|
||||
// font-family: "Courier New", Courier, monospace;
|
||||
font-family: $font-home;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
&__title {
|
||||
width: 600px;
|
||||
text-align: center;
|
||||
// background-color: cornflowerblue;
|
||||
margin: 0 auto;
|
||||
padding-top: 10px;
|
||||
@ -42,6 +43,7 @@ $font-home-h2: "Letter Gothic Std Bold";
|
||||
}
|
||||
|
||||
&-box2 {
|
||||
text-align: center;
|
||||
// background-color: chocolate;
|
||||
height: 80px;
|
||||
width: 600px;
|
||||
@ -54,28 +56,94 @@ $font-home-h2: "Letter Gothic Std Bold";
|
||||
}
|
||||
|
||||
&__info {
|
||||
width: 60%;
|
||||
width: 75%;
|
||||
padding-bottom: 75px;
|
||||
// background-color: darkseagreen;
|
||||
// border: 1px solid blueviolet;
|
||||
margin: 0 auto;
|
||||
|
||||
position: relative;
|
||||
|
||||
&-container {
|
||||
width: 95%;
|
||||
margin-left: 5%;
|
||||
width: 75%;
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
&-title {
|
||||
// background-color: darkgray;
|
||||
height: 100px;
|
||||
|
||||
// height: 100px;
|
||||
h1 {
|
||||
font-family: $font-home-h1;
|
||||
font-size: 26pt;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: $font-home-h2;
|
||||
font-size: 28pt;
|
||||
// font-size: 32pt;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
&-h2 {
|
||||
&--small {
|
||||
font-size: 19pt;
|
||||
}
|
||||
&--mid {
|
||||
font-size: 23pt;
|
||||
}
|
||||
&--big {
|
||||
font-size: 31pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-paragraph {
|
||||
padding-top: 30px;
|
||||
// background-color: yellow;
|
||||
p {
|
||||
font-size: 12pt;
|
||||
line-height: 33px;
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: $indigo-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-buttonsBox {
|
||||
height: 50px;
|
||||
width: 245px;
|
||||
margin-top: 40px;
|
||||
// background-color: burlywood;
|
||||
}
|
||||
}
|
||||
|
||||
&-button {
|
||||
font-family: $font-home-button;
|
||||
font-size: 12.5pt;
|
||||
position: relative;
|
||||
top: 15px;
|
||||
color: $white;
|
||||
background-color: $indigo-blue;
|
||||
padding: 6px 17px 8px 17px;
|
||||
border-radius: 32px;
|
||||
box-shadow: 0 3px 10px 0 rgba(0, 0, 255, 0.18);
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&-squareImg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&-appleImg {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
right: 80px;
|
||||
}
|
||||
|
||||
&-sponsorsImg {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,11 +9,7 @@
|
||||
<p>SITCON 學生計算機年會 2021</p>
|
||||
</div>
|
||||
<div class="home__title-topic">
|
||||
<img
|
||||
class="sitcon-apple"
|
||||
src="~@/assets/images/home/home-topic.svg"
|
||||
width="500"
|
||||
/>
|
||||
<img src="~@/assets/images/home/home-topic.svg" width="500" />
|
||||
</div>
|
||||
<div class="home__title-box2">
|
||||
<p>
|
||||
@ -24,31 +20,62 @@
|
||||
</section>
|
||||
<section class="section-content">
|
||||
<section class="home__info">
|
||||
<img
|
||||
class="home-squareImg"
|
||||
src="~@/assets/images/home/home-icon-square.svg"
|
||||
width="120"
|
||||
/>
|
||||
<div class="home__info-container">
|
||||
<div class="home__info-title">
|
||||
<h1>算盤的後裔</h1>
|
||||
<h2>Descendants of the abacus</h2>
|
||||
<h2 class="home__info-title-h2--big">Descendants of the abacus</h2>
|
||||
</div>
|
||||
<div class="home__info-paragraph">
|
||||
<p>
|
||||
千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步地發展為隨處可見的智慧型裝置。
|
||||
<br />
|
||||
俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
|
||||
<br />
|
||||
<br />
|
||||
人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海，奠基於科技的現有成果，才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="home__info">
|
||||
<img
|
||||
class="home-appleImg"
|
||||
src="~@/assets/images/home/home-icon-apple.svg"
|
||||
width="120"
|
||||
/>
|
||||
<div class="home__info-container">
|
||||
<div class="home__info-title">
|
||||
<h1>關於 SITCON</h1>
|
||||
<h2 class="home__info-title-h2--small">
|
||||
Students' Information Technology Conference
|
||||
</h2>
|
||||
</div>
|
||||
<div class="home__info-paragraph">
|
||||
<p>
|
||||
學生計算機年會（SITCON）自 2013
|
||||
年發起，以學生為本、由學生自發舉辦，長期投身學生資訊教育與推廣開源精神，希望引領更多學子踏入資訊的殿堂，更冀望所有對資訊有興趣的學生，能夠在年會裏齊聚一堂，彼此激盪、傳承、啟發，達到「學以致用、教學相長」的實際展現。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="home__info">
|
||||
<div class="home__info-container">
|
||||
<div class="home__info-title">
|
||||
<h1 class="home__info-title--1">算盤的後裔</h1>
|
||||
<h2 class="home__info-title--2">Descendants of the abacus</h2>
|
||||
<h1>行為準則</h1>
|
||||
<h2 class="home__info-title-h2--mid">Code of Conduct</h2>
|
||||
</div>
|
||||
<div class="home__info-paragraph">
|
||||
<p>
|
||||
千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步地發展為隨處可見的智慧型裝置。
|
||||
俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
|
||||
人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海，奠基於科技的現有成果，才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
|
||||
SITCON
|
||||
歡迎不同身分、來自不同背景的與會者，也非常鼓勵女性、性少數與多元背景的參與者。為了讓大家都能愉快的參加
|
||||
SITCON，我們要求所有參與者閱讀年會的<a href=""
|
||||
>行為準則（Code of Conduct）</a
|
||||
>，共同創造一個友善的環境。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -56,34 +83,34 @@
|
||||
<section class="home__info">
|
||||
<div class="home__info-container">
|
||||
<div class="home__info-title">
|
||||
<h1 class="home__info-title--1">算盤的後裔</h1>
|
||||
<h2 class="home__info-title--2">Descendants of the abacus</h2>
|
||||
<h1>參與討論</h1>
|
||||
<h2 class="home__info-title-h2--mid">Join the community</h2>
|
||||
</div>
|
||||
<div class="home__info-paragraph">
|
||||
<p>
|
||||
千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步地發展為隨處可見的智慧型裝置。
|
||||
俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
|
||||
人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海，奠基於科技的現有成果，才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
|
||||
SITCON
|
||||
是個開放的社群，許多籌備的相關事項都會在公開的郵件論壇上進行討論，如果有興趣參與，歡迎訂閱
|
||||
SITCON 的郵件論壇並貢獻你的想法！
|
||||
<br />
|
||||
<br />
|
||||
若你想進一步了解過往討論的內容，也歡迎在 HackMD 上查看 SITCON 2021
|
||||
的會議記錄。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="home__info">
|
||||
<div class="home__info-container">
|
||||
<div class="home__info-title">
|
||||
<h1 class="home__info-title--1">算盤的後裔</h1>
|
||||
<h2 class="home__info-title--2">Descendants of the abacus</h2>
|
||||
</div>
|
||||
<div class="home__info-paragraph">
|
||||
<p>
|
||||
千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步地發展為隨處可見的智慧型裝置。
|
||||
俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
|
||||
人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海，奠基於科技的現有成果，才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
|
||||
</p>
|
||||
<div class="home__info-buttonsBox">
|
||||
<a href="" class="home-button">郵件論壇</a>
|
||||
<a href="" class="home-button">會議記錄</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<img
|
||||
class="home-sponsorsImg"
|
||||
src="~@/assets/images/home/home-sponsors.png"
|
||||
width="100%"
|
||||
/>
|
||||
</section>
|
||||
<!-- <section class="section-sponsors">
|
||||
</section> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user