반응형
폰트 -google font 들어가기
저 내용에 html 을 긁어다가 html header 부분에 넣으면 됨
head부분.
family=Roboto:wght@100&display=swap" rel="stylesheet">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
<style>
#a{
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<div id="a">Hellooooo</div>
<div id="b">Helooooooowooo</div>
</body>
</html>요로코롬
비교문 에서 0<i<10 요런거 안됨
0<i 까지만 이해함
이런 경우
0<i && i<10 요렇게 쓰기
and &&
or ||
.footer_rr_bottom > li > #globeBtn{
width:200px;
height:37px;
display:flex;
flex-direction: row;
align-items: center;
justify-content: center;
}display:flex; 는 너무 유용하다고 함.
그래서 이전에 float:left; , display:inline-block; 을 연습해봄.
w3c 웹표준 기구
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="widthheader_btn=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href="./fiverr.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script:wght@700&family=Permanent+Marker&family=Shadows+Into+Light&display=swap" rel="stylesheet">
</head>
<body>
<div id="video_content_popup" class="" onclick="video_off()">
<div class="video_content_popup_in">
<div class="video_content_header">
<p><img onclick="video_off()" width="17" height="17" src="./images/x.png"></p>
</div>
<div class="video_content_video">
<video width="900" height="506" autoplay id="videoTarget" src="./images/vmvv3czyk2ifedefkau7.mp4">
</video>
</div>
</div>
</div>
<div id="wrap"> <!--100%-->
<div id="header_wrap"> <!--width 100% x 680pictures-->
<div id="header_hero_backgrounds">
<div id="header_hero_textbox">
<ul class="header_hero_text">
<li>
<span>Find the perfect <i>freelance</i></br>
services for your business
</span>
<span id="header_mag"><img width="16" height="16" src="./images/새 폴더/svg-export/svgexport-5.돋보기.png"></span>
<input id="header_inputbox" type="search" autocomplete="off" placeholder='Try "building mobile app"'>
<input id="header_btn" type="button" value="Search">
<div id="header_hero_text_popular">
<p>Popular :</p>
<ul>
<li><a href="#">Web and Mobile Design</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Logo Design</a></li>
<li><a href="#">Dropshipping</a></li>
</ul>
</div>
</li>
</ul>
</div>
<ul id="image1_1" class="hero firston">
<img src="./images/header/1.jpg">
</ul>
<ul id="image1_2" class="hero">
<img src="./images/header/2.jpg">
</ul>
<ul id="image1_3" class="hero ">
<img src="./images/header/3.jpg">
</ul>
<ul id="image1_4" class="hero " >
<img src="./images/header/4.jpg">
</ul>
<ul id="image1_5" class="hero" >
<img src="./images/header/5.jpg">
</ul>
</div>
<div id="gnb" class="gnb_bar"> <!--100% height:80-->
<div id="gnb_box">
<div id="gnb_box1">
<h1><a href=""><img id="gnb_img" src="./images/새 폴더/svg-export/svgexport-4.logo.png"></a></h1>
</div>
<div class="gnb_text">
<span><img width="16" weight="16" id ="gnb_mag" src="./images/새 폴더/svg-export/svgexport-5.돋보기.png"></span>
<input class="gnb_txbx" type="search" autocomplete="off" placeholder='Find Services'>
<input class="gnb_txbx_btn" type="button" value="Search">
</div>
<div id="gnb_box2">
<a href="">Fiverr Business</a>
<a href="">Explore</a>
<a ><img id ="gnb_box2_img" src="./images/새 폴더/svg-export/svgexport-6.globe.png">English</a>
<a href="">$USD</a>
<a href="">Become a Seller</a>
<a href="">Sign In</a>
<a><input type="button" id="gnb_btn" value="Join"></a>
</div>
</div>
</div>
<div id="gnb_child" class="gnb_child_off"> <!--100%x 40-->
<div id="gnb_child_box">
<ul>
<li><a href="#">Graphics & Design</a></li>
<li><a href="#">Digital Marketing</a></li>
<li><a href="#">Writing & Translation</a></li>
<li><a href="#">Video & Animation</a></li>
<li><a href="#">Music & Audio</a></li>
<li><a href="#">Programming & Tech</a></li>
<li><a href="#">Data
<span>NEW</span>
</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Lifestyle</a></li>
</ul>
</div>
</div>
<div id="header"> <!--width: 1400 x 680 -->
<div id="header_box"> <!--650x241-->
<h1><span>
</span></h1>
</div>
</div>
</div>
<div id="header_low"> <!--width:100% height: 95px-->
<div id="header_low_container"> <!--1400 x 95-->
<span id="trust">Trusted by :</span>
<ul>
<li><img src="./images/header_low/facebook.31d5f92.png"></li>
<li><img src="./images/header_low/google.517da09.png"></li>
<li><img src="./images/header_low/netflix.e3ad953.png"></li>
<li><img src="./images/header_low/pandg.8b7310b.png"></li>
<li><img src="./images/header_low/paypal.ec56157.png"></li>
</ul>
</div>
</div>
<div id="popular_wrap"> <!-- width:100% -->
<div id="popular_box"> <!--width:1400px;-->
<h2>Popular professional services</h2>
<div id="popular_pic_box">
<div id="popular_btn">
<button class="seoBtn seo_btn_l" onclick="pobtn(0)"><img src="./images/새 폴더/svg-export/svgexport-10.gtBtn.png"></button>
<button class="seoBtn seo_btn_r" onclick="pobtn(1)"><img src="./images/새 폴더/svg-export/svgexport-10.gtBtn.png"></button>
</div>
<div id="popular_ul">
<ul class="ul0">
<li>
<a href="#">
<h4>
<p>Build your brand</p>
Logo Design
</h4>
<img src="./images/popularprofissionalservices/1-1.jpg">
</a>
</li>
<li>
<a href="#">
<h4>
<p>Customize your site</p>
WordPress
</h4>
<img src="./images/popularprofissionalservices/1-2.jpg">
</a>
</li>
<li>
<a href="#">
<h4>
<p>Share your message</p>
Voice Over
</h4>
<img src="./images/popularprofissionalservices/1-3.jpg">
</a>
</li>
<li>
<a href="#">
<h4>
<p>Engage your audience</p>
Video Explainer
</h4>
<img src="./images/popularprofissionalservices/1-4.jpg">
</a>
</li>
<li>
<a href="#">
<h4>
<p>Reach more customers</p>
Social Media
</h4>
<img src="./images/popularprofissionalservices/1-5.jpg">
</a>
</li>
</ul>
<ul class="ul1">
<li>
<a href="#">
<h4>
<p>Unlock growth online</p>
SEO
</h4>
<img src="./images/popularprofissionalservices/2-1.jpg">
</a>
</li>
<li>
<a href="#">
<h4>
<p>Color your dreams</p>
Illustration
</h4>
<img src="./images/popularprofissionalservices/2-2.jpg">
</a>
</li>
<li>
<a href="#">
<h4>
<p>Go global</p>
Translation
</h4>
<img src="./images/popularprofissionalservices/2-3.jpg">
</a>
</li>
<li>
<a href="#">
<h4>
<p>Learn your business</p>
Data Entry
</h4>
<img src="./images/popularprofissionalservices/2-4.jpg">
</a>
</li>
<li>
<a href="#">
<h4>
<p>Showcase your story</p>
Book Covers
</h4>
<img src="./images/popularprofissionalservices/2-5.jpg">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="video_content_wrap"> <!-- 100% x744-->
<div id="video_content_box">
<div id="video_content_box_l">
<h2>A whole world of freelance </br>
talent at your fingertips</h2>
<ul>
<li>
<h6>
<span><img src="./images/새 폴더/svg-export/svgexport-10.checked.png"></span>
The best for every budget
</h6>
<p>Find high-quality services at every price point. </br>
No hourly rates, just project-based pricing.</p>
</li>
<li>
<h6>
<span><img src="./images/새 폴더/svg-export/svgexport-10.checked.png"></span>
Quality work done quickly
</h6>
<p>Find the right freelancer to begin working on your </br>
project within minutes.</p>
</li>
<li>
<h6>
<span><img src="./images/새 폴더/svg-export/svgexport-10.checked.png"></span>
Protected payments, every time
</h6>
<p>Always know what you'll pay upfront. Your payment isn't</br>
released until you approve the work.</p>
</li>
<li>
<h6>
<span><img src="./images/새 폴더/svg-export/svgexport-10.checked.png "></span>
24/7 support
</h6>
<p>Questions? Our round-the-clock support team is </br>
available to help anytime, anywhere.</p>
</li>
</ul>
</div>
<div id="video_content_box_r">
<a href="javascript:void(0);" onclick="video_on('./images/vmvv3czyk2ifedefkau7.mp4')">
<img class="video_imgs" width ="700" height="450" src="https://fiverr-res.cloudinary.com/q_auto,f_auto,w_700,dpr_1.0/v1/attachments/generic_asset/asset/089e3bb9352f90802ad07ad9f6a4a450-1599517407052/selling-proposition-still-1400-x1.png">
<p><img class="video_imgs" width="80" height="80" src="./images/playbtn2.png">
</p>
</a>
</div>
</div>
</div>
<!-- sample -->
<div id="marketplace_wrap"> <!-- 100% x 331-->
<div id="marketplace_box"> <!--1400x 331-->
<h2>Explore the marketplace</h2>
<ul>
<li>
<a>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.cls-4{fill:none;stroke:#4d535b;stroke-miterlimit:10;stroke-width:2px}</style></defs><g style="isolation:isolate"><g id="white"><path fill="#fff" d="M18 30l2 21h-1v5h28v-5h-2l2-21H18z"/><path fill="#dee0e2" d="M47 30H18l.2 3H44l-2 19h2v4h3v-5h-2l2-21z"/></g><g id="stroke"><path class="cls-4" d="M39.5 29.7L49.7 9.8l5.4 2.8-8.9 17.1"/><path class="cls-4" d="M51 29.2l5.3-10.4-8.9-4.6m-32.5 7.7l4.5 7.8m8.4 0l-6.7-11.8m-.1.9l-5.8 3.7m8.4 7.2l-4.9-9.2m17.8 9.2l.1-12.5-3.4-7.3-3.2 7.6v12.2m6.1-11.9l-6.1.3m3.3 11.6l-.2-10.8m12.5 31.9L47.3 30H18.2l1.6 20.8m-1.4 5.4h28.7v-5H18.4v5zM11.7 8.3a14.7 14.7 0 00-.2 8.9c1.5 4.1 5.1 5 7.9 1.7a2.4 2.4 0 00.7-2.4c-1.1-3.2-4.3-2.2-8.4-8.2z"/></g><path d="M15 23l5 7h8l-6-11-7 4zM11.7 8.3a14.7 14.7 0 00-.2 8.9c1.5 4.1 5.1 5 7.9 1.7a2.4 2.4 0 00.7-2.4c-1.1-3.2-4.3-2.2-8.4-8.2zM39 30l11-20 5 3-9 17h-7zm-9 0h7l-1-12-3-8-3 8v12z" style="mix-blend-mode:darken" fill="#a1f4c0" id="flah"/></g></svg>
<p>Graphics & Design</p>
</a>
</li>
<li>
<a>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g style="isolation:isolate"><path fill="#fff" d="M11 15h42v29H11z"/><path fill="#dee0e2" d="M11 15v3h39v26h3V15H11z"/><path d="M9.7 11.3h44.6a2.5 2.5 0 012.5 2.5v30.7a2.6 2.6 0 01-2.5 2.6H9.7a2.6 2.6 0 01-2.5-2.6V13.8a2.5 2.5 0 012.5-2.5zm1.1 3.5h42.4v28.7H10.8V14.8zM29 35.7a.9.9 0 011 1 1 1 0 01-1 1 1.1 1.1 0 01-1-1 1 1 0 011-1zm6.4 0a.9.9 0 011 1 1 1 0 01-2 0 .9.9 0 011-1zM20.9 21.9h3.4l3.1 10.2h10.4m-11-3.1h12.1M26 25.9h13.6m-3.1 21.5v6.9m-9 0v-6.9m-8.4 7.3h25.8" fill="none" stroke="#4d535b" stroke-miterlimit="10" stroke-width="2"/><path style="mix-blend-mode:darken" fill="#a1f4c0" d="M27 47h10v7H27z"/></g></svg>
<p>Digital Marketing</p>
</a>
</li>
<li>
<a>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.cls-5{fill:none;stroke:#4d535b;stroke-miterlimit:10;stroke-width:2px}</style></defs><g style="isolation:isolate"><g id="white"><path d="M39.7 10.8H13.2a1.6 1.6 0 00-1.6 1.6v39.4a1.6 1.6 0 001.6 1.6h26.5a1.6 1.6 0 001.6-1.6V12.4a1.6 1.6 0 00-1.6-1.6z" fill="#fff"/><path d="M39.7 10.8H13.2a1.6 1.6 0 00-1.6 1.6v1.4h25.1a1.6 1.6 0 011.6 1.6v38h1.4a1.6 1.6 0 001.6-1.6V12.4a1.6 1.6 0 00-1.6-1.6z" fill="#dee0e2"/></g><g id="flah"><path d="M47 16h5v32.3a1.7 1.7 0 01-1.7 1.7 3.3 3.3 0 01-3.3-3.3V16z" style="mix-blend-mode:darken" fill="#a1f4c0"/><path class="cls-5" d="M39.7 10.8H13.2a1.6 1.6 0 00-1.6 1.6v39.4a1.6 1.6 0 001.6 1.6h26.5a1.6 1.6 0 001.6-1.6V12.4a1.6 1.6 0 00-1.6-1.6zm7.2 5.3h5.7v29.7c0 5.9-5.7 5.9-5.7 0V16.1z"/><path class="cls-5" d="M56.3 31.9l.1-11.1h-9.5m2.8 32.6v-3.2M18 19.4h8.4M18 27.3h16.9M18 32h16.9M18 36.6h16.9M18 41.3h8.4"/></g></g></svg>
<p>Writing & Translation</p>
</a>
</li>
<li>
<a>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g style="isolation:isolate"><path fill="#fff" d="M15 17h34v30H15z"/><path fill="#dee0e2" d="M15 17v3h32v27h2V17H15z"/><path d="M8 10.9v42.2m6.5-42.2v42.2M8.2 13.5h6.1m-6.1 6.2h6.1m-6.1 6.1h6.1M8.2 32h6.1m-6.1 6.2h6.1m-6.1 6.1h6.1m-6.1 6.2h6.1m35.2-39.6v42.2M56 10.9v42.2m-6.3-39.6h6.1m-6.1 6.2h6.1m-6.1 6.1h6.1M49.7 32h6.1m-6.1 6.2h6.1m-6.1 6.1h6.1m-6.1 6.2h6.1m-40.2-3.8h33.9M15.6 17.3h33.9m-22.2 6.6a9.4 9.4 0 11-3.4 12.8 9.3 9.3 0 013.4-12.8z" fill="none" stroke="#4d535b" stroke-miterlimit="10" stroke-width="2"/><path fill="#4d535b" d="M29.3 27.9v8.8l3.9-2.2 3.8-2.2-3.8-2.2-3.9-2.2z"/><path d="M8 14h6v36H8zm42 0h6v36h-6z" style="mix-blend-mode:darken" fill="#a1f4c0"/></g></svg>
<p>Video & Animation</p>
</a>
</li>
<li>
<a>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.cls-4{fill:none;stroke:#4d535b;stroke-miterlimit:10;stroke-width:2px}</style></defs><g style="isolation:isolate"><g id="white"><path d="M29 9.2a8.6 8.6 0 018.5 8.6v13.9a8.5 8.5 0 01-8.5 8.5 8.5 8.5 0 01-8.5-8.5V17.8A8.6 8.6 0 0129 9.2z" fill="#fff"/><path d="M28.5 10.2a8.5 8.5 0 00-6.9 3.6 8.4 8.4 0 014.9-1.6c4.7 0 7.5 3.9 7.5 8.6v13.9a8 8 0 01-1.6 4.9c2.2-1.5 4.6-4 4.6-6.9V18.8a8.6 8.6 0 00-8.5-8.6z" fill="#dee0e2"/></g><g id="stroke"><path class="cls-4" d="M42.3 29.3v3.2A13.4 13.4 0 0129 45.8a13.4 13.4 0 01-13.3-13.3v-3.2M29 45.8v10.5m-10.9.5h21.8"/><path class="cls-4" d="M29 9.2a8.6 8.6 0 018.5 8.6v13.9a8.5 8.5 0 01-8.5 8.5 8.5 8.5 0 01-8.5-8.5V17.8A8.6 8.6 0 0129 9.2zm-8.1 8.3h4.8m-4.8 4.8h4.8m-4.8 4.9h4.8M20.9 32h4.8m6.6-14.5h4.8m-4.8 4.8h4.8m-4.8 4.9h4.8M32.3 32h4.8m10.7-14.1a2.3 2.3 0 013.1 2.1 3.7 3.7 0 01-3.1 3.4c-1.7.3-3.1-.6-3.1-2.2a3.7 3.7 0 013.1-3.3z"/><path class="cls-4" d="M50.8 10.5l7.3 2.6V8.6L50.8 6v14.7"/></g><path d="M47.8 17.9a2.3 2.3 0 013.1 2.1 3.7 3.7 0 01-3.1 3.4c-1.7.3-3.1-.6-3.1-2.2a3.7 3.7 0 013.1-3.3zm2.9-7.4l7.3 2.6V8.6L50.7 6" style="mix-blend-mode:darken" fill="#a1f4c0" id="flah"/></g></svg>
<p>Music & Audio</p>
</a>
</li>
<li>
<a>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.cls-4{fill:none;stroke:#4d535b;stroke-miterlimit:10;stroke-width:2px}</style></defs><g style="isolation:isolate"><g id="white"><path fill="#fff" d="M8 21h48v32H8z"/><path fill="#dee0e2" d="M8 21v3h44v29h4V21H8z"/></g><g id="stroke"><path class="cls-4" d="M25.1 30.9l-7.6 6.2 7.6 6.1m13.8-12.3l7.6 6.2-7.6 6.1m-4.5-15.3l-3.9 18.3"/><path class="cls-4" d="M55.5 11.3h-47v41.4h47V11.3zm0 9.4h-47"/><path class="cls-4" d="M49.6 15.4a.9.9 0 00-1 1 1 1 0 001 1 1.1 1.1 0 001-1 1 1 0 00-1-1zm-6.7 0a.9.9 0 00-1 1 1 1 0 001 1 1.1 1.1 0 001-1 1 1 0 00-1-1z"/></g><path style="mix-blend-mode:darken" fill="#a1f4c0" d="M8 11h48v10H8z" id="flah"/></g></svg>
<p>Programming & Tech</p>
</a>
</li>
<li>
<a>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.cls-2{fill:#fff}</style></defs><g style="isolation:isolate"><g id="stroke"><path class="cls-2" d="M44.9 44.2a1.8 1.8 0 01-2.3 1.2h-.1a1.9 1.9 0 01-1-1h-.1l-3.8-6.2a1.2 1.2 0 00-1.6-.4 1.4 1.4 0 00-.4 1.7l3.8 6.1.6.9-.2.4a1.8 1.8 0 01-.8.7 1.4 1.4 0 01-1.4.1 1.8 1.8 0 01-1-.9h-.1l-3.8-6.3a1.2 1.2 0 10-2 1.2l3.7 6.3.3.5v.4a2.7 2.7 0 01-.8.7 1.9 1.9 0 01-2.5-.9l-3.6-6a1.2 1.2 0 00-2.1 1.1l3.5 5.8-.2.4a1.8 1.8 0 01-2.6.6 1.8 1.8 0 01-.7-.8h-.1l-6.2-10.5a1.3 1.3 0 00-1.1-.6h-4.8V22.8h12.1l-4.8 4.7a2.1 2.1 0 00-.1 3l.4.3.7.4a6 6 0 006.8 0l6.7-4.3 9.5 15.9a1.7 1.7 0 01.1 1.4z"/><path class="cls-2" d="M45.1 39l-8.5-14.1a1.1 1.1 0 00-.7-.6 1.2 1.2 0 00-1 .2l-7.8 5a4.2 4.2 0 01-4.3 0l-.5-.3 8.6-8.3a3.4 3.4 0 012.3-1h8.6a3.1 3.1 0 011.3.3l7.5 3.1V39z"/><path d="M3 18h10v24H3zm48 0h10v24H51z" style="mix-blend-mode:darken" fill="#a1f4c0"/><path d="M44.8 42.8l-9.5-15.9-6.7 4.3a6 6 0 01-6.8 0l-.7-.4-.4-.3a2.1 2.1 0 01.1-3l4.8-4.7H13.5v2h9.1l3.4.2c-.8.8-1.7-.5-5 4a28.4 28.4 0 003.1 1.8v.2c2.1 1.3 3.4-.2 4 0l5-4 9.8 17.8c.1.1.1.1.1.2l.6.4h.1c1 .3 1-.2 1.3-1.2a1.7 1.7 0 00-.2-1.4z" fill="#dee0e2"/><path d="M60.8 17.4h-9.5a1.2 1.2 0 00-1.2 1.2V21l-6.4-2.6a4.9 4.9 0 00-2.1-.4h-8.2a5.4 5.4 0 00-3.9 1.5l-1.4 1.4H13.9v-2.3a1.2 1.2 0 00-1.2-1.2H3.2A1.2 1.2 0 002 18.6v23.3a1.2 1.2 0 001.2 1.2h9.5a1.2 1.2 0 001.2-1.2V41H18l5.6 9.4a4.5 4.5 0 003.7 2.2 4.2 4.2 0 003.3-1.7l.9.4 1.4.2a4.2 4.2 0 003.5-2h.2l1.3.2a4.1 4.1 0 003.6-2h.1v-.3l1.1.2a4.1 4.1 0 004.1-4.2 3.9 3.9 0 00-.4-1.8l-.3-.5H50v.9a1.2 1.2 0 001.2 1.2h9.5a1.2 1.2 0 001.3-1.3V18.6a1.2 1.2 0 00-1.2-1.2zM11.7 41H4V19.4h7.7zm33.2 3.2a1.8 1.8 0 01-2.3 1.2h-.1a1.9 1.9 0 01-1-1h-.1l-3.8-6.2a1.2 1.2 0 00-1.6-.4 1.4 1.4 0 00-.4 1.7l3.8 6.1.6.9-.2.4a1.8 1.8 0 01-.8.7 1.4 1.4 0 01-1.4.1 1.8 1.8 0 01-1-.9h-.1l-3.8-6.3a1.2 1.2 0 10-2 1.2l3.7 6.3.3.5v.4a2.7 2.7 0 01-.8.7 1.9 1.9 0 01-2.5-.9l-3.6-6a1.2 1.2 0 00-2.1 1.1l3.5 5.8-.2.4a1.8 1.8 0 01-2.6.6 1.8 1.8 0 01-.7-.8h-.1l-6.2-10.5a1.3 1.3 0 00-1.1-.6h-4.8V22.8h12.1l-4.8 4.7a2.1 2.1 0 00-.1 3l.4.3.7.4a6 6 0 006.8 0l6.7-4.3 9.5 15.9a1.7 1.7 0 01.1 1.4zm.2-5.2l-8.5-14.1a1.1 1.1 0 00-.7-.6 1.2 1.2 0 00-1 .2l-7.8 5a4.2 4.2 0 01-4.3 0l-.5-.3 8.6-8.3a3.4 3.4 0 012.3-1h8.6a3.1 3.1 0 011.3.3l7.5 3.1V39zM60 41h-7.7V19.4H60z" fill="#4d535b"/></g></g></svg>
<p>Business</p>
</a>
</li>
<li>
<a>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.cls-4{fill:none;stroke:#4d535b;stroke-miterlimit:10}.cls-4{stroke-width:2.1px}</style></defs><g style="isolation:isolate"><g id="stroke"><path d="M12 20.2h34.7V53a4 4 0 01-4 4H16a4 4 0 01-4-4V20.2z" fill="#fff"/><path d="M12 20.2v4.2h30.5v31.5c0 .4-.1.7-.1 1 1.8-.4 4.3-2.1 4.3-4.1V20.2z" fill="#dee0e2"/><path class="cls-4" d="M13 20.2h32.7a1 1 0 011 1V52a5 5 0 01-5 5H17a5 5 0 01-5-5V21.2a1 1 0 011-1zm8.5 0v8.4"/><rect x="16.7" y="29.1" width="9.5" height="11.56" rx="1" stroke-width="2.23" fill="none" stroke="#4d535b" stroke-miterlimit="10"/><rect x="16.7" y="29.1" width="9.5" height="11.56" rx="1" style="mix-blend-mode:darken" fill="#a1f4c0"/><path class="cls-4" d="M46.7 28.6a9.5 9.5 0 010 18.9m-16.8-42V16"/><path d="M36.2 7.6V16M23.6 7.6V16" stroke-width="1.88" fill="none" stroke="#4d535b" stroke-miterlimit="10"/></g></g></svg>
<p>Lifestyle</p>
</a>
</li>
<li>
<a>
<svg width="59" height="41" viewBox="0 0 59 41" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.571 9.457V7.343H49.63v2.114H11.57zm39.115-5.286V2.057h3.171A3.171 3.171 0 0157.03 5.23v26.957h-2.643v-25.9a2.114 2.114 0 00-2.114-2.115h-1.586z" fill="#DEE0E2"/><path d="M57.543 35.543A4.456 4.456 0 0153.086 40H11.57V6.571h8.986" stroke="#4D535B" stroke-width="2" stroke-miterlimit="10" stroke-linejoin="round"/><path d="M50.857 32.2c.468-.791 1.415-1.114 2.229-1.114a4.456 4.456 0 014.457 4.457V5.457A4.456 4.456 0 0053.086 1c-.814 0-1.85.19-2.229 1.114V32.2z" stroke="#4D535B" stroke-width="2" stroke-miterlimit="10" stroke-linejoin="round"/><path d="M3.786 6.171C2.248 6.171 1 7.174 1 8.4v25.5l2.786 5.572L6.57 33.9V8.4c0-1.226-1.248-2.229-2.785-2.229z" fill="#A1F4C0" stroke="#4D535B" stroke-width="2" stroke-miterlimit="10" stroke-linejoin="round"/><path d="M1 12.857h5.571m13.086-6.286h31.2m-24.485 4.886h-8.458v9.514h8.457v-9.514zm5.285 0H45.93m-14.273 4.457H45.93m-14.273 4.458h10.929" stroke="#4D535B" stroke-width="2" stroke-miterlimit="10" stroke-linejoin="round"/><path d="M39.057 35.772h7.4v-7.4h-7.4v7.4zm-6.343-8.458h-7.4v8.458h7.4v-8.458zm6.343-2.114h-6.343v10.572h6.343V25.2zM17.914 35.772h7.4v-4.23h-7.4v4.23z" stroke="#4D535B" stroke-width="2" stroke-miterlimit="10"/></svg>
<p>Data</p>
</a>
</li>
</ul>
</div>
</div>
<div id="business_wrap"> <!-- 100% x 724-->
<div id="business_box"> <!-- 1400px x 702.31-->
<div id="business_box_l"> <!--638x510-->
<small><img width="178" height="22" src="./images/새 폴더/svg-export/svgexport-11.logobusiness..png"></small>
<span>NEW</span>
<p class="not"></p>
<h2>A business solution </br>designed for teams</h2>
<p class="p1">Upgrade to a curated experience packed with tools</br>
and benefits, dedicated to businesses</p>
<ul>
<li>
<span><img width="24" height="24" src ="./images/새 폴더/svg-export/svgexport-10.checked.png"></span>
Connect to freelancers with proven business experience
</li>
<li>
<span><img width="24" height="24" src ="./images/새 폴더/svg-export/svgexport-10.checked.png"></span>
Get matched with the perfect talent by a customer success manager
</li>
<li>
<span><img width="24" height="24" src ="./images/새 폴더/svg-export/svgexport-10.checked.png"></span>
Manage teamwork and boost productivity with one powerful </br> workspace
</li>
</ul>
<a href="">Explore Fiverr Business</a>
</div>
<div id="business_box_r"> <!--838x534-->
<img width="872" height="556" src="./images/business-desktop-870-x1.png">
</div>
</div>
</div>
<div id="seo_wrap"> <!--100%-->
<div id="seo_btn">
<button class="seoBtn seo_btn_l" onclick="seo_left()"><img width="16" height="16" src="./images/새 폴더/svg-export/svgexport-10.gtBtn.png"></button>
<button class="seoBtn seo_btn_r" onclick="seo_right()"><img width="18" height="18" src="./images/새 폴더/svg-export/svgexport-10.gtBtn.png"></button>
</div>
<div id="seo_box"> <!-- 1400px; x290-->
<div id="seo_box_t">
<div class="seo_box_t_set">
<ul class="SEO0">
<li id="seo_box_t_img" onclick="video_on('./images/seo/seo_1.mp4')">
<img src="images/seo/kayKim.jpg">
<p><img width="80" height="80" src="./images/playbtn2.png">
</p>
</li>
<li id="seo_box_t_pr">
<h5>
Kay Kim, Co-Founder |
<img widht="82" height="36" src="images/rooted-logo-x2.321d79d.png">
</h5>
<i>
"It's extremely exciting that Fiverr has freelancers </br>
from all over the world — it broadens the talent pool. </br>
One of the best things about Fiverr is that while we're </br>
sleeping, someone's working."
</i>
</li>
</ul>
<ul class="SEO1">
<li id="seo_box_t_img" onclick="video_on('./images/seo/seo_2.mp4')">
<img src="./images/seo/caitlin.jpg">
<p><img width="80" height="80" src="./images/playbtn2.png">
</p>
</li>
<li id="seo_box_t_pr">
<h5>
Caitlin Tormey, Chief Commercial Officer |
<img widht="82" height="36" src="./images/naadam-logo-x2.0a3b198.png">
</h5>
<i>
"We've used Fiverr for Shopify web development,</br>
graphic design, and backend web development.</br>
Working with Fiverr makes my job a little easier </br>
every day."
</i>
</li>
</ul>
<ul class="SEO2">
<li id="seo_box_t_img" onclick="video_on('./images/seo/seo_3.mp4')">
<img src="./images/seo/Brighid.jpg">
<p><img width="80" height="80" src="./images/playbtn2.png">
</p>
</li>
<li id="seo_box_t_pr">
<h5>
Brighid Gannon (DNP, PMHNP-BC), Co-Founder |
<img widht="82" height="36" src="./images/lavender-logo-x2.89c5e2e.png">
</h5>
<i>
"We used Fiverr for SEO, our logo, website, copy,</br>
animated videos — literally everything. It was like </br>
working with a human right next to you versus being</br>
across the world."
</i>
</li>
</ul>
<ul class="SEO3">
<li id="seo_box_t_img" onclick="video_on('./images/seo/seo_4.mp4')">
<img src="./images/seo/timandDan.jpg">
<p><img width="80" height="80" src="./images/playbtn2.png">
</p>
</li>
<li id="seo_box_t_pr">
<h5>
Tim and Dan Joo, Co-Founders |
<img widht="82" height="36" src="images/rooted-logo-x2.321d79d.png">
</h5>
<i>
"When you want to create a business bigger than </br>
yourself, you need a lot of help. That's what Fiverr </br>
does."
</i>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="logomaker_wrap"> <!--100% 300-->
<div id="logomaker_box"> <!-- 1400x391-->
<div id="logomaker">
<img width="1400" height="410" src="images/logo-maker-banner-wide-desktop-1352-2x.png">
</div>
</div>
</div>
<div id="inspired_wrap">
<div id="inspired_box">
<h2>Get inspired with projects made by our freelancers</h2>
<div id="inspired_box_btn">
<input type="button" value="<">
<input type="button" value=">">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div id="fiverr_guides_wrap"> <!--100%-->
<div id="fiverr_guides_box"> <!--1400x907-->
<div class="fiverr_guides_topbox">
<h2>Fiverr guides</h2>
<a href="#">See More Guides > </a>
</div>
<ul class="fiverr_guides_3boxes">
<li class="guides_box1">
<span><img width="445" hegith="226" src="./images/guide-start-online-business-552-x2.png"></span>
<h6>Start an online business and work from home</h6>
<p>A complete guide to starting a small business online</p>
</li>
<li class="guides_box2">
<span><img width="445" hegith="226" src="./images/guide-digital-marketing-552-x2.png"></span>
<h6>Digital marketing made easy</h6>
<p>A practical guide to understand what is digital marketing</p>
</li>
<li class="guides_box3">
<span><img width="445" hegith="226" src="./images/guide-create-a-logo-552-x2.png"></span>
<h6>Create a logo for your business</h6>
<p>A step-by-step guide to create a memorable business logo</p>
</li>
</ul>
<div id="guides_space"></div>
<div id="fiverr_guides_bottombox">
<img width="1400" height="444" src="./images/bg-signup-1400-x1.png">
<span>Find the <i>talent</i> <span> </span>nedded to </br>
get your business <i>growing .</i></span>
<a href="#">Get Started</a>
</div>
</div>
</div>
<div id="footer_wrap"> <!--100%-->
<div id="footer_box"> <!--1400x647-->
<div class="fb footer_box1">
<div class="footer_h6">
<h6>Categories</h6>
</div>
<ul>
<li><a href="">Graphics & Design</a></li>
<li><a href="">Digital Marketing</a></li>
<li><a href="">Writing & Translation</a></li>
<li><a href="">Video & Animation</a></li>
<li><a href="">Music & Audio</a></li>
<li><a href="">Programming & Tech</a></li>
<li><a href="">Data</a></li>
<li><a href="">Business</a></li>
<li><a href="">Lifestyle</a></li>
<li><a href="">Sitemap</a></li>
</ul>
</div>
<div class="fb footer_box2">
<div class="footer_h6">
<h6>About</h6>
</div>
<ul>
<li><a href="">Careers</a></li>
<li><a href="">Press & News</a></li>
<li><a href="">Partnerships</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Terms of Service</a></li>
<li><a href="">Intellectual Property Claims</a></li>
<li><a href="">Investor Relations</a></li>
</ul>
</div>
<div class="fb footer_box3">
<div class="footer_h6">
<h6>Support</h6>
</div>
<ul>
<li><a href="">Help & Support</a></li>
<li><a href="">Trust & Safety</a></li>
<li><a href="">Selling on Fiverr</a></li>
<li><a href="">Buying on Fiverr</a></li>
</ul>
</div>
<div class="fb footer_box4">
<div class="footer_h6">
<h6>Community</h6>
</div>
<ul>
<li><a href="">Events</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Forum</a></li>
<li><a href="">Community Standards</a></li>
<li><a href="">Podcast</a></li>
<li><a href="">Affiliates</a></li>
<li><a href="">Invite a Friend</a></li>
<li><a href="">Become a Seller</a></li>
<li><a href="">Fiverr Elevate
<small></br>Exclusive Benefits</small>
</a></li>
</ul>
</div>
<div class="fb footer_box5">
<div class="footer_h6">
<h6>More From Fiverr</h6>
</div>
<ul>
<li><a href="">Fiverr Business</a></li>
<li><a href="">Fiverr Pro</a></li>
<li><a href="">Fiverr Studios</a></li>
<li><a href="">Fiverr Logo Maker</a></li>
<li><a href="">Fiverr Guides</a></li>
<li><a href="">Get Inspired</a></li>
<li><a href="">ClearVoice
<small></br>Content MArketing</small>
</a></li>
<li><a href="">AND CO
<small></br>Invoice Software</small>
</a></li>
<li><a href="">Learn
<small></br>Online Courses</small>
</a></li>
</ul>
</div>
<div id="footer_box_bottom">
<div id ="footer_box_bottom_l">
<span><img src="./images/새 폴더/svg-export/svgexport-14.logo2.png"></span>
<p>© Fiverr International Ltd. 2021</p>
</div>
<div id="footer_box_bottom_r">
<ul class="footer_rl_bottom">
<li><a href="#"><img src="./images/새 폴더/svg-export/svgexport-15.twter.png"></a></li>
<li><a href="#"><img src="./images/새 폴더/svg-export/svgexport-16.facebook.png"></a></li>
<li><a href="#"><img src="./images/새 폴더/svg-export/svgexport-17.in.png"></a></li>
<li><a href="#"><img src="./images/새 폴더/svg-export/svgexport-18.q.png"></a></li>
<li><a href="#"><img src="./images/새 폴더/svg-export/svgexport-19.insta.png"></a></li>
</ul>
<ul class="footer_rr_bottom">
<li>
<button id="globeBtn" >
<span>
<img src="./images/새 폴더/svg-export/svgexport-6.globe2.png">
</span>
<p>English</p>
</button>
</li>
<li>
<button id="usdBtn">
<p>$USD</p>
</button>
</li>
<li class="human">
<button id="humanBtn">
<img src="./images/새 폴더/svg-export/svgexport-21.human.png">
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./fiverr.js"></script>
</body>
</html>
/* CSS Styles sheet */
*{margin:0; padding:0;}
ul,li{list-style: none;}
a{text-decoration: none;}
img{display:block;line-height: 0;}
#wrap{width:100%;}
/************* 1. header *************/
#header_wrap{
width:100%;
height:680px;
}
.gnb_bar{
width:100%;
height:80px;
background-color: transparent;
position:fixed;
z-index:60;
top:0;
border-bottom: 1px solid transparent;
transition: .3s ease-in-out;
}
#gnb_box{
width:1400px;
height:80px;
margin:0 auto;
}
#gnb_box1{
float:left;
width:125px;
padding:25px 0;
}
/*/////////////gnb_bar_up//////////*/
.gnb_bar_up1{
background-color:white;
transition: .3s ease-in-out;
}
.gnb_bar_up1>#gnb_box>#gnb_box2>a{
color:#62646a;
}
.gnb_bar_up1>#gnb_box>#gnb_box2>a>#gnb_btn{
color:#1dbf73;
border:1px solid #1dbf73;
}
.gnb_bar_up1>#gnb_box>.gnb_text{
display:block
}
.gnb_bar_up2{
display:block;
}
#gnb_mag{
position:absolute;
top:42%;
left:2%;
}
.gnb_text{
position: relative;
width: 390px;
height: 34px;
display: inline-block;
padding:25px 0;
display:none;
float:left;
}
.gnb_txbx{
/*display: none;*/
height:34px;
width:310px;
font-size:14px;
border: 1px solid #ddd;
padding:2px 0 0 28px;
}
.gnb_txbx_btn{
float: right;
height:34px;
width: 81px;
background-color:#1dbf73;
color:white;
font-weight: 600;
font-size: 14px;
box-sizing: border-box;
cursor: pointer;
border: 1px solid #1dbf73;
display: inline-block;
margin-left:-6px;
transition: .2s ease-in-out;
}
#gnb_box2{
float:right;
padding:25px 0 20px 0;
box-sizing: border-box;
}
#gnb_box2>a>img{
display: inline-block;
position: relative;
top:3px;
right:5px;
}
#gnb_box1>a{
float:left;
width:23px;
height: 19px;
}
#gnb_box1>h1{
float:left;
width: 89px;
height: 27px;
}
#gnb_box2>a{
color:#fff;
font-weight:bold;
font-size:16px;
padding:0 10px;
transition: .2s ease-in-out;
}
#gnb_box2>a:hover{
color:#1dbf73;
}
#gnb_box2>a>#gnb_btn{
color:#fff;
font-weight:bold;
font-size:16px;
background-color: transparent;
border:1px solid white;
padding:5px 18px;
box-sizing: border-box;
border-radius: 3px;
cursor: pointer;
transition: 0.1s ease-in-out;
}
#gnb_box2>a>#gnb_btn:hover{
background-color: #1dbf73;
border:1px solid transparent;
}
/* //////////////////gnb_child ///////////////////////*/
#gnb_child{
width:100%;
height:40px;
background-color: #fff;
position:fixed;
top:81px;
border-bottom: 1px #e5e5e5 solid;
border-top:1px #e5e5e5 solid;
z-index:60;
}
#gnb_child_box{
width:1400px;
height:40px;
margin:0 auto;
}
#gnb_child>#gnb_child_box>ul{
width:1400px;
height: 40px;
}
#gnb_child>#gnb_child_box>ul>li>a{
color:#7a7d85;
font-weight:600;
padding: 6px 0;
}
#gnb_child_box>ul>li{
display: inline-block;
padding:0 10px 0 0 ;
padding:9px 20px 0px 10px;
}
.gnb_child_off{
display:none;
transition: .3s ease-in-out;
}
.gnb_child_on{
display:block;
transition: 1s ease-in-out;
animation:gnb_slider 1s;
}
@keyframes gnb_slider{
from{opacity:0}to{opacity:100%}
}
#header{
width:1400px;
height:680px;
background-color: brown;
margin:0 auto;
}
/* 아래꺼 지우기 ~ */
#header_hero_backgrounds{
position: relative;
width:100%;
height:800px;
}
#header_hero_backgrounds>ul{
position: absolute;
z-index:0;
left:50%;
transform: translateX(-50%);
}
/* HEADER HERO TEXT */
#header_hero_textbox{
position: absolute;
background-color:transparent;
width: 800px;
height: 500px;
left:50%;
z-index:50;
transform:translateX(-50%);
}
.header_hero_text{
position:absolute;
z-index:30;
top:50%;
transform: translateY(0%);
left:-300px;
}
.header_hero_text>li>span{
color:white;
font-size: 48px;;
line-height: 56px;
display: block;
padding:0 0 30px 0;
font-weight: bold;
}
.header_hero_text>li>span>i{
font-family: 'Permanent Marker', cursive;
font-weight:10;
font-size:70px;
}
#header_mag{
width:20px;
height:20px;
position:absolute;
top:50.5%;
left:2%;
}
#header_mag>img{
display:inline-block;
}
#header_inputbox{
height:48px;
width:545px;
font-size:16px;
border: 1px solid transparent;
float:left;
padding:0 0 0 35px;
}
#header_btn{
height:48px;
width: 105px;
background-color:#1dbf73;
color:white;
font-weight: 600;
font-size: 18px;
padding: 10px 24px 12px 24px;
box-sizing: border-box;
cursor: pointer;
border: 1px solid transparent;
display: inline-block;
margin-left:-6px;
transition: .2s ease-in-out;
}
#header_btn:hover{
background-color:#19a463;
}
#header_hero_text_popular{
width:560px;
height:62px;
color:white;
}
#header_hero_text_popular>p{
float:left;
padding:20px 20px 20px 0;
}
#header_hero_text_popular>ul{
width:650px;
height:50px;
padding:20px;
}
#header_hero_text_popular>ul>li{
display: inline-block;
border:1px solid white;
padding: 1 12px 0;
border-radius: 30px;
transition: 0.3s ease-in-out;
}
#header_hero_text_popular>ul>li:hover{
background-color:#ffffff;
}
#header_hero_text_popular>ul>li>a:hover{
color:black;
}
#header_hero_text_popular>ul>li>a{
color:white;
background-color: transparent;
font-weight:600;
font-size:14px;
padding: 8px 8px 12px 8px;
line-height: 25px;
background-color: transparent;
transition: 0.3s ease-in-out;
}
/**/
#header_hero_backgrounds>.hero{
width:100%;
display:none;
}
#header_hero_backgrounds>.hero >img{
display:block;
position:relative;
left:50%;
transform: translateX(-50%);
}
#image1_1{ background:#023a15 !important;}
#image1_2{ background:#b54762 !important;}
#image1_3{ background:#7e1a02 !important;}
#image1_4{ background:#023a15 !important;}
#image1_5{ background:#530e1f !important;}
/*
#header_hero_backgrounds>.hero:nth-child(1){ background:#023a15;}
#header_hero_backgrounds>.hero:nth-child(2){ background:#b54762;}
#header_hero_backgrounds>.hero:nth-child(3){ background:#7e1a02;}
#header_hero_backgrounds>.hero:nth-child(4){ background:#023a15;}
#header_hero_backgrounds>.hero:nth-child(5){ background:#530e1f;}
*/
#header_hero_backgrounds>.hero.firston{
display:block;
}
#header_hero_backgrounds>.hero.on{
display:block;
animation: fadein 1s;
animation-fill-mode: forwards;
}
@keyframes fadein{
from{ opacity:0}to {opacity:1}
}
#header_hero_backgrounds>.hero.out{
display:block;
animation: fadeout 1s;
animation-fill-mode: forwards;
}
@keyframes fadeout{
from{opacity:1} to {opacity:0;}
}
/************* 2. header_low *************/
#header_low{
width:100%;
height:95px;
background-color: #F5F5F5;
}
#header_low_container{
width:1400px;
height:95px;
margin:0 auto;
}
#header_low_container>span{
display: inline-block;
font-size:16px;
color:#B5B6Ba;
font-weight:bold;
width:390px;
height:95px;
padding:38px 0 38px 280px;
box-sizing: border-box;
}
#header_low_container>ul{
width:1000px;
float:right;
margin:0 auto;
}
#header_low_container>ul>li{
float:left;
padding:20px;
width:100px;
}
/************* 3. popular *************/
#popular_wrap{
width:100%;
height:407px;
background-color: #ffffff;
padding:96px 0px 130px 0;
}
#popular_box{
width:1400px;
height:407px;
background-color: white;
margin:0 auto;
}
#popular_box>h2{
width:1400px;
height:40px;
font-size:28px; /*여기서 폰트 사이즈가 31이상되면 글이 떨어짐*/
color:#404145;
font-weight:bold;
padding: 0 0 20px 0;
}
#popular_pic_box{
height:350px;
width:1400px;
position:relative;
/*overflow: hidden; */
}
#popular_btn{ /*svg가 깨짐 -> <> 로 대체함 방법은? */
width:1425px;
height:1px;
position:absolute;
z-index:10;
left:-2%;
top:47%;
}
#popular_ul{
position:relative;
overflow:hidden;
width:1400px;
height:350px;
}
#popular_ul>ul{
display: none;
width:1400px;
position: absolute;
width:1400px;
height:345px;
}
#popular_ul>ul>li{
padding:0 20px 0 0;
float:left;
width:255px;
}
/*
.ul0,.ul1{
z-index:4;
width:1400px;
height:345px;
left:50%;
transform: translateX(-50%);
}*/
#popular_ul>.ul0{
display: block;
}
#popular_ul>ul>li>a{
position:relative;
z-index: 1;
}
#popular_ul>ul>li>a>h4{
position:absolute;
z-index:10;
font-size:24px;
color:#ffffff;
padding:16px;
box-sizing: border-box;
}
#popular_ul>ul>li{
transition: .05s ease-in-out;
transform:scale(1.0);
}
#popular_ul>ul>li:hover{
transform:scale(0.98);
opacity:0.8;
}
#popular_ul>ul>li>a>img{ /* 이미지 사이즈 안먹음 */
width:252px;
height:345px;
border-radius: 5px;
/*position:abolute; */
z-index:0;
}
#popular_ul>ul>li>a>h4>p{
font-size:14px;
color:#ffffff;
width:250px;
}
#popular_ul>.in0{
animation:slider1 0.5s;
animation-fill-mode: forwards;
display:block;
}
@keyframes slider1{
from{left:1400px}to{left:0px}
}
#popular_ul>.out0{
animation:slider2 0.5s;
animation-fill-mode: forwards;
display:block;
}
@keyframes slider2{
from{left:0}to{left:-1400px}
}
#popular_ul>.in1{
animation:slider3 0.5s;
animation-fill-mode: forwards;
display:block;
}
@keyframes slider3{
from{left:-1400px}to{left:0px}
}
#popular_ul>.out1{
animation:slider4 0.5s;
animation-fill-mode: forwards;
display:block;
}
@keyframes slider4{
from{left:0}to{left:1400px}
}
/************* 4. video_content *************/
#video_content_wrap{
width:100%;
height:704px;
background-color: #e6fffa;
}
#video_content_box{
width: 1400px;
height:704px;
background-color:transparent;
margin:0 auto;
padding:96px 0;
}
#video_content_box_l{
width:500px;
height:500px;
background-color: transparent;
float:left;
padding:0 157.5px 0 16px;
}
#video_content_box_r{
width:700px;
height:450px;
background-color: transparent;
float:left;
}
#video_content_box_l>h2{
color:#404145;
font-size:32px;
padding: 0 0 24px 0;
}
#video_content_box_l>ul>li>h6>span{
float:left;
}
#video_content_box_l>ul>li>h6>span>img{
width:16px;
height:16px;
padding: 5px 5px 0 0;
}
#video_content_box_l>ul>li>h6{
color:#404145;
font-size:18px;
padding: 0 0 8px;
}
#video_content_box_l>ul>li{
padding: 0 0 24px 0;
}
#video_content_box_l>ul>li>p{
color:#63646a;
font-size:18px;
}
#video_content_box_r{
padding:26px 16px 26px 0;
}
#video_content_box_r>a{
position:relative;
display: block;
}
#video_content_box_r>a>p{
position:absolute;
top:40%;
left:45%;
}
.video_imgs{
transition: .5s ease-in-out;
}
.video_imgs:hover{
opacity:0.8;
}
/******************video content *********/
#video_content_popup{
width:100%;
height:100%;
background-color: #000000A6;
position: fixed;
z-index:20;
display:none;
}
#video_content_popup.video_on{
display:block;
}
#video_content_popup>.video_content_popup_in.video_on{
display:block;
}
.video_content_popup_in{
position: absolute;
left:50%;
top:25%;
display: block;
transform: translateX(-50%);
}
.video_content_header{
width:900px;
height:39px;
background-color:transparent;
}
.video_content_header>p{
padding:8px 0 0 0; /************* 이미지 바꾸기 ***********/
cursor: pointer;
position:absolute;
right:0.1%;
z-index: 10;
}
.video_content_video{
width:900px;
height:506px;
background-color:transparent;
position:absolute;
z-index:50;
}
/************* 5. marketplace *************/
#marketplace_wrap{
width:100%;
height:330px;
background-color: #ffffff;
margin:96px 0 120px 0;
}
#marketplace_box{
width:1400px;
height:330px;
background-color: #ffffff;
margin:0 auto;
}
#marketplace_box>h2{
width:1400px;
height:60px;
padding:0 0 90px;
box-sizing: border-box;
font-size:32px;
color:#404145;
}
#marketplace_box>ul{
width:1400px;
height:229px;
}
#marketplace_box>ul>li{
width:280px;
height:142px;
padding:0 10px 55px;
box-sizing: border-box;
float:left;
display:block;
}
#marketplace_box>ul>li>a{
width:112px;
height:87px;
position:relative;
color:#222325;
cursor: pointer;
}
/*
#marketplace_box>ul>li>a:after {
content: "";
position: absolute;
top: 45px;
right: 50%;
-webkit-transform: translateX(50%);
transform: translateX(50%);
padding: 0 0 8px;
width: 48px;
border-bottom: 2px solid #c5c6c9;
} */
#marketplace_box>ul>li>a>svg{
width:48px;
height:48px;
display:inline-block;
padding: 0 47px 0px 47px;
margin-left:60px; /* margin 대신 중앙정렬 방법은? */
}
#marketplace_box>ul>li>a>p:before{
content:"";
display:block;
width:18%;
height:1px;
background:#62646a;
margin:5px auto 13px auto;
transition-duration: 0.5s;
transform:scale(1.0);
}
#marketplace_box>ul>li>a:hover>p:before{
background:#1dbf73;
transform:scale(3);
}
#marketplace_box>ul>li>a>p{
text-align: center;
}
/************* 6. business *************/
#business_wrap{
width:100%;
height:600px;
background-color: #0d084d;
padding:0 0 96px 0;
}
#business_box{
width:1400px;
height:724px;
margin: 0 auto;
padding:96px 0;
box-sizing: border-box;
position:relative;
}
#business_box_l{
width:668px;
height:532px;
float:left;
padding:0 72px 0 16px;
box-sizing: border-box;
}
#business_box_r{
float:left;
position:absolute;
width:900px;
left:48%;
}
#business_box_l>small{
float:left;
padding: 0 0 32px;
width:190px;
}
.not{
display:block;
width:100%;
height:40px;
}
#business_box_l>span{
background-color: #584aff;
color:#ffffff;
border-radius: 30px;
padding:3px 7px 4px;
font-weight:bold;
font-size:10px;
line-height: 25px;
}
#business_box_l>h2{
color:#ffffff;
font-size:32px;
padding:0 0 24px;
}
#business_box_l>.p1{
color:#ffffff;
padding:0 0 32px;
font-size:18px;
}
#business_box_l>ul>li{
font-size:16px;
color:#ffffff;
padding:0 0 12px;
}
#business_box_l>ul>li>span{
float:left;
padding:0 10px 0 0;
}
#business_box_l>a{
color:#ffffff;
background-color:transparent;
padding: 12px 24px;
font-weight:bold;
border:1px solid transparent;
border-radius: 4px;
line-height: 150px;
}
/************* 7. seo *************/
#seo_wrap{
width:1400px;
height:345px;
padding:96px 0;
position: relative;
margin:0 auto;
}
#seo_box{
width:1400px;
height:345px;
background-color: white;
margin:0 auto;
padding:10px 0;
position: relative;
overflow: hidden;
}
.seoBtn{
width:48px;
height:48px;
border-radius: 24px;
border:1px solid #fff;
border-radius: 24px;
cursor: pointer;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 15%);
}
#seo_btn{
width:1450px;
height:1px;
background-color: transparent;
position: absolute;
z-index:15;
left: -2%;
top:44%;
}
.seo_btn_l{
transform: rotate(180deg);
background-color: white;
}
.seo_btn_r{
float:right;
background-color: white;
padding:0 0 0 5px;
}
.seo_btn_l>img{
padding:10px 20px 10px 18px;
}
.seo_btn_r>img{
padding:10px 0 10px 14px;
}
#seo_box{
width:1400px;
height: 315px;
}
#seo_box_t{
width:1400px;
height:315px;
background-color: transparent;
}
/* SEO BTN CLASS */
.seo_box_t_set{
width:1400px;
height:315;
}
.seo_box_t_set>ul{
width:1400px;
height: 315px;
position:absolute;
display: none;
}
.seo_box_t_set>.SEO0{
display:block;
}
.seo_box_t_set>.seo_on0{
animation:slider10 1s;
animation-fill-mode: forwards;
display:block;
}
@keyframes slider10 {
from{left:1400px}to{left:0}
}
.seo_box_t_set>.seo_out0{
animation:slider11 1s;
animation-fill-mode: forwards;
display:block;
}
@keyframes slider11 {
from{left:0}to{left:-1400px}
}
.seo_box_t_set>.seo_on1{
animation:slider12 1s;
animation-fill-mode: forwards;
display:block;
}
@keyframes slider12 {
from{left:-1400px}to{left:0}
}
.seo_box_t_set>.seo_out1{
animation:slider13 1s;
animation-fill-mode: forwards;
display:block;
}
@keyframes slider13 {
from{left:0}to{left:1400px}
}
#seo_box_t_img>img{
width:518px;
height:291px;
/*float:left; 없어도 변화 없음 */
}
#seo_box_t_pr>h5{
float:left;
color:#7a7d85;
font-size:20px;
padding:0 0 16px 0;
font-weight: normal;
position:relative;
}
#seo_box_t_pr>h5>img{
display: inline-block;
position: absolute;
bottom:18%;
}
#seo_box_t_img{
position:relative;
display:inline-block;
float:left;
width: 518px;
height: 291px;
cursor: pointer;
}
#seo_box_t_img>p{
position:absolute;
left:44%;
top:32%;
}
#seo_box_t_pr{
float:left;
width:819px;
height:236px;
background-color: white;
padding:40px 48px 0 90px;
box-sizing: border-box;
}
#seo_box_t_pr>i{
display:inline-block;
color:#003912;
font-size:24px;
line-height: 50px;
font-weight: bold;
}
/*
#seo_box_b{
width:1400px;
height:500px;
background-color: cadetblue;
overflow: hidden;
max-height:360px;
}*/
/************* 8. logomaker *************/
#logomaker_wrap{
width:100%;
height:400px;
background:navajowhite;
}
#logomaker_box{
width:1400px;
height:300px;
background-color: #4d73db;
margin:0 auto;
overflow: hidden;
}
#logomaker>img{
margin-top:-60px;
}
/************* 9. inspired *************/
#inspired_wrap{
width:100%;
height:670px;
background-color: olive;
padding:96px 0 0 0;
}
#inspired_box{
width:1400px;
height:670px;
background-color: darkslateblue;
margin:0 auto;
}
/************* 10. fiverr_guides *************/
#fiverr_guides_wrap{
width:100%;
height:910px;
background-color: #ffffff;
padding:96px 0 96px 0 ;
}
#fiverr_guides_box{
width:1400px;
height:910px;
background-color: #ffffff;
margin: 0 auto;
}
.fiverr_guides_topbox{
width:1400px;
height:60px;
}
.guides_box1{
padding:0 31px 0 0;
}
.guides_box2{
padding:0 31px 0 0;
}
.fiverr_guides_topbox>h2{
float:left;
display: inline-block;
color:#404145;
font-weight: bold;
font-size:24px;
}
.fiverr_guides_topbox>a{
float:right;
display: inline-block;
padding:13px 0 0 0;
color:#4a73e8;
}
.fiverr_guides_3boxes>li{
float:left;
}
.fiverr_guides_3boxes>li>h6{
font-size:18px;
font-weight: bold;
color:#404145;
padding: 5px 0 2px;
}
.fiverr_guides_3boxes>li>p{
color:#7a7d85;
}
.fiverr_guides_3boxes>li>span>img{
transition: .3s ease-in-out;
}
.fiverr_guides_3boxes>li>span>img:hover{
opacity:0.8;
}
#guides_space{
width:1400px;
height:350px;
}
#fiverr_guides_bottombox{
position:relative;
width:1400px;
height:500px;
}
#fiverr_guides_bottombox>img{
position:absolute;
z-index:5;
}
#fiverr_guides_bottombox>span{
color:#ffffff;
font-size:48px;
line-height: 56px;
font-weight: bold;
position:absolute;
z-index:20;
top:20%;
left:7%;
}
#fiverr_guides_bottombox>span>i{
font-family: 'Permanent Marker', cursive;
font-weight:1;
}
#fiverr_guides_bottombox>a{
background-color:#1dbf73;
font-size: 30px;
color:#ffffff;
font-weight: bold;
width:190px;
height:34px;
border:1px solid transparent;
border-radius:5px;
text-align: center;
position:absolute;
z-index: 20;
padding:7px 12px 15px 11px;
top:55%;
left:7%;
transition: .5s ease-in-out;
}
#fiverr_guides_bottombox>a:hover{
background-color: #460a00;
border:1px solid white;
}
/************* 11. footer *************/
#footer_wrap{
width:100%;
height:650px;
background-color: #ffffff;
border-top: 0.5px solid #d5d4d2;
}
#footer_box{
width:1400px;
height:530px;
background-color: #ffffff;
margin: 0 auto;
padding:64px 0 24px 0;
box-sizing: border-box;
border-bottom: 0.5px solid #d5d4d2;
}
#footer_box>.fb{
width:248px;
height:426px;
padding:0 16px;
float:left;
}
.footer_h6{
color:#404145;
font-size:26px;
padding: 0 0 20px;
font-weight:bold;
}
#footer_box>.fb>ul>li{
padding:0 0 16px;
}
#footer_box>.fb>ul>li>a{
color:#7a7d85;
font-size:16px;
font-weight:bold;
}
#footer_box>.fb>ul>li>a:hover{
text-decoration: underline;
}
.footer_box4>ul>li>a>small{
color:#B5B6BA;
font-size:14px;
}
.footer_box5>ul>li>a>small{
color:#B5B6BA;
font-size:14px;
}
/*//////footer bot bottom////////*/
#footer_box_bottom{
width:1400px;
height:56px;
background: #ffffff;
margin-top:490px;
}
#footer_box_bottom_l>p{
color:#b5b6ba;
width:400px;
height:50px;
padding:8px 0 0 0;
}
#footer_box_bottom_l>span>img{
float:left;
padding: 0 16px 0 16px;
}
#footer_box_bottom_l{
float:left;
}
#footer_box_bottom_r{
float:right;
width:450px;
height:50px;
padding:0px 0 0 0;
}
.footer_rl_bottom{
padding: 13px 0px 0 0;
float:left;
}
.footer_rl_bottom>li{
float:left;
/* padding or width 주기 */
}
.footer_rr_bottom{
width: 150px;
height: 30px;
float:left;
}
.footer_rr_bottom>li{
float:left;
width: 50px;
display: inline-block;
}
#ftBtn>span{
float:left;
}
#ftBtn>p{
float:left;
}
#footer_box_bottom_r>ul>li>button{
float:left;
background-color: #ffffff;
border:1px solid transparent;
color:#7a7d85;
}
.footer_rr_bottom > li > #globeBtn{
width:60px;
height:30px;
display:flex;
/*flex-direction: row;*/
align-items: center;
justify-content: center;
padding:15px 0 0 20px;
}
#globebtn>span{
width: 18px;
height: 18px;
}
#globeBtn>p{
float:left;
display:inline-block;
/*width: 100px;*/
}
#usdBtn{
}
#humanBtn{
padding:11px 11px;
}
#footer_box_bottom_r>ul>li>button>img{
width:31px;
height:31px;
}
.human{
width:100px;
height:50px;
}
.human>img{
width:31px;
height:31px;
float:right;
}
var index=0;
var item = Math.floor(Math.random()*5);
hero(item);
function hero(n){
ul=document.querySelectorAll('#header_hero_backgrounds>ul');
if(index==ul.length){
index=0;
}
if(n == undefined){
for(i=0; i<ul.length; i++){
var beNum=index-1;
if(beNum==-1){
beNum=4;
}
if(i==index){
ul.item(i).setAttribute('class', 'hero on');
} else if(i==beNum){
ul.item(beNum).setAttribute('class', 'hero out');
} else{
ul.item(i).setAttribute('class', 'hero');
}
}
//자동
} else {
//처음
ul.item(n).setAttribute('class', 'hero firston');
index = n;
console.log(index);
}
index++;
}
setInterval(hero, 3000);
//Popular ul moving 5 set////////////////////////////////////
var po_ul= document.querySelectorAll('#popular_pic_box>ul');
var po_ul1=document.querySelector('.ul0');
var po_ul2=document.querySelector('.ul1');
var arr=['in', 'out'];
var listNum=0;
var opsit=1;
function pobtn(n){
po_ul1.setAttribute('class', 'ul'+ listNum+' '+arr[listNum]+n);
po_ul2.setAttribute('class', 'ul'+ opsit+' '+ arr[opsit] +n);
listNum ^= 1;
opsit ^= 1;
}
/*
if(n=undefined){
// 자동~
} else {
// 처음 돌릴 떄 ~
} */
// VIDEO ON (video_content & seo_video ) // /////////////////////////
function video_on(url){
video_popup=document.querySelector('#video_content_popup');
video_popup.setAttribute('class', 'video_on');
video = document.querySelector('#videoTarget');
video.setAttribute('src',url);
document.querySelector('body').style.overflow = 'hidden';
}
function video_off(){
video_popup=document.querySelector('#video_content_popup');
video_popup.setAttribute('class', ' ');
video = document.querySelector('#videoTarget');
video.setAttribute('src',' ');
document.querySelector('body').style.overflow = ''; //''빈칸 안에 space있으면 x
}
// seo btn click// ///////////////////////////////////////////
var index3=0;
let seoBoxSet=document.querySelectorAll('.seo_box_t_set>ul');
function seo_left(){
if(index3<0){
index3=3;
}
var indexMone = index3-1;
if(indexMone==-1){
indexMone=3;
}
for(i=0; i<seoBoxSet.length; i++){
// on and out 순서 @!!!@!@!@!@!@!@!@!@!@!@!@ 맞추기
if(i==index3){
seoBoxSet.item(i).setAttribute('class','seo_out1');
} else if(i==indexMone){
seoBoxSet.item(i).setAttribute('class', 'seo_on1');
} else{
seoBoxSet.item(i).setAttribute('class', '');
}
console.log(i,index3,indexMone);
}
index3--;
}
function seo_right(){
var indexPone = index3+1;
if(indexPone==4){
indexPone=0;
}
for(i=0; i<seoBoxSet.length; i++){
if(i==index3){
seoBoxSet.item(i).setAttribute('class','seo_out0');
} else if(i==indexPone){
seoBoxSet.item(indexPone).setAttribute('class', 'seo_on0');
} else{
seoBoxSet.item(i).setAttribute('class', '');
}
}
index3++;
if(index3>=seoBoxSet.length){ index3=0;}
}
// GNB TOP BOX ////////////////////////////////////////////
/*
window.addEventListener('scroll', navBar);
function navBar(){
let navi=document.querySelector('#gnb');
if(document.documentElement.scrollTop == 0){
navi.setAttribute('class', '')
console.log(navi);
} else{
console.log(navi);
navi.setAttribute('class', 'gnb_bar_up')
}
}
window.addEventListener('scroll', function(){
var nowScroll=document.body.scrollTop;
console.log(nowScroll);
})
window.addEventListener('scroll', scrollevent)
function scrollevent(){
let navi=document.querySelector('#gnb');
var nowScroll=document.body.scrollTop;
console.log(nowScroll);
if(nowScroll >= 1){
navi.setAttribute('class', 'gnb_bar_up')
navi.style.background='black';
} else if(nowScroll >=200){
navi.setAttribute('class', 'gnb_bar2_up')
}
}*/
window.addEventListener('scroll', function(){
let gnbb=document.querySelector('#gnb');
let gnb_childd=document.querySelector('#gnb_child');
let nowScroll=document.documentElement.scrollTop; //현재 스크롤바 위치
if(nowScroll == 0){
gnbb.setAttribute('class', 'gnb_bar')
document.querySelector('#gnb_img').setAttribute('src', "./images/새 폴더/svg-export/svgexport-4.logo.png");
gnb_childd.setAttribute('class','gnb_child_off')
document.querySelector('#gnb_box2_img').setAttribute('src', "./images/새 폴더/svg-export/svgexport-6.globe.png");
} else if(1<nowScroll && nowScroll<250){
gnbb.setAttribute('class', 'gnb_bar gnb_bar_up1')
document.querySelector('#gnb_img').setAttribute('src', "./images/새 폴더/svg-export/svgexport-4.logo2.png");
gnb_childd.setAttribute('class','gnb_child_off')
document.querySelector('#gnb_box2_img').setAttribute('src', "./images/새 폴더/svg-export/svgexport-6.globe2.png");
}else if(250 < nowScroll){
gnb_childd.setAttribute('class','gnb_child_on')
gnbb.setAttribute('class', 'gnb_bar gnb_bar_up1')
}
})
반응형
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| [20일차]20210409 fiverr 웹사이트 만들기 마지막 (0) | 2021.04.09 |
|---|---|
| [19일차] 20210408 fiverr웹사이트 만들기 (inspired 만 남음) (0) | 2021.04.08 |
| [17일차] 20210406 fiverr웹페이지 만들기 (0) | 2021.04.06 |
| [16일차 연습 ] (0) | 2021.04.06 |
| [16일차] 20210405 fiverr 웹사이트 만들기 (0) | 2021.04.05 |
