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

13
index.html
View File

@@ -15,9 +15,10 @@
<title>Tyler Koenig</title> <title>Tyler Koenig</title>
</head> </head>
<body> <body>
<div id="wrapper">
<nav> <nav>
<a href="index.html">TYLER KOENIG</a>
<ul> <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="#projects" target="_self">PROJECTS</a></li>
<li><a href="#contact" target="_self">CONTACT</a></li> <li><a href="#contact" target="_self">CONTACT</a></li>
<li><a href="#bio" target="_self">ABOUT</a></li> <li><a href="#bio" target="_self">ABOUT</a></li>
@@ -39,8 +40,8 @@
<div id="bio"> <div id="bio">
<h2>about me</h2> <h2>about me</h2>
<p> <p>
I'm Tyler Koenig, a lifelong student. Graduated with an Associate of I'm Tyler Koenig, a lifelong student. Graduated with an Associate
Arts from Lorain County Community College in 2018. of Arts from Lorain County Community College in 2018.
</p> </p>
<h4>skills</h4> <h4>skills</h4>
<ul> <ul>
@@ -120,7 +121,10 @@
> >
</h3> </h3>
</div> </div>
<img src="/images/shelter.png" alt="virtual-pet-shelter-console" /> <img
src="/images/shelter.png"
alt="virtual-pet-shelter-console"
/>
<ul class="project-skills"> <ul class="project-skills">
<h4>skills</h4> <h4>skills</h4>
<li>TDD</li> <li>TDD</li>
@@ -172,5 +176,6 @@
></a> ></a>
</div> </div>
</footer> </footer>
</div>
</body> </body>
</html> </html>

149
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; */
}
}