Flex box használatával layout tervezése. Visual studio code-ban. A Menü két helyen lenyíló submenu. Fotók forrása: a https://www.facebook.com/avilagotlatnikell oldalamról. Kevesebb konténerrel is megoldható, de én szeretek inkább több dobozt használni a könnyebb formázás érdekében. Kitöltő szövegnek Lorem -et hashasználtam a dobozokban.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Angkor</title>
</head>
<body>
<div class="wrapper">
<div class="content">
<main>
<header>
<nav>
<ul>
<li><a href="">Cambodia</a></li>
<li class="has-submenu">
<a href="">Angkor</a>
<ul class="submenu">
<li><a href="">Angkor Vat</a></li>
<li><a href="">Angkor Thom</a></li>
<li><a href="">Bantey Srei</a></li>
</ul>
</li>
<li>
<a href="">History</a>
</li>
<li>
<a href="">Tours</a>
</li>
<li class="has-submenu">
<a href="">Hotels</a>
<ul class="submenu">
<li>
<a href="">Borei Angkor</a>
</li>
<li><a href="">Grand Luang Prabang</a></li>
<li>
<a href="">Villa Santi</a>
</li>
</ul>
</li>
<li>
<a href="">Programs</a>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
</nav>
</header>
<div class="history">
<h1>WELCOME TO ANGKOR</h1>
<p>With over 150 significant monuments, Angkor is
the crown..........................
............................. 1992. </p>
</div>
<div class="angkor">
<div class="angkor-box">
<img src="pics/img1.JPG" alt="angkor">
<h2>Angkor</h2>
<p>Lorem ipsum dolor sit amet consectetur .
Minima, dolor! Totam architecto illum beatae!
ducimus molestias quis. Non deserunt veniam
beatae quibusdam officiis.
Vitae saepe atque nisi voluptatum .</p>
<p class="details">
<a href="">Tovább olvasok</a>
</p>
</div>
<div class="angkor-box">
<img src="pics/img2.JPG" alt="angkor">
<h2>Angkor</h2>
<p>Lorem r.
</p>
<p class="details">
<a href="">Tovább olvasok</a>
</p>
</div>
<div class="angkor-box">
<img src="pics/img3.JPG" alt="angkor">
<h2>Angkor</h2>
<p>Lorem 100.</p>
<p class="details">
<a href="">Tovább olvasok</a>
</p>
</div>
<div class="angkor-box">
<img src="pics/img4.JPG" alt="angkor">
<h2>Angkor</h2>
<p>Lorem 100.</p>
<p class="details">
<a href="">Tovább olvasok</a>
</p>
</div>
<div class="angkor-box">
<img src="pics/img5.JPG" alt="angkor">
<h2>Angkor</h2>
<p>Lorem .</p>
<p class="details">
<a href="">Tovább olvasok</a>
</p>
</div>
<div class="angkor-box">
<img src="pics/img6.JPG" alt="angkor">
<h2>Angkor</h2>
<p>Lorem m.</p>
<p class="details">
<a href="">Tovább olvasok</a>
</p>
</div>
<div class="angkor-box">
<img src="pics/img7.JPG" alt="angkor">
<h2>Angkor</h2>
<p>Lorem atque nisi vo.</p>
<p class="details">
<a href="">Tovább olvasok</a>
</p>
</div>
<div class="angkor-box">
<img src="pics/img8.JPG" alt="angkor">
<h2>Angkor</h2>
<p>Lorem oluptatum excepturi quisquam.</p>
<p class="details">
<a href="">Tovább olvasok</a>
</p>
</div>
<div class="angkor-box">
<img src="pics/img9.JPG" alt="angkor">
<h2>Angkor</h2>
<p>Lorem quisquam.</p>
<p class="details">
<a href="">Tovább olvasok</a>
</p>
</div>
</div>
</main>
</div>
</div>
<footer>
<div class="footer">
<div class="footer-box">
<h3>Contact</h3>Address:
No 6th Floor, VTC online Building,18 Tam Trinh Str,
Minh Khai Ward ,
Hai Ba Trung Dist, Hanoi, Vietnam <br>
Email: enquiry@lvtravel.vn <br>
Phone: +84 (0)24 3941 3748/ 49/ 50 <br>
Hotline: +84 (0)989200116</div>
<div class="footer-box">
<h3>DESTINATIONS</h3>
<a href="">Vietnam</a><br>
<a href="">Laos</a><br>
<a href="">Thailand</a><br>
<a href="">Cambodia</a><br>
<a href="">Myanmar</a> </div>
<div class="footer-box">
<h3>Travel style</h3>
<a href="">Culinary Tours</a><br>
<a href="">Short Trip</a><br>
<a href="">Excursion Classic Tours</a><br>
<a href="">Beach Break</a><br>
<a href="">Adventure</a><br>
</div>
<div class="footer-box">
<h3>Information</h3>
<a href="">About Us</a><br>
<a href="">Privacy Policy </a><br>
<a href="">Payment Method </a><br>
<a href="">Booking Guide</a><br>
<a href="">Responsible Travel</a><br> <a href="">Guidelines</a><br>
</div>
</div>
</footer>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
html {
height: 100 %
}
body {
background: url(../pics/bg-hatter.jpg) no-repeat;
background-size: cover;
margin: 0;
padding: 0;
color: brown
}
.wrapper {
display: flex;
max-width: 1000px;
margin: 0px auto;
}
.content {
display: flex;
max-width: 100%;
padding: 0;
display: flex;
flex-wrap: nowrap;
min-height: 500px;
align-items: stretch
}
h1 {
padding: 0 20px;
font-size: 20px;
font-style: italic;
}
.history {
display: flex;
flex-wrap: wrap;
background: white;
padding: 0;
margin: 70px 0 20px 0;
border: 1px solid rgba(232, 167, 109, 0.8);
position: relative;
}
.history p {
margin: 0;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
font-style: italic;
text-align: justify;
}
main {
flex-basis: 90vw;
margin: 0 20px;
}
.angkor {
margin: 0 -10px;
display: flex;
flex-wrap: wrap;
}
.angkor-box {
min-width: 250px;
background: #fff;
border: 1px solid #ddd;
padding: 0 0px 25px 0;
margin: 0 10px 20px 10px;
flex: 1;
position: relative
}
.angkor-box h2 {
font-size: 18px;
padding: 10px 20px 0 20px;
}
.angkor-box p {
margin: 0;
padding: 10px 20px;
font-size: 14px;
line-height: 19px;
text-align: justify;
}
.angkor-box img {
max-width: 100%;
transition: 0.2s;
margin: 0 auto
}
.angkor-box img:hover {
transform: scale(1.01);
transition: 0.2s;
}
.details a {
text-decoration: none;
color: white;
background: #a97445;
padding: 5px 10px;
font-size: 10px
}
.details {
position: absolute;
bottom: 0;
right: 0;
margin: 16px 0 0 0
}
nav {
background: rgba(232, 167, 109, 0.8);
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1;
max-width: 960px;
margin: 0 auto;
}
nav a {
color: white;
text-decoration: none;
padding: 20px;
display: block
}
nav a:hover {
background: rgba(0, 0, 0, .8)
}
nav ul {
list-style: none;
padding: 0;
margin: 0
}
nav>ul>li {
float: left
}
nav .has-submenu {
position: relative
}
nav .has-submenu:hover .submenu {
display: block
}
nav .has-submenu::after {
content: '🢓';
color: white;
position: absolute;
top: 23px;
right: 10px
}
nav .has-submenu>a {
padding-right: 35px
}
nav .submenu {
position: absolute;
width: 220px;
display: none
}
nav .submenu a {
background: rgba(232, 167, 109, 0.8);
padding: 10px 20px
}
nav .submenu a:hover {
background: black
}
.footer {
display: flex;
flex-wrap: wrap;
background: rgba(31, 18, 5, 0.945);
max-width: 960px;
margin: auto
}
.footer-box {
min-width: 200px;
padding: 20px;
margin: 20px;
position: relative;
color: white;
flex: 0
}
.footer-box a {
text-decoration: none;
color: white;
line-height: 1.5;
}
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
Nincsenek megjegyzések:
Megjegyzés küldése