Need a unique gift idea?
A Pastebin account makes a great Christmas gift
SHARE
TWEET

Untitled

a guest Feb 23rd, 2018 65 Never
Upgrade to PRO!
ENDING IN00days00hours00mins00secs
 
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width,initial-scale=1">
  4.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  5.     <link rel="stylesheet" href="home.css" >
  6.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  7.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  8.     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  9.     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  10.     <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  11.     <title>Home</title>
  12. </head>
  13.  
  14. <body>
  15.     <div id="page-container">
  16.         <nav class="menu">
  17.             <header>
  18.                 <h1>WEB SITE</h1>
  19.             </header>
  20.             <input id="nav-input" type="checkbox" class="nav-unshown">
  21.             <label id="nav-open" for="nav-input"><span></span></label>
  22.             <label class="nav-unshown" id="nav-close" for="nav-input"></label>
  23.             <div id="nav-content">
  24.             <ul class="sidebar-ul" id="menu">
  25.                 <li>
  26.                     <a class="home" href="home.html">Home</a>
  27.                 </li>
  28.                 <li>
  29.                     <a class="profile" href="profile.html">Profile</a>
  30.                 </li>
  31.             </ul>
  32.             </div>
  33.             <ul id="social">
  34.                 <li>
  35.                     <a class="contact" href="">
  36.                         <i class="icon_head" aria-hidden="true"></i>Email</a>
  37.                 </li>
  38.                 <li>
  39.                     <a class="contact" href="">
  40.                         <i class="icon_head" aria-hidden="true"></i>Facebook</a>
  41.                 </li>
  42.             </ul>
  43.         </nav>
  44.         <main>
  45.             <div id="carousel-container">
  46.                 <div id="myCarousel" class="carousel slide" data-ride="carousel">
  47.                     <ol class="carousel-indicators">
  48.                         <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  49.                         <li data-target="#myCarousel" data-slide-to="1"></li>
  50.                     </ol>
  51.                     <div class="carousel-inner">
  52.                         <div class="item active">
  53.                             <img class="img-responsive" src="test1.jpg" alt="Arch">
  54.                             <p>WELCOME</p>
  55.                         </div>
  56.  
  57.                         <div class="item contain">
  58.                             <img class="img-responsive" src="test2.jpg" alt="Nature">
  59.                             <p>MY SITE</p>
  60.                         </div>
  61.                     </div>
  62.                 </div>
  63.             </div>
  64.  
  65.         </main>
  66.     </div>
  67. </body>
  68.  
  69. </html>
  70.    
  71. @media all and (max-width: 1500px) {
  72. body,
  73. html {
  74.     margin: 0;
  75.     height: 100%;
  76. }
  77.  
  78. #page-container {
  79.     display: grid;
  80.     grid-template-columns: 1fr 3fr;
  81.     grid-template-areas: "NAV MAIN";
  82.     height: 100%;
  83. }
  84.  
  85. nav {
  86.     grid-area: NAV;
  87.     background-color: black;
  88.     height: 100%;
  89.     float: left;
  90.     display: grid;
  91.     grid-template-rows: 1fr 1fr 1fr 1fr;
  92.     grid-template-areas: "HEADER" "MENU" "SOCIAL" "COPYRIGHT";
  93. }
  94.  
  95. .nav-unshown {
  96.   display:none;
  97. }
  98.  
  99. main {
  100.     grid-area: MAIN;
  101. }
  102.  
  103. header {
  104.     grid-area: HEADER;
  105. }
  106.  
  107. header h1 {
  108.     color: white;
  109.     text-align: center;
  110.     font-size: 30px;
  111. }
  112.  
  113. #menu {
  114.     grid-area: MENU;
  115.     display: flex;
  116.     flex-direction: column;
  117.     justify-content: center;
  118.     padding-left: 0px;
  119. }
  120.  
  121. #menu>li {
  122.     margin: 10px 10px;
  123.     padding: 2px 0px;
  124. }
  125.  
  126. #menu>li:hover>a {
  127.     color: white;
  128.     text-decoration: none;
  129. }
  130.  
  131. #social {
  132.     grid-area: SOCIAL;
  133.     display: flex;
  134.     flex-direction: column;
  135.     justify-content: center;
  136.     padding-left: 0px;
  137. }
  138.  
  139. #social>li {
  140.     margin: 10px 10px;
  141.     padding: 2px 0px;
  142. }
  143.  
  144. #copy-right {
  145.     grid-area: COPYRIGHT;
  146.     color: white;
  147.     text-align: center;
  148. }
  149.  
  150. #carousel-container {
  151.     width: 100%;
  152.     height: 100%;
  153. }
  154.  
  155. li {
  156.     list-style: none;
  157. }
  158.  
  159. li a {
  160.     display: block;
  161.     text-decoration: none;
  162.     color: white;
  163.     text-align: center;
  164.     font-size: 20px;
  165. }
  166.  
  167. .icon_head {
  168.     padding-right: 10px;
  169. }
  170.  
  171. .carousel {
  172.     height: 100%;
  173. }
  174.  
  175. .carousel-inner {
  176.     height: 100%;
  177. }
  178.  
  179. .carousel-inner>.item {
  180.     height: 100%;
  181. }
  182.  
  183. .carousel-inner>.item>img {
  184.     height: 100%;
  185. }
  186.  
  187. .item {
  188.     position:relative;
  189. }
  190.  
  191. .item p{
  192.     position: absolute;
  193.     color: white;
  194.     font-weight: bold;
  195.     font-size: 3em;
  196.     top: 20%;
  197.     left: 50%;
  198.     -ms-transform: translate(-50%,-50%);
  199.     -webkit-transform: translate(-50%,-50%);
  200.     transform: translate(-50%,-50%);
  201.     margin:0;
  202.     padding:0;
  203. }
  204. }
  205.  
  206. @media all and (min-width: 500px) {
  207.  
  208. #page-container {
  209.     display: grid;
  210.     grid-template-columns: 1fr 4fr;
  211.     grid-template-areas: "NAV MAIN";
  212.     height: 100%;
  213. }
  214.  
  215. nav {
  216.     grid-area: NAV;
  217.     background-color: white;
  218.     height: 100%;
  219.     float: left;
  220.     display: grid;
  221.     grid-template-rows: 1fr 1fr 1fr 1fr;
  222.     grid-template-areas: "HEADER" "MENU" "SOCIAL" "COPYRIGHT";
  223. }
  224.  
  225.  
  226. /*アイコンのスペース*/
  227. #nav-open {
  228.   display: inline-block;
  229.   width: 30px;
  230.   height: 22px;
  231.   vertical-align: middle;
  232. }
  233.  
  234. /*ハンバーガーアイコンをCSSだけで表現*/
  235. #nav-open span, #nav-open span:before, #nav-open span:after {
  236.   position: absolute;
  237.   height: 3px;/*線の太さ*/
  238.   width: 25px;/*長さ*/
  239.   border-radius: 3px;
  240.   background: #555;
  241.   display: block;
  242.   content: '';
  243.   cursor: pointer;
  244. }
  245. #nav-open span:before {
  246.   bottom: -8px;
  247. }
  248. #nav-open span:after {
  249.   bottom: -16px;
  250. }
  251.  
  252. /*閉じる用の薄黒カバー*/
  253. #nav-close {
  254.   display: none;/*はじめは隠しておく*/
  255.   position: fixed;
  256.   z-index: 99;
  257.   top: 0;/*全体に広がるように*/
  258.   left: 0;
  259.   width: 100%;
  260.   height: 100%;
  261.   background: black;
  262.   opacity: 0;
  263.   transition: .3s ease-in-out;
  264. }
  265.  
  266. /*中身*/
  267. #nav-content {
  268.   overflow: auto;
  269.   position: fixed;
  270.   top: 0;
  271.   left: 0;
  272.   z-index: 9999;/*最前面に*/
  273.   width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/
  274.   max-width: 330px;/*最大幅(調整してください)*/
  275.   height: 100%;
  276.   background: #fff;/*背景色*/
  277.   transition: .3s ease-in-out;/*滑らかに表示*/
  278.   -webkit-transform: translateX(-105%);
  279.   transform: translateX(-105%);/*左に隠しておく*/
  280. }
  281.  
  282. /*チェックが入ったらもろもろ表示*/
  283. #nav-input:checked ~ #nav-close {
  284.   display: block;/*カバーを表示*/
  285.   opacity: .5;
  286. }
  287.  
  288. #nav-input:checked ~ #nav-content {
  289.   -webkit-transform: translateX(0%);
  290.   transform: translateX(0%);/*中身を表示(右へスライド)*/
  291.   box-shadow: 6px 0 25px rgba(0,0,0,.15);
  292. }
  293.  
  294. }
  295.    
  296. .nav-unshown {
  297.   display:none;
  298. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top