-
-
-
-
+
@@ -49,8 +68,29 @@
-
- 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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Coming Soon
+