WebDesign/index.html at main · Miggs1337/WebDesign · 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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title> Page Title </title>
	<!--We can create a new stylesheet that will hold all the different
		styling that we want to use for specific sections of the website-->
	<link rel="stylesheet" href="styles.css">
</head>
<body>
	<!--A div tag defines a division or a section in an HTML document.
		The tag can also be used a container for HTML elements, which
		can be styled with CSS or manipulated with JavaScript
	<div class ="placeholder">
		I'm in a div.
	</div>
	<!--We have another div class that groups other text/objects together
	<div class = "placeholder2">
		Im in another class.
	</div>-->
	<!--To create a nav bar, we first need to include our links. These
		links are used to direct the web pages to our html source code.
		"a tag" is how you define a hyperlink in HTML
		"href" is where the link points to
		You can also have the href point to a website
		Example <a href"https://google.com">Google </a> -->
	<div class-"container"> <!--We are creating a single container for the
								nav bar. We want our links to appear on the
								left and the name to appear on the right-->
		<div class="nav-wrapper"><!--Create nav wrapper class to enclose
									all the nav bar information and links-->
			<!--Create class for left side of nav bar-->
			<div class="nav-left-side">
				<div class = "nav-link-wrapper">
					<a href="index.html">Home</a>
				</div>
				<div class = "nav-link-wrapper">
					<a href="about.html">About</a>
				</div>
				<div class = "nav-link-wrapper">
					<a href = "Photos.html">Photography</a>
				</div>
				<div class = "nav-link-wrapper">
					<a href = "login.php">Log In</a>
				</div>
			</div>
			<!--Create class for right side of nav bar-->
			<div class = "nav-right-side">
				<div class = "nav-name-title">
					<div>Miguel Hernandez</div>
				</div>
			</div>
		</div>
	</div>
	<div class = "welcome-wrapper" style= "background-image:url(images/index/index1.jpg)">
	</div>
		<div class = "welcome-text-wrapper">
			<div>MHDESIGNS</div>
		</div>
</body>

<script>
	const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper')

	portfolioItems.forEach(portfolioItem => {
		portfolioItem.addEventListener('mouseover', () => {
			portfolioItem.childNodes[1].classList.add('img-darken');
		})
	})

	portfolioItems.forEach(portfolioItem => {
		portfolioItem.addEventListener('mouseout', () => {
			portfolioItem.childNodes[1].classList.remove('img-darken');
		})
	})
</script>
</html>