<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
*{
box-sizing: border-box;
}
div{
/* border: 1px solid black;*/
padding: 1px;
}
.jumbotron{
background-color: #5bc0de;
}
</style>
</head>
<body>
<div class="container text-center">
<div class="row">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Cake Gallery</h1>
<p class="lead">Cake is a form of sweet food made from flour, sugar, and other ingredients, that is usually baked. In their oldest forms, cakes were modifications of bread, but cakes now cover a wide range of preparations that can be simple or elaborate, and that share features with other desserts such as pastries, meringues, custards, and pies.</p>
</div>
</div>
</div>
<div class="row">
<div class="navi col-sm-12">
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<!-- <a class="navbar-brand" href="#">navi</a>-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" ></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup" >
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">About us</a>
<a class="nav-item nav-link" href="#">Portfolio</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Contact</a>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="left col-sm-2 d-none d-sm-block">
</div>
<div class="left col-sm-7 order-2 order-sm-1">
<div class="row">
<div class="col">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="cake0001.jpg">
</div>
<div class="carousel-item">
<img src="cake0002.jpg">
</div>
<div class="carousel-item">
<img src="cake0003.jpg">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6">
<div class="card">
<img src="cake01.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Chocolate cake or chocolate gâteau is a cake flavored with melted chocolate, cocoa powder, or both.</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="card">
<img src="cake02.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Most accounts of the origin of tiramisu date its invention to the 1960s in the region of Veneto, Italy.</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="card">
<img src="cake03.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">A birthday cake is a cake eaten as part of a birthday celebration in many world traditions.</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="card">
<img src="cake04.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Sponge cake is a light cake made with eggs, flour and sugar, sometimes leavened with baking powder. </p>
</div>
</div>
</div>
</div>
</div>
<div class="right col-sm-3 order-1 order-sm-2 order-1">
<div class="row">
<div class="col-sm ">
<input type="text" placeholder="Input your id" style="width: 100%" >
</div>
</div>
<div class="row">
<div class="col-sm ">
<input type="password" placeholder="Input your pw" style="width: 100%">
</div>
</div>
<div class="row">
<div class="col-6 col-sm-6 text-right">
<button type="button" class="btn btn-info">SignIn</button>
</div>
<div class="col-6 col-sm-6 text-left">
<button type="button" class="btn btn-outline-info">SignUp</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="footer col-sm-12 h6">
2020-04-09 / Bootstrap4
</div>
</div>
</div>
</body>
</html>