<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root{--text-color:#f0f4f5; --background-color:#263343; --accent-color:pink;}
body{font-family: Verdana, Geneva, Tahoma, sans-serif;font-size: 15px;margin: 0px;}
a {text-decoration: none;color: var(--text-color);}
.navbar {background-color: #26282b;font-size: 15px;color: #e1e2e3;display: flex;justify-content: space-between;align-items: center;padding:5px 20px;}
.logo{font-size: 24px;color:var(--accent-color);}
.logo a:hover{color:peru;}
.menu-bar{list-style: none;display: flex;padding-left: 0px; border: 0px solid;}
.menu-bar li:hover {background-color: peru;}
.menu-bar li{padding: 8px 15px;}
.right-menu{border: 0px solid;display: flex;list-style: none;}
.right-menu li {padding:8px 10px;}
.main{background-color: #f4edf5;color:#474747}
@media screen and (max-width:768px){
.navbar{flex-direction: column;align-items: flex-start;padding: 10px;}
.logo{}
.menu-bar{flex-direction: column;width: 100%;align-items:center}
.menu-bar li{width: 100%;text-align: center;}
.right-menu{justify-content: center;width: 100%;}
}
</style>
<script src="http://kit.fontawesome.com/2d323a629b.js"></script>
</head>
<body>
<!-- justify-content: space-between;align-items: center; @media screen and (max-width:768px)-->
<nav class="navbar">
<div class="logo">
<i class="fab fa-accusoft"></i>
<a href="">DreamCoding</a>
</div>
<ul class="menu-bar">
<li><a href="">menu1</a></li>
<li><a href="">menu2</a></li>
<li><a href="">menu3</a></li>
<li><a href="">menu4</a></li>
<li><a href="">menu5</a></li>
</ul>
<nav class="right-menu">
<li><i class="fab fa-android"></i></li>
<li><i class="fab fa-apple"></i></li>
</nav>
</nav>
<div class="main"></div>
</body>
</html>
댓글 없음:
댓글 쓰기