Paris

Developer
Kenny Chen
Size
9,968 Kb
Views
8,096
  1. Paris Previews
  2. Paris HTML Codes
  3. Paris CSS Codes
  4. Paris JS Codes

How do I make an paris?

What is a paris? How do you make a paris? This script and codes were developed by Kenny Chen on 31 October 2022, Monday.

Paris Previews
IQ Test

Paris - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>paris</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Dancing+Script'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Slabo+27px'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="head"> <h1>Night in Paris</h1> <p>讓你我重新找回屬於自己的人文氣息</p>
</div>
<div class="header"></div>
<div class="section intro"> <div class="container"> <h2>最新消息</h2> <hr/> <div class="block"> <div class="news"> <div class="top"><img src="https://s3-media4.fl.yelpcdn.com/bphoto/KlV09ZUw10fqHr93mYzSBQ/o.jpg" alt=""/></div> <div class="down"> <div class="logo"><i class="fa fa-cutlery"></i></div> <div class="title">美式格子鬆餅</div> <div class="textarea"> <p>Lorem ipsum dolor sit amet, conse adipisicing elit. Quae vitae ducimus, laboriosam nemo. Alias, vero saepe, autem distinctio doloribus fuga, quibusdam</p> </div> <div class="btn"> <p>LEARN MORE</p> </div> </div> </div> <div class="news"> <div class="top"><img src="https://s3-media4.fl.yelpcdn.com/bphoto/5JzO26HVScKhCXqHNrSbbg/258s.jpg" alt=""/></div> <div class="down"> <div class="logo"><i class="fa fa-cutlery"></i></div> <div class="title">新飲品上市</div> <div class="textarea"> <p>Lorem ipsum dolor sit amet, conse adipisicing elit. Quae vitae ducimus, laboriosam nemo. Alias, vero saepe, autem distinctio doloribus fuga, quibusdam</p> </div> <div class="btn"> <p>LEARN MORE</p> </div> </div> </div> <div class="news"> <div class="top"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS64LpV1OA6YNVtzmH26USd4iZGmu9GXXrBasmU1ytSGqvQIVdZ" alt=""/></div> <div class="down"> <div class="logo"><i class="fa fa-cutlery"></i></div> <div class="title">徵求晚班工讀生</div> <div class="textarea"> <p>Lorem ipsum dolor sit amet, conse adipisicing elit. Quae vitae ducimus, laboriosam nemo. Alias, vero saepe, autem distinctio doloribus fuga, quibusdam</p> </div> <div class="btn"> <p>LEARN MORE</p> </div> </div> </div> </div> </div>
</div>
<div class="section food"> <h2>招牌商品</h2> <hr/> <div id="app"> <div class="postarea"> <div class="posts" :style="compute_left"> <div class="postbox" v-for="(w,id) in works" :class="{cur_item: id==now_index}"> <div class="cover" :style="bg_css(w.url)"> <div class="infos"> <h1>{{w.title}}</h1> <h3>{{w.description}}</h3> </div> </div> </div> </div> </div> <div class="control_left" @click="delta(-1)"><i class="fa fa-angle-left"></i></div> <div class="control_right" @click="delta(1)"><i class="fa fa-angle-right"></i></div> </div>
</div>
<div class="section intro3"> <h2>環境介紹</h2> <hr/> <div class="out"> <div id="it3_container"> <div class="show_info"> <div class="wrap"><img src="https://scontent.xx.fbcdn.net/v/t1.0-9/17264294_1356857467707483_1762301226276976614_n.jpg?oh=52c02909d7b03f49078764ba8d3e7479&amp;oe=59A20E3B"/></div> <h3>夜巴黎增設了兩檯飛鏢機！附近的朋友有空去玩玩看!	</h3> </div> <div class="show_info"> <div class="wrap"><img src="https://scontent.xx.fbcdn.net/v/t1.0-9/12122944_971464502913450_1803429893296432501_n.jpg?oh=e4b0dbe5e3efcfb382f351bdfc5bf7d6&amp;oe=59B361E2"/></div> <h3>可提供超過180座位的超大場地!	</h3> </div> <div class="show_info"> <div class="wrap"><img src="https://scontent.xx.fbcdn.net/v/t1.0-9/12088038_971464626246771_6706620398441761922_n.jpg?oh=070eb2c9d20e26f975dbace0309fdf2c&amp;oe=59E7688F"/></div> <h3>中世紀復古風的質感磚牆~	</h3> </div> <div class="show_info"> <div class="wrap"><img src="https://scontent.xx.fbcdn.net/v/t1.0-9/944007_1066887216704511_7905248037776193509_n.jpg?oh=f9f0c56da3912a93e094c5c1ef3f86e3&amp;oe=59B5F861"/></div> <h3>充滿氛圍及渲染力的絕美照片	</h3> </div> </div> </div>
</div>
<div class="footer"> <div class="wraper"> <h2>想更了解夜巴黎嗎?</h2> <input placeholder="E-mail"/> <hr/> <button>聯絡我們</button> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://bengrosser.com/share/344/jquery.cycle.all.js'></script> <script src="js/index.js"></script>
</body>
</html>

Paris - Script Codes CSS Codes

@charset "UTF-8";
* { font-family: 微軟正黑體; box-sizing: border-box;
}
p { margin: 0;
}
body, html { overflow-x: hidden; height: 100%; width: 100%; padding: 0; margin: 0;
}
.head { background-attachment: fixed; position: relative; background-image: url(http://media.nj.com/health_and_fitness_multiblog/photo/ThinkstockPhotos-179321951.JPG); background-repeat: no-repeat; width: 100%; height: 100%; background-size: cover; filter: brightness(0.9); background-position: center 90%;
}
.head h1 { font-family: "Dancing Script"; color: white; font-size: 50px; position: absolute; left: 60%; top: 50%; transform: translateX(-50%) translateY(-50%); margin-left: 18%; margin-top: 80px;
}
.head p { font-weight: bold; color: white; position: absolute; left: 60%; top: 50%; transform: translateX(-50%) translateY(-50%); margin-left: 18%; margin-top: 140px;
}
.section.intro { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/807677/fabric.png);
}
.section.intro .container { margin: 0 auto; width: 1100px; padding: 20px;
}
.section.intro .container h2 { text-align: center; color: black;
}
.section.intro .container hr { border-width: 4px; width: 100px; margin: 0 auto;
}
.section.intro .container .block { margin-top: 30px;
}
.section.intro .container .news { margin-bottom: 40px; margin-left: 30px; display: inline-block; width: 300px; transition: 0.5s; box-shadow: 5px 5px 10px #666;
}
.section.intro .container .news:hover { box-shadow: 10px 10px 20px #666; transform: scale(1.05, 1.05); transition: 0.5s;
}
.section.intro .container .news .top { overflow: hidden; height: 210px;
}
.section.intro .container .news .top img { width: 100%; transition-duration: 1s;
}
.section.intro .container .news .down { padding: 10px 25px; background-color: #fff;
}
.section.intro .container .news .down .logo { margin-top: 10px; display: inline-block;
}
.section.intro .container .news .down .logo i { font-size: 30px; color: rgba(0, 0, 0, 0.5);
}
.section.intro .container .news .down .title { margin-left: 10px; margin-top: 10px; color: #666666; display: inline-block; font-size: 20px;
}
.section.intro .container .news .down .textarea p { font-family: "Slabo 27px"; color: #777777; padding: 10px 0px; margin: 0; line-height: 18px; font-size: 16px;
}
.section.intro .container .news .down .btn { margin: 10px auto 20px; text-align: center; width: 150px; padding: 8px 20px; background-color: #ccc; color: #ffffff; font-weight: bold; cursor: pointer; transition-duration: 0.5s;
}
.section.intro .container .news .down .btn:hover { transition-duration: 0.5s; background-color: #117964;
}
.section.intro .container .news .down .btn p { margin: 0;
}
.section.food { width: 100%; height: 450px; overflow: hidden; background-image: url(https://www.tempaperdesigns.com/media/catalog/product/cache/1/image/1200x1200/9df78eab33525d08d6e5fb8d27136e95/b/r/brick_white_textured_br096_swatch_1.png);
}
.section.food h2 { text-align: center; margin-top: 50px;
}
.section.food hr { border-width: 4px; width: 100px; margin: 0 auto;
}
#app { padding-bottom: 90px; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative;
}
.postarea { width: 1050px; height: 250px; margin-top: -50px; white-space: nowrap;
}
.posts { position: relative; height: 100%; transition: 0.5s;
}
.posts .postbox { height: 100%; display: inline-block;
}
.posts .postbox .cover { width: 500px; height: 100%; margin-left: 50px; margin-right: 670px; background-size: cover; background-position: center center; display: flex; justify-content: center; align-items: center; transition: 0.5s;
}
.posts .postbox .cover:hover { transition-duration: 0.5s; width: 520px; height: 110%;
}
.posts .postbox .cover:hover .cover { background-size: 110% auto;
}
.posts .postbox .cover:hover .infos { transform: translateX(480px) translateY(-10px);
}
.posts .postbox .infos { color: white; transform: translateX(510px); text-shadow: 0px 0px 30px rgba(255, 0, 0, 0.7); transition: 0.5s;
}
.posts .postbox .infos * { margin: 0;
}
.posts .postbox .infos h3 { color: black; font-size: 20px; font-weight: bold;
}
.control_left, .control_right { position: absolute; width: 40px; height: 40px; border-radius: 50%; border: solid 1px white; font-size: 30px; color: white; background-color: #666; cursor: pointer; margin-top: -20px; display: flex; justify-content: center; align-items: center;
}
.control_left:hover, .control_right:hover { background-color: #555; color: white;
}
.control_left { top: 50%; left: 50px; transform: translateY(-50%);
}
.control_right { top: 50%; right: 50px; transform: translateY(-50%);
}
.cur_item .cover { animation: fadeIn 1s ease both;
}
.cur_item .infos h3 { animation: sliceIn 1s 0.1s ease both;
}
@keyframes sliceIn { 0% { transform: translateX(150px); } 100% { transform: translateX(0px); }
}
@keyframes fadeIn { 10% { opacity: 0; filter: saturate(0%); transform: translateX(30px); } 100% { opacity: 1; filter: saturate(100%); transform: translateX(0px); }
}
.section.intro3 { padding-top: 20px; position: relative; width: 100%; height: 450px; /*可調整背景圖案透明度 */
}
.section.intro3:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(https://static1.squarespace.com/static/52a0dabde4b0736bd37d582d/52a0db90e4b00096a0601d05/52a73f16e4b09a1e4a70aa43/1456170124933/coffee-Brights+Blend.jpg); opacity: 0.7; z-index: -1; padding: 0px 40px; background-size: cover; background-position: 5% 12%;
}
.section.intro3 h2 { color: black; text-align: center;
}
.section.intro3 hr { border-width: 4px; width: 100px; margin: 0 auto;
}
.section.intro3 .out { width: 1050px; height: 250px; margin: 0 auto;
}
.section.intro3 .out #it3_container { position: relative; margin-left: 50px; width: 500px; height: 250px;
}
.section.intro3 .out #it3_container .show_info { margin-top: 30px; width: 100%; height: 100%;
}
.section.intro3 .out #it3_container .show_info .wrap { width: 100%; height: 100%; overflow: hidden;
}
.section.intro3 .out #it3_container .show_info .wrap img { width: 100%;
}
.section.intro3 .out #it3_container .show_info h3 { color: black; opacity: 1 !important; position: absolute; top: 50%; right: -50%; transform: translateX(50%) translateY(-50%);
}
.footer { position: relative; height: 350px; width: 100%; background-image: url(http://www.healthline.com/hlcmsresource/images/topic_centers/Food-Nutrition/Coffee1-banner.jpg); background-size: cover; background-attachment: fixed; text-align: center; color: #fff;
}
.footer .wraper { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
}
.footer .wraper input { background-color: transparent; width: 400px; height: 40px; border-radius: 5px; text-align: center; color: #fff; font-size: 16px;
}
.footer .wraper button { padding: 12px 16px; border-radius: 5px; background-color: #fff; font-weight: bold;
}
.footer .wraper hr { margin-top: 20px; margin-bottom: 20px; border: solid 2px #ff6e3a; max-width: 50px;
}

Paris - Script Codes JS Codes

var works=[	{	description: "熱辣辣的夏日，來杯沁涼的水果冰沙吧！",	url: "https://scontent.xx.fbcdn.net/v/t1.0-9/13166092_1080364368690129_3228428343252982017_n.jpg?oh=d87388818b164762ff4697b9c06a89e6&oe=59B987FA"	},	{	description: "想提早準備考試的同學一樣可以來店裡看書喔～",	url: "http://tkunetnews.tku.edu.tw/wp-content/uploads/2017/03/226C1-2.jpg"	},	{	description: "沒出遠門的朋友們來夜巴黎喝杯下午茶吧～",	url: "https://scontent.xx.fbcdn.net/v/t1.0-9/12931231_1063359240390642_8421467820778690925_n.png?oh=cf76938e715ca3ede2c5b6c9d1aa6c5a&oe=59B9B731"	},	{	description: "還沒喝過的趕快『揪朋友一起來喝吧』～",	url: "https://scontent.xx.fbcdn.net/v/t1.0-9/13254343_1095166470543252_5615570401783750659_n.png?oh=b28b2e8033e10681796bc3514134701b&oe=59C11A7F"	},	{	description: "上等愛文芒果，衝擊你的味蕾!",	url: "https://scontent.xx.fbcdn.net/v/t1.0-9/13232876_1086535584739674_7371925912503205009_n.jpg?oh=87a7ad11d730a43de0dad6939cd0cabd&oe=59B3F7F2"	}
];
var vm =new Vue({	el: "#app",	data: {	now_index: 0,	span: 1220,	works: works	},	computed:{	compute_left(){	var result={	"left": (this.now_index*-this.span)+"px"	};	return result;	}	},	methods: {	delta(d){	this.now_index=(this.now_index + d + this.works.length)%this.works.length	console.log(this.now_index)	},	bg_css(url){	return{	"background-image":"url("+url+")"	}	}
}
})
$(document).ready(function() { $('#it3_container').cycle({ fx:'fade', /* type of transition */ timeout: 2000, /* time between transitions */ pause:1, /* allows mouse hover to pause */ speed: 800 /* how fast to transition */ });
});
Paris - Script Codes
Paris - Script Codes
Home Page Home
Developer Kenny Chen
Username kennyname
Uploaded October 31, 2022
Rating 3
Size 9,968 Kb
Views 8,096
Do you need developer help for Paris?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kenny Chen (kennyname) Script Codes
Name
Cake
Quick-visual
Twitch vanilla
Js-30-5
Piano
Img responsive
A Pen by kenny chen
Twitch complete
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!