代码拉取完成，页面将自动刷新
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405
<!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="stylesheet" href="./css/basicStyles.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./font_z2mbq6dartp/iconfont.css">
<link rel="stylesheet" href="./css/swiper.min.css">
</head>
<body>
<!-- 头部 -->
<header>
<div class="empty">
<div class="top">
<div class="container-fluid ">
<a href="#">Complimentary Standard Shipping on Orders Over £75.</a>
<a href="#"> Buy Now Pay in 3 Instalments With Klarna</a>
<div class="container-login">
<span><input type="text" placeholder="Click Search"></span>
</div>
</div>
</div>
<div class="bottom">
<div class="visible-sm">
<ul class="navigation" id="navigation">
<a href="#" id="navigation-shop-button" data-index="0">
<li>SHOP</li>
</a>
<a href="#" id="navigation-explorer-button" data-index="1">
<li>EXPLORER</li>
</a>
<a href="#" id="navigation-stores-button" data-index="2">
<li>STORES</li>
</a>
<span class="logo"><a href="#" data-index="3"><img src="./img/logo.png" alt=""></a></span>
<a href="#" id="navigation-search-button" data-index="4">
<li>SEARCH</li>
</a>
<a href="#" id="navigation-account-button" data-index="5">
<li>ACCOUNT</li>
</a>
<a href="#" id="navigation-bag-button" data-index="6">
<li>BAG</li>
</a>
</ul>
</div>
<div class="navigation-hidden" id="navigation-hidden">
<ul id="navigation-shop" class="navigation-hidden-list">
<li>FRAGRANCES </li>
<li>GIFTING </li>
<li>BATH & BODY </li>
<li>HOME FRAGRANCES </li>
<li>SHOP BY SCENT </li>
<li>COLLECTIONS </li>
</ul>
<ul id="explore" class="navigation-hidden-list">
<li>PENHALIGON'S PERKS </li>
<li>FRAGRANCE PROFILING </li>
<li>SHOPPING FROM HOME </li>
<li>ASK AN EXPERT </li>
<li>HERITAGE </li>
<li>BLOG </li>
</ul>
<ul id="navigation-store" class="navigation-hidden-list"></ul>
<ul id="navigation-logo" class="navigation-hidden-list"></ul>
<ul id="navigation-search" class="navigation-hidden-list">
<input type="text" placeholder="Please enter the account number">
</br>
<input type="password" placeholder="Please input a password">
<button>登录</button>
<button>注册</button>
<!-- <li>THE TOP SEARCHES </li>
<li>HALFETI </li>
<li>CAIRO </li>
<li>THE TRAGEDY OF LORD GEORGE </li>
<li>THE COVETED DUCHESS ROSE </li> -->
</ul>
<ul id="navigation-account" class="navigation-hidden-list">
<li>PENHALIGON'S PERKS </li>
<li>FRAGRANCE PROFILING </li>
<li>SHOPPING FROM HOME </li>
<li>ASK AN EXPERT </li>
<li>HERITAGE </li>
<li>BLOG </li>
</ul>
<ul id="navigation-bag" class="navigation-hidden-list">
<li>PENHALIGON'S PERKS </li>
<li>FRAGRANCE PROFILING </li>
<li>SHOPPING FROM HOME </li>
<li>ASK AN EXPERT </li>
<li>HERITAGE </li>
<li>BLOG </li>
</ul>
</div>
</div>
</header>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./img/banner1.jpg" alt="">
<div class="info-slider-home">
<h2>The Advantage Of Sampling Racquets</h2>
<div class="body">
<p class="text-align-center">If you’re umming and ahhing as to whether to allow Racquets in
100ml or 30ml across the line, simply order a complimentary sample. </p>
<p class="text-align-center">That way you’ll have the advantage and assurance that this
sparkling scent is one to love. </p>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="./img/banner2.jpg" alt="">
<div class="info-slider-home-2">
<h2>Introducing A New Love Match</h2>
<div class="body">
<p class="text-align-center">Penhaligon’s is delighted to serve up its terrific new scent in the
Club House – Racquets please!</p>
<p class="text-align-center">Lemon rebounds off woody leather in 100ml and 30ml. I say, Racquets
has been restrung! </p>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="./javaScript/swiper.min.js.下载"></script>
<script src="./javaScript/TweenMax.min.js.下载"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
autoplay: true,
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
<!-- 商品轮播 -->
<div class="container">
<div class="row-spance">
<h2>Best Sellers</h2>
</div>
<div class="shop-list">
<div class="shop">
<span><img src="./img/shop1.jpg" alt=""></span>
<div class="text">
<a href="#">
<p class="productlist-title">EMPRESSA</p>
</a>
<p class="product-description"> Radiant with peach, vanilla and blood orange, the Empressa’s scent
bewitches.
</p>
<p class="specifications">£178 100 ml</p>
</div>
</div>
<div class="shop">
<span><img src="./img/shop2.jpg" alt=""></span>
<div class="text">
<a href="#">
<p class="productlist-title">Cairo</p>
</a>
<p class="product-description"> Damascena rose, patchouli and saffron perfume this ancient, sensual
city.
</p>
<p class="specifications">£178 100 ml</p>
</div>
</div>
<div class="shop">
<span><img src="./img/shop3.jpg" alt=""></span>
<div class="text">
<a href="#">
<p class="productlist-title">The Favourite</p>
</a>
<p class="product-description"> Mischief-tinged musk: this fragrance wields its own royally charming
power.
</p>
<p class="specifications">£144 100 ml</p>
</div>
</div>
<div class="shop">
<span><img src="./img/shop4.jpg" alt=""></span>
<div class="text">
<a href="#">
<p class="productlist-title small-title">The Tragedy of Lord George</p>
</a>
<p class="product-description"> Rich, noble, deceptive. Like our patriarch, this woody perfume has
secrets.
</p>
<p class="specifications">£204 75 ml</p>
</div>
</div>
<div class="shop">
<span><img src="./img/shop5.jpg" alt=""></span>
<div class="text">
<a href="#">
<p class="productlist-title">LUNA</p>
</a>
<p class="product-description"> The Moon Goddess’ bath is perfumed with orange, jasmine and fir.
Surrender.
</p>
<p class="specifications">£144 100 ml</p>
</div>
</div>
<div class="shop">
<span><img src="./img/shop6.jpg" alt=""></span>
<div class="text">
<a href="#">
<p class="productlist-title">QUERCUS</p>
</a>
<p class="product-description"> Fresh zest and wet moss. A cologne – or a sunny day in the shade of
an oak tree?
</p>
<p class="specifications">£110 100 ml</p>
</div>
</div>
</div>
</div>
<!-- 页面内容 -->
<div class="home-page">
<div class="container">
<div class="row-space">
<div class="introduce-list">
<div class="introduce">
<img src="./img/introduce1.jpg" alt="">
<a href="#" class="introduce-title">WELCOME BACK</a>
<p class="info-no-heading">Penhaligon’s is proud to announce the doors of most of our splendid
stores have reopened, and the streets are aflood with fragrance once again. </p>
<a href="#" class="button-base">PLAN YOUR VISIT</a>
</div>
<div class="introduce">
<img src="./img/introduce2.jpg" alt="">
<a href="#" class="introduce-title">RIFLE THROUGH THE BRITISH TALES SCENT LIBRARY</a>
<p class="info-no-heading">Open up wonderful new worlds of fragrance and discover the story
behind many, as part of the travel-friendly scent library.</p>
<a href="#" class="button-base">
Your Collection Awaits
</a>
</div>
<div class="introduce">
<img src="./img/introduce3.jpg" alt="">
<a href="#" class="introduce-title">GIFTS FOR GALLIVANTERS</a>
<p class="info-no-heading">A gift is all the more glorious when you can take it wherever you
roam so we’ve curated an array of Gift Sets featuring your new travelling companion.</p>
<a href="#" class="button-base">SHOP ON</a>
</div>
<div class="introduce">
<img src="./img/introduce4.jpg" alt="">
<a href="#" class="introduce-title">AT YOUR SERVICE, NO QUIBBLES</a>
<p class="info-no-heading">Sometimes, all that’s needed is a helping hand. So allow Penhaligon’s
Aficionados to be of service. </p>
<a href="#" class="button-base">
ASK AN EXPERT
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 背景图 -->
<div class="background-pic">
<img src="./img/background.jpg" alt="">
<div class="content-text">
<h2 class="block-title"> News On Our Boutiques</h2>
<p class="text-banner">Following the latest government guidelines our fragrance aficionados await your
arrival with open arms.</p>
<div class="button-white-banner">
<a href="#" class="button-base button-box-white"> Follow Your Nose</a>
</div>
</div>
</div>
<!-- 页足 -->
<footer>
<div class="footer-container">
<div class="footer-principal">
<span class="footer-title">
<span class="footer-title-1">BE THE FIRST TO KNOW</span>
<span class="footer-title-2">
Our newsletter keeps discerning customers abreast of everything Penhaligon’s.
</span>
</span>
<div class="sign">
<input type="text" placeholder="sign up for our email" id="sing-inpute">
<button id="sign-button">SIGN UP</button>
</div>
<p class="footer-text">
One's privacy is paramount. Penhaligon's will never divulge your data to third-parties. Scout's
honour. For more information click here:
<a href="#"> Privacy Policy</a>,
<a href="#"> Terms Of Use</a>
</p>
</div>
</div>
<div class="footer-information">
<div class="footer-information-main">
<div class="footer-information-main-container">
<h3>SERVICES</h3>
<ul class="footer-information-main-ul">
<li><a href="#">ASK AN EXPERT</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">DELIVERY</a></li>
<li><a href="#">RETURNS</a></li>
<li><a href="#">FAQS</a></li>
<li><a href="#">KLARNA</a></li>
</ul>
</div>
<div class="footer-information-main-container">
<h3>ABOUT US</h3>
<ul class="footer-information-main-ul">
<li><a href="#">PENHALIGON'S PERKS</a></li>
<li><a href="#">HERITAGE</a></li>
<li><a href="#">STORES</a></li>
<li><a href="#">CAREERS</a></li>
<li><a href="#">GOVERNANCE</a></li>
</ul>
</div>
<div class="footer-information-main-container">
<h3>FRAGRANCE PROFILING</h3>
<ul class="footer-information-main-ul">
<li class="limit-long"><a href="#">To go out without perfume? Why, it’s unthinkable! Answer a
few questions to find your signature scent</a></li>
<li><a href="#">FIND YOUR PERFECT FRAGRANCE</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-empty"></div>
<div class="footer-footer">
<div class="footer-footer-main">
<div class="footer-footer-main-link">
<a href="#">Terms & Conditions</a>
<a href="#"> Privacy Policy</a>
<a href="#"> Terms of Website Use</a>
<a href="#"> Cookie Policy</a>
<a href="#"> Returns & Refunds</a>
</div>
<div class="footer-footer-empty"></div>
<div>
<span>© 2020 Penhaligon's Ltd</span>
</div>
</div>
</div>
</footer>
<script>
//正则邮箱验证
//获取inpute标签
var sing_inpute_ele = document.getElementById("sing-inpute");
//获取按钮标签
var sign_button_ele = document.getElementById("sign-button");
//点击按钮标绑定函数
sign_button_ele.onclick = function () {
//邮箱的正则表达式
var reg = /^\w{6,20}@[0-9a-z]{2,9}\.(com|cn|net)$/;
//弹出警告框
if (reg.test(sing_inpute_ele.value)) {
alert("Login successful, we will send you an email later");
} else {
alert("Email format error, please re-enter email");
}
}
</script>
<script>
var navigation_search_button = document.getElementById("navigation-search-button");
var navigation_search = document.getElementById("navigation-search");
var temp = 0 ;
navigation_search_button.onclick = function(){
if(temp === 0){
navigation_search.className = "navigation-search-display";
temp = 1 ;
}else{
navigation_search.style = "display:none";
temp = 0 ;
}
}
</script>
<script>
var navigation_hidden_list_button = document.querySelectorAll("navigation-hidden-list button");
var
</script>
</body>
</html>
举报
请认真填写举报原因，尽可能描述详细。
请选择举报类型
误判申诉
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化