Difference between revisions of "Template:Peking/NavBar"

Line 1: Line 1:
 
<html>
 
<html>
 +
 
<head>
 
<head>
 +
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 +
 +
 +
 +
 +
    <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Peking/mdl/materialmin?action=raw&ctype=text/css">
 +
    <script type="text/javascript" src="https://2017.igem.org/Template:Peking/mdl/materialminjs?
 +
action=raw&ctype=text/javascript"></script>
 +
 +
 
     <style>
 
     <style>
 
         /********************************* DEFAULT WIKI SETTINGS ********************************/
 
         /********************************* DEFAULT WIKI SETTINGS ********************************/
Line 17: Line 28:
 
             width: 100%;
 
             width: 100%;
 
         }
 
         }
 +
 
         #bodyContent h1,
 
         #bodyContent h1,
 
         #bodyContent h2,
 
         #bodyContent h2,
Line 60: Line 72:
 
         }
 
         }
  
 +
        /********************************* CONTENT OF THE PAGE ********************************/
 +
 +
        /* Wrapper for the content */
 +
 +
        .content_wrapper {
 +
            width: 85%;
 +
            margin-left: 150px;
 +
            padding: 0px;
 +
            float: left;
 +
            background-color: white;
 +
        }
 +
 +
        /*LAYOUT */
 +
 +
        .column {
 +
            padding: 10px 0px;
 +
            float: left;
 +
            background-color: white;
 +
        }
 +
 +
        .full_size {
 +
            width: 100%;
 +
        }
 +
 +
        .full_size img {
 +
            padding: 10px 15px;
 +
            width: 96.5%;
 +
        }
 +
 +
        .half_size {
 +
            width: 50%;
 +
        }
 +
 +
        .half_size img {
 +
            padding: 10px 15px;
 +
            width: 93%;
 +
        }
 +
 +
        .img:hover {
 +
            opacity: 1.0 !important;
 +
        }
 +
 +
        .clear {
 +
            clear: both;
 +
        }
 +
 +
        .highlight {
 +
            width: 90%;
 +
            margin: auto;
 +
            padding: 15px 5px;
 +
            background-color: #f2f2f2;
 +
        }
 +
 +
        .judges-will-not-evaluate {
 +
            border: 4px solid #72c9b6;
 +
            display: block;
 +
            margin: 5px 15px;
 +
            width: 95%;
 +
            font-weight: bold;
 +
        }
 +
 +
        /********************************* RESPONSIVE STYLING ********************************/
 +
 +
        /* IF THE SCREEN IS LESS THAN 1000PX */
 +
 +
        @media only screen and (max-width: 1000px) {
 +
            #content {
 +
                width: 100%;
 +
            }
 +
 +
            .menu_wrapper {
 +
                width: 15%;
 +
            }
 +
 +
            .content_wrapper {
 +
                margin-left: 15%;
 +
            }
 +
 +
            .menu_item {
 +
                display: block;
 +
            }
 +
 +
            .icon {
 +
                display: none;
 +
            }
 +
 +
            .highlight {
 +
                padding: 10px 0px;
 +
            }
 +
        }
 +
 +
        /* IF THE SCREEN IS LESS THAN 680PX */
 +
 +
        @media only screen and (max-width: 680px) {
 +
            .collapsable_menu_control {
 +
                display: block;
 +
            }
 +
 +
            .menu_item {
 +
                display: none;
 +
            }
 +
 +
            .menu_wrapper {
 +
                width: 100%;
 +
                height: 15%;
 +
                position: relative;
 +
            }
 +
 +
            .content_wrapper {
 +
                width: 100%;
 +
                margin-left: 0px;
 +
            }
 +
 +
            .column.half_size {
 +
                width: 100%;
 +
            }
 +
 +
            .column img {
 +
                width: 100%;
 +
                padding: 5px 0px;
 +
            }
 +
 +
            .icon {
 +
                display: block;
 +
            }
 +
 +
            .highlight {
 +
                padding: 15px 5px;
 +
            }
 +
        }
 
     </style>
 
     </style>
 
</head>
 
</head>
 +
<body>
 +
<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 align="center">
 +
<div class="demo-card-wide mdl-card mdl-shadow--2dp" align="center">
 +
    <div class="mdl-card__title">
 +
        <h2 class="mdl-card__title-text">Welcome</h2>
 +
    </div>
 +
    <div class="mdl-card__supporting-text">
 +
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 +
        Mauris sagittis pellentesque lacus eleifend lacinia...
 +
    </div>
 +
    <div class="mdl-card__actions mdl-card--border">
 +
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
 +
            Get Started
 +
        </a>
 +
    </div>
 +
    <div class="mdl-card__menu">
 +
        <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
 +
            <i class="material-icons">share</i>
 +
        </button>
 +
    </div>
 +
</div>
 +
</div>
 +
 +
 +
</body>
 
</html>
 
</html>

Revision as of 02:50, 15 October 2017

Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
Get Started