Material UI

by kuonyuu

HTML

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->


<div class="titlePanel">
	<div class="title">
		【 Title 】
		<div class="sub">● small description</div>
	</div>
</div>

<div class="cont">
	<div class="menu">
		<!-- <div class="title subTitle">Menu</div> -->
		<div class="item">
			<div class="label">Item Name 1</div>
			<div class="sub">● small description</div>
		</div>

		<div class="item">
			<div class="label">Item Name 2</div>
			<div class="sub">● small description</div>
		</div>

		<div class="item">
			<div class="label">Item Name 2</div>
			<div class="sub">● small description</div>
		</div>
		<div class="item">
			<div class="label">Item Name 2</div>
			<div class="sub">● small description</div>
		</div>
		<div class="item">
			<div class="label">Item Name 2</div>
			<div class="sub">● small description</div>
		</div>
		<div class="item">
			<div class="label">Item Name 2</div>
			<div class="sub">● small description</div>
		</div>
		<div class="item">
			<div class="label">Item Name 2</div>
			<div class="sub">● small description</div>
		</div>
		<div class="item">
			<div class="label">Item Name 2</div>
			<div class="sub">● small description</div>
		</div>
		<div class="item">
			<div class="label">Item Name 2</div>
			<div class="sub">● small description</div>
		</div>
		<div class="item">
			<div class="label">Item Name 2</div>
			<div class="sub">● small description</div>
		</div>
		<div class="item">
			<div class="label">Item Name 2</div>
			<div class="sub">● small description</div>
		</div>
		<div class="item">
			<div class="label">Item Name 2</div>
			<div class="sub">● small description</div>
		</div>
		<div class="item">
			<div class="label">Item Name 2</div>
			<div class="sub">● small description</div>
		</div>
		<div class="item">
			<div class="label">Item Name 2</div>
			<div class="sub">● small description</div>
		</div>
		<div class="item">
			<div class="label">Item Name 2</div>
			<div class="sub">● small...

CSS

body, html {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.titlePanel {
	background-color: #293a4a;
	
	color: #1abc9c;
	
	padding: 16px 24px;
}

.title {
	font-size: 32px;
	margin-bottom: 4px;
}

.subTitle {
	font-size: 20px;
	padding: 12px 16px;
}

.sub {
	color: #c0c1c2;
	font-size: 14px;
	padding-left: 32px;
}

.item {
	padding: 12px 24px;
	color: white;
	border-bottom: .05em solid #c0c1c233;
}

.item:hover {
	color: #293a4a;
	background-color: #1abc9c;
	cursor: pointer;
}

.item:hover .sub {
	color: #34495e;
}


.label {
	font-size: 16px;
}

.para {
	padding: 32px 48px;
	margin-bottom: 12px;
	font-size: 15px;
	color: #7f8c8d;
	text-align: justify;
}

.qoute {
	margin-left: 56px;
	padding-left: 32px;
	border-left: 3px solid #dadada;
	margin-bottom: 12px;
}

.main img {
	width: 100%;
}

.main .label {
	font-size: 18px;
	color: #16a085;
	padding: 32px 56px 16px;
	border-bottom: 1px solid #d3d3d3;
}

.main .sub {
	padding: 12px 56px ;
	color: #b2b2b2;
	margin-bottom: 20px;
}

.menu .subTitle {
	color: #16a085;
	border-bottom: 1px solid #16a085;
}

.item .sub {
	font-size: 13px;
	padding-left: 0;
	color: #798795;
}

.cont {
	display: grid;
	grid-template-areas: 'menu main main main';

  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  width: 100vw;
  height: 91vh;

}

.menu	{
	// grid-column: 1;
	grid-row: 3;
	grid-area: menu;
	background-color: #293a4a;
	overflow: auto;
}

.main {
	// grid-column: 3;
	grid-row: 3;
	grid-area: main;
	background-color: #ecf0f1;
	color: #34495e;
	overflow: auto;
}

.main .subTitle {
	font-size: 24px;
	color: #798795;
	padding: 32px 56px;
	margin-bottom: 0;
	border-bottom: 1px solid #d3d3d3;
}