반응형
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++;
}
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 {
// 처음 돌릴 떄 ~
} */<!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>fiverr</title>
<link rel = "stylesheet" href="./fiverr.css">
</head>
<body>
<div id="wrap"> <!--100%-->
<div id="header_wrap"> <!--width 100% x 680pictures-->
<div id="header_hero_backgrounds">
<ul class="hero firston"><img src="./images/pic/bg-hero-1-1792-x1.png">
<li class="hero_textbox">
<p></p>
</li>
</ul>
<ul class="hero"><img src="./images/pic/bg-hero-2-1792-x1.png">
<li class="hero_textbox">
<p></p>
</li>
</ul>
<ul class="hero"><img src="./images/pic/bg-hero-3-1792-x1.png">
<li class="hero_textbox">
<p></p>
</li>
</ul>
<ul class="hero"><img src="./images/pic/bg-hero-4-1792-x1.png">
<li class="hero_textbox">
<p></p>
</li>
</ul>
<ul class="hero"><img src="./images/pic/bg-hero-5-1792-x1.png">
<li class="hero_textbox">
<p></p>
</li>
</ul>
</div>
<div id="gnb"> <!--100% height:80-->
<div id="gnb_box">
<div id="gnb_box1">
<h1><a href=""><img src="./images/svg-export/svgexport-4.logo.png"></a></h1>
</div>
<div id="gnb_box2">
<a href="">Fiverr Business</a>
<a href="">Explore</a>
<a href=""><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="header"> <!--width: 1400 x 680 -->
<div id="header_box"> <!--650x241-->
<h1><span>
Find the perfect freelance <br>
services for your business
</span></h1>
<input type="search" value='Try "building mobile app"'>
<div id="popular"></div>
</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/pic/facebook.31d5f92.png"></li>
<li><img src="./images/pic/google.517da09.png"></li>
<li><img src="./images/pic/netflix.e3ad953.png"></li>
<li><img src="./images/pic/pandg.8b7310b.png"></li>
<li><img src="./images/pic/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">
<input class="pobtn pobtnl" type="button" value="<" onclick="pobtn(0)">
<input class="pobtn pobtnr" type="button" value=">" onclick="pobtn(1)">
</div>
<div id="popular_ul">
<ul class="ul0">
<li>
<a href="#">
<h4>
<p>Build your brand</p>
Logo Design
</h4>
<img src="images/pic/popular1.jpeg">
</a>
</li>
<li>
<a href="#">
<h4>
<p>Customize your site</p>
WordPress
</h4>
<img src="./images/pic/popular2.jpeg">
</a>
</li>
<li>
<a href="#">
<h4>
<p>Share your message</p>
Voice Over
</h4>
<img src="./images/pic/popular3.jpeg">
</a>
</li>
<li>
<a href="#">
<h4>
<p>Engage your audience</p>
Video Explainer
</h4>
<img src="./images/pic/popular4.jpeg">
</a>
</li>
<li>
<a href="#">
<h4>
<p>Reach more customers</p>
Social Media
</h4>
<img src="./images/pic/popular5.jpeg">
</a>
</li>
</ul>
<ul class="ul1">
<li>
<a href="#">
<h4>
<p>Unlock growth online</p>
SEO
</h4>
<img src="./images/pic/popular6.jpeg">
</a>
</li>
<li>
<a href="#">
<h4>
<p>Color your dreams</p>
Illustration
</h4>
<img src="./images/pic/popular7.jpeg">
</a>
</li>
<li>
<a href="#">
<h4>
<p>Go global</p>
Translation
</h4>
<img src="./images/pic/popular8.jpeg">
</a>
</li>
<li>
<a href="#">
<h4>
<p>Learn your business</p>
Data Entry
</h4>
<img src="./images/pic/popular9.jpeg">
</a>
</li>
<li>
<a href="#">
<h4>
<p>Showcase your story</p>
Book Covers
</h4>
<img src="./images/pic/popular10.jpeg">
</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-12.check.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-12.check.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-12.check.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-12.check.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=""><img 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"></a>
</div>
</div>
</div>
<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-13.fiverrbusiness.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-12.check.png"></span>
Connect to freelancers with proven business experience
</li>
<li>
<span><img width="24" height="24" src ="./images/svg-export/svgexport-12.check.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-12.check.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/pic/business-desktop-870-x1.png">
</div>
</div>
</div>
<div id="seo_wrap"> <!--100%-->
<div id="seo_box"> <!-- 1400px; x290-->
<div id="seo_box_l">
seo_box_l
</div>
<div id="seo_box_r">
seo_box_r
</div>
</div>
</div>
<div id="logomaker_wrap"> <!--100% 300-->
<div id="logomaker_box"> <!-- 1400x391-->
logomaker
</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 id="fiverr_guides_topbox">
<h2>Fiverr guides</h2>
</div>
<div id="fiverr_guides_bottombox">
<img src="">
</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-16.logofooter.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-17.twter.png"></a></li>
<li><a href="#"><img src="./images/svg-export/svgexport-18.fb.png"></a></li>
<li><a href="#"><img src="./images/svg-export/svgexport-19.in.png"></a></li>
<li><a href="#"><img src="./images/svg-export/svgexport-20.q.png"></a></li>
<li><a href="#"><img src="./images/svg-export/svgexport-21.insta.png"></a></li>
</ul>
<ul class="footer_rr_bottom">
<li>
<button id="globeBtn">
<span>
<img src="./images/svg-export/svgexport-22.globe.footer.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-23human.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;
background-color: khaki;
}
#header_wrap>#gnb{
width:100%;
height:80px;
background-color: paleturquoise;
position:fixed;
z-index:10;
}
#gnb_box{
width:1400px;
height:80px;
background-color: dodgerblue;
margin:0 auto;
}
#gnb_box1{
float:left;
width:300px;
padding:25px 0;
}
#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;
}
#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;
}
#header{
width:1400px;
height:680px;
background-color: brown;
margin:0 auto;
}
#header_hero_backgrounds>ul{
position: absolute;
z-index:0;
left:50%;
transform: translateX(-50%);
}
#header_hero_backgrounds>.hero{
display:none;
}
#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: #d5d4d2;
padding:0 0 120px 0;
}
#header_low_container{
width:1400px;
height:95px;
background-color: darkslategray;
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: lightgreen;
padding:0 0 96px 0;
}
#popular_box{
width:1400px;
height:407px;
background-color: crimson;
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:50px;
position:absolute;
z-index:10;
left:-2%;
top:47%;
}
#popular_btn>.pobtn{
width:48px;
height:48px;
border-radius: 24px;
border:1px solid #fff;
color:#404145;
font-size:16px;
font-weight: bold;
}
#popular_btn>.pobtnl{
float:left;
}
#popular_btn>.pobtnr{
float:right;
}
#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;
display: inline-block;
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>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:744px;
background-color: #f1fdf7;
}
#video_content_box{
width: 1400px;
height:744px;
background-color: white;
margin:0 auto;
padding:96px 0;
}
#video_content_box_l{
width:500px;
height:500px;
background-color: aquamarine;
float:left;
padding:0 157.5px 0 16px;
}
#video_content_box_r{
width:700px;
height:450px;
background-color: bisque;
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;
}
/************* 5. marketplace *************/
#marketplace_wrap{
width:100%;
height:330px;
background-color: lightseagreen;
margin:96px 0;
}
#marketplace_box{
width:1400px;
height:330px;
background-color: darkorange;
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;
}
/*
#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 15px 47px;
margin-left:60px; /* margin 대신 중앙정렬 방법은? */
}
#marketplace_box>ul>li>a>p{
text-align: center;
}
/************* 6. business *************/
#business_wrap{
width:100%;
height:724px;
background-color: lime;
}
#business_box{
width:1400px;
height:724px;
background-color: #0D084D;
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 2px;
font-weight:bold;
font-size:10px;
}
#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:#1DBF73;
padding: 12px 24px;
font-weight:bold;
border:1px solid transparent;
border-radius: 4px;
line-height: 150px;
}
/************* 7. seo *************/
#seo_wrap{
width:100%;
height:315px;
background-color:mediumseagreen;
}
#seo_box{
width:1400px;
height:315px;
background-color: darkolivegreen;
margin:0 auto;
}
/************* 8. logomaker *************/
#logomaker_wrap{
width:100%;
height:300px;
background:navajowhite;
}
#logomaker_box{
width:1400px;
height:300px;
background-color: darkred;
margin:0 auto;
}
/************* 9. inspired *************/
#inspired_wrap{
width:100%;
height:670px;
background-color: olive;
}
#inspired_box{
width:1400px;
height:670px;
background-color: darkslateblue;
margin:0 auto;
}
/************* 10. fiverr_guides *************/
#fiverr_guides_wrap{
width:100%;
height:910px;
background-color: thistle;
}
#fiverr_guides_box{
width:1400px;
height:910px;
background-color: cadetblue;
margin: 0 auto;
}
/************* 11. footer *************/
#footer_wrap{
width:100%;
height:650px;
background-color: darksalmon;
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_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:410px;
height:50px;
padding:0px 0 0 0;
}
.footer_rl_bottom{
padding: 13px 0px 0 0;
float:left;
}
.footer_rl_bottom>li{
float:left;
width:50px;
}
.footer_rr_bottom>li{
float:left;
width: 50px;
}
#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;
}
#globeBtn{
padding:10px;
}
#usdBtn{
padding:15px 10px;
}
#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;
}
반응형
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| [16일차 연습 ] (0) | 2021.04.06 |
|---|---|
| [16일차] 20210405 fiverr 웹사이트 만들기 (0) | 2021.04.05 |
| [fiverr 웹사이트 만들기] (0) | 2021.04.05 |
| [15일차] fiverr 웹사이트, 반응형, 스크롤 (0) | 2021.04.02 |
| [14일차 복습] 변수 선언 var / console.log 로 알아보기 / fiverr 사진 클릭 움직이기 업그레이드 버젼 (0) | 2021.04.01 |
