sdy
......@@ -11,15 +11,15 @@ a{text-decoration: none;color: black;}
}
#khu-logo{
align-content: space-between;
display: inline-block;
font-size: 0;
padding: 0;
border:none;
}
#khu-logo-font{
font-family: 'Black Han Sans', sans-serif;
align-content: space-between;
align-content: center;
font-size:20px;
line-height: inherit;
display: inline-block;
......@@ -28,15 +28,36 @@ a{text-decoration: none;color: black;}
}
.khu-nav{
display:flex;
justify-content: space-between;
padding:20px;
height:center;
background-color: white;
border-bottom: 1px solid #ebeaeb;
}
.khu-nav-row{
height: 100%;
display:flex;
justify-content: space-between;
padding-left: 200px;
padding-right: 200px;
}
#khu-start-button{
font-family: 'Black Han Sans', sans-serif;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: 0 0;
border: none;
cursor: pointer;
border-radius: 4px;
text-align: center;
background-color: #611f69;
color: #fff;
fill: #fff;
padding: 10px;
}
@media screen and (min-width:0) and (max-width:767px){.khu-nav-row{padding:0 4vw}
</style>
......
var Click={
Launchclick:function(color){
// var alist=document.querySelectorAll('a');
// var i =0;
// while(i<alist.length)
// {
// alist[i].style.color=color;
// i+=1;
// }
// }
//$('a').css('color',color); //jquery 사용한 것.
}
}
var Body = {
SetColor:function(color){
//document.querySelector('body').style.color= color;
$('body').css('color',color);
},
SetBackGruondColor:function(color){
//document.querySelector('body').style.backgroundColor= color;
$('body').css('backgroundColor',color);
}
}
function nightDayHandler(self){
if(self.value==='night')
{
Body.SetBackGruondColor('black')
Body.SetColor('white');
self.value= 'day';
Links.SetColor('powderblue');
}else{
Body.SetBackGruondColor('white')
Body.SetColor('black');
self.value= 'night';
Links.SetColor('blue');
}
}
<!doctype html>
<html>
<head>
<title>KHU KHU Chat</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style/style.css">
<style>
</style>
</head>
<body>
<title>KHU Chat</title>
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/Banner.css">
<script src="https://kit.fontawesome.com/6a5db0a2e0.js" crossorigin="anonymous"></script>
<link rel="icon" href="https://kit.fontawesome.com/6a5db0a2e0.js" />
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
<script src="JS/main.js"></script>
</head>
<body>
<header role="banner">
<nav class="khu-nav" role="navigation" aria-label="Primary navigation">
<div class="khu-nav-row">
<div class="khu-logo">
<a id="khu-logo" data-clog-click="" data-clog-ui-element="link_home" href="main.html" aria-label="Khu-logo" data-qa="logo">
<img src="img/Khu_Chat_Icon.svg" width="30px" hegiht="20px" alt="Khu Chat">
</a>
<a id="khu-logo-font" data-clog-click="" data-clog-ui-element="link_home" href="main.html" aria-label="Khu-logo-font" data-qa="logo">
Khu Chat
</a>
</div>
<div class ="khu-login" >
<a data-clog-click="" data-clog-ui-element="link_home" href="main.html" aria-label="Khu-logo-font" data-qa="logo">
Login
</a>
</div>
<div class="khu-signin">
<a data-clog-click="" data-clog-ui-element="link_home" href="main.html" aria-label="Khu-logo-font" data-qa="logo">
Sign in
</a>
</div>
<div class="khu-start-button">
<button id="khu-start-button" onclick="" data-clog-click="" data-clog-ui-element="link_home" href="main.html" aria-label="Khu-start-button" data-qa="logo">
Launch Chating
</button>
</div>
</div>
</nav>
<h1><a href="main.html" color:black>KHU Chatting service</a></h1>
<img src="image/welcome.jpg" class="image">
......@@ -46,6 +77,5 @@
</form>
</div>
</div>
</body>
</html>
......
This diff is collapsed. Click to expand it.