lerko/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

styling media queries

Browse Source
This commit is contained in:
Tyler Koenig
2021-05-15 15:35:52 -04:00
parent b63e5ca1ff
commit 37152f1614
2 changed files with 245 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

297
index.html
View File

@@ -15,162 +15,167 @@
<title>Tyler Koenig</title> <title>Tyler Koenig</title>
</head> </head>
<body> <body>
<nav> <div id="wrapper">
<ul> <nav>
<li style="float: left"><a href="index.html">TYLER KOENIG</a></li> <a href="index.html">TYLER KOENIG</a>
<li><a href="#projects" target="_self">PROJECTS</a></li> <ul>
<li><a href="#contact" target="_self">CONTACT</a></li> <li><a href="#projects" target="_self">PROJECTS</a></li>
<li><a href="#bio" target="_self">ABOUT</a></li> <li><a href="#contact" target="_self">CONTACT</a></li>
</ul> <li><a href="#bio" target="_self">ABOUT</a></li>
</nav> </ul>
<header> </nav>
<img src="/images/profile.png" alt="tyler" /> <header>
<h1> <img src="/images/profile.png" alt="tyler" />
<a href="index.html">Tyler Koenig</a> <h1>
</h1> <a href="index.html">Tyler Koenig</a>
<h2> </h1>
Warehouse Associate at Amazon <h2>
<br /> Warehouse Associate at Amazon
Student at We Can Code IT, Web Developer in the making! <br />
</h2> Student at We Can Code IT, Web Developer in the making!
</header> </h2>
<main> </header>
<section id="aboutMe"> <main>
<div id="bio"> <section id="aboutMe">
<h2>about me</h2> <div id="bio">
<p> <h2>about me</h2>
I'm Tyler Koenig, a lifelong student. Graduated with an Associate of <p>
Arts from Lorain County Community College in 2018. I'm Tyler Koenig, a lifelong student. Graduated with an Associate
</p> of Arts from Lorain County Community College in 2018.
<h4>skills</h4> </p>
<ul> <h4>skills</h4>
<li>problem solving</li> <ul>
<li>attention to detail</li> <li>problem solving</li>
<li>flexibility</li> <li>attention to detail</li>
<li>time management</li> <li>flexibility</li>
<li>creativity</li> <li>time management</li>
</ul> <li>creativity</li>
</div>
<div id="contact">
<h3>contact</h3>
<ul class="contactLinks">
<li>
<a
href="https://github.com/lerko96"
target="_blank"
title="github"
>
github</a
>
<i class="fa fa-github fa-lg" aria-hidden="true"></i>
</li>
<li>
<a
href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
target="_blank"
title="LinkedIn"
>
linkedin</a
>
<i class="fa fa-linkedin-square fa-lg" aria-hidden="true"></i>
</li>
<li>
<a
href="mailto:tylerkng96@icloud.com"
target="_blank"
title="email"
>email</a
>
<i class="fa fa-envelope-o fa-lg" aria-hidden="true"></i>
</li>
</ul>
</div>
</section>
<section id="projects">
<h2>projects.</h2>
<div>
<article class="project-item">
<div>
<h3>
<a
href="https://github.com/2021-Spring-Part-Time/virtual-pets-amok-lerko96"
target="_blank"
>virtual-pet-amok</a
>
</h3>
</div>
<img src="/images/amok.png" alt="virtual-pet-amok-console" />
<ul class="project-skills">
<h4>skills</h4>
<li>TDD</li>
<li>polymorphism</li>
<li>encapsulation</li>
<li>interface (implements)</li>
<li>abstract class (extends)</li>
</ul> </ul>
</article> </div>
<article class="project-item"> <div id="contact">
<div> <h3>contact</h3>
<h3> <ul class="contactLinks">
<li>
<a <a
href="https://github.com/2021-Spring-Part-Time/virtual-pet-shelter-lerko96" href="https://github.com/lerko96"
target="_blank" target="_blank"
title="github"
> >
virtual-pet-shelter</a github</a
> >
</h3> <i class="fa fa-github fa-lg" aria-hidden="true"></i>
</div> </li>
<img src="/images/shelter.png" alt="virtual-pet-shelter-console" /> <li>
<ul class="project-skills">
<h4>skills</h4>
<li>TDD</li>
<li>constructor() {...}</li>
<li>getter() {...}</li>
<li>map<> = hashmap<>()></li>
<li>collections<></li>
</ul>
</article>
<article class="project-item">
<div>
<h3>
<a <a
href="https://github.com/2021-Spring-Part-Time/virtual-pet-lerko96" href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
target="_blank" target="_blank"
title="LinkedIn"
> >
virtual-pet</a linkedin</a
> >
</h3> <i class="fa fa-linkedin-square fa-lg" aria-hidden="true"></i>
</div> </li>
<img src="/images/pet.png" alt="virtual-pet-console" /> <li>
<ul class="project-skills"> <a
<h4>skills</h4> href="mailto:tylerkng96@icloud.com"
<li>game loop</li> target="_blank"
<li>user input</li> title="email"
<li>classes</li> >email</a
<li>instance variables</li> >
<li>methods</li> <i class="fa fa-envelope-o fa-lg" aria-hidden="true"></i>
<li>clean code</li> </li>
</ul> </ul>
</article> </div>
</section>
<section id="projects">
<h2>projects.</h2>
<div>
<article class="project-item">
<div>
<h3>
<a
href="https://github.com/2021-Spring-Part-Time/virtual-pets-amok-lerko96"
target="_blank"
>virtual-pet-amok</a
>
</h3>
</div>
<img src="/images/amok.png" alt="virtual-pet-amok-console" />
<ul class="project-skills">
<h4>skills</h4>
<li>TDD</li>
<li>polymorphism</li>
<li>encapsulation</li>
<li>interface (implements)</li>
<li>abstract class (extends)</li>
</ul>
</article>
<article class="project-item">
<div>
<h3>
<a
href="https://github.com/2021-Spring-Part-Time/virtual-pet-shelter-lerko96"
target="_blank"
>
virtual-pet-shelter</a
>
</h3>
</div>
<img
src="/images/shelter.png"
alt="virtual-pet-shelter-console"
/>
<ul class="project-skills">
<h4>skills</h4>
<li>TDD</li>
<li>constructor() {...}</li>
<li>getter() {...}</li>
<li>map<> = hashmap<>()></li>
<li>collections<></li>
</ul>
</article>
<article class="project-item">
<div>
<h3>
<a
href="https://github.com/2021-Spring-Part-Time/virtual-pet-lerko96"
target="_blank"
>
virtual-pet</a
>
</h3>
</div>
<img src="/images/pet.png" alt="virtual-pet-console" />
<ul class="project-skills">
<h4>skills</h4>
<li>game loop</li>
<li>user input</li>
<li>classes</li>
<li>instance variables</li>
<li>methods</li>
<li>clean code</li>
</ul>
</article>
</div>
</section>
</main>
<footer>
<span id="copyright">&copy; 2021 Tyler Koenig</span>
<div id="footLinks">
<a href="https://github.com/lerko96" target="_blank" title="github"
><i class="fa fa-github fa-2x" aria-hidden="true"></i
></a>
<a
href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
target="_blank"
title="LinkedIn"
><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i
></a>
<a href="mailto:tylerkng96@icloud.com" target="_blank" title="email"
><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i
></a>
</div> </div>
</section> </footer>
</main> </div>
<footer>
<span id="copyright">&copy; 2021 Tyler Koenig</span>
<div id="footLinks">
<a href="https://github.com/lerko96" target="_blank" title="github"
><i class="fa fa-github fa-2x" aria-hidden="true"></i
></a>
<a
href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
target="_blank"
title="LinkedIn"
><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i
></a>
<a href="mailto:tylerkng96@icloud.com" target="_blank" title="email"
><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i
></a>
</div>
</footer>
</body> </body>
</html> </html>

155
style.css
View File

@@ -1,4 +1,5 @@
body { body {
box-sizing: border-box;
color: #c9cacc; color: #c9cacc;
background-color: #1b1b1b; background-color: #1b1b1b;
font-size: 15px; font-size: 15px;
@@ -6,39 +7,40 @@ body {
font-weight: 400; font-weight: 400;
line-height: 1.725; line-height: 1.725;
text-rendering: geometricPrecision; text-rendering: geometricPrecision;
min-height: 100%; min-height: 100vh;
margin: 0 auto; margin: 0 auto;
} }
@media (max-width: 768px) { #wrapper {
nav { display: flex;
display: flex; flex-direction: column;
flex-direction: column; width: 100%;
} margin: 0 auto;
}
nav {
/* border: 1px solid red; */
/* margin: 0 auto; */
/* width: 70%; */
}
nav a {
text-decoration: none;
border: 1px solid yellow;
padding: 1rem;
font-weight: 600;
display: flex;
justify-content: center;
color: #c9cacc;
} }
nav ul { nav ul {
list-style-type: none; list-style-type: none;
margin: 0 auto; margin: auto;
padding: 0; padding: 0em;
overflow: hidden;
} }
nav li { nav a:hover {
float: right;
}
nav li a {
display: block;
color: #c9cacc;
font-weight: 600;
text-align: center;
letter-spacing: 0.18rem;
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover {
background-color: #2a9d8f; background-color: #2a9d8f;
transition: 150ms ease-in; transition: 150ms ease-in;
} }
@@ -61,8 +63,11 @@ header img {
} }
h1 { h1 {
line-height: 2rem;
/* border: 1px solid red; */ /* border: 1px solid red; */
margin: 0.5rem; /* margin: .5rem auto; */
/* justify-content: space-evenly; */
/* text-align: center; */
letter-spacing: 0.01rem; letter-spacing: 0.01rem;
} }
@@ -88,27 +93,13 @@ h4 {
letter-spacing: 0.01rem; letter-spacing: 0.01rem;
} }
/* h2 {
font-size: 1.3rem;
} */
main {
width: 620px;
margin: 0 auto;
}
#aboutMe { #aboutMe {
display: flex; border: 2px solid white;
border: 2px solid black;
padding: 1.5rem; padding: 1.5rem;
margin: 0 auto;
text-align: center;
justify-content: center;
letter-spacing: 0.01rem; letter-spacing: 0.01rem;
} }
#bio { #bio {
flex: 3;
border: 1px solid purple; border: 1px solid purple;
padding: 1.5rem; padding: 1.5rem;
text-align: start; text-align: start;
@@ -123,17 +114,13 @@ main {
} }
#contact { #contact {
flex: 1; /* justify-content: space-between; */
border: 1px solid red; border: 1px solid red;
text-align: end;
margin: 0 auto;
padding: 1.5rem; padding: 1.5rem;
} }
.contactLinks li { .contactLinks li {
list-style: none; display: inline;
line-height: 2rem;
letter-spacing: 0.01rem;
} }
.contactLinks a { .contactLinks a {
@@ -148,22 +135,26 @@ main {
} }
#projects { #projects {
display: flex;
flex-direction: column;
border: 2px solid green; border: 2px solid green;
padding: 1.5rem; padding: 1.5rem;
} }
#projects h2 { #projects h2 {
margin: 0 auto; margin: 0;
padding: 1.5rem; padding: 1.5rem;
border: 1px solid #3d405b; border: 1px solid #3d405b;
} }
.project-item { .project-item {
display: flex;
flex-direction: column;
border: 1px solid blue; border: 1px solid blue;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
font-weight: 200; font-weight: 200;
padding: 1.5rem; /* padding: 1.5rem; */
} }
.project-item a { .project-item a {
@@ -179,34 +170,31 @@ main {
border: 1px solid brown; border: 1px solid brown;
text-align: left; text-align: left;
margin: 0 auto; margin: 0 auto;
/* padding: 1rem; */ padding: 1.5rem;
}
#projects h4 {
font-weight: 400;
} }
.project-skills { .project-skills {
color: #666; color: #666;
border: 1px solid red; border: 1px solid red;
list-style: none; list-style: none;
width: 33%; width: 66%;
margin: 1.5rem auto; margin: 0 auto;
text-align: end; line-height: 1.25rem;
float: left; text-align: start;
line-height: 1.15rem; padding-top: 0;
padding-bottom: 1.5rem;
} }
.project-item img { .project-item img {
max-height: 200px; width: 100%;
/* width: 45%; */
border: 2px solid red; border: 2px solid red;
margin: 1rem auto; margin: auto;
} }
footer { footer {
color: #666; color: #666;
display: flex; display: flex;
flex-direction: column-reverse;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
margin: 0 auto; margin: 0 auto;
@@ -233,3 +221,48 @@ footer {
color: #c9cacc; color: #c9cacc;
transition: 160ms ease-in; transition: 160ms ease-in;
} }
@media (min-width: 768px) {
#wrapper {
}
nav {
display: flex;
}
nav a {
margin: auto;
flex: 4;
justify-content: flex-start;
/* justify-content: space-between; */
}
nav li {
display: inline-block;
}
nav ul {
display: flex;
flex: 2;
}
#aboutMe {
display: flex;
}
.contactLinks {
display: flex;
flex-direction: column;
}
}
@media (min-width: 1200px) {
#wrapper {
width: 920px;
}
nav {
/* width: 150%; */
/* text-align: center; */
}
}