Difference between revisions of "Template:Peking/NavBar"

 
(39 intermediate revisions by the same user not shown)
Line 10: Line 10:
 
         /* Clear the default wiki settings */
 
         /* Clear the default wiki settings */
  
−
         #home_logo, #sideMenu { display:none; }
+
         #home_logo, #sideMenu {
−
         #sideMenu, #top_title, .patrollink {display:none;}
+
            display: none;
−
         #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;}
+
        }
−
         body {background-color:white; }
+
 
−
         #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
         #sideMenu, #top_title, .patrollink {
 +
            display: none;
 +
        }
 +
 
 +
         #content {
 +
            width: 100%;
 +
            padding: 0px;
 +
            margin-top: -7px;
 +
            margin-left: 0px;
 +
        }
 +
 
 +
         body {
 +
            background-color: white;
 +
        }
 +
 
 +
         #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
 +
            margin-bottom: 0px;
 +
        }
  
 
     </style>
 
     </style>
  
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 +
    <script type="text/javascript" src="https://2017.igem.org/Template:Peking/mdl/materialminjs?
 +
action=raw&ctype=text/javascript"></script>
 +
    <link href="https://2017.igem.org/Template:Peking/mdl/component?action=raw&ctype=text/css" rel="stylesheet">
 +
    <script type="text/javascript"
 +
            src="https://2017.igem.org/Template:Peking/mdl/componentjs?action=raw&ctype=text/javascript"></script>
  
 
     <link rel="stylesheet" type="text/css"
 
     <link rel="stylesheet" type="text/css"
 
           href="https://2017.igem.org/Template:Peking/mdl/MDLnew?action=raw&ctype=text/css">
 
           href="https://2017.igem.org/Template:Peking/mdl/MDLnew?action=raw&ctype=text/css">
  
−
    <script type="text/javascript" src="https://2017.igem.org/Template:Peking/mdl/materialminjs?
 
−
action=raw&ctype=text/javascript"></script>
 
  
  
−
</head>
 
  
  
 +
    <link rel="stylesheet" type="text/css"
 +
          href="https://2017.igem.org/Template:Peking/mdl/main?action=raw&ctype=text/css">
 +
    <!-- Fonts -->
 +
    <link rel="stylesheet" type="text/css"
 +
          href="https://2017.igem.org/Template:Peking/mdl/fonts?action=raw&ctype=text/css">
 +
    <link rel="stylesheet" type="text/css"
 +
          href="https://2017.igem.org/Template:Peking/mdl/icon?action=raw&ctype=text/css">
 +
 +
 +
</head>
  
  
  
−
<!-- The drawer is always open in large screens. The header is always shown,
 
−
  even in small screens. -->
 
  
  
 
<body>
 
<body>
  
−
<!-- Wide card with share menu button -->
 
−
<style>
 
−
.demo-card-wide.mdl-card {
 
−
  width: 512px;
 
−
}
 
−
.demo-card-wide > .mdl-card__title {
 
−
  color: #fff;
 
−
  height: 176px;
 
−
  background: url('../assets/demos/welcome_card.jpg') center / cover;
 
−
}
 
−
.demo-card-wide > .mdl-card__menu {
 
−
  color: #fff;
 
−
}
 
−
</style>
 
  
−
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
+
 
−
  <div class="mdl-card__title">
+
<!-- Always shows a header, even in smaller screens. -->
−
    <h2 class="mdl-card__title-text">Welcome</h2>
+
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
−
  </div>
+
    <header class="mdl-layout__header">
−
  <div class="mdl-card__supporting-text">
+
        <div class="mdl-layout__header-row">
−
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
            <!-- Title -->
−
    Mauris sagittis pellentesque lacus eleifend lacinia...
+
            <a href="https://2017.igem.org/Team:Peking"><img src="https://static.igem.org/mediawiki/2017/c/cf/Peking_TeamLogoClassical.png" height="35"></a>
−
  </div>
+
 
−
  <div class="mdl-card__actions mdl-card--border">
+
            <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Peking" style="color: #000000; font-size: x-large"><strong>Peking iGEM </strong> 2017</a>
−
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+
            <!-- Add spacer, to align navigation to the right -->
−
      Get Started
+
            <div class="mdl-layout-spacer"></div>
−
    </a>
+
            <!-- Navigation. We hide it in small screens. -->
−
  </div>
+
            <nav class="mdl-navigation mdl-layout--large-screen-only">
−
  <div class="mdl-card__menu">
+
                <style>
−
    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+
                    a:link {text-decoration: none;}
−
      <i class="material-icons">share</i>
+
                    a:visited {text-decoration: none;}
−
    </button>
+
                    a:active {text-decoration: none;}
−
  </div>
+
                    a:hover {}
 +
                </style>
 +
                <a class="mdl-navigation__link" href="https://2017.igem.org/Team:Peking">Home</a>
 +
                <a class="mdl-navigation__link" href="" style="color: #000; font-weight: 500 ">Project</a>
 +
                <a class="mdl-navigation__link" href="">Modelling</a>
 +
                <a class="mdl-navigation__link" href="">Software</a>
 +
                <a class="mdl-navigation__link" href="">Hardware</a>
 +
                <a class="mdl-navigation__link" href="">Lab</a>
 +
                <a class="mdl-navigation__link" href="">Practices</a>
 +
                <a class="mdl-navigation__link" href="">Parts</a>
 +
                <a class="mdl-navigation__link" href="">Team</a>
 +
            </nav>
 +
        </div>
 +
    </header>
 
</div>
 
</div>
 +
 +
 +
<div class="mdl-components mdl-js-components mdl-cell mdl-cell--12-col" style="padding-top: 60px;">
 +
    <aside class="mdl-components__nav docs-text-styling mdl-shadow--4dp">
 +
 +
        <a href="https://getmdl.io/components/index.html#Background"
 +
          class="mdl-components__link mdl-component Background">
 +
            <div class="mdl-components__link-image"
 +
                style="background-image: url(&#39;../assets/comp_badges.png&#39;)">
 +
            </div>
 +
            <span class="mdl-components__link-text" style="font-size: medium">Background</span>
 +
        </a>
 +
 +
        <a href="https://getmdl.io/components/index.html#Introduction"
 +
          class="mdl-components__link mdl-component Introduction">
 +
            <div class="mdl-components__link-image"
 +
                style="background-image: url(&#39;../assets/comp_buttons.png&#39;)">
 +
            </div>
 +
            <span class="mdl-components__link-text" style="font-size: medium">Introduction</span>
 +
        </a>
 +
 +
        <a href="https://getmdl.io/components/index.html#Flip-flop"
 +
          class="mdl-components__link mdl-component FF">
 +
            <div class="mdl-components__link-image"
 +
                style="background-image: url(&#39;../assets/comp_cards.png&#39;)">
 +
            </div>
 +
            <span class="mdl-components__link-text"style="font-size: medium">Flip-flop</span>
 +
        </a>
 +
 +
        <a href="https://getmdl.io/components/index.html#Controller"
 +
          class="mdl-components__link mdl-component CU">
 +
            <div class="mdl-components__link-image"
 +
                style="background-image: url(&#39;../assets/comp_chips.png&#39;)">
 +
            </div>
 +
            <span class="mdl-components__link-text"style="font-size: medium">Controller</span>
 +
        </a>
 +
 +
        <a href="https://getmdl.io/components/index.html#Clock"
 +
          class="mdl-components__link mdl-component Clock">
 +
            <div class="mdl-components__link-image"
 +
                style="background-image: url(&#39;../assets/comp_dialog.png&#39;)">
 +
            </div>
 +
            <span class="mdl-components__link-text" style="font-size: medium">Clock</span>
 +
        </a>
 +
 +
        <a href="https://getmdl.io/components/index.html#Demonstrate"
 +
          class="mdl-components__link mdl-component Demonstrate">
 +
            <div class="mdl-components__link-image"
 +
                style="background-image: url(&#39;../assets/comp_layout.png&#39;)">
 +
            </div>
 +
            <span class="mdl-components__link-text" style="font-size: medium">Demonstrate</span>
 +
        </a>
 +
 +
        <a href="https://getmdl.io/components/index.html#Prospect"
 +
          class="mdl-components__link mdl-component Prospect">
 +
            <div class="mdl-components__link-image"
 +
                style="background-image: url(&#39;../assets/comp_lists.png&#39;)">
 +
            </div>
 +
            <span class="mdl-components__link-text" style="font-size: medium">Prospect</span>
 +
        </a>
 +
 +
    </aside>
 +
 +
    <section id="Background" class="mdl-components__page mdl-grid">
 +
        <p>1223</p>
 +
    </section>
 +
    <section id="Introduction" class="mdl-components__page mdl-grid">
 +
        <p>2334</p>
 +
    </section>
 +
</div>
 +
 +
 +
  
  
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 04:18, 17 October 2017

Peking iGEM 2017

1223

2334