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

media queries

Browse Source
This commit is contained in:
Tyler Koenig
2021-05-15 16:47:35 -04:00
parent 37152f1614
commit 16e569dd38
2 changed files with 56 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@@ -100,15 +100,17 @@
>
</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>
<div id="project-container">
<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>
</div>
</article>
<article class="project-item">
<div>
@@ -121,6 +123,7 @@
>
</h3>
</div>
<div id="project-container">
<img
src="/images/shelter.png"
alt="virtual-pet-shelter-console"
@@ -133,6 +136,7 @@
<li>map<> = hashmap<>()></li>
<li>collections<></li>
</ul>
</div>
</article>
<article class="project-item">
<div>
@@ -145,6 +149,7 @@
>
</h3>
</div>
<div id="project-container">
<img src="/images/pet.png" alt="virtual-pet-console" />
<ul class="project-skills">
<h4>skills</h4>
@@ -155,6 +160,7 @@
<li>methods</li>
<li>clean code</li>
</ul>
</div>
</article>
</div>
</section>

45
style.css
View File

@@ -199,8 +199,8 @@ footer {
align-items: center;
margin: 0 auto;
border: 1px dotted red;
padding: 1.5rem;
height: 100px;
/* padding: 1.5rem; */
/* height: 90px; */
}
#copyright {
@@ -224,6 +224,8 @@ footer {
@media (min-width: 768px) {
#wrapper {
width: 560px;
/* text-align: center; */
}
nav {
display: flex;
@@ -233,7 +235,6 @@ footer {
margin: auto;
flex: 4;
justify-content: flex-start;
/* justify-content: space-between; */
}
@@ -243,17 +244,53 @@ footer {
nav ul {
display: flex;
flex: 2;
/* flex: 5; */
}
#aboutMe {
display: flex;
}
#bio {
flex: 2;
}
#contact {
flex: 1;
text-align: end;
}
.contactLinks {
display: flex;
flex-direction: column;
}
#project-container {
display: flex;
flex-direction: row-reverse;
}
.project-item img {
flex: 3;
}
.project-skills {
flex: 1;
padding-right: 1rem;
text-align: end;
}
.project-item a {
align-self: start;
}
footer {
margin: 0 auto;
flex-direction: row;
justify-content: space-between;
width: 90%;
}
}
@media (min-width: 1200px) {