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

footer and style

Browse Source
This commit is contained in:
Tyler Koenig
2021-05-14 15:26:51 -04:00
parent f01f345264
commit b63e5ca1ff
2 changed files with 125 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
index.html
View File

@@ -15,7 +15,7 @@
<title>Tyler Koenig</title> <title>Tyler Koenig</title>
</head> </head>
<body> <body>
<nav id="links"> <nav>
<ul> <ul>
<li style="float: left"><a href="index.html">TYLER KOENIG</a></li> <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>
@@ -28,11 +28,11 @@
<h1> <h1>
<a href="index.html">Tyler Koenig</a> <a href="index.html">Tyler Koenig</a>
</h1> </h1>
<h3> <h2>
Warehouse Associate at Amazon Warehouse Associate at Amazon
<p>Student at We Can Code IT</p> <br />
<p>Web Developer in the making!</p> Student at We Can Code IT, Web Developer in the making!
</h3> </h2>
</header> </header>
<main> <main>
<section id="aboutMe"> <section id="aboutMe">
@@ -156,9 +156,21 @@
</section> </section>
</main> </main>
<footer> <footer>
<ul class="footLinks"> <span id="copyright">&copy; 2021 Tyler Koenig</span>
<li><a href=""></a></li> <div id="footLinks">
</ul> <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>
</body> </body>
</html> </html>

191
style.css
View File

@@ -1,5 +1,4 @@
body { body {
/* box-sizing: border-box; */
color: #c9cacc; color: #c9cacc;
background-color: #1b1b1b; background-color: #1b1b1b;
font-size: 15px; font-size: 15px;
@@ -8,28 +7,28 @@ body {
line-height: 1.725; line-height: 1.725;
text-rendering: geometricPrecision; text-rendering: geometricPrecision;
min-height: 100%; min-height: 100%;
display: block; margin: 0 auto;
flex-direction: column;
margin: 0;
} }
#links ul { @media (max-width: 768px) {
/* display: inline; */ nav {
/* display: inline-block; */ display: flex;
flex-direction: column;
}
}
nav ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0 auto;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
/* background-color: black; */
/* padding: 4rem auto; */
} }
#links li { nav li {
float: right; float: right;
} }
#links li a { nav li a {
display: block; display: block;
color: #c9cacc; color: #c9cacc;
font-weight: 600; font-weight: 600;
@@ -39,46 +38,54 @@ body {
text-decoration: none; text-decoration: none;
} }
nav li a:hover {
background-color: #2a9d8f;
transition: 150ms ease-in;
}
header { header {
background-color: #1b1b1b; background-color: #1b1b1b;
color: #c9cacc; color: #c9cacc;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
padding: 2rem; padding: 2rem;
line-height: 0.75rem; line-height: 1.75rem;
border-top: 1.5px solid #c9cacc; border-top: 1.5px solid #666;
border-bottom: 1.5px solid #c9cacc; border-bottom: 1.5px solid #666;
} }
header img { header img {
width: 150px; width: 100px;
border: 5px solid #f4f1de; border: 5px solid #666;
border: 5px solid grey;
border-radius: 165px; border-radius: 165px;
} }
h1 { h1 {
font-size: 2.5rem; /* border: 1px solid red; */
padding: 1rem; margin: 0.5rem;
letter-spacing: 0.01rem;
} }
h1 a { h1 a {
font-size: 3rem;
color: #c9cacc; color: #c9cacc;
text-decoration: none; text-decoration: none;
} }
h1 a:hover { h1 a:hover {
color: #81b29a; color: #2a9d8f;
} }
h1 a:active { header h2 {
color: #3d405b; font-weight: 200;
font-size: 1.2rem;
letter-spacing: 0.01rem;
} }
h2, h2,
h3, h3,
h4 { h4 {
letter-spacing: 0.1em; letter-spacing: 0.01rem;
font-weight: 800;
} }
/* h2 { /* h2 {
@@ -86,43 +93,38 @@ h4 {
} */ } */
main { main {
width: 700px; width: 620px;
margin: 0 auto; margin: 0 auto;
} }
#aboutMe { #aboutMe {
display: flex; display: flex;
border: 2px solid black; border: 2px solid black;
/* width: 70%; */
padding: 1.5rem; padding: 1.5rem;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
letter-spacing: 0.01rem;
} }
@media (max-width: 620px) {
#aboutMe {
display: block;
justify-content: center;
}
#contact {
display: table;
}
#projects {
height: auto;
overflow: scroll;
}
}
#bio { #bio {
width: 400px; flex: 3;
margin: 0 auto; border: 1px solid purple;
padding: 1.5rem; padding: 1.5rem;
text-align: start; text-align: start;
} }
#bio h4 {
color: #666;
}
#bio ul {
line-height: 1.35rem;
font-weight: 200;
}
#contact { #contact {
flex: 1;
border: 1px solid red; border: 1px solid red;
width: fit-content;
text-align: end; text-align: end;
margin: 0 auto; margin: 0 auto;
padding: 1.5rem; padding: 1.5rem;
@@ -131,7 +133,7 @@ main {
.contactLinks li { .contactLinks li {
list-style: none; list-style: none;
line-height: 2rem; line-height: 2rem;
letter-spacing: 0.15rem; letter-spacing: 0.01rem;
} }
.contactLinks a { .contactLinks a {
@@ -146,46 +148,8 @@ main {
} }
#projects { #projects {
display: block; border: 2px solid green;
/* width: 70%; */
border: 2px solid red;
padding: 1.5rem; padding: 1.5rem;
margin: 0 auto;
height: auto;
/* justify-content: center; */
/* overflow: auto; */
}
.project-item {
display: block;
border: 1px solid blue;
margin: 10px auto 20px;
height: auto;
text-align: center;
justify-content: center;
/* background-color: #282c34; */
/* color: #ffffff; */
font-weight: 200;
padding: 2rem auto;
/* padding: auto auto 50px; */
/* padding: 1.1rem; */
}
.project-item a {
color: #c9cacc;
text-decoration: none;
}
.project-item a:hover {
color: #81b29a;
}
.project-item img {
max-height: 200px;
/* width: 45%; */
border: 2px solid red;
margin: 0 auto;
} }
#projects h2 { #projects h2 {
@@ -194,10 +158,28 @@ main {
border: 1px solid #3d405b; border: 1px solid #3d405b;
} }
.project-item {
border: 1px solid blue;
margin: 0 auto;
text-align: center;
font-weight: 200;
padding: 1.5rem;
}
.project-item a {
color: #c9cacc;
text-decoration: none;
}
.project-item a:hover {
color: #2a9d8f;
}
#projects h3 { #projects h3 {
border: 1px solid brown; border: 1px solid brown;
text-align: left; text-align: left;
padding: 1.5rem; margin: 0 auto;
/* padding: 1rem; */
} }
#projects h4 { #projects h4 {
@@ -209,8 +191,45 @@ main {
border: 1px solid red; border: 1px solid red;
list-style: none; list-style: none;
width: 33%; width: 33%;
margin: 0 auto; margin: 1.5rem auto;
text-align: end; text-align: end;
float: left; float: left;
line-height: 1.15rem; line-height: 1.15rem;
} }
.project-item img {
max-height: 200px;
/* width: 45%; */
border: 2px solid red;
margin: 1rem auto;
}
footer {
color: #666;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 auto;
border: 1px dotted red;
padding: 1.5rem;
height: 100px;
}
#copyright {
border: 1px solid yellow;
letter-spacing: 0.1rem;
}
#footLinks {
border: 1px solid blue;
letter-spacing: 0.8rem;
}
#footLinks a {
color: #666;
}
#footLinks a:hover {
color: #c9cacc;
transition: 160ms ease-in;
}