nezumi/practice-html-css
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/practice-html-css.git synced 2026-09-22 13:38:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update code HTML/CSS 20230625

Browse Source
This commit is contained in:
Nezumi
2023-06-25 11:04:31 +07:00
parent 57dd9c23e0
commit 2e35febe68
2 changed files with 383 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+107 -60
View File
@@ -1,22 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Practice</title>
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.4.0/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<link
href="https://cdn.jsdelivr.net/npm/remixicon@3.4.0/fonts/remixicon.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<nav>
<div class="nav__logo">Pathway<span>.</span></div>
<ul class="nav__links">
<li class="link"><a href="#">Home</a></li>
<li class="link"><a href="#">Destination</a></li>
<li class="link"><a href="#">Pricing</a></li>
<li class="link"><a href="#">Reviews</a></li>
</ul>
<button class="btn">Contact Us</button>
<div class="nav__logo">Pathway<span>.</span></div>
<ul class="nav__links">
<li class="link"><a href="#">Home</a></li>
<li class="link"><a href="#">Destination</a></li>
<li class="link"><a href="#">Pricing</a></li>
<li class="link"><a href="#">Reviews</a></li>
</ul>
<button class="btn">Contact Us</button>
</nav>
<header>
<div class="section__container header__container">
@@ -49,57 +52,57 @@
</header>
<section class="section__container destination__container">
<div class="section__header">
<div>
<h2 class="section__title">Explore top destinations</h2>
<p class="section__subtitle">
Explore your suitable and dreams places around the world. Here you
can find your right destination.
</p>
</div>
<div class="destination__nav">
<span><i class="ri-arrow-left-s-line"></i></span>
<span><i class="ri-arrow-right-s-line"></i></span>
</div>
<div class="section__header">
<div>
<h2 class="section__title">Explore top destinations</h2>
<p class="section__subtitle">
Explore your suitable and dreams places around the world. Here you
can find your right destination.
</p>
</div>
<div class="destination__grid">
<div class="destination__card">
<img src="./assets/destination-1.jpg" alt="destination" />
<div class="destination__details">
<p class="destination__title">Banff</p>
<p class="destination__subtitle">Canada</p>
</div>
</div>
<div class="destination__card">
<img src="./assets/destination-2.jpg" alt="destination" />
<div class="destination__details">
<p class="destination__title">Machu Picchu</p>
<p class="destination__subtitle">Peru</p>
</div>
</div>
<div class="destination__card">
<img src="./assets/destination-3.jpg" alt="destination" />
<div class="destination__details">
<p class="destination__title">Lauterbrunnen</p>
<p class="destination__subtitle">Switzerland</p>
</div>
</div>
<div class="destination__card">
<img src="./assets/destination-4.jpg" alt="destination" />
<div class="destination__details">
<p class="destination__title">Zhangjiajie</p>
<p class="destination__subtitle">China</p>
</div>
</div>
<div class="destination__nav">
<span><i class="ri-arrow-left-s-line"></i></span>
<span><i class="ri-arrow-right-s-line"></i></span>
</div>
</div>
<div class="destination__grid">
<div class="destination__card">
<img src="./assets/destination-1.jpg" alt="destination" />
<div class="destination__details">
<p class="destination__title">Banff</p>
<p class="destination__subtitle">Canada</p>
</div>
</div>
<div class="destination__card">
<img src="./assets/destination-2.jpg" alt="destination" />
<div class="destination__details">
<p class="destination__title">Machu Picchu</p>
<p class="destination__subtitle">Peru</p>
</div>
</div>
<div class="destination__card">
<img src="./assets/destination-3.jpg" alt="destination" />
<div class="destination__details">
<p class="destination__title">Lauterbrunnen</p>
<p class="destination__subtitle">Switzerland</p>
</div>
</div>
<div class="destination__card">
<img src="./assets/destination-4.jpg" alt="destination" />
<div class="destination__details">
<p class="destination__title">Zhangjiajie</p>
<p class="destination__subtitle">China</p>
</div>
</div>
</div>
</section>
<section class="trip">
<div class="section__container trip__container">
<h2 class="section__title">Best trip package</h2>
<p class="section__subtitle">
Explore your suitable and dream places around the world. Here you can find you right
destination.
Explore your suitable and dream places around the world. Here you can
find you right destination.
</p>
<div class="trip__grid">
<div class="trip__card">
@@ -141,5 +144,49 @@
</div>
</div>
</section>
</body>
</html>
<section class="gallary">
<div class="section__container gallary__container">
<div class="image__gallary">
<div class="gallary__col">
<img src="./assets/gallery-1.jpg" alt="gallary" />
</div>
<div class="gallary__col">
<img src="./assets/gallery-2.jpg" alt="" />
<img src="./assets/gallery-3.jpg" alt="" />
</div>
</div>
<div class="gallary__content">
<div>
<h2 class="section__title">
Out trip gallary that will inspire you
</h2>
<p class="section__subtitle">
Explore your suitable and dream places around the world. Here you
can find your right destination.
</p>
<button class="btn">View All</button>
</div>
</div>
</div>
</section>
<section class="subscribe">
<div class="section__container subscribe__container">
<div class="subscribe__content">
<h2 class="section__title">Subscribe to get special prize</h2>
<p class="section__subtitle">
Explore your suitable and dream places around the world. Here you
can find your right destination.
</p>
</div>
<div class="subscribe__form">
<form action="">
<input type="email" placeholder="Your email here" />
<button class="btn" type="submit">Send</button>
</form>
</div>
</div>
</section>
</body>
</html>