Difference between revisions of "Team:UI Indonesia/Modeling"

(fran : template edit)
(fran : template test)
Line 24: Line 24:
 
             left: 0;
 
             left: 0;
 
             width : 100vw;
 
             width : 100vw;
−
             padding:12px 12px 0px 12px;
+
             padding:12px 0px 0px 0px;
 
         }
 
         }
 
         @import url(http://fonts.googleapis.com/css?family=Raleway);
 
         @import url(http://fonts.googleapis.com/css?family=Raleway);
−
#cssmenu,
+
        #cssmenu,
−
#cssmenu ul,
+
        #cssmenu ul,
−
#cssmenu ul li,
+
        #cssmenu ul li,
−
#cssmenu ul li a {
+
        #cssmenu ul li a {
−
  margin: 0;
+
        margin: 0;
−
  padding: 0;
+
        padding: 0;
−
  border: 0;
+
        border: 0;
−
  list-style: none;
+
        list-style: none;
−
  line-height: 1;
+
        line-height: 1;
−
  display: block;
+
        display: block;
−
  position: relative;
+
        position: relative;
−
  -webkit-box-sizing: border-box;
+
        -webkit-box-sizing: border-box;
−
  -moz-box-sizing: border-box;
+
        -moz-box-sizing: border-box;
−
  box-sizing: border-box;
+
        box-sizing: border-box;
−
}
+
        }
−
#cssmenu:after,
+
        #cssmenu:after,
−
#cssmenu > ul:after {
+
        #cssmenu > ul:after {
−
  content: ".";
+
        content: ".";
−
  display: block;
+
        display: block;
−
  clear: both;
+
        clear: both;
−
  visibility: hidden;
+
        visibility: hidden;
−
  line-height: 0;
+
        line-height: 0;
−
  height: 0;
+
        height: 0;
−
}
+
        }
−
#cssmenu {
+
        #cssmenu {
−
  width: auto;
+
        width: auto;
−
  border-bottom: 3px solid #47c9af;
+
        border-bottom: 3px solid #47c9af;
−
  font-family: Raleway, sans-serif;
+
        font-family: Raleway, sans-serif;
−
  line-height: 1;
+
        line-height: 1;
−
}
+
        }
−
#cssmenu ul {
+
        #cssmenu ul {
−
  background: #ffffff;
+
        background: #ffffff;
−
}
+
        }
−
#cssmenu > ul > li {
+
        #cssmenu > ul > li {
−
  float: left;
+
        float: left;
−
}
+
        }
−
#cssmenu.align-center > ul {
+
        #cssmenu.align-center > ul {
−
  font-size: 0;
+
        font-size: 0;
−
  text-align: center;
+
        text-align: center;
−
}
+
        }
−
#cssmenu.align-center > ul > li {
+
        #cssmenu.align-center > ul > li {
−
  display: inline-block;
+
        display: inline-block;
−
  float: none;
+
        float: none;
−
}
+
        }
−
#cssmenu.align-right > ul > li {
+
        #cssmenu.align-right > ul > li {
−
  float: right;
+
        float: right;
−
}
+
        }
−
#cssmenu.align-right > ul > li > a {
+
        #cssmenu.align-right > ul > li > a {
−
  margin-right: 0;
+
        margin-right: 0;
−
  margin-left: -4px;
+
        margin-left: -4px;
−
}
+
        }
−
#cssmenu > ul > li > a {
+
        #cssmenu > ul > li > a {
−
  z-index: 2;
+
        z-index: 2;
−
  margin-top: 12px;
+
        margin-top: 12px;
−
  padding: 18px 25px 12px 25px;
+
        padding: 18px 25px 12px 25px;
−
  font-size: 15px;
+
        font-size: 15px;
−
  font-weight: 400;
+
        font-weight: 400;
−
  text-decoration: none;
+
        text-decoration: none;
−
  color: #444444;
+
        color: #444444;
−
  -webkit-transition: all .2s ease;
+
        -webkit-transition: all .2s ease;
−
  -moz-transition: all .2s ease;
+
        -moz-transition: all .2s ease;
−
  -ms-transition: all .2s ease;
+
        -ms-transition: all .2s ease;
−
  -o-transition: all .2s ease;
+
        -o-transition: all .2s ease;
−
  transition: all .2s ease;
+
        transition: all .2s ease;
−
  margin-right: -4px;
+
        margin-right: -4px;
−
}
+
        }
−
#cssmenu > ul > li.active > a,
+
        #cssmenu > ul > li.active > a,
−
#cssmenu > ul > li:hover > a,
+
        #cssmenu > ul > li:hover > a,
−
#cssmenu > ul > li > a:hover {
+
        #cssmenu > ul > li > a:hover {
−
  color: #ffffff;
+
        color: #ffffff;
−
}
+
        }
−
#cssmenu > ul > li > a:after {
+
        #cssmenu > ul > li > a:after {
−
  position: absolute;
+
        position: absolute;
−
  left: 0;
+
        left: 0;
−
  bottom: 0;
+
        bottom: 0;
−
  right: 0;
+
        right: 0;
−
  z-index: -1;
+
        z-index: -1;
−
  width: 100%;
+
        width: 100%;
−
  height: 120%;
+
        height: 120%;
−
  border-top-left-radius: 8px;
+
        border-top-left-radius: 8px;
−
  border-top-right-radius: 8px;
+
        border-top-right-radius: 8px;
−
  content: "";
+
        content: "";
−
  -webkit-transition: all .2s ease;
+
        -webkit-transition: all .2s ease;
−
  -o-transition: all .2s ease;
+
        -o-transition: all .2s ease;
−
  transition: all .2s ease;
+
        transition: all .2s ease;
−
  -webkit-transform: perspective(5px) rotateX(2deg);
+
        -webkit-transform: perspective(5px) rotateX(2deg);
−
  -webkit-transform-origin: bottom;
+
        -webkit-transform-origin: bottom;
−
  -moz-transform: perspective(5px) rotateX(2deg);
+
        -moz-transform: perspective(5px) rotateX(2deg);
−
  -moz-transform-origin: bottom;
+
        -moz-transform-origin: bottom;
−
  transform: perspective(5px) rotateX(2deg);
+
        transform: perspective(5px) rotateX(2deg);
−
  transform-origin: bottom;
+
        transform-origin: bottom;
−
}
+
        }
−
#cssmenu > ul > li.active > a:after,
+
        #cssmenu > ul > li.active > a:after,
−
#cssmenu > ul > li:hover > a:after,
+
        #cssmenu > ul > li:hover > a:after,
−
#cssmenu > ul > li > a:hover:after {
+
        #cssmenu > ul > li > a:hover:after {
−
  background: #47c9af;
+
        background: #47c9af;
−
}
+
        }
  
−
.dropdown {
+
        .dropdown {
−
  float: left;
+
        float: left;
−
  overflow: hidden;
+
        overflow: hidden;
−
}
+
        }
  
−
.dropdown .dropbtn {
+
        .dropdown .dropbtn {
−
  font-size: 16px;     
+
        font-size: 16px;     
−
  border: none;
+
        border: none;
−
  outline: none;
+
        outline: none;
−
  color: black;
+
        color: black;
−
  padding: 14px 16px;
+
        padding: 14px 16px;
−
  background-color: inherit;
+
        background-color: inherit;
−
  font-family: inherit;
+
        font-family: inherit;
−
  margin: 0;
+
        margin: 0;
−
}
+
        }
  
−
.dropdown-content {
+
        .dropdown-content {
−
  display: none;
+
        display: none;
−
  position: absolute;
+
        position: absolute;
−
  background-color: #f9f9f9;
+
        background-color: #f9f9f9;
−
  min-width: 160px;
+
        min-width: 160px;
−
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
−
  z-index: 1;
+
        z-index: 1;
−
}
+
        }
  
−
.dropdown-content a {
+
        .dropdown-content a {
−
  float: none;
+
        float: none;
−
  color: black;
+
        color: black;
−
  padding: 12px 16px;
+
        padding: 12px 16px;
−
  text-decoration: none;
+
        text-decoration: none;
−
  display: block;
+
        display: block;
−
  text-align: left;
+
        text-align: left;
−
}
+
        }
  
−
.dropdown-content a:hover {
+
        .dropdown-content a:hover {
−
  background-color: #ddd;
+
        background-color: #ddd;
−
}
+
        }
  
−
.dropdown:hover .dropdown-content {
+
        .dropdown:hover .dropdown-content {
−
  display: block;
+
        display: block;
−
}
+
        }
 
     </style>
 
     </style>
 
</head>
 
</head>
 
<body>
 
<body>
 
     <div class = "bg">
 
     <div class = "bg">
−
         <div id='cssmenu'>
+
         <div class = "nav">
−
            <ul>
+
            <div id='cssmenu'>
−
                <li>
+
                <ul>
−
                    <a href='#'>Home</a>
+
                    <li>
−
                </li>
+
                        <a href='#'>Home</a>
−
                <li class="dropdown">
+
                    </li>
−
                    <a class="dropbtn">Dropdown
+
                    <li class="dropdown">
−
                        <i class="fa fa-caret-down"></i>
+
                        <a class="dropbtn">TEAM
−
                    </a>
+
                            <i class="fa fa-caret-down"></i>
−
                    <div class="dropdown-content">
+
                        </a>
−
                        <a href="#">Link 1</a>
+
                        <div class="dropdown-content">
−
                        <a href="#">Link 2</a>
+
                            <a href="#">Team Members</a>
−
                         <a href="#">Link 3</a>
+
                            <a href="#">Collaborations</a>
−
                    </div>
+
                         </div>
−
                </li>
+
                    </li>
−
                <li>
+
                    <li class="dropdown">
−
                     <a href='#'>Company</a>
+
                        <a class="dropbtn">PROJECT
−
                </li>
+
                            <i class="fa fa-caret-down"></i>
−
                <li>
+
                        </a>
−
                     <a href='#'>Contact</a>
+
                        <div class="dropdown-content">
−
                </li>
+
                            <a href="#">Description</a>
−
            </ul>
+
                            <a href="#">Design</a>
−
         </div>                  
+
                            <a href="#">Experiments</a>
 +
                            <a href="#">Notebook</a>
 +
                            <a href="#">InterLab</a>
 +
                            <a href="#">Model</a>
 +
                            <a href="#">Results</a>
 +
                            <a href="#">Demonstrate</a>
 +
                            <a href="#">Improve</a>
 +
                            <a href="#">Attributions</a>
 +
                        </div>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a class="dropbtn">PARTS
 +
                            <i class="fa fa-caret-down"></i>
 +
                        </a>
 +
                        <div class="dropdown-content">
 +
                            <a href="#">Parts Overview</a>
 +
                            <a href="#">Basic Parts</a>
 +
                            <a href="#">Composite Parts</a>
 +
                            <a href="#">Part Collection</a>
 +
                        </div>
 +
                     </li>
 +
                    <li>
 +
                        <a href='#'>SAFETY</a>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a class="dropbtn">HUMAN PRACTICES
 +
                            <i class="fa fa-caret-down"></i>
 +
                        </a>
 +
                        <div class="dropdown-content">
 +
                            <a href="#">Human Practices</a>
 +
                            <a href="#">Education &amp; Engagement</a>
 +
                        </div>
 +
                     </li>
 +
                    <li class="dropdown">
 +
                        <a class="dropbtn">AWARDS
 +
                            <i class="fa fa-caret-down"></i>
 +
                        </a>
 +
                        <div class="dropdown-content">
 +
                            <a href="#">Applied Design</a>
 +
                            <a href="#">Entrepreneurship</a>
 +
                            <a href="#">Hardware</a>
 +
                            <a href="#">Measurement</a>
 +
                            <a href="#">Model</a>
 +
                            <a href="#">Plant</a>
 +
                            <a href="#">Software</a>
 +
                        </div>
 +
                    </li>
 +
                    <li>
 +
                        <a href='#'>JUDGING FORM</a>
 +
                    </li>
 +
                </ul>
 +
            </div>
 +
         </div>      
 
     </div>
 
     </div>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 16:56, 23 June 2018

NAMA WEB LU NANTI