Added example images

This commit is contained in:
James Dinh 2023-01-05 14:20:04 -08:00
parent d6c2456e56
commit 8d7054973c
6 changed files with 25 additions and 12 deletions

View File

@ -46,8 +46,9 @@
</div> </div>
<div id="nav-links-container"> <div id="nav-links-container">
<ul id="navList"> <ul id="navList">
<li><a class="navlink current" href="./about.html" title="about">About</a></li> <li><a class="navlink" href="./" title="about">Gallery</a></li>
<li><a class="navlink" href="./buy.html" title="buy">Buy</a></li> <li><a class="navlink active" href="./about.html" title="about">About</a></li>
<li><a class="navlink boxed" href="./buy.html" title="buy">Buy</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>

View File

@ -44,8 +44,9 @@
</div> </div>
<div id="nav-links-container"> <div id="nav-links-container">
<ul id="navList"> <ul id="navList">
<li><a class="navlink" href="./" title="about">Gallery</a></li>
<li><a class="navlink" href="./about.html" title="about">About</a></li> <li><a class="navlink" href="./about.html" title="about">About</a></li>
<li><a class="navlink current" href="./buy.html" title="buy">Buy</a></li> <li><a class="navlink boxed active" href="./buy.html" title="buy">Buy</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>

View File

@ -80,12 +80,17 @@ nav ul li {
.navlink { .navlink {
color:rgb(160, 160, 160); color:rgb(160, 160, 160);
font-size: 18px; font-size: 20px;
text-decoration: none; text-decoration: none;
position: relative; position: relative;
} }
.navlink.active,a:hover { .navlink.active {
font-weight: bold;
color: rgba(54, 54, 54, 0.774);
}
a:hover {
color: rgba(54, 54, 54, 0.774); color: rgba(54, 54, 54, 0.774);
transition: .5s; transition: .5s;
} }
@ -116,6 +121,11 @@ nav ul li {
display: inline-flex; display: inline-flex;
} }
.boxed {
border: 1px solid rgb(118, 118, 118);
padding: 0 8px;
}
main { main {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
@ -137,11 +147,11 @@ header {
} }
.slide-content { .slide-content {
max-width: 800px; max-width: fit-content;
} }
.slide-img { .slide-img {
width: 100%; max-height: 700px;
} }
.slide-desc { .slide-desc {
@ -151,8 +161,8 @@ header {
text-align: center; text-align: center;
} }
.splide__pagination__page.is-active { li .splide__pagination__page.is-active {
background: #2c2c2c !important; background: #2c2c2c;
} }
.about-parent { .about-parent {

BIN
img/piece-2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
img/piece-3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 854 KiB

View File

@ -47,8 +47,9 @@
</div> </div>
<div id="nav-links-container"> <div id="nav-links-container">
<ul id="navList"> <ul id="navList">
<li><a class="navlink active" href="./" title="about">Gallery</a></li>
<li><a class="navlink" href="./about.html" title="about">About</a></li> <li><a class="navlink" href="./about.html" title="about">About</a></li>
<li><a class="navlink" href="./buy.html" title="buy">Buy</a></li> <li><a class="navlink boxed" href="./buy.html" title="buy">Buy</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>
@ -60,8 +61,8 @@
<div class="splide__track"> <div class="splide__track">
<ul class="splide__list"> <ul class="splide__list">
<li class="splide__slide"><div class="slide-content"><img class="slide-img" src="img/piece-1.jpg"><div class="slide-desc">Title</div></div></li> <li class="splide__slide"><div class="slide-content"><img class="slide-img" src="img/piece-1.jpg"><div class="slide-desc">Title</div></div></li>
<li class="splide__slide"><div class="slide-content"><img class="slide-img" src="img/piece-1.jpg"><div class="slide-desc">Title</div></div></li> <li class="splide__slide"><div class="slide-content"><img class="slide-img" src="img/piece-2.jpg"><div class="slide-desc">Title</div></div></li>
<li class="splide__slide"><div class="slide-content"><img class="slide-img" src="img/piece-1.jpg"><div class="slide-desc">Title</div></div></li> <li class="splide__slide"><div class="slide-content"><img class="slide-img" src="img/piece-3.jpg"><div class="slide-desc">Title</div></div></li>
</ul> </ul>
</div> </div>
</section> </section>