Assignment 1 As your first assignment, you are to create a personal website Pers
ID: 3723755 • Letter: A
Question
Assignment 1 As your first assignment, you are to create a personal website Personal website: For a personal website, there should be at least four parts, and overview, personal info, professional info, and others Overview Part: The overview should provide general information about yourself, including your name, your classification, your major, and should have a picture of you with a descriptive title below it. It should also have links to your personal info part, your professional info part, and any other part you have created that would fit in. Personal Info Part: On this part you should describe yourself, your interests, hobbies, pets, family members, fraternities or sororities, or anything else that you want to include Professional Info Part: This part should describe your professional interests. It should list any professional organizations to which you belong, and generally anything else related to "what you want to be when you grow up." You should also have a link to a copy of your resume which should be in HTML format. Other Pages These pages can be created at your discretion. For instance, you might havea page devoted to your pet, or maybe a page devoted to your SO, or a page devoted to a special interest you have Submission and Grading Submit your source code for your implementation through blackboard. Please compress your source code folder to zip file, and attach to blackboard. Please make sure all the path in the webpage set up correctly. Your program will be graded as follows 40% Correctness, 30% = Design, 30% = Style +10% = Possible bonus for advanced programExplanation / Answer
Based on the instructions provided I have created 3 pages. You can find the codes for html and css files below and change the content as per your requirement.
index.html
<!DOCTYPE html>
<html>
<head>
<title>My Personal Website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="nav"><a href="index.html">Home</a> | <a href="resume.html">My Resume</a> | <a href="contact.html">Contact Me</a></div>
<div id="bg"></div>
</div>
<div id="main-content">
<div id="left-column">
<div id="logo">
Welcome to Akash's Webpage
</div>
<div class="box">
<h1>What You'll Find Here</h1>
<p>This is my space. Here are some of my interests: </p>
<ul>
<li>Creating Designs</li>
<li>Playing Video Games</li>
<li>Playing ice hockey</li>
<li>Gardening</li>
<li>Tutoring</li>
</ul>
</div>
<h2>A Few of My Words</h2>
<p>
<img src="https://aboutme.imgix.net/background/users/a/k/a/akashshivanand_1509905933_268.jpg" width="139" height="150" />
<em>"Real Human is the one who love all beings..."</em> - Me<br/><br/>
<em>"Learn to say no with confidence!"</em> - Me<br/>
<em>"Give Love Receive Love and always keep smiling"</em> - Me<br/>
</p>
</div>
<div id="right-column">
<div id="main-image"><img src="http://akashshivanand.com/wp-content/uploads/2018/01/Akash-Kumar-2018-01-11.jpg" width="160" height="188" /></div>
<div class="sidebar">
<h3>About Me</h3>
<p>Hello, My name is Akash Kumar. I love graphics and web designer from India.</p>
<h3>Find Me Elsewhere</h3>
<div class="box">
<ul>
<li><a href="https://facebook.com/AkashShivanand" target="_blank">Facebook</a></li>
<li><a href="https://twitter.com/AkashShivanand" target="_blank">Twitter</a></li>
<li><a href="https://linkedin.com/in/AkashShivanand" target="_blank">LinkedIn</a></li>
<li><a href="https://www.instagram.com/akashshivanand/" target="_blank">Instagram</a></li>
<li><a href="https://pinterest.com/AkashShivanandOfficial/" target="_blank">Pinterest </a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer">
Copyright © 2018 <a href="http://akashshivanand.com/">Akash Kumar</a>. All rights reserved.<br/>
</div>
</div>
</body>
</html>
resume.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="contact.css" />
<title></title>
</head>
<body>
<div id="header">
<p id="name"><a href="index.html">Akash Kumar</a></p>
<a href="mailto:contact@akashshivanand.com><br/> <p id="email">contact@akashshivanand.com</p>
</a>
</div>
<div class="left"></div>
<div class="right">
<h4>Objective</h4>
<p>To take a position as a software engineer.</p>
<h4>Experience</h4>
<p>Executive Designer, Software Company (2017 - Present)</p>
<ul>
<li>Designed and implemented end-user features for Various Product and Services</li>
<li>Wrote third-party JavaScript libraries WP Plugins</li>
</ul>
<h4>Skills</h4>
<p>Languages: C, C++, HTML5, CSS3, JavaScript, Python, Ruby</p>
<p>Frameworks: .NET, Node.js, Django, Ruby on Rails</p>
<h4>Education</h4>
<p>B. Tech, Computer Science, My University</p>
<ul>
<li>Award for best Student</li>
<li>CGPA: 9.8</li>
</ul>
</div>
<div id="footer">
<p>123 My Street, Anytown, State 12345-6789 | Tel: (555) 555-5555</p>
</div>
</body>
</html>
contact.html
<!DOCTYPE html>
<html>
<head>
<title>My Personal Website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="nav"><a href="index.html">Home</a> | <a href="resume.html">My Resume</a> | <a href="contact.html">Contact Me</a></div>
<div id="bg"></div>
</div>
<div id="main-content">
<div class="container">
<form id="contact" action="mailto:contact@akashshivanand.com" method="post">
<h3>Quick Contact</h3>
<h4>Contact us today, and get reply with in 24 hours!</h4>
<fieldset>
<input placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input placeholder="Your Email Address" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Your Phone Number" type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<input placeholder="Your Web Site starts with http://" type="url" tabindex="4" required>
</fieldset>
<fieldset>
<textarea placeholder="Type your Message Here...." tabindex="5" required></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
</div>
<div id="footer">
Copyright © 2018 Akash Kumar. All rights reserved.<br/>
</div>
</div>
</body>
</html>
style.css
/* Layout */
body {
font: normal 12px/1.6em Arial, Helvetica, sans-serif;
color: #2a3845;
margin: 0;
padding: 0;
background: #FFFFFF;
}
p {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
width: 632px;
border-left: 1px solid #f0e9eb;
border-right: 1px solid #f0e9eb;
}
#header {
margin: 0 1px;
}
#bg {
height: 36px;
background: url('http://img840.imageshack.us/img840/9886/87926428.gif') repeat-x;
}
#main-content {
margin: 0 auto;
}
#main-image {
text-align: center;
}
#left-column {
width: 300px;
padding: 0 30px 30px;
float: left;
}
#right-column {
width: 270px;
float: right;
}
.sidebar {
width: 218px;
margin: 0 auto;
padding: 10px 25px;
background: url('http://img404.imageshack.us/img404/3092/shadowh.jpg') no-repeat top;
}
#footer {
background: #f7f7f7;
border-top: 1px solid #f0e9eb;
padding: 10px 15px;
clear: both;
}
/* Global Styling */
a:visited,
a:link {
color: #a43b55;
text-decoration: underline;
background: none;
}
a:hover {
color: #a43b55;
text-decoration: none;
background: none;
}
h1 {
color: #7a2e40;
margin: 0 0 10px;
padding-bottom: 10px;
font: normal 17px Georgia, serif;
border-bottom: 1px solid #efece7;
}
h2 {
color: #7a2e40;
margin: 20px 0 10px;
padding-bottom: 10px;
font: normal 17px Georgia, serif;
border-bottom: 1px solid #efece7;
}
h3 {
color: #7a2e40;
margin: 10px 0;
padding-bottom: 10px;
font: bold 14px Arial, Helvetica, sans-serif;
border-bottom: 1px solid #efece7;
}
ul {
padding: 0;
margin: 0 0 0 17px;
list-style: square url('http://img525.imageshack.us/img525/1890/bulletr.gif');
}
.box {
background: #f7f7f7;
border: 1px solid #f0e9eb;
padding: 15px;
}
#nav {
background: #06a;
padding: 10px 20px;
text-align: right;
color: #f6dde3;
}
#nav a {
margin: 0 10px;
}
#nav a:visited,
#nav a:link {
text-decoration: none;
color: #f6dde3;
}
#nav a:hover {
text-decoration: underline;
color: #f6dde3;
}
#logo {
margin-bottom: 20px;
font: normal 18px Georgia, serif;
color: #fa7393;
}
/* Contact form */
.container {
max-width: 400px;
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Open Sans", Helvetica, Arial, sans-serif;
}
#contact {
background: #F9F9F9;
padding: 25px;
margin: 50px 0;
}
#contact h3 {
color: #F96;
display: block;
font-size: 30px;
font-weight: 400;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-size: 13px;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
width: 100%;
border: 1px solid #CCC;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #AAA;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#contact button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #0CF;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}
#contact button[type="submit"]:hover {
background: #09C;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #999;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
contact.css
div {
border-radius: 5px;
}
#header {
z-index: 1;
position: fixed;
width: 97.5%;
margin-top: -20px;
height: 60px;
background-color: #668284;
margin-bottom: 10px;
}
#name {
float:left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
#name a {
color: #fff;
text-decoration: none;
font-weight: 600;
}
#email{
float:right;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
h4 {
margin-left: 5px;
margin-bottom: 15px;
font-family: Verdana, sans-serif;
}
.right p {
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
font-family: Garamond, serif;
color: #000000;
}
li {
list-style-type: square;
}
a:hover {
font-weight: bold;
}
.left {
position: relative;
float: left;
margin-top: 50px;
width: 10%;
height: 400px;
background-color: #B9D7D9;
margin-bottom: 10px;
}
.right {
position: relative;
float: right;
margin-top: 50px;
width: 88%;
height: 400px;
background-color: #F4EBC3;
margin-bottom: 10px;
}
#footer {
position: relative;
height: 50px;
background-color: #668284;
clear: both;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
color: #ffffff;
}
#footer p {
position: relative;
padding-top: 15px;
}