stackroute/assignment.html at master · Tanusha98/stackroute · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Monday</title>
		<link rel="stylesheet" href="style.css">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
	</head>
	<body>
		<header class="head">
			<h2 id="logo">Header</h2>
			<input type="checkbox" id="nav-toggle" class="nav-toggle">
			<nav id="menu">
				<ul class="nav-bar">
					<li><a href="#">Home</a></li>
					<li><a href="#">Destinations</a></li>
					<li><a href="#">Adventures</a></li>
					<li><a href="#">Bucket List</a></li>
					<li><a href="#">Trips</a></li>
					<li><a href="#">Login</a></li>

				</ul>
			</nav>
			<label for="nav-toggle" class="nav-toggle-label">
				<span></span>
			</label>
		</header>
		<section class="main">
			<section class="hero">
				<div class="hero-text">
				<h1>WELCOME</h1>
					<p>Let's travel the world together</p>
					<button>Let's Start</button>
				</div>
			</section>
			<section class="body-2">
				<section class="body-main">
					<section class="parts">
						<img id="hack" src="img/travhacks.jpg">
						<p>A second unitless proportion value — flex-shrink — that comes into play when the flex items are overflowing their container. This specifies how much of the overflowing amount is taken away from each flex item's size, to stop them overflowing their container. This is quite an advanced flexbox feature, and we won't be covering it any further in this article.</p>
					</section>
					<section class="parts">
						<img id="plan" src="img/tripplan.jpg">
						<p>A second unitless proportion value — flex-shrink — that comes into play when the flex items are overflowing their container. This specifies how much of the overflowing amount is taken away from each flex item's size, to stop them overflowing their container. This is quite an advanced flexbox feature, and we won't be covering it any further in this article.</p>
					</section>
					<section class="parts">
						<img id="hack" src="img/travhacks.jpg">
						<p>A second unitless proportion value — flex-shrink — that comes into play when the flex items are overflowing their container. This specifies how much of the overflowing amount is taken away from each flex item's size, to stop them overflowing their container. This is quite an advanced flexbox feature, and we won't be covering it any further in this article.</p>
					</section>
					<section class="parts">
						<img id="plan" src="img/tripplan.jpg">
						<p>A second unitless proportion value — flex-shrink — that comes into play when the flex items are overflowing their container. This specifies how much of the overflowing amount is taken away from each flex item's size, to stop them overflowing their container. This is quite an advanced flexbox feature, and we won't be covering it any further in this article.</p>
					</section>
					<section class="parts">
						<img id="hack" src="img/travhacks.jpg">
						<p>A second unitless proportion value — flex-shrink — that comes into play when the flex items are overflowing their container. This specifies how much of the overflowing amount is taken away from each flex item's size, to stop them overflowing their container. This is quite an advanced flexbox feature, and we won't be covering it any further in this article.</p>
					</section>
					<section class="parts">
						<img id="plan" src="img/tripplan.jpg">
						<p>A second unitless proportion value — flex-shrink — that comes into play when the flex items are overflowing their container. This specifies how much of the overflowing amount is taken away from each flex item's size, to stop them overflowing their container. This is quite an advanced flexbox feature, and we won't be covering it any further in this article.</p>
					</section>
				</section>
				<section class="body-side">
					<img id="bside" src="img/roundtravel.png">
					<p>huyt hjdfjsh mjdhjs jshfiuwree jrehfjhbfmnsd dsnbjds hsrsj fjhsj jhfuier nmdhfd jh </p>
					<img id="bside" src="img/roundtravel.png">
					<p>huyt hjdfjsh mjdhjs jshfiuwree jrehfjhbfmnsd dsnbjds hsrsj fjhsj jhfuier nmdhfd jh </p>
					<img id="bside" src="img/roundtravel.png">
					<p>huyt hjdfjsh mjdhjs jshfiuwree jrehfjhbfmnsd dsnbjds hsrsj fjhsj jhfuier nmdhfd jh </p>
					<img id="bside" src="img/roundtravel.png">
					<p>huyt hjdfjsh mjdhjs jshfiuwree jrehfjhbfmnsd dsnbjds hsrsj fjhsj jhfuier nmdhfd jh </p>
				</section>
			</section>
		</section>
		<footer class="foot">
			<section class="foot-top">
				<div class="foot-column1">
				</div>
				<div class="foot-column2">
				</div>
			</section>
			<section class="foot-bottom">
				<i class="fab fa-facebook-f"></i>
				<p>hgfs<p>
				<p>iuyf</p>
				<p>hujfg</p>
			</section>
		</footer>
	</body>
</html>