2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
minsung
2f289661 1 parent 27fb1056

make banner

Inline Side-by-side
Showing 3 changed files with 48 additions and 21 deletions
......@@ -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>
......
File mode changed
......@@ -7,29 +7,39 @@
<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">
<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>
<div id="khu-logo-font">
<a 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-nav-row-login">
<a data-clog-click="" data-clog-ui-element="link_home" href="login.html" aria-label="Khu-logo-font" data-qa="logo">
<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-nav-row-signin">
<a data-clog-click="" data-clog-ui-element="link_home" href="signin.html" aria-label="Khu-logo-font" data-qa="logo">
<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" 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>
</header>
......@@ -44,7 +54,3 @@
</div>
</body>
</html>
<nav class="c-nav c-nav--primary c-nav--alternate" role="navigation" aria-label="Primary Navigation"><div class="c-nav__row o-nav--primary o-content-container"><div class="c-slacklogo"><a data-clog-click="" data-clog-ui-element="link_home" data-clog-ui-component="inc_header_nav_deux" class="c-slacklogo--white" href="https://slack.com/intl/en-kr/" aria-label="Slack" data-qa="logo"><svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" viewBox="0 0 240 60" width="100" height="25" aria-label="Slack" class="c-slacklogo--white svg-replaced"><path d="m75.663 47.477 2.929-6.846c3.207 2.375 7.39 3.632 11.574 3.632 3.068 0 5.02-1.187 5.02-3.003-.07-5.03-18.477-1.118-18.617-13.764-.07-6.427 5.648-11.387 13.737-11.387 4.81 0 9.622 1.188 13.038 3.913l-2.737 6.992c-3.143-2.021-7.025-3.43-10.72-3.43-2.51 0-4.184 1.187-4.184 2.725.07 4.96 18.618 2.235 18.827 14.322 0 6.567-5.579 11.178-13.528 11.178-5.856 0-11.225-1.397-15.34-4.332m116.629-9.325a8.498 8.498 0 0 1 -7.405 4.33c-4.698 0-8.506-3.816-8.506-8.523s3.808-8.523 8.506-8.523a8.498 8.498 0 0 1 7.405 4.33l8.143-4.52c-3.05-5.451-8.868-9.137-15.548-9.137-9.839 0-17.815 7.991-17.815 17.85 0 9.858 7.976 17.85 17.815 17.85 6.68 0 12.498-3.686 15.548-9.137zm-82.477 12.958h10.18v-49.86h-10.179zm95.761-49.86v49.86h10.18v-14.938l12.063 14.938h13.012l-15.34-17.746 14.224-16.559h-12.454l-11.505 13.767v-29.322zm-54.218 15.557v4.053c-1.673-2.795-5.787-4.751-10.11-4.751-8.925 0-15.967 7.895-15.967 17.815s7.042 17.885 15.967 17.885c4.323 0 8.437-1.956 10.11-4.751v4.052h10.18v-34.303zm0 21.414c-1.464 2.445-4.532 4.26-7.948 4.26-4.699 0-8.507-3.815-8.507-8.522s3.808-8.523 8.507-8.523c3.416 0 6.484 1.886 7.948 4.4z"></path><path d="m21.902.148c-3.299 0-5.973 2.68-5.973 5.985a5.979 5.979 0 0 0 5.973 5.985h5.974v-5.985a5.98 5.98 0 0 0 -5.974-5.985m0 15.96h-15.929c-3.299 0-5.973 2.68-5.973 5.986 0 3.305 2.674 5.985 5.973 5.985h15.93c3.298 0 5.973-2.68 5.973-5.985 0-3.306-2.675-5.986-5.974-5.986" fill="#36c5f0"></path><path d="m59.734 22.094c0-3.306-2.675-5.986-5.974-5.986s-5.973 2.68-5.973 5.986v5.985h5.973a5.98 5.98 0 0 0 5.974-5.985m-15.929 0v-15.961a5.98 5.98 0 0 0 -5.974-5.985c-3.299 0-5.973 2.68-5.973 5.985v15.96c0 3.307 2.674 5.987 5.973 5.987a5.98 5.98 0 0 0 5.974-5.985" fill="#2eb67d"></path><path d="m37.831 60a5.98 5.98 0 0 0 5.974-5.985 5.98 5.98 0 0 0 -5.974-5.985h-5.973v5.985c0 3.305 2.674 5.985 5.973 5.985m0-15.96h15.93c3.298 0 5.973-2.68 5.973-5.986a5.98 5.98 0 0 0 -5.974-5.985h-15.929c-3.299 0-5.973 2.68-5.973 5.985a5.979 5.979 0 0 0 5.973 5.985" fill="#ecb22e"></path><path d="m0 38.054a5.979 5.979 0 0 0 5.973 5.985 5.98 5.98 0 0 0 5.974-5.985v-5.985h-5.974c-3.299 0-5.973 2.68-5.973 5.985m15.929 0v15.96c0 3.306 2.674 5.986 5.973 5.986a5.98 5.98 0 0 0 5.974-5.985v-15.961a5.979 5.979 0 0 0 -5.974-5.985c-3.299 0-5.973 2.68-5.973 5.985" fill="#e01e5a"></path></svg><svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" viewBox="0 0 240 60" width="100" height="25" aria-label="Slack" class="c-slacklogo--color svg-replaced"><path d="m75.663 47.477 2.929-6.846c3.207 2.375 7.39 3.632 11.574 3.632 3.068 0 5.02-1.187 5.02-3.003-.07-5.03-18.477-1.118-18.617-13.764-.07-6.427 5.648-11.387 13.737-11.387 4.81 0 9.622 1.188 13.038 3.913l-2.737 6.992c-3.143-2.021-7.025-3.43-10.72-3.43-2.51 0-4.184 1.187-4.184 2.725.07 4.96 18.618 2.235 18.827 14.322 0 6.567-5.579 11.178-13.528 11.178-5.856 0-11.225-1.397-15.34-4.332m116.629-9.325a8.498 8.498 0 0 1 -7.405 4.33c-4.698 0-8.506-3.816-8.506-8.523s3.808-8.523 8.506-8.523a8.498 8.498 0 0 1 7.405 4.33l8.143-4.52c-3.05-5.451-8.868-9.137-15.548-9.137-9.839 0-17.815 7.991-17.815 17.85 0 9.858 7.976 17.85 17.815 17.85 6.68 0 12.498-3.686 15.548-9.137zm-82.477 12.958h10.18v-49.86h-10.179zm95.761-49.86v49.86h10.18v-14.938l12.063 14.938h13.012l-15.34-17.746 14.224-16.559h-12.454l-11.505 13.767v-29.322zm-54.218 15.557v4.053c-1.673-2.795-5.787-4.751-10.11-4.751-8.925 0-15.967 7.895-15.967 17.815s7.042 17.885 15.967 17.885c4.323 0 8.437-1.956 10.11-4.751v4.052h10.18v-34.303zm0 21.414c-1.464 2.445-4.532 4.26-7.948 4.26-4.699 0-8.507-3.815-8.507-8.522s3.808-8.523 8.507-8.523c3.416 0 6.484 1.886 7.948 4.4z"></path><path d="m21.902.148c-3.299 0-5.973 2.68-5.973 5.985a5.979 5.979 0 0 0 5.973 5.985h5.974v-5.985a5.98 5.98 0 0 0 -5.974-5.985m0 15.96h-15.929c-3.299 0-5.973 2.68-5.973 5.986 0 3.305 2.674 5.985 5.973 5.985h15.93c3.298 0 5.973-2.68 5.973-5.985 0-3.306-2.675-5.986-5.974-5.986" fill="#36c5f0"></path><path d="m59.734 22.094c0-3.306-2.675-5.986-5.974-5.986s-5.973 2.68-5.973 5.986v5.985h5.973a5.98 5.98 0 0 0 5.974-5.985m-15.929 0v-15.961a5.98 5.98 0 0 0 -5.974-5.985c-3.299 0-5.973 2.68-5.973 5.985v15.96c0 3.307 2.674 5.987 5.973 5.987a5.98 5.98 0 0 0 5.974-5.985" fill="#2eb67d"></path><path d="m37.831 60a5.98 5.98 0 0 0 5.974-5.985 5.98 5.98 0 0 0 -5.974-5.985h-5.973v5.985c0 3.305 2.674 5.985 5.973 5.985m0-15.96h15.93c3.298 0 5.973-2.68 5.973-5.986a5.98 5.98 0 0 0 -5.974-5.985h-15.929c-3.299 0-5.973 2.68-5.973 5.985a5.979 5.979 0 0 0 5.973 5.985" fill="#ecb22e"></path><path d="m0 38.054a5.979 5.979 0 0 0 5.973 5.985 5.98 5.98 0 0 0 5.974-5.985v-5.985h-5.974c-3.299 0-5.973 2.68-5.973 5.985m15.929 0v15.96c0 3.306 2.674 5.986 5.973 5.986a5.98 5.98 0 0 0 5.974-5.985v-15.961a5.979 5.979 0 0 0 -5.974-5.985c-3.299 0-5.973 2.68-5.973 5.985" fill="#e01e5a"></path></svg></a></div><nav class="c-nav__list"><ul class="c-nav-level--1"><li class="c-nav--primary__listitem has_secondary" tabindex="0" data-qa="nav_features_main" role="button"><span class="v--main">Why Slack?</span><ul class="c-nav-level--2"><li><a href="https://slack.com/intl/en-kr/features" data-clog-click="" data-clog-ui-element="link_features" data-clog-ui-component="inc_header_nav">Features</a></li><li><a href="https://slack.com/intl/en-kr/why/slack-vs-email" data-clog-click="" data-clog-ui-element="link_slack_vs_email" data-clog-ui-component="inc_header_nav">How it replaces email</a></li><li><a href="https://slack.com/intl/en-kr/security" data-clog-click="" data-clog-ui-element="link_security" data-clog-ui-component="inc_header_nav">Security</a></li><li><a href="https://slack.com/intl/en-kr/customers" data-clog-click="" data-clog-ui-element="link_customers" data-clog-ui-component="inc_header_nav">Customers</a></li></ul></li><li class="c-nav--primary__listitem has_secondary" tabindex="0" data-qa="nav_solutions_main" role="button"><span class="v--main">Solutions</span><ul class="c-nav-level--2"><li><a href="https://slack.com/intl/en-kr/solutions/remote-work" data-clog-click="" data-clog-ui-element="link_remote_work" data-clog-ui-component="inc_header_nav">Remote Work</a></li><li><a href="https://slack.com/intl/en-kr/solutions/digital-campus" data-clog-click="" data-clog-ui-element="link_digital_campus" data-clog-ui-component="inc_header_nav">Distance Learning</a></li><li><a href="https://slack.com/intl/en-kr/solutions/engineering" data-clog-click="" data-clog-ui-element="link_solutions_engineering" data-clog-ui-component="inc_header_nav">Engineering</a></li><li><a href="https://slack.com/intl/en-kr/solutions/financial-services" data-clog-click="" data-clog-ui-element="link_solutions_financial_services" data-clog-ui-component="inc_header_nav">Financial Services</a></li><li><a href="https://slack.com/intl/en-kr/solutions/sales" data-clog-click="" data-clog-ui-element="link_solutions_sales" data-clog-ui-component="inc_header_nav">Sales</a></li><li><a href="https://slack.com/intl/en-kr/solutions/information-technology" data-clog-click="" data-clog-ui-element="link_solutions_information_technology" data-clog-ui-component="inc_header_nav">IT</a></li><li><a href="https://slack.com/intl/en-kr/solutions/marketing" data-clog-click="" data-clog-ui-element="link_solutions_marketing" data-clog-ui-component="inc_header_nav">Marketing</a></li><li><a href="https://slack.com/intl/en-kr/solutions/customer-support" data-clog-click="" data-clog-ui-element="link_solutions_customer_support" data-clog-ui-component="inc_header_nav">Customer Support</a></li><li><a href="https://slack.com/intl/en-kr/solutions/human-resources" data-clog-click="" data-clog-ui-element="link_solutions_human_resources" data-clog-ui-component="inc_header_nav">Human Resources</a></li><li><a href="https://slack.com/intl/en-kr/solutions/project-management" data-clog-click="" data-clog-ui-element="link_solutions_project_management" data-clog-ui-component="inc_header_nav">Project Management</a></li><li><a href="https://slack.com/intl/en-kr/solutions/media" data-clog-click="" data-clog-ui-element="link_solutions_media" data-clog-ui-component="inc_header_nav">Media</a></li></ul></li><li class="c-nav--primary__listitem has_secondary" tabindex="0" data-qa="nav_resources_main" role="button"><span class="v--main">Resources</span><ul class="c-nav-level--2"><li class="toggler"><button class="c-menu--button" aria-haspopup="true" data-clog-click="" data-clog-ui-element="btn_resources_sub" data-clog-ui-component="inc_header_nav">Resources Library</button><ul class="c-nav-level--3"><li><a href="https://slack.com/intl/en-kr/resources/" data-clog-click="" data-clog-ui-element="link_resources_library" data-clog-ui-component="inc_header_nav">Library Home</a></li><li><a href="https://slack.com/intl/en-kr/resources/why-use-slack" data-clog-click="" data-clog-ui-element="link_resources_why_slack" data-clog-ui-component="inc_header_nav">Why use Slack?</a></li><li><a href="https://slack.com/intl/en-kr/resources/slack-101" data-clog-click="" data-clog-ui-element="link_resources_slack_101" data-clog-ui-component="inc_header_nav">Slack 101</a></li><li><a href="https://slack.com/intl/en-kr/resources/using-slack" data-clog-click="" data-clog-ui-element="link_resources_using_slack" data-clog-ui-component="inc_header_nav">Using Slack</a></li><li><a href="https://slack.com/intl/en-kr/resources/slack-for-admins" data-clog-click="" data-clog-ui-element="link_resources_slack_admins" data-clog-ui-component="inc_header_nav">Slack for Admins</a></li><li><a href="https://slack.com/intl/en-kr/state-of-work" data-clog-click="" data-clog-ui-element="link_state_of_work" data-clog-ui-component="inc_header_nav">State of Work Report</a></li></ul></li><li class="toggler"><button class="c-menu--button" aria-haspopup="true" data-clog-click="" data-clog-ui-element="btn_slack_tips_sub" data-clog-ui-component="inc_header_nav">Slack Tips</button><ul class="c-nav-level--3"><li><a href="https://slack.com/intl/en-kr/slack-tips" data-clog-click="" data-clog-ui-element="link_slacktips_home" data-clog-ui-component="inc_header_nav_deux">Slack Tips home</a></li><li><a href="https://slack.com/intl/en-kr/slack-tips/boost-work-productivity" data-clog-click="" data-clog-ui-element="link_tips_boost_productivity" data-clog-ui-component="inc_header_nav">Boost work productivity</a></li><li><a href="https://slack.com/intl/en-kr/slack-tips/slack-basics" data-clog-click="" data-clog-ui-element="link_tips_basics" data-clog-ui-component="inc_header_nav">Slack Basics</a></li><li><a href="https://slack.com/intl/en-kr/slack-tips/cross-functional-collaboration" data-clog-click="" data-clog-ui-element="link_tips_cross_functional" data-clog-ui-component="inc_header_nav">Cross-functional collaboration</a></li><li><a href="https://slack.com/intl/en-kr/slack-tips/every-department-and-role" data-clog-click="" data-clog-ui-element="link_tips_every_dept_role" data-clog-ui-component="inc_header_nav">Every department &amp; role</a></li><li><a href="https://slack.com/intl/en-kr/slack-tips/quick-and-simple" data-clog-click="" data-clog-ui-element="link_tips_quick_simple" data-clog-ui-component="inc_header_nav">Quick &amp; Simple</a></li></ul></li><li class="toggler"><button class="c-menu--button" aria-haspopup="true" data-clog-click="" data-clog-ui-element="btn_blog_sub" data-clog-ui-component="inc_header_nav">Blog</button><ul class="c-nav-level--3"><li><a href="https://slackhq.com" data-clog-click="" data-clog-ui-element="link_blog" data-clog-ui-component="inc_header_nav">Blog Home</a></li><li><a href="https://slackhq.com/categories/collaboration" data-clog-click="" data-clog-ui-element="link_blog_collaboration" data-clog-ui-component="inc_header_nav">Collaboration</a></li><li><a href="https://slackhq.com/categories/productivity" data-clog-click="" data-clog-ui-element="link_blog_productivity" data-clog-ui-component="inc_header_nav">Productivity</a></li><li><a href="https://slackhq.com/categories/transformation" data-clog-click="" data-clog-ui-element="link_blog_transformation" data-clog-ui-component="inc_header_nav">Transformation</a></li><li><a href="https://slackhq.com/categories/at-slack" data-clog-click="" data-clog-ui-element="link_blog_at-slack" data-clog-ui-component="inc_header_nav">@Slack</a></li></ul></li><li><a href="https://slack.com/intl/en-kr/events/webinars" data-clog-click="" data-clog-ui-element="link_events_webinars" data-clog-ui-component="inc_header_nav">Webinars</a></li><li><a href="https://www.slackcertified.com" data-clog-click="" data-clog-ui-element="link_slack_certified_program" data-clog-ui-component="inc_header_nav">Slack Certified Program</a></li><li><a href="https://slack.com/help" data-clog-click="" data-clog-ui-element="link_help_center" data-clog-ui-component="inc_header_nav">Help Center</a></li><li><a href="https://api.slack.com" data-clog-click="" data-clog-ui-element="link_api" data-clog-ui-component="inc_header_nav">API</a></li><li><a href="https://slack.com/intl/en-kr/apps" data-clog-click="" data-clog-ui-element="link_app_directory" data-clog-ui-component="inc_header_nav">App Directory</a></li><li><a href="https://slack.com/intl/en-kr/download" data-clog-click="" data-clog-ui-element="link_downloads" data-clog-ui-component="inc_header_nav">Download</a></li></ul></li><li class="c-nav--primary__listitem"><a href="https://slack.com/intl/en-kr/enterprise" data-clog-click="" data-clog-ui-element="link_enterprise" data-clog-ui-component="inc_header_nav">Enterprise</a></li><li class="c-nav--primary__listitem"><a href="https://slack.com/intl/en-kr/pricing" data-clog-click="" data-clog-ui-element="link_pricing" data-clog-ui-component="inc_header_nav">Pricing</a></li></ul><div class="has-dropdown u-push--right" aria-haspopup="true"><button id="nav_work_btn" class="c-button v--primary v--with-dropdown" data-clog-click="" data-clog-ui-element="btn_workspaces" data-clog-ui-component="inc_workspace_nav" data-qa="your_ws">Launch Slack<svg xmlns="http://www.w3.org/2000/svg" width="12" height="7" viewBox="0 0 12 7" fill="none" aria-hidden="" class="u-margin-left--small dropdown--icon svg-replaced" shape-rendering="geometricPrecision">
<path d="M1 6L6 1L11 6" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg></button><nav id="workspace_dd" class="c-nav--dropdown"><div class="c-nav--dropdown__container"><ul class="c-nav__workspace--list"><li><a href="https://khuspace.slack.com/" target="https://khuspace.slack.com/" class="c-nav__workspace--listitem o-media-object v--centered" data-clog-click="" data-clog-ui-element="link_workspace" data-clog-ui-component="inc_workspace_nav"><span class="o-media-object__media c-nav__workspace--icon"><span class="o-media-object__media c-nav__workspace--icon">K</span></span><span class="o-media-object__content c-nav__workspace--name">Khu</span></a></li></ul></div><div class="c-nav--dropdown__footer"><a class="c-nav--dropdown__cta" data-gtm-click="SignUp" href="https://slack.com/get-started#/create" data-clog-click="" data-clog-ui-element="link_create" data-clog-ui-component="inc_workspace_nav" data-qa="create_ws"><span>Create a new workspace</span></a><a class="c-nav--dropdown__cta" data-gtm-click="optout_signin" href="https://slack.com/signin" data-clog-click="" data-clog-ui-element="link_sign_in_nav" data-clog-ui-component="inc_workspace_nav" data-qa="sign_in_ws"><span>Sign in to another workspace</span></a></div></nav></div></nav><button id="nav_menu_btn" aria-label="Menu" class="nav_menu_btn c-nav__icon v--menu u-border-radius--none" data-clog-click="" data-clog-ui-element="btn_menu" data-clog-ui-component="inc_header_nav_deux"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="17" viewBox="0 0 24 17" aria-label="" class="svg-replaced" shape-rendering="geometricPrecision"><path d="M0 0h24v3H0zm0 7h24v3H0zm0 7h24v3H0z" fill-rule="evenodd"></path></svg></button></div></nav>
......