Add images to website links

This commit is contained in:
Nathan Chapman 2021-01-16 11:42:20 -07:00
parent 18319506b8
commit fc37baad89
11 changed files with 60 additions and 13 deletions

View File

BIN
images/website_berthume.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB

BIN
images/website_bltc.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 546 KiB

BIN
images/website_favati.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

BIN
images/website_jac.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 241 KiB

BIN
images/website_jhc.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 KiB

BIN
images/website_owlsprit.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 468 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 274 KiB

View File

@ -73,7 +73,7 @@ section {
box-sizing: border-box;
}
.albums-list {
.albums-list, .website-list {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
@ -86,6 +86,27 @@ iframe {
width: 400px;
}
.website-list__item {
display: flex;
flex-direction: column;
max-width: 400px;
margin-bottom: 1em;
font-weight: bold;
}
.website-list__item img {
border: 1px solid #c1c2c0;
}
@media all and (max-width: 1000px) {
.website-list {
justify-content: space-around;
}
.website-list__item {
max-width: 100%;
margin-bottom: 2em;
}
}
header,
footer {
@ -106,6 +127,8 @@ footer {
main h1 {
padding-left: 1rem;
}
section {
.website-list__item {
max-width: 100%;
margin-bottom: 2em;
}
}

View File

@ -34,16 +34,40 @@
</section>
<section>
<h3>My Work</h3>
<ul>
<li><a href="https://aylafavati.com/">Ayla Favati</a></li>
<li><a href="https://jhcillustration.com/">JHC Illustration</a></li>
<li><a href="https://jjayberthumemusic.com/">JJay Berthume Music</a></li>
<li><a href="http://wallyworks.net/">Wallyworks Construction</a></li>
<li><a href="https://owlsprit.nathanjchapman.com/">Owl Sprit Cafe</a></li>
<li><a href="https://bltc.nathanjchapman.com/">Better Living Coffee</a></li>
<li><a href="http://ptdefense.com/">PT Defense</a></li>
<li><a href="http://jac.nathanjchapman.com/">JAC Defenders</a></li>
</ul>
<div class="website-list">
<a class="website-list__item" href="https://aylafavati.com/">
Ayla Favati
<img src="/images/website_favati.png">
</a>
<a class="website-list__item" href="https://jhcillustration.com/">
JHC Illustration
<img src="/images/website_jhc.png">
</a>
<a class="website-list__item" href="https://jjayberthumemusic.com/">
JJay Berthume Music
<img src="/images/website_berthume.png">
</a>
<a class="website-list__item" href="http://wallyworks.net/">
Wallyworks Construction
<img src="/images/website_wallyworks.png">
</a>
<a class="website-list__item" href="https://owlsprit.nathanjchapman.com/">
Owl Sprit Cafe
<img src="/images/website_owlsprit.png">
</a>
<a class="website-list__item" href="https://bltc.nathanjchapman.com/">
Better Living Coffee
<img src="/images/website_bltc.png">
</a>
<a class="website-list__item" href="http://ptdefense.com/">
PT Defense
<img src="/images/website_ptdefense.png">
</a>
<a class="website-list__item" href="http://jac.nathanjchapman.com/">
JAC Defenders
<img src="/images/website_jac.png">
</a>
</div>
</section>
</article>
</main>