Untitled

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="home.css" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <title>Home</title>
</head>

<body>
    <div id="page-container">
        <nav class="menu">
            <header>
                <h1>WEB SITE</h1>
            </header>
            <input id="nav-input" type="checkbox" class="nav-unshown">
            <label id="nav-open" for="nav-input"><span></span></label>
            <label class="nav-unshown" id="nav-close" for="nav-input"></label>
            <div id="nav-content">
            <ul class="sidebar-ul" id="menu">
                <li>
                    <a class="home" href="home.html">Home</a>
                </li>
                <li>
                    <a class="profile" href="profile.html">Profile</a>
                </li>
            </ul>
            </div>
            <ul id="social">
                <li>
                    <a class="contact" href="">
                        <i class="icon_head" aria-hidden="true"></i>Email</a>
                </li>
                <li>
                    <a class="contact" href="">
                        <i class="icon_head" aria-hidden="true"></i>Facebook</a>
                </li>
            </ul>
        </nav>
        <main>
            <div id="carousel-container">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="item active">
                            <img class="img-responsive" src="test1.jpg" alt="Arch">
                            <p>WELCOME</p>
                        </div>

                        <div class="item contain">
                            <img class="img-responsive" src="test2.jpg" alt="Nature">
                            <p>MY SITE</p>
                        </div>
                    </div>
                </div>
            </div>

        </main>
    </div>
</body>

</html>

@media all and (max-width: 1500px) {
body,
html {
    margin: 0;
    height: 100%;
}

#page-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "NAV MAIN";
    height: 100%;
}

nav {
    grid-area: NAV;
    background-color: black;
    height: 100%;
    float: left;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "HEADER" "MENU" "SOCIAL" "COPYRIGHT";
}

.nav-unshown {
  display:none;
}

main {
    grid-area: MAIN;
}

header {
    grid-area: HEADER;
}

header h1 {
    color: white;
    text-align: center;
    font-size: 30px;
}

#menu {
    grid-area: MENU;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0px;
}

#menu>li {
    margin: 10px 10px;
    padding: 2px 0px;
}

#menu>li:hover>a {
    color: white;
    text-decoration: none;
}

#social {
    grid-area: SOCIAL;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0px;
}

#social>li {
    margin: 10px 10px;
    padding: 2px 0px;
}

#copy-right {
    grid-area: COPYRIGHT;
    color: white;
    text-align: center;
}

#carousel-container {
    width: 100%;
    height: 100%;
}

li {
    list-style: none;
}

li a {
    display: block;
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 20px;
}

.icon_head {
    padding-right: 10px;
}

.carousel {
    height: 100%;
}

.carousel-inner {
    height: 100%;
}

.carousel-inner>.item {
    height: 100%;
}

.carousel-inner>.item>img {
    height: 100%;
}

.item {
    position:relative;
}

.item p{
    position: absolute;
    color: white;
    font-weight: bold;
    font-size: 3em;
    top: 20%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
    padding:0;
}
}

@media all and (min-width: 500px) {

#page-container {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-areas: "NAV MAIN";
    height: 100%;
}

nav {
    grid-area: NAV;
    background-color: white;
    height: 100%;
    float: left;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "HEADER" "MENU" "SOCIAL" "COPYRIGHT";
}


/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

}

.nav-unshown {
  display:none;
}