From 5c7f1cd177d92d6b3a20dd680f431e79ee730eb4 Mon Sep 17 00:00:00 2001 From: Claire <40823657+moonriver1997@users.noreply.github.com> Date: Tue, 3 Nov 2020 12:00:44 +0800 Subject: [PATCH] Add files via upload --- content.css | 112 +++++++++++++++++++++++++++++++++++++++ index.html | 88 ++++++++++++++++++++++--------- item.css | 149 +++++++++++++++++++++------------------------------- 3 files changed, 235 insertions(+), 114 deletions(-) create mode 100644 content.css diff --git a/content.css b/content.css new file mode 100644 index 0000000..c0c41a0 --- /dev/null +++ b/content.css @@ -0,0 +1,112 @@ +:root{ + --color-contentBack: rgb(230, 224, 255); + --color-contentNav: rgba(57, 57, 70, 0.08); + --color-contentTab: rgba(57, 57, 70); + --color-comingBack: rgba(28, 28, 74, 1.0); +/* --color-back: #004466;*/ + --color-background: linear-gradient(45deg, + rgba(28, 28, 74, 0.65) 0%, + rgba(28, 28, 74, 0.8) 10%, + rgba(28, 28, 74, 0.95) 30%, + rgba(28, 28, 74, 1.0) 50%, + rgba(28, 28, 74, 0.95) 70%, + rgba(28, 28, 74, 0.8) 90%, + rgba(28, 28, 74, 0.65) 100%); +} +body{ + background: var(--color-background); +} + +/*index*/ +.mainImg{ + width: 160px; + position: fixed; + left: 45%; + top: 35%; +} + +.itemBtn{ + position: fixed; + font-weight: bold; + color: white; +} +.itemBtn div{ + border-radius: 50%; + height: 80px; + width: 80px; + margin-top: 10%; +} +.itemBtn div font{ + margin-left: 59%; +} + +/*content*/ +#dataStructure:checked ~ .content, +#machineLearning:checked ~ .content, +#programming:checked ~ .content, +#music:checked ~ .content{ + display: inline; +} + +#dataStructure:checked ~ .content .contentNav [for="dataStructure"], +#machineLearning:checked ~ .content .contentNav [for="machineLearning"], +#programming:checked ~ .content .contentNav [for="programming"], +#music:checked ~ .content .contentNav [for="music"]{ + background-color: var(--color-contentNav); + border-top: 5px solid rgba(28, 28, 74, 1.0); +} + +#dataStructure:checked ~ .content .dataStructure, +#machineLearning:checked ~ .content .comingSoon, +#programming:checked ~ .content .comingSoon, +#music:checked ~ .content .comingSoon{ + display: block; +} + +.content{ + position: fixed; + height: 100%; + width: 100%; + background-color: var(--color-contentBack); + display: none; +} +.content .contentNav{ + width: 100%; + height: 80px; + position: fixed; + background-color: var(--color-contentBack); + text-align: center; + box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); +} +.content .contentNav img{ + margin-top: 5px; + margin-bottom: 5px; + width: 60px; +} +.content .contentNav .nav{ + display: inline-block; + height: calc(100% - 25px - 5px); + width: 240px; + color: #000000; + font-weight: bold; + padding-top: 25px; +} + +.dataStructure, +.comingSoon{ + display: none; + height: calc(100% - 80px); + width: 100%; + margin-top: 80px; +} + +.comingSoon{ + background: var(--color-comingBack); +} + +.dataStructure .tab{ + width: 198px; + height: 100%; + background-color: var(--color-contentTab); + border-radius: 0 0 35px 0; +} diff --git a/index.html b/index.html index 220e80c..40e8d1c 100644 --- a/index.html +++ b/index.html @@ -4,35 +4,54 @@ + - + - + - - - - +
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -49,8 +68,29 @@
-
- coming soon +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Coming Soon
+
diff --git a/item.css b/item.css index 74d0194..0713adb 100644 --- a/item.css +++ b/item.css @@ -1,106 +1,75 @@ :root{ - --color-contentBack: rgb(230, 224, 255); - --color-contentNav: rgba(57, 57, 70, 0.08); - --color-contentTab: rgba(57, 57, 70); - --color-background: linear-gradient(45deg, - rgba(28, 28, 74, 0.65) 0%, - rgba(28, 28, 74, 0.8) 10%, - rgba(28, 28, 74, 0.95) 30%, - rgba(28, 28, 74, 1.0) 50%, - rgba(28, 28, 74, 0.95) 70%, - rgba(28, 28, 74, 0.8) 90%, - rgba(28, 28, 74, 0.65) 100%); + --color-star: rgba(255, 255, 255, 1.0); + --color-back: rgba(0,0,0,0.4); + --color-planet: rgba(255, 153, 51, 1.0); + --color-planetDeco-1: rgba(255, 191, 128, 1.0); + --color-planetDeco-2: rgba(204, 102, 0,0.3); + --color-planetDeco-3: rgba(255,255,255,0.4); + --color-planetDeco-shad: rgba(204, 102, 0,0.3); } -body{ - background: var(--color-background); -} - -/*index*/ -.mainImg{ - width: 160px; - position: fixed; - left: 45%; - top: 35%; +#index:checked ~ .star{ + display: inline; } - -.itemBtn{ - position: fixed; - font-weight: bold; - color: white; +.star { + display: none; } -.itemBtn div{ +.star div{ + background-color: var(--color-star); + width: 5px; + height: 5px; border-radius: 50%; - height: 40%; - width: 40%; - margin-top: 10%; -} -.itemBtn div font{ - margin-left: 59%; + position: relative; } -/*content*/ -#dataStructure:checked ~ .content, -#machineLearning:checked ~ .content, -#programming:checked ~ .content, -#music:checked ~ .content{ - display: inline; +.comingBack{ + position: relative; + height: 500px; + width: 500px; + border-radius: 50%; + background-color: var(--color-back); + transform: scale(0.7); + left: 30%; } - -#dataStructure:checked ~ .content .contentNav [for="dataStructure"], -#machineLearning:checked ~ .content .contentNav [for="machineLearning"], -#programming:checked ~ .content .contentNav [for="programming"], -#music:checked ~ .content .contentNav [for="music"]{ - background-color: var(--color-contentNav); - border-top: 5px solid rgba(28, 28, 74, 1.0); +.comingBack .planet{ + height:200px; + width:200px; + border-radius: 50%; + position: relative; + background-color: #ff9933; + top:45px; + left:220px; } - -#dataStructure:checked ~ .content .dataStructure, -#machineLearning:checked ~ .content .comingSoon, -#programming:checked ~ .content .comingSoon, -#music:checked ~ .content .comingSoon{ - display: block; +.comingBack .planet .planetDeco-1{ + position: relative; + background-color: var( --color-planetDeco-1); } - -.content{ - position: fixed; - height: 100%; - width: 100%; - background-color: var(--color-contentBack); - display: none; +.comingBack .planet .planetDeco-2{ + position: relative; + background-color: var( --color-planetDeco-2); } -.content .contentNav{ - width: 100%; - height: 80px; - position: fixed; - background-color: var(--color-contentBack); - text-align: center; - box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); +.comingBack .planet .planetDeco-3{ + position: relative; + background-color: var( --color-planetDeco-3); } -.content .contentNav img{ - margin-top: 5px; - margin-bottom: 5px; - width: 60px; +.comingBack .planet .planetDeco-shad{ + position: relative; + background-color: transparent; + box-shadow: 15px 15px var( --color-planetDeco-shad); } -.content .contentNav .nav{ - display: inline-block; - height: calc(100% - 25px - 5px); - width: 240px; - color: #000000; - font-weight: bold; - padding-top: 25px; +.comingBack .star{ + display: block; } - -.dataStructure, -.comingSoon{ - display: none; - height: calc(100% - 80px); - width: 100%; - margin-top: 80px; +.comingBack .text{ + color: white; + position: relative; + font-weight: bold; + animation-name: textFlow; + animation-duration: 5s; + animation-iteration-count: infinite; } -.dataStructure .tab{ - width: 198px; - height: 100%; - background-color: var(--color-contentTab); - border-radius: 0 0 35px 0; -} +@keyframes textFlow{ + 50%{ + transform: translateY(30px); + } +} \ No newline at end of file