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>
</head>
<body>
<nav>
<ul>
<li style="float: left"><a href="index.html">TYLER KOENIG</a></li>
<li><a href="#projects" target="_self">PROJECTS</a></li>
<li><a href="#contact" target="_self">CONTACT</a></li>
<li><a href="#bio" target="_self">ABOUT</a></li>
</ul>
</nav>
<header>
<img src="/images/profile.png" alt="tyler" />
<h1>
<a href="index.html">Tyler Koenig</a>
</h1>
<h2>
Warehouse Associate at Amazon
<br />
Student at We Can Code IT, Web Developer in the making!
</h2>
</header>
<main>
<section id="aboutMe">
<div id="bio">
<h2>about me</h2>
<p>
I'm Tyler Koenig, a lifelong student. Graduated with an Associate of
Arts from Lorain County Community College in 2018.
</p>
<h4>skills</h4>
<ul>
<li>problem solving</li>
<li>attention to detail</li>
<li>flexibility</li>
<li>time management</li>
<li>creativity</li>
</ul>
</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>
<div id="wrapper">
<nav>
<a href="index.html">TYLER KOENIG</a>
<ul>
<li><a href="#projects" target="_self">PROJECTS</a></li>
<li><a href="#contact" target="_self">CONTACT</a></li>
<li><a href="#bio" target="_self">ABOUT</a></li>
</ul>
</nav>
<header>
<img src="/images/profile.png" alt="tyler" />
<h1>
<a href="index.html">Tyler Koenig</a>
</h1>
<h2>
Warehouse Associate at Amazon
<br />
Student at We Can Code IT, Web Developer in the making!
</h2>
</header>
<main>
<section id="aboutMe">
<div id="bio">
<h2>about me</h2>
<p>
I'm Tyler Koenig, a lifelong student. Graduated with an Associate
of Arts from Lorain County Community College in 2018.
</p>
<h4>skills</h4>
<ul>
<li>problem solving</li>
<li>attention to detail</li>
<li>flexibility</li>
<li>time management</li>
<li>creativity</li>
</ul>
</article>
<article class="project-item">
<div>
<h3>
</div>
<div id="contact">
<h3>contact</h3>
<ul class="contactLinks">
<li>
<a
href="https://github.com/2021-Spring-Part-Time/virtual-pet-shelter-lerko96"
href="https://github.com/lerko96"
target="_blank"
title="github"
>
virtual-pet-shelter</a
github</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>
<i class="fa fa-github fa-lg" aria-hidden="true"></i>
</li>
<li>
<a
href="https://github.com/2021-Spring-Part-Time/virtual-pet-lerko96"
href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
target="_blank"
title="LinkedIn"
>
virtual-pet</a
linkedin</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>
<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>
</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>
</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>
</footer>
</footer>
</div>
</body>
</html>

155
style.css
View File

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