Added slideshow

This commit is contained in:
James Dinh 2023-01-04 22:45:24 -08:00
parent ae93e8bf72
commit 61f9db15ed
12 changed files with 194 additions and 358 deletions

View File

@ -18,13 +18,18 @@
<meta name="keywords" content="Nancy Pannikkat, art gallery, buy art online"> <meta name="keywords" content="Nancy Pannikkat, art gallery, buy art online">
<!-- JavaScript Refs --> <!-- JavaScript Refs -->
<script src="js/jquery-3.6.1.min.js"></script>
<script defer src="js/contact.js"></script>
<style> <style>
@font-face {
font-family: "Queensides";
src: url("font/Queensides-3z7Ey.ttf") format('truetype');
}
body { body {
position: relative; position: relative;
background-color: #f2f1ef; background-color: #f2f1ef;
color: #0d1117; color: #0d1117;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-family: "Queensides";
} }
</style> </style>
<!--For icons, go here: https://iconsvg.xyz/ or https://icomoon.io/app/#/select--> <!--For icons, go here: https://iconsvg.xyz/ or https://icomoon.io/app/#/select-->
@ -41,9 +46,8 @@
</div> </div>
<div id="nav-links-container"> <div id="nav-links-container">
<ul id="navList"> <ul id="navList">
<li><a class="navlink" href="./gallery.html" title="gallery">Gallery</a></li>
<li><a class="navlink current" href="./about.html" title="about">About</a></li> <li><a class="navlink current" href="./about.html" title="about">About</a></li>
<li><a class="navlink" href="./contact.html" title="contact">Contact</a></li> <li><a class="navlink" href="./buy.html" title="buy">Buy</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>
@ -56,7 +60,35 @@
<img src=""> <img src="">
</div> </div>
<div class="about-desc"> <div class="about-desc">
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<section class="contact">
<h2 class="topic">Contact Me</h2>
<hr class="line">
<!-- Src: https://codepen.io/nikhil8krishnan/pen/gaybLK -->
<form action="#" class="contact-form" method="POST">
<div class="form-single-line">
<div class="input-block">
<label for="">Name</label>
<input type="text" name="Name" class="form-control" required>
</div>
</div>
<div class="form-single-line">
<div class="input-block">
<label for="">Email</label>
<input type="email" name="Email" class="form-control" required>
</div>
</div>
<div class="form-multi-line">
<div class="input-block textarea">
<label for="">Drop your message here</label>
<textarea rows="3" name="Message" class="form-control" required></textarea>
</div>
</div>
<div class="form-submit-button">
<button type="submit" class="square-button">Send</button>
</div>
</form>
</section>
</div> </div>
</div> </div>

View File

@ -18,14 +18,16 @@
<meta name="keywords" content="Nancy Pannikkat, art gallery, buy art online"> <meta name="keywords" content="Nancy Pannikkat, art gallery, buy art online">
<!-- JavaScript Refs --> <!-- JavaScript Refs -->
<script src="js/jquery-3.6.1.min.js"></script>
<script defer src="js/contact.js"></script>
<style> <style>
@font-face {
font-family: "Queensides";
src: url("font/Queensides-3z7Ey.ttf") format('truetype');
}
body { body {
position: relative; position: relative;
background-color: #f2f1ef; background-color: #f2f1ef;
color: #0d1117; color: #0d1117;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-family: "Queensides";
} }
</style> </style>
<!--For icons, go here: https://iconsvg.xyz/ or https://icomoon.io/app/#/select--> <!--For icons, go here: https://iconsvg.xyz/ or https://icomoon.io/app/#/select-->
@ -42,42 +44,14 @@
</div> </div>
<div id="nav-links-container"> <div id="nav-links-container">
<ul id="navList"> <ul id="navList">
<li><a class="navlink" href="./gallery.html" title="gallery">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="./contact.html" title="contact">Contact</a></li> <li><a class="navlink current" href="./buy.html" title="buy">Buy</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>
</div> </div>
<main> <main>
<section class="contact">
<h2 class="topic">Contact Me</h2>
<hr class="line">
<!-- Src: https://codepen.io/nikhil8krishnan/pen/gaybLK -->
<form action="https://formsubmit.co/cdb6b3b7f0aaee18ef710e25aee428d2" class="contact-form" method="POST">
<div class="form-single-line">
<div class="input-block">
<label for="">Name</label>
<input type="text" name="Name" class="form-control" required>
</div>
</div>
<div class="form-single-line">
<div class="input-block">
<label for="">Email</label>
<input type="email" name="Email" class="form-control" required>
</div>
</div>
<div class="form-multi-line">
<div class="input-block textarea">
<label for="">Drop your message here</label>
<textarea rows="3" name="Message" class="form-control" required></textarea>
</div>
</div>
<div class="form-submit-button">
<button type="submit" class="square-button">Send</button>
</div>
</form>
</section>
</main> </main>
<footer> <footer>
<div class="footer-container"> <div class="footer-container">

View File

@ -5,6 +5,10 @@ html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
body {
padding-top: 100px;
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -111,102 +115,32 @@ nav ul li {
display: inline-flex; display: inline-flex;
} }
body { main {
padding-top: 100px; width: 100%;
}
.gallery-parent {
display: flex;
flex-wrap: wrap;
width: auto;
padding-top: 20px;
max-width: 1300px;
/* Change later */
margin: auto;
justify-content: center; justify-content: center;
} align-items: center;
position: relative;
.gallery-article { margin: auto;
width: auto; padding-top: 30px;
height: auto;
/* background-color: darkgray; */
margin: 10px 50px 50px;
}
.art-thumbnail {
width: 250px;
height: 250px;
background: linear-gradient(rgba(10, 14, 18, 0.2) 50%, rgba(104, 104, 104, 0.37) 60%, rgb(188, 188, 188) 100%);
}
.art-title {
font-size: 20px;
padding: 5px 0;
}
.art-desc {
font-size: 18px;
color: darkgray;
} }
header { header {
margin: auto; margin: auto;
width: 100%; width: 100%;
height: auto; height: auto;
background-color: aliceblue;
padding: 30px 0; padding: 30px 0;
} }
.showcase-parent { .splide__slide {
display: flex; padding: 0 10px;
justify-content: space-between; }
align-items: center;
text-align: center; .slide-content {
padding: 0 30px;
max-width: 800px; max-width: 800px;
min-width: 300px;
margin: auto;
} }
.header-text { .slide-img {
display: flex; width: 100%;
flex-flow: column nowrap;
position: relative;
padding: 10px 20px;
max-width: 700px;
min-width: 300px;
}
.header-title {
padding: 10px 0;
}
.header-subtitle {
font-size: 18px;
}
.header-button {
width: 120px;
margin: 30px auto 0;
border-radius: 3px;
box-shadow: 1px 1px 2px 2px rgb(201, 201, 201);
padding: 10px 20px;
background-color: rgb(169, 193, 169) ;
}
.header-link {
text-decoration: none;
color: unset;
}
.header-thumbnail {
height: 300px;
width: 300px;
background-color: bisque;
box-shadow: 0px 3px 5px 5px rgb(201, 201, 201);
margin: 20px;
align-items: center;
} }
.about-parent { .about-parent {
@ -215,7 +149,9 @@ header {
height: auto; height: auto;
margin: 20px auto; margin: 20px auto;
max-width: 1000px; max-width: 1000px;
min-width: 200px;
justify-content: center; justify-content: center;
padding: 0 20px;
} }
.about-img { .about-img {
@ -231,10 +167,27 @@ header {
} }
/* Contact */ /* Contact */
.contact {
text-align: center;
max-width: 1500px;
margin: 50px 0;
}
.topic {
font-size: 30px;
}
.line {
margin: 10px 0 0;
}
.contact-form { .contact-form {
margin-top: 30px; margin-top: 30px;
min-width: 300px; min-width: 300px;
width: 40vw; width: 100%;
padding-bottom: 20px;
margin: 30px auto;
} }
input:-webkit-autofill, input:-webkit-autofill,
@ -251,7 +204,7 @@ input:-webkit-autofill:active {
} }
.input-block { .input-block {
background-color: #bababa; background-color: #dddddd;
border-radius: 2px; border-radius: 2px;
width: 100%; width: 100%;
height: 60px; height: 60px;
@ -262,7 +215,7 @@ input:-webkit-autofill:active {
color: black; color: black;
} }
.input-block.focus { .input-block.focus {
background-color: #d1d6df; filter: brightness(0.9);
transition: 0.5s; transition: 0.5s;
} }
.input-block.textarea { .input-block.textarea {
@ -306,8 +259,8 @@ option {
top: 0; top: 0;
} }
.square-button { .square-button {
background-color: rgb(180, 180, 180); background-color: #dddddd;
color: #060047; color: #2c2c2c;
font-size: 26px; font-size: 26px;
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 700;
@ -319,7 +272,7 @@ option {
width: 30%; width: 30%;
} }
.square-button:hover, .square-button:focus { .square-button:hover, .square-button:focus {
filter: brightness(0.8); filter: brightness(0.9);
cursor: pointer; cursor: pointer;
} }
@ -330,25 +283,6 @@ option {
} }
} }
main {
width: 100%;
justify-content: center;
align-items: center;
position: relative;
margin: auto;
display: flex;
padding-top: 30px;
}
.contact {
text-align: center;
max-width: 1500px;
}
.topic {
font-size: 30px;
}
/* Footer */ /* Footer */
footer { footer {
width: 100%; width: 100%;
@ -359,8 +293,9 @@ footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
max-width: 800px; max-width: 800px;
min-width: none; min-width: 200px;
margin: auto; margin: auto;
padding: 0 20px;
} }
.footer-copyright { .footer-copyright {

1
css/splide.min.css vendored Normal file

File diff suppressed because one or more lines are too long

BIN
font/Queensides-3z7Ey.ttf Normal file

Binary file not shown.

Binary file not shown.

View File

@ -1,130 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<!--
Copyright Disclaimer: This Source Code is Copyright (c) 2022 Nancy Pannikkat. All Rights Reserved.
-->
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Nancy Pannikkat</title>
<link href="css/general.css" rel="stylesheet" type="text/css" media="all">
<!-- <link rel="icon" href="img/icon.ico"> -->
<meta name="author" content="Nancy Pannikkat">
<meta name="copyright" content="This site and its pages are Copyright (c) 2022 Nancy Pannikkat. All Rights Reserved.">
<meta name="description" content="The official art gallery showcase of Nancy Pannikkat">
<meta name="keywords" content="Nancy Pannikkat, art gallery, buy art online">
<!-- JavaScript Refs -->
<style>
body {
position: relative;
background-color: #f2f1ef;
color: #0d1117;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
</style>
<!--For icons, go here: https://iconsvg.xyz/ or https://icomoon.io/app/#/select-->
<!-- Compress Images: https://imageresizer.com/image-compressor -->
</head>
<body>
<!--Nav-->
<div class="nav-wrapper">
<nav class="navBar">
<div class="nav-left">
<a id="nav-logo-a" href="./">
<h1>Nancy Pannikkat</h1>
</a>
</div>
<div id="nav-links-container">
<ul id="navList">
<li><a class="navlink current" href="./gallery.html" title="gallery">Gallery</a></li>
<li><a class="navlink" href="./about.html" title="about">About</a></li>
<li><a class="navlink" href="./contact.html" title="contact">Contact</a></li>
</ul>
</div>
</nav>
</div>
<!-- Main -->
<main>
<div class="gallery-parent">
<div class="gallery-article">
<div class="art-thumbnail"></div>
<div class="art-title">Title</div>
<hr>
<div class="art-desc">Price</div>
</div>
<div class="gallery-article">
<div class="art-thumbnail"></div>
<div class="art-title">Title</div>
<hr>
<div class="art-desc">Price</div>
</div>
<div class="gallery-article">
<div class="art-thumbnail"></div>
<div class="art-title">Title</div>
<hr>
<div class="art-desc">Price</div>
</div>
<div class="gallery-article">
<div class="art-thumbnail"></div>
<div class="art-title">Title</div>
<hr>
<div class="art-desc">Price</div>
</div>
<div class="gallery-article">
<div class="art-thumbnail"></div>
<div class="art-title">Title</div>
<hr>
<div class="art-desc">Price</div>
</div>
<div class="gallery-article">
<div class="art-thumbnail"></div>
<div class="art-title">Title</div>
<hr>
<div class="art-desc">Price</div>
</div>
<div class="gallery-article">
<div class="art-thumbnail"></div>
<div class="art-title">Title</div>
<hr>
<div class="art-desc">Price</div>
</div>
<div class="gallery-article">
<div class="art-thumbnail"></div>
<div class="art-title">Title</div>
<hr>
<div class="art-desc">Price</div>
</div>
<div class="gallery-article">
<div class="art-thumbnail"></div>
<div class="art-title">Title</div>
<hr>
<div class="art-desc">Price</div>
</div>
</div>
</main>
<footer>
<div class="footer-container">
<div class="footer-copyright">
©️ 2022 Nancy Pannikkat
</div>
<div class="socials">
<div class="socials-icon">
<a href="#" title="Facebook"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#000"><path d="M20 0a4 4 0 0 1 4 4v16a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h16zm-4 7.28V4.5h-2.29c-2.1 0-3.42 1.6-3.42 3.89v1.67H8v2.77h2.29v6.67h2.85v-6.67h2.29l.57-2.77h-2.86V8.94c0-1.1.58-1.66 1.72-1.66H16z"/></svg></a>
</div>
<div class="socials-icon">
<a href="#" title="Instagram"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#000"><path d="M20 0a4 4 0 0 1 4 4v16a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h16zm-4.89 4.5H8.9C6.33 4.5 4.6 6.15 4.5 8.66V15.09c0 1.3.42 2.41 1.27 3.23a4.34 4.34 0 0 0 2.88 1.17l.27.01h6.16c1.3 0 2.4-.42 3.18-1.18a4.25 4.25 0 0 0 1.23-2.95l.01-.26V8.9c0-1.28-.42-2.36-1.21-3.15a4.24 4.24 0 0 0-2.92-1.23l-.26-.01zm-6.2 1.4h6.24c.9 0 1.66.26 2.2.8.47.5.77 1.18.81 1.97V15.1c0 .94-.32 1.7-.87 2.21-.5.47-1.17.74-1.98.78H8.92c-.91 0-1.67-.26-2.21-.78-.5-.5-.77-1.17-.81-2V8.88c0-.9.26-1.66.8-2.2a2.98 2.98 0 0 1 2-.78h6.45-6.23zM12 8.1a3.88 3.88 0 0 0 0 7.74 3.88 3.88 0 0 0 0-7.74zm0 1.39a2.5 2.5 0 0 1 2.48 2.48A2.5 2.5 0 0 1 12 14.45a2.5 2.5 0 0 1-2.48-2.48A2.5 2.5 0 0 1 12 9.49zm4.02-2.36a.88.88 0 1 0 0 1.76.88.88 0 0 0 0-1.76z"/></svg></a>
</div>
<div class="socials-icon">
<a href="#" title="Email"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg></a>
</div>
</div>
</div>
</footer>
</body>
</html>

BIN
img/piece-1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

View File

@ -10,6 +10,7 @@
<title>Nancy Pannikkat</title> <title>Nancy Pannikkat</title>
<link href="css/general.css" rel="stylesheet" type="text/css" media="all"> <link href="css/general.css" rel="stylesheet" type="text/css" media="all">
<link href="css/splide.min.css" rel="stylesheet" type="text/css" media="all">
<!-- <link rel="icon" href="img/icon.ico"> --> <!-- <link rel="icon" href="img/icon.ico"> -->
<meta name="author" content="Nancy Pannikkat"> <meta name="author" content="Nancy Pannikkat">
@ -18,13 +19,18 @@
<meta name="keywords" content="Nancy Pannikkat, art gallery, buy art online"> <meta name="keywords" content="Nancy Pannikkat, art gallery, buy art online">
<!-- JavaScript Refs --> <!-- JavaScript Refs -->
<script defer src="js/general.js"></script>
<script defer src="js/splide.min.js"></script>
<style> <style>
@font-face {
font-family: "Queensides";
src: url("font/Queensides-3z7Ey.ttf") format('truetype');
}
body { body {
position: relative; position: relative;
background-color: #f2f1ef; background-color: #f2f1ef;
color: #0d1117; color: #0d1117;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-family: "Queensides";
} }
</style> </style>
<!--For icons, go here: https://iconsvg.xyz/ or https://icomoon.io/app/#/select--> <!--For icons, go here: https://iconsvg.xyz/ or https://icomoon.io/app/#/select-->
@ -41,9 +47,8 @@
</div> </div>
<div id="nav-links-container"> <div id="nav-links-container">
<ul id="navList"> <ul id="navList">
<li><a class="navlink" href="./gallery.html" title="gallery">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="./contact.html" title="contact">Contact</a></li> <li><a class="navlink" href="./buy.html" title="buy">Buy</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>
@ -51,23 +56,22 @@
<!-- Main --> <!-- Main -->
<header> <header>
<div class="showcase-parent"> <section class="splide" aria-label="Splide Basic HTML Example">
<div class="header-text"> <div class="splide__track">
<span class="header-group">Collection 2022</span> <ul class="splide__list">
<h1 class="header-title">Title</h1> <li class="splide__slide"><div class="slide-content"><img class="slide-img" src="img/piece-1.jpg"></div></li>
<h2 class="header-subtitle">modern art</h2> <li class="splide__slide"><div class="slide-content"><img class="slide-img" src="img/piece-1.jpg"></div></li>
<a class="header-link" href="#"><div class="header-button">Learn More</div></a> <li class="splide__slide"><div class="slide-content"><img class="slide-img" src="img/piece-1.jpg"></div></li>
</ul>
</div> </div>
<div class="header-thumbnail"></div> </section>
</div>
</header> </header>
<main> <main>
</main> </main>
<footer> <footer>
<div class="footer-container"> <div class="footer-container">
<div class="footer-copyright"> <div class="footer-copyright">
©️ 2022 Nancy Pannikkat ©️ 2023 Nancy Pannikkat
</div> </div>
<div class="socials"> <div class="socials">
<div class="socials-icon"> <div class="socials-icon">

10
js/general.js Normal file
View File

@ -0,0 +1,10 @@
document.addEventListener( 'DOMContentLoaded', function() {
var splide = new Splide( '.splide', {
type : 'loop',
perPage: 3,
focus : 'center',
autoWidth: true,
autoplay: true,
} );
splide.mount();
});

9
js/splide.min.js vendored Normal file

File diff suppressed because one or more lines are too long

1
js/splide.min.js.map Normal file

File diff suppressed because one or more lines are too long