"theme customise"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/kbrtrm/pen/QdXYvy" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6827072/7087552/css/fonts.css" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.0/flexboxgrid.min.css'><link rel='stylesheet prefetch' href='//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css'> <style class="cp-pen-styles">.tc-grey-10 { color: #F2F3F4; } .tc-grey-20 { color: #DADEDF; } .tc-grey-30 { color: #C1C7C9; } .tc-grey-40 { color: #A7B0B2; } .tc-grey-50 { color: #8C979A; } .tc-grey-60 { color: #707C80; } .tc-grey-70 { color: #555F61; } .tc-grey-80 { color: #373D3F; } .tc-grey-90 { color: #131516; } .tc-indigo { color: #0D3D56; } .tc-kelvin { color: #0F5B78; } .tc-skye { color: #117899; } .tc-alice { color: #1496BB; } .tc-jade { color: #5CA794; } .tc-kelly { color: #A3B86C; } .tc-daisy { color: #EBC944; } .tc-amber { color: #EDAA38; } .tc-april { color: #F08C2D; } .tc-coral { color: #F26D21; } .tc-rowan { color: #D94E20; } .tc-ruby { color: #C02F1D; } .bg-indigo { background-color: #0D3D56 !important; } .bg-kelvin { background-color: #0F5B78 !important; } .bg-skye { background-color: #117899 !important; } .bg-alice { background-color: #1496BB !important; } .bg-jade { background-color: #5CA794 !important; } .bg-kelly { background-color: #A3B86C !important; } .bg-daisy { background-color: #EBC944 !important; } .bg-amber { background-color: #EDAA38 !important; } .bg-april { background-color: #F08C2D !important; } .bg-coral { background-color: #F26D21 !important; } .bg-rowan { background-color: #D94E20 !important; } .bg-ruby { background-color: #C02F1D !important; } .bg-grey-10 { background-color: #F2F3F4; } .bg-grey-20 { background-color: #DADEDF; } .bg-grey-30 { background-color: #C1C7C9; } .bg-grey-40 { background-color: #A7B0B2; } .bg-grey-50 { background-color: #8C979A; } .bg-grey-60 { background-color: #707C80; } .bg-grey-70 { background-color: #555F61; } .bg-grey-80 { background-color: #373D3F; } .bg-grey-90 { background-color: #131516; } * { -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-size: 18px; font-family: "Gotham SSm A", "Gotham SSm B", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.43; color: #131516; } h1, h2, h3, h4, h5, h6 { font-family: "Gotham SSm A", "Gotham SSm B", Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 600; } h5, h6 { font-weight: normal; } .navbar { font-family: "Gotham SSm A", "Gotham SSm B", Helvetica Neue, Helvetica, Arial, sans-serif; } p { margin: 1em 0; } .ta-left { text-align: left; } .ta-center { text-align: center; } .ta-right { text-align: right; } a { color: #1496BB; -webkit-transition: all .25s; transition: all .25s; } a:hover { color: #083a48; } .container { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 1em; } .fw .container { max-width: 1080px; } mark { background-color: #f0d672; padding: 0.125em; } code, kbd { background-color: #DADEDF; padding: 0.125em; } pre { background: #DADEDF; padding: 1em; overflow-x: scroll; } pre code { background: none; } table { width: 100%; max-width: 100%; border-collapse: collapse; border: 1px solid #DADEDF; } table thead th { border-bottom: 1px solid #A7B0B2; background: #F2F3F4; } table thead th + th { border-left: 1px solid #DADEDF; } table tr { font-family: "Gotham SSm A", "Gotham SSm B", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } table tr + tr td { border-top: 1px solid #DADEDF; } table tr td { padding: 0.125em; } table tr td + td { border-left: 1px solid #DADEDF; } caption, figcaption { font-size: .875em; } .bleed { padding: 3em 0; } .bleed h1, .bleed h2, .bleed h3, .bleed h4, .bleed h5, .bleed h6 { margin-top: 0; } .lead { font-size: 1.25em; margin: 1em 0; } .context-menu { padding-left: 0; font-size: 0.75em; margin-bottom: 0; padding: .5em 0; } .context-menu li { display: inline-block; } .context-menu li a { padding: .25em; display: block; width: 100%; text-decoration: none; border-radius: .25em; color: #8C979A; } .context-menu li a:hover { color: #373D3F; background: #F2F3F4; } .fw-sub-nav h1, .fw-sub-nav h2, .fw-sub-nav h3, .fw-sub-nav h4, .fw-sub-nav h5, .fw-sub-nav h6 { margin: .75em 0; } img { max-width: 100%; } .font-adj-sm { font-size: .75em; } .set { margin: 1em 0; } .set.flex-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .set.flex-grid .set-item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; max-width: 16.6666%; } .set-item { display: -webkit-box; display: -ms-flexbox; display: flex; padding: .5em; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .flex-grid-2 .set-item { min-width: 50%; } .flex-grid-3 .set-item { min-width: 33.3333%; } .flex-grid-4 .set-item { min-width: 25%; } .flex-grid-5 .set-item { min-width: 20%; } .flex-grid-6 .set-item { min-width: 16.6666%; } table { margin: 2em 0; } .set-list .row + .row { margin-top: 1.5em; } .sub-head { font-weight: normal; margin-top: -.5em; } .dept-header-dropdown { margin-top: .75rem; } .dept-header-dropdown > a { color: rgba(255, 255, 255, 0.5); font-family: "Gotham SSm A", "Gotham SSm B", Helvetica Neue, Helvetica, Arial, sans-serif; } img { max-width: 100%; height: auto; } .ind-event + .ind-event { margin-top: 1rem; } .card-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .card-grid:after { content: ""; -webkit-box-flex: 0; -ms-flex: 0 0 calc((100%/3 - 14px)); flex: 0 0 calc((100%/3 - 14px)); } .card-grid .card { padding: 0; border-radius: 0; margin-bottom: 1.5rem; -ms-flex-preferred-size: 100%; flex-basis: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; /* Breakpoint for large viewport */ /* Breakpoint for extra-large viewport */ } .card-grid .card.card--person { padding: 1em 0; } .card-grid .card .card-desc { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } @media (min-width: 34em) { .card-grid .card { -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 48em) { .card-grid .card { -webkit-box-flex: 0; -ms-flex: 0 0 calc((100%/2 - 14px)); flex: 0 0 calc((100%/2 - 14px)); } } @media (min-width: 62em) { .card-grid .card { -webkit-box-flex: 0; -ms-flex: 0 0 calc((100%/2 - 14px)); flex: 0 0 calc((100%/2 - 14px)); } } @media (min-width: 75em) { .card-grid .card { -webkit-box-flex: 0; -ms-flex: 0 0 calc((100%/3 - 14px)); flex: 0 0 calc((100%/3 - 14px)); } } .cc-img { width: 100%; overflow: hidden; position: relative; height: 0; padding-bottom: 60%; max-height: 300px; /* Breakpoint for large viewport */ /* Breakpoint for extra-large viewport */ } @media (min-width: 34em) { .cc-img { max-height: 300px; } } @media (min-width: 48em) { .cc-img { height: 220px; } } @media (min-width: 62em) { .cc-img { height: 300px; } } @media (min-width: 75em) { .cc-img { height: 250px; } } .cc-img.cc-img-circle { height: 100px; width: 100px; border-radius: 50%; overflow: hidden; max-height: initial; padding-bottom: initial; margin: 0 auto; margin-top: -50px; margin-bottom: .25em; } .cc-img img { position: absolute; left: -1000%; right: -1000%; top: -1000%; bottom: -1000%; margin: auto; min-height: 100px; min-width: 100px; max-width: 105%; } div.center-cropped { width: 100%; height: 25px; overflow: hidden; } div.center-cropped img { height: 100%; min-width: 100%; left: 50%; position: relative; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .dept-header-title h1 { font-family: "Gotham SSm A", "Gotham SSm B", Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: bold; border-right: 2px solid rgba(255, 255, 255, 0.3); padding-right: 1em; } .sub-title { font-weight: normal; top: 1.5em; position: absolute; z-index: 100; padding-left: 1em; } .card-list { margin: 0 -1px; } .card-list .list-group-item { border-radius: 0; } .address { font-size: .85em; line-height: 1.3; } /* * mod 3 * first two, common to all queries */ .card-block.caption { padding: .5rem .75rem; font-size: .8rem; } .card-block.caption p { margin-bottom: 0; } .card-profile .card-block { padding: .75rem 1.25rem; text-align: center; } .feat-work-bg { width: 100%; height: 0; padding-bottom: 50%; background-size: cover; background-position: center center; } .greedy-nav { position: relative; min-width: 250px; } .greedy-nav a { display: block; padding: 1rem; font-size: .7rem; color: #555F61; text-decoration: none; } .greedy-nav a:hover { color: #131516; } .greedy-nav button { position: absolute; height: 100%; right: 0; padding: 0 20px; border: 0; outline: none; background-color: #F2F3F4; color: #fff; cursor: pointer; } .greedy-nav button:hover { background-color: #DADEDF; } .greedy-nav button::after { content: ""; position: absolute; width: 60px; height: 100%; left: -60px; top: 0px; text-align: center; /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: -webkit-gradient(linear, left top, right top, from(rgba(242, 243, 244, 0)), color-stop(50%, #f2f3f4)); background: linear-gradient(to right, rgba(242, 243, 244, 0) 0%, #f2f3f4 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f2f3f4', endColorstr='#f2f3f4',GradientType=1 ); /* IE6-9 */ color: #fff; font-size: 14px; line-height: 24px; font-weight: bold; } .greedy-nav .hamburger { position: relative; width: 5px; height: 5px; background: #aaa; margin: auto; border-radius: 5px; } .greedy-nav .hamburger:before, .greedy-nav .hamburger:after { content: ''; position: absolute; left: 0; width: 5px; height: 5px; background: #aaa; border-radius: 5px; } .greedy-nav .hamburger:before { left: -8px; } .greedy-nav .hamburger:after { left: initial; right: -8px; } .greedy-nav .visible-links { display: inline-table; } .greedy-nav .visible-links li { display: table-cell; } .greedy-nav .hidden-links { position: absolute; right: 0px; top: 100%; background: #F2F3F4; } .greedy-nav .hidden-links li { display: block; z-index: 200; } .greedy-nav .hidden { visibility: hidden; } .greedy-nav ul { margin-bottom: 0; padding-left: 0; } .greedy-nav-container { padding: 0; } .lead { font-weight: inherit; } .my-4 { margin-top: 4rem !important; margin-bottom: 4rem !important; } .card--person { padding: 1em 0; display: -webkit-box; display: -ms-flexbox; display: flex; } .card--person .img-hold { width: 65px; padding-top: 20px; min-height: 50px; } .lead .card--person .img-hold { padding-top: 25px; } .card--person .name-hold { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .card--person .cc-img.cc-img-circle { width: 50px; height: 50px; } .card--person .cc-img.cc-img-circle img { min-height: 50px; min-width: 50px; } .card--person .card--person-name { font-size: .75em; display: block; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-weight: bold; } .card--person .card--person-title { font-size: .75em; display: block; color: #aaa; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; } .card--person .card--person-action { font-size: .75em; display: block; color: #aaa; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; margin-top: .5em; } .card--person .card--person-action a + a { margin-left: .5em; } .no-border { border: none; } .dept-img { background: url(http://www.saic.edu/sites/default/files/HPRES_hero%20image_looking%20up.jpg); background: url(http://www.saic.edu/sites/default/files/Untitled-2.jpg); background-color: "#000"; background-blend-mode: multiply; background-size: cover; margin: -1rem; position: relative; opacity: .2; top: 0; bottom: 0; left: 0; right: 0; position: absolute; } .dept-img:after { content: ''; width: 150px; height: 100%; position: absolute; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1496bb+0,1496bb+100&1+0,0+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: -webkit-gradient(linear, left top, right top, from(#1496bb), to(rgba(20, 150, 187, 0))); background: linear-gradient(to right, #1496bb 0%, rgba(20, 150, 187, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1496bb', endColorstr='#001496bb',GradientType=1 ); /* IE6-9 */ left: 0; } .dept-img:before { content: ''; width: 150px; height: 100%; position: absolute; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1496bb+0,1496bb+100&0+0,1+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: -webkit-gradient(linear, left top, right top, from(rgba(20, 150, 187, 0)), to(#1496bb)); background: linear-gradient(to right, rgba(20, 150, 187, 0) 0%, #1496bb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00'$bgc-hex, endColorstr=$bgc-hex,GradientType=1 ); /* IE6-9 */ right: 0; } .blockquote-bubble { background: #eee; padding: 1em; border-radius: 4px; position: relative; } .blockquote-bubble:after { content: ''; width: 0; height: 0; position: absolute; border-style: solid; border-width: 15px 15px 0 15px; border-color: #eeeeee transparent transparent transparent; bottom: -12px; left: 10px; display: block; } .table { margin-top: 0; } .list--person-card { list-style-type: none; padding-left: 0; } /*! * Yamm!3 * Yet another megamenu for Bootstrap 3 * * https://geedmo.github.com/yamm3 */ .yamm .nav, .yamm .collapse, .yamm .dropup, .yamm .dropdown { position: static; } .yamm .container { position: relative; } .yamm .dropdown-menu { left: auto; } .yamm .nav.navbar-right .dropdown-menu { left: auto; right: 0; } .yamm .yamm-content { padding: 20px 30px; } .yamm .dropdown.yamm-fw .dropdown-menu { left: 0; right: 0; } .list-unstyled, .list-unstyled ul { min-width: 120px; } @media (min-width: 767px) { .panel-group { width: 400px; } .thumbnail { margin: 0; } } /* Grid demo styles */ .grid-demo { padding: 1em; } .m52 { margin-top: 52px; } .dropdown-menu { border-radius: 0; margin-top: 0; padding: 0; border: 0; } img { max-width: 100%; } #aiado-header { background: url("http://saic.edu/media/saic/gfx/homepage/SAICwhitetorkshelveswateringACJN16.jpg"); height: 400px; background-size: cover; background-position: center center; max-height: 400px; } .navbar { padding: 0 1em; font-size: .8rem; } .navbar.navbar-toggleable-md .nav-item { padding: .25em .25em; } .navbar.navbar-subnav { font-size: .8em; padding-left: 16px; font-size: .8rem; } .navbar .navbar-brand { font-weight: bold; } .nav-item.active { position: relative; } p.lead { font-size: 1.25em; } .card--person { padding: 1em 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .card--person .img-hold { width: 65px; padding-top: 20px; min-height: 50px; } .lead .card--person .img-hold { padding-top: 25px; } .card--person .name-hold { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .card--person .cc-img.cc-img-circle { width: 50px; height: 50px; } .card--person .cc-img.cc-img-circle img { min-height: 50px; min-width: 50px; } .card--person .card--person-name { font-size: .75em; display: block; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; font-weight: bold; } .card--person .card--person-title { font-size: .75em; display: block; color: #aaa; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; } .card--person .card--person-action { font-size: .75em; display: block; color: #aaa; font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif; margin-top: .5em; } .card--person .card--person-action a + a { margin-left: .5em; } .control-toggles { position: fixed; bottom: 10px; right: 10px; z-index: 100; background: rgba(220, 220, 220, 0.8); padding: 1em; border-radius: 4px; font-size: .8em; max-width: 350px; } .control-toggles ul { list-style-type: none; padding-left: 0; margin-bottom: 0; } .control-toggles label.btn-primary { border: none; -webkit-transition: none; transition: none; } .control-toggles label.btn-primary:hover, .control-toggles label.btn-primary:focus, .control-toggles label.btn-primary.active { background-color: inherit; -webkit-box-shadow: 1px 1px 0px #000, 0 0 0px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000; box-shadow: 1px 1px 0px #000, 0 0 0px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000; z-index: 200; cursor: pointer; } #apply1 { border: none; } </style></head><body> <div class="control-toggles"> <small class="mb-2 d-block">Theme Color</small> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary btn-sm bg-indigo" data-color-class="bg-indigo"> <input type="radio" name="options" id="option1" autocomplete="off" checked>  </label> <label class="btn btn-primary btn-sm bg-kelvin" data-color-class="bg-kelvin"> <input type="radio" name="options" id="option2" autocomplete="off">  </label> <label class="btn btn-primary btn-sm bg-skye" data-color-class="bg-skye"> <input type="radio" name="options" id="option3" autocomplete="off">  </label> <label class="btn btn-primary btn-sm bg-alice" data-color-class="bg-alice"> <input type="radio" name="options" id="option1" autocomplete="off" checked>  </label> <label class="btn btn-primary btn-sm bg-jade" data-color-class="bg-jade"> <input type="radio" name="options" id="option2" autocomplete="off">  </label> <label class="btn btn-primary btn-sm bg-kelly" data-color-class="bg-kelly"> <input type="radio" name="options" id="option3" autocomplete="off">  </label> <label class="btn btn-primary btn-sm bg-daisy" data-color-class="bg-daisy"> <input type="radio" name="options" id="option1" autocomplete="off" checked>  </label> <label class="btn btn-primary btn-sm bg-amber" data-color-class="bg-amber"> <input type="radio" name="options" id="option2" autocomplete="off">  </label> <label class="btn btn-primary btn-sm bg-april" data-color-class="bg-april"> <input type="radio" name="options" id="option3" autocomplete="off">  </label> <label class="btn btn-primary btn-sm bg-coral" data-color-class="bg-coral"> <input type="radio" name="options" id="option1" autocomplete="off" checked>  </label> <label class="btn btn-primary btn-sm bg-rowan" data-color-class="bg-rowan"> <input type="radio" name="options" id="option2" autocomplete="off">  </label> <label class="btn btn-primary btn-sm bg-ruby" data-color-class="bg-ruby"> <input type="radio" name="options" id="option3" autocomplete="off">  </label> </div> <small class="mt-2 mb-2 d-block">Header Style</small> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked> Full-width hero </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2"> No hero </label> </div> </div> <nav class="navbar navbar-toggleable-sm bg-kelvin navbar-inverse py-2" id="main-nav"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">SAIC</a> <div class="collapse navbar-collapse" id="navbarColor01"> <ul class="navbar-nav justify-content-between"> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Academics</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Admissions</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Financial Aid & Tuition</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Student Life</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Continuing Studies</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Public Programs</a> </li> </ul> <!-- <form class="form-inline"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button> </form> --> </div> </nav> <div class="container-fluid bg-primary hero-header" id="aiado-header"> </div> <!-- <div class="m52"></div> --> <nav class="navbar navbar-subnav navbar-toggleable-md navbar-light bg-faded py-2"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar02" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#" data-dept-name="Architecture Interior Architecture, and Designed Objects">AIADO</a> <div class="collapse navbar-collapse" id="navbar02"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#">Undergraduate Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Graduate Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Courses</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Students/Alumni</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Faculty</a> </li> <li class="nav-item"> <a class="nav-link" href="#">External Partnerships</a> </li> <!-- <li class="nav-item"> <a class="nav-link" href="#">Resources</a> </li> --> <li class="nav-item"> <a class="nav-link" href="#">News</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Events</a> </li> <!-- <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> --> </ul> <a href="#" class="btn btn-primary nav-link" id="apply1">Apply</a> </div> </nav> <div class="container mt-5"> <div class="row"> <div class="col-lg-8 offset-lg-2"> <p class="lead"> We teach design by asking questions: what is an object, a building, a space?—and by pursuing answers through a commitment to making and a dedication to experimental practice, interdisciplinary study, and community partnership. </p> <a href="#" class="link">Read the letter from the director</a> <span class="card card--person card--person-tiny no-border"> <span class="img-hold"> <span class="cc-img cc-img-circle"> <img src="http://www.saic.edu/sites/default/files/styles/adaptive_style/adaptive-image/public/jonathan%20.jpg?itok=-V8B9MOW" alt="" class="rounded-circle"> </span> </span> <span class="name-hold"> <span class="card--person-name">Jonathan D. Solomon</span> <span class="card--person-title"> Director of Architecture, Interior Architecture, and Designed Objects </span> </span> </span> </div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script> <script >$('document').ready(function(){ $('.nav-item').each(function(){ $(this).click(function(){ $('.nav-item').removeClass('active'); $(this).addClass('active'); }); }); $('input[type=radio][name=optionsRadios]').change(function() { if (this.value == 'option1') { $('.hero-header').show(); } else if (this.value == 'option2') { $('.hero-header').hide(); } }); function changeBgColor(elementId, newColor) { var classList = document.getElementById(elementId).className.split(/\s+/); for (var i = 0; i < classList.length; i++) {if (window.CP.shouldStopExecution(1)){break;}if (window.CP.shouldStopExecution(1)){break;} if (classList[i].indexOf('bg-') > -1) { classList[i] = newColor; } else { classList.push(newColor); } } window.CP.exitedLoop(1); window.CP.exitedLoop(1); var newClassSet = ""; for (var i = 0; i < classList.length; i++) {if (window.CP.shouldStopExecution(2)){break;}if (window.CP.shouldStopExecution(2)){break;} newClassSet += classList[i]+" "; } window.CP.exitedLoop(2); window.CP.exitedLoop(2); $('#'+elementId).removeClass(); $('#'+elementId).addClass(newClassSet); } $('.control-toggles .btn').each(function(){ $(this).click(function(){ var newColor = $(this).data('color-class'); changeBgColor('main-nav', newColor); changeBgColor('apply1', newColor); }); }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: