index.html

<!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" />
		<link rel="stylesheet" href="Design/style.css" />
		<title>My Portfolio</title>
	</head>

	<body>
		<main>
			<!----------------------------menu list---------------------------->
			<section id="header">
				<nav>
					<h1 class="myName">Grian.</h1>
					<ul>
						<li><a href="#header">Home</a></li>
						<li><a href="#about">About</a></li>
						<li><a href="#resume">Resume</a></li>
						<li><a href="#portfolio">Portfolio</a></li>
						<li><a href="#contact">Contact</a></li>
					</ul>
				</nav>
				<div class="container">
					<!------------------------ front header text--------------------------->
					<div class="header-text">
						<p class="name-tag">
							Hi, I'm <span class="span-tag-name">GrianGajila</span><br />
							self taught learner
						</p>
						<h4 class="graphics-tag">
							Graphic Video Editor and Front-end dev on my own
						</h4>
						<h4 class="front-end">Web Designer</h4>
					</div>
				</div>
			</section>
			<!---------------------------------ABOUT---------------------------------->
			<section id="about">
				<div class="container">
					<div class="row">
						<div class="about-image">
							<img src="images/my image0000.jpg" />
						</div>
						<div class="about-text">
							<h1 class="about-myname">Grian Gajila</h1>
							<h3 class="about-something">
								I can develop something new, only Related to Front-end
							</h3>
							<p class="subtitle-info">
								I Design and develop services, specializing in creating stylish
								and modern <br />
								of website, web services. My passion is to design digital user
								experience through <br />the bold interface and meaningful
								interactions.
							</p>
							<!---------------------------------about personal info------------------------------->
							<div class="about-personal-info">
								<!-------------start of list item-->
								<div class="list-item">
									<label>Birthday</label>
									<p>April *, ****</p>
								</div>
								<!------------end of list item------------>
								<!-------------start of list item-->
								<div class="list-item">
									<label>Age</label>
									<p>** Yr Old</p>
								</div>
								<!------------end of list item------------>
								<!-------------start of list item-->
								<div class="list-item">
									<label>Status</label>
									<p>Single</p>
								</div>
								<!------------end of list item------------>
								<!-------------start of list item-->
								<div class="list-item">
									<label>Phone</label>
									<p>09*-***-****</p>
								</div>
								<!------------end of list item------------>
								<!-------------start of list item-->
								<div class="list-item">
									<label>Email</label>
									<p>*****@gmail.com</p>
								</div>
								<!------------end of list item------------>
								<!-------------start of list item-->
								<div class="list-item">
									<label>Country</label>
									<p>Philippines</p>
								</div>
								<!------------end of list item------------>
							</div>
							<button class="btn"><a href="#">Download CV</a></button>
						</div>
					</div>
				</div>
			</section>
			<!------------------------------RESUME--------------------------------------->

			<section id="resume">
				<div class="heading-wrapper">
					<div class="heading">
						<h1>Resume</h1>
					</div>
					<div class="border"></div>
					<p>
						This are some of my information and skills regarding to my reality
						and honesty
					</p>
					<div class="educational">
						<div class="title">
							<h2>Educational</h2>
						</div>
						<!----------------Resume start-------------------->
						<div class="resume-item">
							<div class="item-arrow"></div>
							<span><h2>College</h2></span>
							<p>
								Bachelor of Science in Computer Engieering <br />
								John Paul College
							</p>
						</div>
						<!---------------------Resume end------------------>
						<!----------------Resume start-------------------->
						<div class="resume-item">
							<div class="item-arrow"></div>
							<span><h2>Senior High School</h2></span>
							<p>John Paul College</p>
						</div>
						<!---------------------Resume end------------------>
						<!----------------Resume start-------------------->
						<div class="resume-item">
							<div class="item-arrow"></div>
							<span><h2>Junior High School</h2></span>
							<p>Don Pedro High School</p>
						</div>
						<!---------------------Resume end------------------>
						<!----------------Resume start-------------------->
						<div class="resume-item">
							<div class="item-arrow"></div>
							<span><h2>Elementary</h2></span>
							<p>Cagulong Elementary School</p>
						</div>

						<!----------------------------------Skills--------------------------------------------->
					</div>
					<div class="skills">
						<div class="title">
							<h2>Skills</h2>
						</div>
						<!----------------Resume start-------------------->
						<div class="resume-item">
							<div class="item-arrow"></div>
							<span><h2>UI/UX Design</h2></span>
							<p>
								Web/App Interfaces <br />
								and Graphics Design
							</p>
						</div>
						<!---------------------Resume end------------------>
						<!----------------Resume start-------------------->
						<div class="resume-item">
							<div class="item-arrow"></div>
							<span><h2>Web Design</h2></span>
							<p>front-end Development</p>
						</div>
						<!---------------------Resume end------------------>
						<!----------------Resume start-------------------->
						<div class="resume-item">
							<div class="item-arrow"></div>
							<span><h2>Application Development</h2></span>
							<p>Developing mobile app</p>
						</div>
						<!---------------------Resume end------------------>
						<!----------------Resume start-------------------->
						<div class="resume-item">
							<div class="item-arrow"></div>
							<span><h2>Python Development</h2></span>
							<p>Machine Learning</p>
						</div>
						<!---------------------Resume end------------------>
					</div>
				</div>
			</section>
			<!--------------------------------Programming language----------------------------->
			<section id="languages">
				<div class="heading-wrapper">
					<div class="heading">
						<h2>Programming Languages</h2>
					</div>
					<div class="border"></div>
					<label>This are some programming languages I wanted to use</label>
				</div>
				<div class="container-item">
					<div class="progress-item">
						<div class="text">
							<h5>html</h5>
						</div>
						<div class="progress-bar">
							<div class="progress-line html"></div>
						</div>
					</div>
					<div class="progress-item">
						<div class="text">
							<h5>css</h5>
						</div>
						<div class="progress-bar">
							<div class="progress-line css"></div>
						</div>
					</div>
					<div class="progress-item">
						<div class="text">
							<h5>javascript</h5>
						</div>
						<div class="progress-bar">
							<div class="progress-line js"></div>
						</div>
					</div>
					<div class="progress-item">
						<div class="text">
							<h5>Django</h5>
						</div>
						<div class="progress-bar">
							<div class="progress-line django"></div>
						</div>
					</div>
					<div class="progress-item">
						<div class="text">
							<h5>python</h5>
						</div>
						<div class="progress-bar">
							<div class="progress-line py"></div>
						</div>
					</div>
				</div>
			</section>

			<!------------------------Portfolio------------------------------->
			<section id="portfolio">
				<div class="container">
					<h1 class="sub-title">My Services</h1>
					<div class="work-list">
						<div class="work">
							<img src="images/image1.jpg" />
							<div class="layer">
								<p>
									<span class="service-name"> < Ui/UX Design > </span> <br />
									Developing and designing web app
									<span> <img src="images/link.png" class="img1" /></span>
								</p>
							</div>
						</div>
						<div class="work">
							<img src="images/web-design.jpg" />
							<div class="layer">
								<p>
									<span class="service-name">< Web Design ></span> <br />
									Designing web using html, css and javascript
									<span><img src="images/link.png" class="img1" /></span>
								</p>
							</div>
						</div>
						<div class="work">
							<img src="images/app-development.jpg" />
							<div class="layer">
								<p>
									<span class="service-name">< Mobile App ></span> <br />
									Developing Mobile applications
									<span><img src="images/link.png" class="img1" /></span>
								</p>
							</div>
						</div>
					</div>
					<a href="#" class="linked">See more</a>
				</div>
			</section>

			<!--------------------------------CONTACT----------------------------------------->
			<section id="contact">
				<div class="container">
					<div class="row">
						<div class="contact-left">
							<h1 class="sub-title">Contact Me</h1>
							<p><img src="images/gmail.png" alt="" /> *****@gmail.com</p>
							<p><img src="images/whatsapp.png" alt="" /> 09*-****-****</p>
							<div class="social-icon">
								<img src="images/facebook (1).png" class="img" />
								<img src="images/google.png" class="img" />
								<img src="images/instagram.png" class="img" />
								<img src="images/twitter.png" class="img" />
							</div>
						</div>
						<div class="contact-right">
							<form>
								<input
									type="text"
									name="Name"
									placeholder="Your Name"
									required
								/>
								<input
									type="email"
									name="Email"
									placeholder="Your Email"
									required
								/>
								<textarea
									name="Message"
									rows="6"
									placeholder="Message"
								></textarea>
								<button class="btn2">Submit</button>
							</form>
						</div>
					</div>
				</div>
				<div class="copywrite">
					<p>
						Copywrite <span class="copywrite-symbol">©</span> Grian. Learning
						html5, css3 and javasript/Front-end development
					</p>
				</div>
			</section>

			<script src="script/functions.js"></script>
		</main>
	</body>
</html>