card layout
This commit is contained in:
Tyler Koenig
188
index.html
188
index.html
@@ -18,40 +18,78 @@
|
|||||||
</style>
|
</style>
|
||||||
<script src="https://use.fontawesome.com/e427b1b41a.js"></script>
|
<script src="https://use.fontawesome.com/e427b1b41a.js"></script>
|
||||||
<!-- <link rel="stylesheet" type="text/css" href="style.css" /> -->
|
<!-- <link rel="stylesheet" type="text/css" href="style.css" /> -->
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css" />
|
||||||
<title>Tyler Koenig</title>
|
<title>Tyler Koenig</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="wrapper">
|
<div id="wrapper">
|
||||||
|
<header>
|
||||||
<nav>
|
<nav>
|
||||||
<a href="index.html">TYLER KOENIG</a>
|
<a href="index.html">TYLER KOENIG</a>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#bio" target="_self">ABOUT</a></li>
|
<li><a href="#bio" target="_self">ABOUT</a></li>
|
||||||
<li><a href="#contact" target="_self">CONTACT</a></li>
|
<li><a href="#contact" target="_self">CONTACT</a></li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#project-wrapper" target="_self">PROJECTS</a>
|
<a href="#projects" target="_self">PROJECTS</a>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="#skills" target="_self">SKILLS</a></li>
|
<li><a href="#skills" target="_self">SKILLS</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<header>
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-top"></div>
|
|
||||||
<img src="/images/headshot-tyler_koenig.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>
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<section id="aboutMe">
|
<div class="card">
|
||||||
<div id="bio">
|
<div class="card-top">
|
||||||
<h2>about me</h2>
|
<div class="avatar-holder">
|
||||||
|
<img
|
||||||
|
id="headshot"
|
||||||
|
src="/images/headshot-tyler_koenig.png"
|
||||||
|
alt="tyler"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<a href="index.html">Tyler Koenig</a>
|
||||||
|
</div>
|
||||||
|
<div class="short-bio">
|
||||||
|
<p>
|
||||||
|
Passionate Software Developer
|
||||||
|
<br />
|
||||||
|
Recent Graduate of We Can Code IT
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="contact-links" id="contact">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<section id="bio">
|
||||||
|
<h2>about</h2>
|
||||||
<p>
|
<p>
|
||||||
I'm Tyler Koenig, a lifelong student. Graduated with
|
I'm Tyler Koenig, a lifelong student. Graduated with
|
||||||
an Associate of Arts from Lorain County Community
|
an Associate of Arts from Lorain County Community
|
||||||
@@ -60,54 +98,13 @@
|
|||||||
front-end web development through We Can Code IT
|
front-end web development through We Can Code IT
|
||||||
Bootcamp. Always interested in a challenge!
|
Bootcamp. Always interested in a challenge!
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
<div id="contact">
|
|
||||||
<h3>contact</h3>
|
|
||||||
<ul class="contactLinks">
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/lerko96"
|
|
||||||
target="_blank"
|
|
||||||
title="github"
|
|
||||||
>
|
|
||||||
github
|
|
||||||
<i
|
|
||||||
class="fa fa-github fa-lg"
|
|
||||||
aria-hidden="true"
|
|
||||||
></i>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
|
|
||||||
target="_blank"
|
|
||||||
title="LinkedIn"
|
|
||||||
>
|
|
||||||
linkedin
|
|
||||||
<i
|
|
||||||
class="fa fa-linkedin-square fa-lg"
|
|
||||||
aria-hidden="true"
|
|
||||||
></i>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="mailto:tylerkng96@icloud.com"
|
|
||||||
target="_blank"
|
|
||||||
title="tylerkng96@icloud.com"
|
|
||||||
>email
|
|
||||||
<i
|
|
||||||
class="fa fa-envelope-o fa-lg"
|
|
||||||
aria-hidden="true"
|
|
||||||
></i>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
<section id="skills">
|
<section id="skills">
|
||||||
<h4>skills</h4>
|
<h2>skills</h2>
|
||||||
<ul class="skills">
|
<ul>
|
||||||
<li>Java</li>
|
<li>Java</li>
|
||||||
<li>Spring</li>
|
<li>Spring</li>
|
||||||
<li>Thymeleaf</li>
|
<li>Thymeleaf</li>
|
||||||
@@ -126,7 +123,46 @@
|
|||||||
<li>Source Control/ Github</li>
|
<li>Source Control/ Github</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<section id="projects">
|
||||||
|
<h2>projects</h2>
|
||||||
|
|
||||||
|
<article class="project">
|
||||||
|
<div class="project-img">
|
||||||
|
<a
|
||||||
|
href="https://github.com/pt-spring-2021-team-project-spa/team-2-spa-repo"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/images/mystery-educator.png"
|
||||||
|
alt=""
|
||||||
|
/></a>
|
||||||
|
</div>
|
||||||
|
<div class="project-name">
|
||||||
|
<h3>mystery educator</h3>
|
||||||
|
</div>
|
||||||
|
<div class="project-date">
|
||||||
|
<p>mon, may 25th 2021</p>
|
||||||
|
</div>
|
||||||
|
<div class="project-bar"></div>
|
||||||
|
<div class="project-about">
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet consectetur
|
||||||
|
adipisicing elit. Et a maiores laborum quo
|
||||||
|
animi, unde repellat. Libero ab sequi vel
|
||||||
|
beatae natus numquam consequuntur molestias
|
||||||
|
ducimus. Ad laudantium neque nobis?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<ul class="project-tagbox">
|
||||||
|
<li class="tag__item">
|
||||||
|
java
|
||||||
|
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
<article class="postcard dark blue">
|
<article class="postcard dark blue">
|
||||||
<a class="postcard__img_link" href="#">
|
<a class="postcard__img_link" href="#">
|
||||||
<img
|
<img
|
||||||
@@ -141,20 +177,22 @@
|
|||||||
</h1>
|
</h1>
|
||||||
<div class="postcard__subtitle small">
|
<div class="postcard__subtitle small">
|
||||||
<time datetime="2020-05-25 12:00:00">
|
<time datetime="2020-05-25 12:00:00">
|
||||||
<i class="fas fa-calendar-alt mr-2"></i>Mon, May
|
<i class="fas fa-calendar-alt mr-2"></i
|
||||||
25th 2020
|
>Mon, May 25th 2020
|
||||||
</time>
|
</time>
|
||||||
</div>
|
</div>
|
||||||
<div class="postcard__bar"></div>
|
<div class="postcard__bar"></div>
|
||||||
<div class="postcard__preview-txt">
|
<div class="postcard__preview-txt">
|
||||||
Lorem ipsum dolor sit amet consectetur adipisicing
|
Lorem ipsum dolor sit amet consectetur
|
||||||
elit. Eligendi, fugiat asperiores inventore beatae
|
adipisicing elit. Eligendi, fugiat
|
||||||
accusamus odit minima enim, commodi quia, doloribus
|
asperiores inventore beatae accusamus odit
|
||||||
eius! Ducimus nemo accusantium maiores velit
|
minima enim, commodi quia, doloribus eius!
|
||||||
corrupti tempora reiciendis molestiae repellat vero.
|
Ducimus nemo accusantium maiores velit
|
||||||
Eveniet ipsam adipisci illo iusto quibusdam, sunt
|
corrupti tempora reiciendis molestiae
|
||||||
neque nulla unde ipsum dolores nobis enim quidem
|
repellat vero. Eveniet ipsam adipisci illo
|
||||||
excepturi, illum quos!
|
iusto quibusdam, sunt neque nulla unde ipsum
|
||||||
|
dolores nobis enim quidem excepturi, illum
|
||||||
|
quos!
|
||||||
</div>
|
</div>
|
||||||
<ul class="postcard__tagbox">
|
<ul class="postcard__tagbox">
|
||||||
<li class="tag__item">
|
<li class="tag__item">
|
||||||
@@ -172,6 +210,8 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
<section id="project-wrapper">
|
<section id="project-wrapper">
|
||||||
<h2>projects</h2>
|
<h2>projects</h2>
|
||||||
|
|||||||
148
style.css
148
style.css
@@ -12,7 +12,8 @@ html, body {
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: #c9cacc;
|
color: #fff;
|
||||||
|
/* color: #c9cacc; */
|
||||||
background-color: #110f16;
|
background-color: #110f16;
|
||||||
/* background-color: #272727; */
|
/* background-color: #272727; */
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@@ -72,61 +73,73 @@ nav a:hover {
|
|||||||
} */
|
} */
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
|
position: relative;
|
||||||
background-color: #151515;
|
background-color: #151515;
|
||||||
margin: 2rem;
|
margin: 2rem auto;
|
||||||
|
/* height: 400px; */
|
||||||
|
width: 320px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2);
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-top {
|
.card-top {
|
||||||
|
position: relative;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
background: #29f3c3;
|
background: #29f3c3;
|
||||||
border-start-end-radius: 10px;
|
|
||||||
border-start-start-radius: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card img {
|
#headshot {
|
||||||
margin: 40px auto 10px;
|
margin: 40px auto 10px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border: 3px solid #151515;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
.name {
|
||||||
/* font-family: 'Source Sans Pro', sans-serif; */
|
height: 40px;
|
||||||
/* font-weight: 700; */
|
margin-top: 70px;
|
||||||
/* line-height: 2rem; */
|
|
||||||
/* letter-spacing: 0.05rem; */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 a {
|
.name a {
|
||||||
font-size: .8em;
|
|
||||||
color: #c9cacc;
|
color: #c9cacc;
|
||||||
text-decoration: none;
|
font-weight: 700;
|
||||||
letter-spacing: -.05em;
|
font-size: 1.6em;
|
||||||
word-spacing: -.05em;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 a:hover {
|
.name a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
color: #29f3c3;
|
color: #29f3c3;
|
||||||
}
|
}
|
||||||
|
|
||||||
header h2 {
|
.short-bio {
|
||||||
/* font-weight: 200; */
|
height: 175px;
|
||||||
font-size: 1.2rem;
|
margin: 20px;
|
||||||
letter-spacing: 0.01rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h2,
|
.contact-links {
|
||||||
h3,
|
position: absolute;
|
||||||
h4 {
|
font-size: 80%;
|
||||||
/* letter-spacing: 0.01rem; */
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 30px;
|
||||||
|
margin-top: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#aboutMe {
|
.contact-links a {
|
||||||
letter-spacing: 0.01rem;
|
margin: 0 10px;
|
||||||
|
padding: 0;
|
||||||
|
color: #c9cacc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h2 {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
text-align: start;
|
||||||
|
/* padding: 1.5rem; */
|
||||||
|
margin: 16px auto 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#bio,
|
#bio,
|
||||||
@@ -135,76 +148,33 @@ h4 {
|
|||||||
text-align: start;
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
#bio h2 {
|
#projects h2 {
|
||||||
font-size: 2.2rem;
|
text-align: start;
|
||||||
|
padding: 1.5rem;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#skills h4 {
|
|
||||||
padding: 1.5rem;
|
|
||||||
color: #666;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin: 0 auto 20px;
|
|
||||||
}
|
|
||||||
#skills ul {
|
#skills ul {
|
||||||
line-height: 1.35rem;
|
display: flex;
|
||||||
font-weight: 200;
|
flex-flow: row wrap;
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
overflow-x:visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skills {
|
#skills li {
|
||||||
display: grid;
|
margin: 5px auto;
|
||||||
grid-template-columns: 1fr 1fr;
|
padding: 5px 10px;
|
||||||
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
border: 1px solid #fff;
|
||||||
gap: 10px 75px;
|
|
||||||
grid-auto-flow: row;
|
|
||||||
grid-template-areas:
|
|
||||||
'. .'
|
|
||||||
'. .'
|
|
||||||
'. .'
|
|
||||||
'. .'
|
|
||||||
'. .'
|
|
||||||
'. .'
|
|
||||||
'. .'
|
|
||||||
'. .';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#contact {
|
.project-img img {
|
||||||
margin-top: 1rem;
|
width: 100%;
|
||||||
padding: 1.5rem;
|
height: ;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#contact h3 {
|
/* end new */
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#contact ul {
|
|
||||||
display: flex;
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contactLinks li {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contactLinks a {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
color: #c9cacc;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contactLinks a:hover {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
#project-wrapper {
|
#project-wrapper {
|
||||||
margin-top: 2.5rem;
|
margin-top: 2.5rem;
|
||||||
@@ -311,7 +281,7 @@ footer {
|
|||||||
transition: 160ms ease-in;
|
transition: 160ms ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
code pen begin
|
|
||||||
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap');
|
||||||
/* This pen */
|
/* This pen */
|
||||||
@@ -650,7 +620,7 @@ a:hover {
|
|||||||
|
|
||||||
/* color: #1b1b1b; */
|
/* color: #1b1b1b; */
|
||||||
/* color: #2a9d8f */
|
/* color: #2a9d8f */
|
||||||
/* @media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
#wrapper {
|
#wrapper {
|
||||||
max-width: 992px;
|
max-width: 992px;
|
||||||
}
|
}
|
||||||
@@ -746,6 +716,6 @@ a:hover {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
} */
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user