-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
163 lines (154 loc) · 6.61 KB
/
index.html
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio-Website</title>
<link rel="stylesheet" href="index.css">
<script src="https://kit.fontawesome.com/9ac2112319.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="header">
<div class="container">
<nav>
<img src="images/Name.png" class="logo">
<ul id="sidemenu" >
<li><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portforlio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
<i class="fas fa-times" onclick="closemenu()"></i>
</ul>
<i class="fas fa-bars" onclick="openmenu()"></i>
</nav>
<div class="header-text">
<p>Web Developer</p>
<h1>Hello, my name is <span>Brandon</span><br>from Minnesota</h1>
</div>
</div>
</div>
<!-- ----------------------about----------------------- -->
<div id="about">
<div class="container">
<div class="row">
<div class="about-col-1">
<img src="images/About.jpg">
</div>
<div class="about-col-2">
<h1 class="sub-title">About Me</h1>
<p>I am an entry level JavaScript programmer who wants to expand my
knowledge in coding. I enjoy web development and making complex
websites easier for the user to understand.</p>
<div class="tab-titles">
<p class="tab-links active-link" onclick="opentab('skills')">Skills</p>
<p class="tab-links" onclick="opentab('education')">Education</p>
</div>
<div class="tab-contents active-tab" id="skills">
<Ul>
<li><span>HTML/CSS</span><br>Developing websites</li>
<li><span>JavaScript</span><br>Web development</li>
<li><span>React.Js</span><br>Building Applications</li>
</Ul>
</div>
<div class="tab-contents" id="education">
<Ul>
<li><span>2018</span><br>Graduated from high school</li>
<li><span>2023</span><br>Software Development Certificate at DCTC</li>
</Ul>
</div>
</div>
</div>
</div>
</div>
<!-- ------------------------services---------------- -->
<div id="services">
<div class="container">
<h1 class="sub-title">My Services</h1>
<div class="services-list">
<div>
<i class="fa-solid fa-laptop"></i>
<h2>Web Development</h2>
<p>Entry level web development, has created multiple sites. Knowledge
in front end languages like HTML/CSS and JavaScript.</p>
<a href="#">Learn more</a>
</div>
<div>
<i class="fa-solid fa-ghost"></i>
<h2>UI Design</h2>
<p>Knowledge in Adobe products like Illustrator and XD.</p>
<a href="#">Learn more</a>
</div>
</div>
</div>
</div>
<!-- ----------------portforlio---------------------- -->
<div id="portforlio">
<div class="container">
<h1 class="sub-title">My Work</h1>
<div class="work-list">
<div class="work">
<img src="images/Work1.png">
<div class="layer">
<h3>Coffee Shop Menu</h3>
<p>This menu is for the coffee shop Vendella, for
guest to view.</p>
<a href="#"><i class="fa-thin fa-mug-hot"></i></a>
</div>
</div>
<div class="work">
<img src="images/Work2.png">
<div class="layer">
<h3>JavaScript Exercise</h3>
<p>This is one of the JavaScript exercises I did as a beginner to
get a feel of the language.</p>
<a href="#"><i class="fa-thin fa-mug-hot"></i></a>
</div>
</div>
<div class="work">
<img src="images/Work3.png">
<div class="layer">
<h3>React code</h3>
<p>This is behind the scenes of my first time learning React.
It mainly consist of components.</p>
<a href="#"><i class="fa-thin fa-mug-hot"></i></a>
</div>
</div>
</div>
<a href="#" class="btn">See more</a>
</div>
</div>
<!-- -----------------contact------------- -->
<div id="contact">
<div class="container">
<div class="row">
<div class="contact-left">
<h1 class="sub-title">Contact Me</h1>
<p><i class="fa-solid fa-paper-plane"></i> [email protected]</p>
<p><i class="fa-solid fa-phone"></i> 651-219-0433</p>
<div class="social-icons">
<a href="https://istagram.com"><i class="fa-brands fa-instagram"></i></a>
<a href="https://facebook.com"><i class="fa-brands fa-facebook"></i></a>
<a href="https://www.linkedin.com/in/branden-torres-b5552b25b/"><i class="fa-brands fa-linkedin"></i></a>
</div>
<a href="images/AcademicRecord.pdf" download class="btn btn2">View Academic Record</a>
</div>
<div class="contact-right">
<form name="submit-to-google-sheet">
<input type="text" name="Name" placeholder="Your Name" required>
<input type="email" name="Email" placeholder="Your Email" required>
<textarea name="Message" rows="`6" placeholder="Your Message"></textarea>
<button type="submit" class="btn btn2">Submit</button>
</form>
<span id="msg"></span>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright © Brandon.<i class="fa-solid fa-heart"></i></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>