Difference between revisions of "Template:TJU China"
| Line 495: | Line 495: | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
| + | body { | ||
| + | background-color: #1e1e1e; | ||
| + | background-size: cover; | ||
| + | height: 100vh; | ||
| + | font-family: "Raleway", sans-serif; | ||
| + | letter-spacing: 1px; | ||
| + | } | ||
| − | |||
| + | ul.drop{ | ||
| + | padding-left:0; | ||
| − | + | } | |
| − | + | ul { | |
| − | + | list-style: none; | |
| + | } | ||
| − | + | nav { | |
| + | width:100%; | ||
| + | height: 40px; | ||
| + | margin: 0px auto; | ||
| + | position: fixed; | ||
| + | top:0px; | ||
| − | + | text-align: center; | |
| − | + | border-radius: 4px; | |
| + | } | ||
| + | .main { | ||
| + | display: flex; | ||
| + | justify-content: space-around; | ||
| + | } | ||
| + | .main > li { | ||
| + | margin: 0%; | ||
| + | width: 10% | ||
| + | } | ||
| + | .main > li a{ | ||
| + | border-left:1px solid rgba(23, 23, 50, 1); | ||
| + | } | ||
| + | a { | ||
| + | text-decoration: none; | ||
| + | color: #ffe; | ||
| + | text-transform: capitalize; | ||
| + | font-family: monospace; | ||
| + | display: block; | ||
| + | padding: 10px 15px; | ||
| + | font-size: 15px; | ||
| + | transition: background-color 0.5s ease-in-out; | ||
| − | + | font-family: "Raleway", sans-serif; | |
| + | } | ||
| + | a:hover { | ||
| + | background-color: #631818; | ||
| + | } | ||
| + | .drop li { | ||
| + | opacity: 0; | ||
| + | transform-origin: top center; | ||
| + | } | ||
| − | + | .drop li a { | |
| − | + | ||
| − | + | ||
| + | background-color: rgba(23, 23, 50, 0.7); | ||
| + | padding: 10px 0; | ||
| + | } | ||
| + | /*------------- menu1 animation---------------*/ | ||
| + | .main li:hover .menu1 li:first-of-type { | ||
| + | animation: menu1 0s ease-in-out forwards; | ||
| + | animation-delay: 0s; | ||
| + | } | ||
| − | + | .main li:hover .menu1 li:nth-of-type(2) { | |
| − | + | animation: menu1 0s ease-in-out forwards; | |
| − | + | animation-delay: 0s; | |
| − | + | } | |
| − | + | ||
| + | .main li:hover .menu1 li:nth-of-type(3) { | ||
| + | animation: menu1 0s ease-in-out forwards; | ||
| + | animation-delay: 0s; | ||
| + | } | ||
| + | .main li:hover .menu1 li:nth-of-type(4) { | ||
| + | animation: menu1 0s ease-in-out forwards; | ||
| + | animation-delay: 0s; | ||
| + | } | ||
| + | .main li:hover .menu1 li:nth-of-type(5) { | ||
| + | animation: menu1 0s ease-in-out forwards; | ||
| + | animation-delay: 0s; | ||
| + | } | ||
| + | .main li:hover .menu1 li:nth-of-type(6) { | ||
| + | animation: menu1 0s ease-in-out forwards; | ||
| + | animation-delay: 0s; | ||
| + | } | ||
| + | .main li:hover .menu1 li:nth-of-type(7) { | ||
| + | animation: menu1 0s ease-in-out forwards; | ||
| + | animation-delay: 0s; | ||
| + | } | ||
| + | .main li:hover .menu1 li:nth-of-type(8) { | ||
| + | animation: menu1 0s ease-in-out forwards; | ||
| + | animation-delay: 0s; | ||
| + | } | ||
| − | + | .main li:hover .menu1 li:last-of-type { | |
| − | + | animation: menu1 0s ease-in-out forwards; | |
| − | + | animation-delay: 0s; | |
| + | } | ||
| − | + | @keyframes menu1 { | |
| + | from { | ||
| + | opacity: 0; | ||
| + | transform: translateX(30px) rotateY(90deg); | ||
| + | } | ||
| + | to { | ||
| + | opacity: 1; | ||
| + | transform: translateX(0) rotateY(0); | ||
| + | } | ||
| + | } | ||
| + | /*------------- menu2 animation -------------------*/ | ||
| + | .main li:hover .menu2 li:first-of-type { | ||
| + | animation: menu2 0s ease-in-out forwards; | ||
| + | animation-delay: 0s; | ||
| + | } | ||
| + | .main li:hover .menu2 li:nth-of-type(2) { | ||
| + | animation: menu2 0s ease-in-out forwards; | ||
| + | animation-delay: 0s; | ||
| + | } | ||
| + | .main li:hover .menu2 li:nth-of-type(3) { | ||
| + | animation: menu2 0s ease-in-out forwards; | ||
| + | animation-delay: 0s; | ||
| + | } | ||
| + | .main li:hover .menu2 li:nth-of-type(4) { | ||
| + | animation: menu2 0s ease-in-out forwards; | ||
| + | animation-delay: 0s; | ||
| + | } | ||
| − | + | .main li:hover .menu2 li:last-of-type { | |
| + | animation: menu2 0s ease-in-out forwards; | ||
| + | animation-delay: 0s; | ||
| + | } | ||
| + | @keyframes menu2 { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | transform: scale(0.7); | ||
| + | } | ||
| + | 50% { | ||
| + | opacity: 0.5; | ||
| + | transform: scale(1.1); | ||
| + | } | ||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | } | ||
| − | + | /*------------- menu3 animation -------------------*/ | |
| − | + | ||
| − | + | ||
| + | .main li:hover .menu3 li:first-of-type { | ||
| + | animation: menu3 0s ease-in-out forwards; | ||
| + | animation-delay: 0s; | ||
| + | } | ||
| + | .main li:hover .menu3 li:nth-of-type(2) { | ||
| + | animation: menu3 0s ease-in-out forwards; | ||
| + | animation-delay: 0s; | ||
| + | } | ||
| − | + | .main li:hover .menu3 li:nth-of-type(3) { | |
| − | + | animation: menu3 0s ease-in-out forwards; | |
| − | + | animation-delay: 0s; | |
| − | + | } | |
| − | + | .main li:hover .menu3 li:nth-of-type(4) { | |
| + | animation: menu3 0s ease-in-out forwards; | ||
| + | animation-delay: 0s; | ||
| + | } | ||
| + | .main li:hover .menu3 li:nth-of-type(5) { | ||
| + | animation: menu3 0s ease-in-out forwards; | ||
| + | animation-delay: 0s; | ||
| + | } | ||
| + | .main li:hover .menu3 li:last-of-type { | ||
| + | animation: menu3 0s ease-in-out forwards; | ||
| + | animation-delay: 0s; | ||
| + | } | ||
| − | + | @keyframes menu3 { | |
| − | + | 0% { | |
| − | + | opacity: 0; | |
| − | + | transform: translateX(20px); | |
| − | + | } | |
| − | + | 100% { | |
| − | + | opacity: 1; | |
| − | + | transform: translateX(0); | |
| − | + | } | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | /*------------- menu4 animation :None--------------*/ | |
| − | + | /*------------- menu5 animation -------------------*/ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | .main li:hover .menu5 li:first-of-type { | ||
| + | animation: menu5 0s ease-in-out forwards; | ||
| + | animation-delay: 0s; | ||
| + | } | ||
| − | + | .main li:hover .menu5 li:last-of-type { | |
| − | + | animation: menu5 0s ease-in-out forwards; | |
| − | + | animation-delay: 0s; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | @keyframes menu5 { | |
| − | + | 0% { | |
| − | + | opacity: 0; | |
| − | + | transform: translateX(50px) rotate(-90deg); | |
| − | + | } | |
| + | 100% { | ||
| + | opacity: 1; | ||
| + | transform: translateX(0) rotate(0); | ||
| + | } | ||
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | /*------------- menu6 animation:None-------------------*/ | ||
| + | /*------------- menu7 animation------------------------*/ | ||
| + | .main li:hover .menu7 li:first-of-type { | ||
| + | animation: menu7 0s ease-in-out forwards; | ||
| + | animation-delay: 0s; | ||
| + | } | ||
| − | + | .main li:hover .menu7 li:nth-of-type(2) { | |
| − | + | animation: menu7 0s ease-in-out forwards; | |
| − | + | animation-delay: 0s; | |
| − | + | } | |
| − | + | ||
| − | + | .main li:hover .menu7 li:last-of-type { | |
| − | + | animation: menu7 0s ease-in-out forwards; | |
| − | + | animation-delay: 0s; | |
| − | + | } | |
| − | + | ||
| + | @keyframes menu7 { | ||
| + | 0% { | ||
| + | opacity: 0; | ||
| + | transform: rotateX(-90deg); | ||
| + | } | ||
| + | 100% { | ||
| + | opacity: 1; | ||
| + | transform: rotateX(0); | ||
| + | } | ||
| + | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | </style> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | <!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | |
| + | <!--- THIS IS WHERE THE HTML BEGINS ---> | ||
| + | <!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | ||
| + | <head> | ||
| − | + | <!-- This tells the browser that your page is responsive --> | |
| − | + | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | </head> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| + | <!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | ||
| + | <!--- Menu ---> | ||
| + | <!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| + | <div> | ||
| + | <ul class="main"> | ||
| + | <li> | ||
| + | <a href="#">Home</a> | ||
| + | </li> | ||
| + | <li> | ||
| + | <a href="#">Project▼</a> | ||
| + | <ul class="drop menu1"> | ||
| + | <li><a href="#">Description</a></li> | ||
| + | <li><a href="#">Design</a></li> | ||
| + | <li><a href="#">Experiment</a></li> | ||
| + | <li><a href="#">Notebook</a></li> | ||
| + | <li><a href="#">Results</a></li> | ||
| + | <li><a href="#">Demonstration</a></li> | ||
| + | <li><a href="#">Applied Design</a></li> | ||
| + | <li><a href="#">Entrepreneur- ship</a></li> | ||
| + | <li><a href="#">Measurement</a></li> | ||
| + | </ul> | ||
| + | </li> | ||
| + | <li><a href="#">Parts▼</a> | ||
| + | <ul class="drop menu2"> | ||
| + | <li><a href="#">Parts Overview</a></li> | ||
| + | <li><a href="#">Basic</a></li> | ||
| + | <li><a href="#">Composite</a></li> | ||
| + | <li><a href="#">Collection</a></li> | ||
| + | <li><a href="#">Improve</a></li> | ||
| + | </ul> | ||
| + | </li> | ||
| + | <li><a href="#">Model</a> | ||
| + | </li> | ||
| + | <li><a href="#">Safety</a> | ||
| + | </li> | ||
| + | <li><a href="#">HP▼</a> | ||
| + | <ul class="drop menu5"> | ||
| + | <li><a href="#">Human Practise</a></li> | ||
| + | <li><a href="#">Education& Engagement</a></li> | ||
| + | </ul> | ||
| + | </li> | ||
| + | <li><a href="#">Team▼</a> | ||
| + | <ul class="drop menu7"> | ||
| + | <li><a href="#">Members</a></li> | ||
| + | <li><a href="#">Collaboration</a></li> | ||
| + | <li><a href="#">Attribution</a></li> | ||
| + | </ul> | ||
| + | </li> | ||
| + | </ul> | ||
</div> | </div> | ||
Revision as of 11:42, 29 June 2018