Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
159 changes: 159 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
*{
box-sizing: border-box;
}

header {
background-image: url(../img/floatingMattHead.PNG);
background-color: #535353;
text-align: center;
}

.showtime {


background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: unset;


}

.subtitle {

font-size: 2em;
text-decoration-style: cornsilk double;
color: rgb(82, 0, 0);
padding-bottom: 1em;
margin-bottom: 1em;
}

.nottime {

background-color: rgba(250, 176, 116, 0.116);
text-align: center;
font-weight: 800;
width:65%;
margin-bottom: 2em;
margin-top: 2em;
padding-left: 5em ;
padding-right: 8em ;
}


.listsonlists {
font-style: italic;
background-color: rgb(255, 255, 255);
text-align: center;
margin: cover;
width: 100%;

}

.origin:hover {
transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);



}

h1 {
font-size: 4em;
color: rgb(0, 0, 0);
outline-color: plum;
padding-top: 1em;

}

a {
color: rgb(67, 0, 250);
text-decoration: none;
transform-origin: 0 0;
}

a:hover {
background-color: rgb(67, 0, 250);
color: white;
transition: background-color 1s;
transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);
}


h2 {
background: hsla(54, 100%, 85%, 0.253);
background-size: cover;
width: 99%;
margin: 50%, 25%;
text-align: center;
}

p {
padding: 1em;
width: cover;
margin: 0 auto;
mix-blend-mode: multiply;

}

section ul {

background: hsla(315, 43%, 70%, 0.444);
width: cover;
text-align: center;
font-size: 5em;
padding: 1.3em;
margin: rgba(209, 13, 13, 0.705) ;
}


section ul li:before {

background: hsla(315, 43%, 70%, 0.444);
width: cover;
text-align: center;
padding: 1.3em;
margin: rgba(209, 13, 13, 0.705) ;
}

li{

width: max-content;
margin: auto ;
}

body{

background-color: rgba(255, 0, 0, 0.315);
margin: 0 auto;
padding: 3em auto;
width: cover;
text-align: center;
}

.center{

margin: cover;
background:hsla(315, 43%, 70%, 0.444);
width: 99%;
text-align: center;

}







footer {

background: rgba(208, 147, 248, 0.801);
width: fit-content;
text-align: center;
color: rgb(36, 5, 44);
margin: 1em auto;
padding: 1.5em;
}

Binary file added img/floatingMattHead.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
85 changes: 85 additions & 0 deletions index.html/contact.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}

* {
box-sizing: border-box;
}

input[type=text],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}

input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}

input[type=submit]:hover {
background-color: #45a049;
}

.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
</head>

<body>
<h3>Contact Form</h3>

<div class="container">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">

<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">

<label for="phonenumber">Contact Phone Number</label>
<input type="text" id="phonenumber" name="phonenumber" placeholder="Place Digits Here OG">

<label for="email">Contact Email</label>
<input type="text" id="email" name="Stay Current on Matt, Join My Email List!"
placeholder="They say pimpin ain't easy. Setting up Gmail is though. Hotmail bro?? Daaang.">

<label for="how did you hear about me">How Did You Hear About Me?</label>
<select id="how did you hear about me" name="how did you hear about me">
<option value="Social Media">Social Media</option>
<option value="Impressive and Well Known Reputation">Impressive and Well Known Reputation</option>
<option value="The Desperate Emails I Sent Seeking Employment">The Desperate Emails I Sent Seeking
Employment</option>
</select>

<label for="I'd Love to Hear From You!">I'd Love to Hear From You!</label>
<textarea id="I'd Love to Hear From You!" name="I'd Love to Hear From You!"
placeholder="Come on, hollar at me.... in 250 characters or less." style="height:100px"></textarea>

<input type="Click to Submit Player" value="Click to Submit Player">
</form>
</div>
<h3>Psst... hey. Wanna navigate back to the home page?<a rel="resumehome" href="./resume.html">Click Here</a></h3>
</body>

</html>
72 changes: 72 additions & 0 deletions index.html/resume.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<html>

<head>
<title>Matt Freebery's Resume</title>
<link rel="stylesheet" href="../css/style.css" />

</head>


<header class="showtime">
<h1>The Matt Freebery Experience</h1>
<p class="subtitle">*A Simple Presentation Regarding a Complex Man*</p>
</header>

<body>

<h2>Objective</h2>
<p class="nottime">My objective is to translate and apply the skills I've acquired as a diligent educator, into a
dynamic new career in full stack web development. Achievement will be earned through the utilization of
passionate focus on constant self improvement, by adapting to fit industry needs and evolving standards, and by
facing all obstacles along the way with creative and abstract critical thinking until a solution is determined.
</p>



<h2>Work Experience</h2>

<div class="center">

<ul>
<li>Founder, Owner, and Lead Instructor of <a class="origin" href="http://www.percussiveexpression.com/"
target="_blank">Percussive Expression</a> (Current)</li>
<li>Front Line Essential Worker and Everyday Hero at Brookside Liquors (Current)</li>
<li>Former Handsome Account Manager at Discover Financial</li>
</ul>

<h2>Education</h2>
<ul>
<li>Code Differently (2020-present)</li>
<li>High-school Diploma from Cab Calloway School of the Arts (Class of 2010)</li>

</ul>

<h2>Skills</h2>
<ul class="listsonlists">Excellent foundation of frontend web development understanding and technical
implementation
including:</ul>
<ul>
<li>Able to fluently write, navigate, debug, and maintain HTML5 code</li>
<li>Well rounded in creating and formatting dazzling style sheets using CSS3</li>
<li>Strong fundimental knowledge and understanding of the javascript language</li>
<li>Unwavering goal oriented focus.</li>
<li>Ability to calmly focus under pressure</li>
<li>Can figure out very decent dinner recipes from whatever is left in the pantry</li>


</ul>

</div>
<h2>Lets keep these employment vibes up!<a rel="contactsheet" href="./contact.html"> Click Here</a> to
contact me, Matt Freebery! </h2>
</body>

<footer>
Or for a much less dynamic web experience, Matt would like to welcome you to view his wildly less captivating
profile
where creative freedom is tethered by generic templated and soul crushing forms, see for yourself here on <a
class="origin" href="https://www.linkedin.com/in/matt-freebery-3a9305200/" target="_blank">LinkedIn.</a>

</footer>

</html>