Skip to content

Lab Portfolio Pt 1 & 2 - Elu #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
seagreenmedia wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Lab Portfolio Pt 1 & 2 - Elu #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dba2543
Add files via upload
seagreenmedia Oct 28, 2020
a480753
Add files via upload
seagreenmedia Oct 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added IMG-PHOTO-ART-1390115591.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
73 changes: 73 additions & 0 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Form</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">

<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">

<h1>Contact Me</h1>

<fieldset>

<legend><span class="number">1</span> Your Info</legend>

<label for="first_name">First Name</label>
<input type="text" id="first_name" name="user_firstName" maxlength="30">

<label for="last_name">Last Name</label>
<input type="text" id="last_name" name="user_lastName" maxlength="30"><br>

<label for="phone">Phone</label>
<input type="text" id="phone" name="phone">

<label>Phone Type:</label>
<input type="radio" id="landline" value="landline" name="user_phone"><label for="landline" class="light">Landline</label>
<input type="radio" id="mobile" value="mobile" name="user_phone"><label for="mobile" class="light">Mobile</label><br><br>

<label for="email">Email</label>
<input type="email" id="email" name="user_email" maxlength="50">

<label for="hear">How did you hear about us?</label>
<select id="hear" name="hear">
<optgroup label="Select One">
<option value="search_engine">Search Engine</option>
<option value="social_media">Social Media</option>
<option value="recruiter">Recruiter</option>
</optgroup>
</select>

<label>Interest for Contacting:</label>
<input type="checkbox" id="web_development" value="web_development" name="user_interest"><label class="light" for="web_development">Web Development</label><br>
<input type="checkbox" id="video_editing" value="video_editing" name="user_interest"><label class="light" for="video_editing">Video Editing</label><br>
<input type="checkbox" id="video_producing" value="video_producing" name="user_interest"><label class="light" for="video_producing">Video Producing</label><br>
<input type="checkbox" id="graphic_design" value="graphic_design" name="user_interest"><label class="light" for="graphic_design">Graphic Design</label><br>
<input type="checkbox" id="database_management" value="database_management" name="user_interest"><label class="light" for="database_management">Database Management</label><br><br>

<label for="message">Message</label>
<textarea id="message" name="message" maxlength="50"></textarea>
Copy link
Copy Markdown

@kburd kburd Oct 29, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Max length should be 250 instead of 50 (-1)


</fieldset>

<button type="submit" value="Submit">Submit</button>

</form>

</body>
</html>
90 changes: 90 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Elu Arias' Portfolio</title>
</head>

<body>
<div>
<header>
<img src="images/IMG-PHOTO-ART-1390139073.jpg" width="285" height="500" alt="Elu Arias Profile Photo">
Copy link
Copy Markdown

@kburd kburd Oct 29, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image path does not match file's location (-1)

<h1>Elu Arias</h1>
<p><strong>Digital Designer, <em>Sea Green Media</em></strong></p>
<p>Elevating <em>Vibration &amp; Energy</em> through <em>Graphic Imagery</em></p>

<section id="contact">
<h2><a href="contact.html">Contact</a></h2>
<p><a href="mailto:seagreenmedia.digital@gmail.com?subject=Response%20to520Resume">Email Me</a></p>
<p>Phone: 302.494.5632</p>
<p>Address: Virtual Worldwide</p>
<p><a href="https://www.linkedin.com/in/elu-arias-85a8a2123">LinkedIn</a></p>
</section>
</header><br>

<section>
<h2>Objective</h2>
<p>My objective is to become a web developer for a creative company. My creative interests are in Digital Media Production, Graphic Design and Music. I have also begun learning Animation, VFX and Gaming and would be interested in those companies as well.</p>
</section><br>

<section>
<h2>Work Experience</h2>

<p><b>Delaware Nature Society</b></p>
<p><em>Development Coordinator</em> - 2019-present</p>

<p><b>W.L. Gore</b></p>
<p><em>MSDS Manager - Environmental Health & Safety Department</em> - 2014</p>

<p><b>Produce Marketing Association</b></p>
<p><em>Produce Data Administrator</em> - 2014</p>

<p><b>Sea Green Media</b></p>
<p><em>Digital Designer, Contractor</em> - 2013-present</p>

<p><b>BET Digital</b></p>
<p><em>Digital Media Producer and Editor</em> - 2008-2013</p>
<p><em>Web Show Page Producer</em> - 2006-2008</p>
</section><br>

<section>
<h2>Education</h2>
<p><b>Code Differently</b></p>
<p><em>Return Ready Program</em> - 2020-present</p>

<p><b>Howard University</b></p>
<p><em>BA in Communications - TV Production</em> - 2004-2007</p>

<p><b>University of Wisconsin-Madison</b></p>
<p><em>Engineering Summer Program - C++</em> - 2000</p>
</section><br>

<section>
<h2>Skills</h2>
<ul>
<li><em>HTML</em></li>
<li><em>WordPress</em></li>
<li><em>CSS</em></li>
<li><em>CMS</em></li>
<li><em>Database Management</em></li>
<li><em>Adobe Creative Suite</em></li>
<li><em>Agility</em></li>
<li><em>macOS</em></li>
<li><em>Microsoft Suite</em></li>
<li><em>Google Workspace</em></li>
<li><em>Final Cut Pro</em></li>
<li><em>AVID</em></li>
<li><em>Logic Pro</em></li>
<li><em>Pro Tools</em></li>
<li><em>Social Media</em></li>
<li><em>Marketing</em></li>
</ul>
</section><br>

<section>
<h2>Awards and Certifications</h2>
<p>Blackbaud Altru Certified</p>
</section>
</div>
</body>
</html>
117 changes: 117 additions & 0 deletions main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

body {
font-family: 'Nunito', sans-serif;
color: #384047;
}

form {
max-width: 300px;
margin: 10px auto;
padding: 10px 20px;
background: #f4f7f8;
border-radius: 8px;
}

h1 {
margin: 0 0 30px 0;
text-align: center;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
background: rgba(255,255,255,0.1);
border: none;
font-size: 16px;
height: auto;
margin: 0;
outline: 0;
padding: 15px;
width: 100%;
background-color: #e8eeef;
color: #8a97a0;
box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
margin-bottom: 30px;
}

input[type="radio"],
input[type="checkbox"] {
margin: 0 4px 8px 0;
}

select {
padding: 6px;
height: 32px;
border-radius: 2px;
}

button {
padding: 19px 39px 18px 39px;
color: #FFF;
background-color: #4bc970;
font-size: 18px;
text-align: center;
font-style: normal;
border-radius: 5px;
width: 100%;
border: 1px solid #3ac162;
border-width: 1px 1px 3px;
box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
margin-bottom: 10px;
}

fieldset {
margin-bottom: 30px;
border: none;
}

legend {
font-size: 1.4em;
margin-bottom: 10px;
}

label {
display: block;
margin-bottom: 8px;
}

label.light {
font-weight: 300;
display: inline;
}

.number {
background-color: #5fcf80;
color: #fff;
height: 30px;
width: 30px;
display: inline-block;
font-size: 0.8em;
margin-right: 4px;
line-height: 30px;
text-align: center;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
border-radius: 100%;
}

@media screen and (min-width: 480px) {

form {
max-width: 480px;
}

}
Loading