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

45
style.css
View File

@@ -199,8 +199,8 @@ footer {
align-items: center; align-items: center;
margin: 0 auto; margin: 0 auto;
border: 1px dotted red; border: 1px dotted red;
padding: 1.5rem; /* padding: 1.5rem; */
height: 100px; /* height: 90px; */
} }
#copyright { #copyright {
@@ -224,6 +224,8 @@ footer {
@media (min-width: 768px) { @media (min-width: 768px) {
#wrapper { #wrapper {
width: 560px;
/* text-align: center; */
} }
nav { nav {
display: flex; display: flex;
@@ -233,7 +235,6 @@ footer {
margin: auto; margin: auto;
flex: 4; flex: 4;
justify-content: flex-start; justify-content: flex-start;
/* justify-content: space-between; */ /* justify-content: space-between; */
} }
@@ -243,17 +244,53 @@ footer {
nav ul { nav ul {
display: flex; display: flex;
flex: 2; /* flex: 5; */
} }
#aboutMe { #aboutMe {
display: flex; display: flex;
} }
#bio {
flex: 2;
}
#contact {
flex: 1;
text-align: end;
}
.contactLinks { .contactLinks {
display: flex; display: flex;
flex-direction: column; 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) { @media (min-width: 1200px) {