Added slideshow
This commit is contained in:
James Dinh
parent
ae93e8bf72
commit
61f9db15ed
42
about.html
42
about.html
@ -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>
|
||||||
|
|||||||
@ -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">
|
||||||
153
css/general.css
153
css/general.css
@ -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
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
BIN
font/Queensides-3z7Ey.ttf
Normal file
Binary file not shown.
BIN
font/QueensidesLight-ZVj3l.ttf
Normal file
BIN
font/QueensidesLight-ZVj3l.ttf
Normal file
Binary file not shown.
130
gallery.html
130
gallery.html
@ -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
BIN
img/piece-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
32
index.html
32
index.html
@ -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
10
js/general.js
Normal 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
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
1
js/splide.min.js.map
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user