+
+
+
+
+
+
+
+
+ hi!
+ my name is mithra sankar and I am an incoming honors computer science major at the university of delaware.
+ I enjoy documenting my life and capturing moments and experiences through images. though
+
+
+ to learn about me + my experience, refer to "more about me" on the left!
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..38dc220
--- /dev/null
+++ b/script.js
@@ -0,0 +1,52 @@
+/*--------contact*/
+
+let submitButton = document.querySelector("#submit-button");
+
+function clickListener(event) {
+ event.preventDefault();
+
+ let emailInput = document.querySelector("#email");
+ let messageInput = document.querySelector("#message");
+
+ let emailText = emailInput.value;
+ let messageText = messageInput.value;
+
+ console.log("email: ", emailText, "message: ", messageText);
+}
+
+submitButton.addEventListener("click", clickListener);
+
+/*--------lightbox*/
+
+var slideIndex = 1;
+showSlide(slideIndex);
+
+function openLightbox() {
+ document.getElementById("Lightbox").style.display = "block";
+}
+
+function closeLightbox() {
+ document.getElementById("Lightbox").style.display = "none";
+}
+
+function toSlide(n) {
+ showSlide((slideIndex = n));
+}
+
+function showSlide(n) {
+ const slides = document.getElementsByClassName("slide");
+ let modalPreviews = document.getElementsByClassName("modal-preview");
+
+ for (let i = 0; i < slides.length; i++) {
+ slides[i].style.display = "none";
+ }
+ for (let i = 0; i < modalPreviews.length; i++) {
+ modalPreviews[i].className = modalPreviews[i].className.replace(
+ " active",
+ ""
+ );
+ }
+
+ slides[slideIndex - 1].style.display = "block";
+ modalPreviews[slideIndex - 1].className += " active";
+}
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..5062f83
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,260 @@
+* {
+ font-family: "Calluna", serif;
+ margin: 0px;
+ padding: 0px;
+ color: #881c1c;
+ text-decoration: none;
+}
+
+a {
+ -webkit-transition: 0.5s linear all;
+ transition: 0.5s linear all;
+}
+
+.nav {
+ font-weight: bold;
+ float: right;
+ position: relative;
+ margin-top: 6px;
+}
+
+.nav a {
+ color: #efac7c;
+ font-size: 22px;
+ text-decoration: none;
+ line-height: 30px;
+ text-align: center;
+ margin-right: 10px;
+}
+
+#header {
+ background-color: #681515;
+ overflow: hidden;
+ font-weight: bold;
+ padding-top: 1px;
+ padding: 20px 10px;
+ display: flex;
+ justify-content: space-between;
+}
+
+/* index.html */
+
+.picture img {
+ border-radius: 50%;
+ margin-top: 10px;
+ margin-bottom: 13px;
+ display: block;
+}
+
+.intro {
+ margin-top: 40px;
+ font-size: 27px;
+ z-index: 0;
+ padding: 5%;
+ margin: 10%;
+}
+.intro p {
+ font-weight: medium;
+}
+
+.title {
+ font-weight: bold;
+ font-size: 30px;
+ margin-left: 14px;
+ color: #efac7c;
+}
+
+li {
+ display: inline-block;
+}
+
+li a:hover {
+ background-color: #efac7c;
+ color: #881c1c;
+}
+
+body {
+ background-color: #efac7c;
+ color: #681515;
+}
+
+.flexContainer {
+ display: flex;
+ text-align: justify;
+ margin-left: 14px;
+}
+
+.contact a {
+ color: #681515;
+ font-size: 24px;
+ float: left;
+ text-decoration: none;
+ margin-left: 14px;
+ font-weight: 510;
+}
+
+#footer {
+ background-color: #681515;
+ padding-top: 1px;
+ padding: 10px 10px;
+ overflow: hidden;
+ font-size: 16px;
+ display: flex;
+ bottom: 0;
+ position: fixed;
+ margin-left: 14px;
+ display: flex;
+ justify-content: space-between;
+}
+
+#footer h2,
+h3,
+h4 {
+ color: #efac7c;
+}
+
+#submit-button {
+ background-color: #681515;
+ font-family: "Calluna", serif;
+ margin: 0px;
+ padding: 0px;
+ color: #efac7c;
+ font-weight: bold;
+ font-size: 14px;
+ border: none;
+ outline: none;
+}
+
+td {
+ padding: 10px;
+}
+
+/* home.html */
+
+.row {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 0, 2px;
+ margin-top: 4px;
+}
+
+/* four equal columns */
+.column {
+ flex: 25%;
+ max-width: 25%;
+ padding: 0, 2px;
+}
+
+.column img {
+ margin-top: 1px;
+ vertical-align: middle;
+ width: 100%;
+}
+
+/* two column-layout instead of four columns */
+@media screen and (max-width: 800px) {
+ .column {
+ flex: 50%;
+ max-width: 50%;
+ }
+}
+
+/* stack */
+@media screen and (max-width: 600px) {
+ .column {
+ flex: 100%;
+ max-width: 100%;
+ }
+}
+
+.homeTitle {
+ text-align: center;
+ font-size: 30px;
+ font-weight: bold;
+ margin-top: 8px;
+}
+
+.homeTitle h2 {
+ font-size: 18px;
+ font-weight: 500;
+}
+
+/* lightbox */
+
+html {
+ box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+ box-sizing: inherit;
+}
+
+.preview {
+ width: 100%;
+}
+
+.modal {
+ display: none;
+ position: fixed;
+ z-index: 1;
+ padding: 10px 62px 0px 62px;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: black;
+}
+
+.modal-content {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ margin: auto;
+ padding: 0 0 0 0;
+ width: 85%;
+}
+
+.slide {
+ display: none;
+}
+
+.image-slide {
+ width: 100%;
+}
+
+.modal-preview {
+ width: 100%;
+}
+
+img.preview {
+ opacity: 0.82;
+}
+
+img.active,
+.preview:hover,
+.modal-preview:hover {
+ opacity: 1;
+}
+
+img.hover-shadow {
+ transition: 0.3s;
+}
+
+.close {
+ color: white;
+ position: absolute;
+ top: 10px;
+ right: 25px;
+ font-size: 35px;
+ font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+ color: #999;
+ text-decoration: none;
+ cursor: pointer;
+}
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+