카테고리 없음
[html] kakao website
SKIAP
2020. 10. 21. 20:33
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>카카오</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library. IE10이상에서 동작 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS. Bootstrap4에서 필요 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<style>
nav{
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
}
.navbar{ z-index: 100 !important;}
.bg-dark{
background-color: white !important;
color:#272727 !important;
}
.nav-link{
color:#272727 !important;
}
.container-fluid{
padding-top: 200px;
padding-bottom: 150px;
}
#video2{
display:block;
width:90% !important;
margin: auto !important;
margin-top: 30px !important;}
#about, #history{
height: 550px;
background-color: #F3F2F3;
border-radius: 10px;
position: relative;
margin-top: 100px;
}
#historyImg{
width:850px;
position: absolute;/*자식은 absolute*/
right:0;
bottom: 0;
}
#about h2, #history h2{
width: 500px !important;
margin: 50px !important;
padding-top: 50px !important;
position: absolute;
top:0px;
}
.arrow{
width:36px;
height: 36px;
margin-left:50px !important;
}
#press .col-md-4 div{
padding-bottom: 30px;
}
.card .title{
position: absolute;
top:10px;
left:10px;
}
footer{
border-top:1px solid #dddddd;
}
footer span:hover {
font-weight: bold;
}
footer span:hover::after{
content:url("img/arr-below.png");
}
footer span::after{
content:url("img/arr-rt.svg");
}
/*zoom*/
.dh {
transition: all ease 1s;
}
.dh:hover {
transform: scale( 1.2 );
background-color: orange;
}
.dhimg{
transform: sclae(0.7);
transition: all ease 1s;
}
.dhimg:hover{
transform: sclae(1.5);
}
/* Loding */
body {
padding: 50px 0;
}
.loading {
position: relative;
width: 96px;
height: 96px;
margin: 0 auto;
padding: 10px;
}
.bar div {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 10px;
height: 40px;
margin: auto;
background-color: rgba(207, 230, 0, 0.7);
animation: bar 2s infinite linear;
}
.circle div {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 76px;
height: 76px;
margin: auto;
border: 10px solid;
border-color: rgb(0, 0, 0) rgb(212, 212, 212) rgb(212, 212, 212) rgb(212, 212, 212);
border-radius: 48px;
animation: circle 1s linear infinite;
}
@keyframes circle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script>
$(document).ready(function(){
$('.navbar-nav a').on('click', function(){
var width=$(window).width();
if(width<=576){
//$('.btn-navbar').click(); //bootstrap 2.x
//$('.navbar-toggle').click(); //bootstrap 3.x
$('.navbar-toggler').click(); //bootstrap 4.x
}
}
);
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
})
</script>
</head>
<body id="myPage">
<!-- navigation ------------------------------------------------->
<nav class="navbar navbar-expand-md bg-dark navbar-dark" style="width:100%;position:fixed;top:0;">
<a class="navbar-brand" href="#myPage">
<img src="img/logo_kakao.png" alt="logo" style="width:70% !important;">
</a>
<!-- 메뉴버튼 -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<!-- bootstrap3에서 data-toggle="collapse" data-target=".navbar-collapse.in 사용가능 -->
<div class="dh">
<a class="nav-link" href="#about">카카오</a>
</div>
</li>
<li class="nav-item">
<div class="dh">
<a class="nav-link" href="#history">카카오히스토리</a>
</div>
</li>
<li class="nav-item">
<div class="dh">
<a class="nav-link" href="#press">Press</a>
</div>
</li>
<li class="nav-item">
<div class="dh">
<a class="nav-link" href="#service">Service</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- navigation -->
<div class="container">
<div class="loading circle">
<div></div>
</div>
<div>
<video width="100%" muted autoplay loop src="https://t1.kakaocdn.net/kakaocorp/main/kakao10/img/corp_pc.mp4">
</video>
</div>
<div id="about" class="container-fluid">
<h2>
<div class="w3-container w3-center w3-animate-left">
카카오스러운 관점으로<br>
세상을 바라봅니다.
</div>
</h2>
<p> <!--색상 변경-->
<img class="arrow" src="img/arr-rt.svg" alt="arrow"> <span style="color:red"> 카카오스러움이란</span>
</p>
<video id="video2" muted loop autoplay src="https://t1.kakaocdn.net/kakaocorp/main/kakao10/img/li-1a.mp4"></video>
</div>
<div class="container-fluid" id="history">
<h2>
<div class="w3-container w3-center w3-animate-left">
아무도 가보지 않은 길을 걷는<br>
카카오의 이야기를 기록합니다.
</div>
</h2>
<p> <!--색상 변경-->
<img class="arrow" src="img/arr-rt.svg" alt="arrow"> <span style="color:red"> 카카오 히스토리</span>
</p>
<img id="historyImg" src="img/li-3.png" alt="history">
</div>
<div id="press" class="container-fluid">
<div class="row">
<div class="col-md-4">
<div>PRESS RELEASE</div>
<h5>카카오엔터프라이즈, 20여개 협력사와 ‘카카오워크 파트너스데이’ 개최</h5>
- 카카오워크 출시 한달 만에 기업/단체 계정 5만개 생성- 구글 어플리케이션 연동, 화상회의 모바일 버전 등 추가 기능 탑재 예정[2020-10-15] 카카오엔터프라이즈(백상엽 대표)가 20여개
</div>
<div class="col-md-4">
<div>STOCK</div>
359,500 <img src="img/arr-below.png"> 2,500<br>
2020-10-16 10:09:22
</div>
<div class="col-md-4">
<div>PRIVACY POLICY</div>
<h5>카카오는 데이터의 연결과 보호의 균형을 위해
언제나 최선을 다 하겠습니다.</h5>
</div>
</div>
</div>
<div id="service" class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="card" style="width:400px">
<div class="title">SERVICE</div>
<div class="dh">
<img class="card-img-top" src="img/img01.jpg" alt="Card image">
</div>
<div class="card-body">
<h5 class="card-title">언제 어디서나 무료로 간편하게! 사람과 세상, 그 이상을 연결하는 카카오톡</h5>
<p class="card-text">채팅은 물론 일정 관리, 송금, #검색 등 다양한 기능을 제공하는 카카오톡은 우리의 생활을 보다 편리하게 만들어 주고 있습니다.
카카오톡을 통해 세상의 정보와 즐길거리에 보다 가까이 ...</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width:400px">
<div class="title" style="color:white;">TECH</div>
<div class="dh">
<img class="card-img-top" src="img/img02.jpg" alt="Card image">
</div>
<div class="card-body">
<h5 class="card-title">새로워진 kakao Tech를 소개합니다.</h5>
<p class="card-text">기술 행사와 오픈소스, 후원, 채용 등 카카오의 기술 관련 종합적인 정보를 제공할 수 있도록 개편했습니다....</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width:400px">
<div class="title">SOCIAL IMPACT</div>
<div class="dh">
<img class="card-img-top" src="img/img03.png" alt="Card image">
</div>
<div class="card-body">
<h5 class="card-title">세계 행복의 날 기념, 같이가치 ‘안녕하세요’ 캠페인을 소개합니다!</h5>
<p class="card-text">'세계 행복의 날'이라는 기념일을 들어보신 적 있나요? 2012년 국제연합(UN)이 모든 사람들이 행복하게 살 수 있도록 전 세계가 함께 노력하자는 취지로 매년 3월 20일을 '세계 ...</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<span>이용약관</span> 위치기반 서비스이용약관 개인정보처리방침 운영정책 청소년보호정책 권리침해신고 안내공지 사항사이버윤리실<br>
Copyright © Kakao Corp. All rights reserved.
</footer>
</body>
</html>