INTERACTIVE DESIGN FINAL PROJECT - DESIGN EXPLORATION AND APPLICATION
4.11.2022 - 2.12.2022 (Week 10- Week 14)
Fadil puthiya madathummal peedikakandy/ 0354579 / Bachelor Of Design (Hons) In Creative Media
Interactive Design
Final Project - Design Exploration and Application
It is our task to create and design an active landing page for this project; there should be a total of 5 pages, and each page must be styled and linked to the main landing page.
After thinking about this again I decided to redesign the website once again because doing 5 pages felt like a lot at the time, due to time constraints and stress I simplified it into a different kind of website
 |
| HOME PAGE |
 |
| DRAWER |
 |
| WORK |
 |
| ABOUT |
 |
| CONTACT |
 |
| CONTACT DRAWER |
Full HTML code for the landing page and other pages
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, width=device-width" />
<link rel="stylesheet" href="./global.css" />
<link rel="stylesheet" href="./index.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Playfair Display:wght@400;500&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto Mono:wght@400&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Poly:wght@400&display=swap"
/>
</head>
<body>
<div class="home">
<button class="layer-2-1"></button>
<div class="rectangle-div"></div>
<img class="group-icon" alt="" src="public/group-15.svg" /><button
class="layer-3-1"
id="layer31"
></button>
</div>
<div id="dRAWER" class="popup-overlay" style="display: none">
<div class="drawer" data-animate-on-scroll>
<img class="chevron-down-icon" alt="" />
<div class="rectangle-div4"></div>
<img class="social-dribbble" alt="" /><img
class="layer-3-12"
alt=""
src="public/layer-3-11@2x.png"
/>
<div class="group-div5">
<img
class="tired-man-working-at-a-compute-icon"
alt=""
src="public/tiredmanworkingatacomputerpainsufferingdepressiontensionacrylicpaintingtrendingon130738680-1@2x.png"
/><button class="about3" id="draweraBOUT">ABOUT</button>
</div>
<div class="group-div6">
<img
class="image-29-icon1"
alt=""
src="public/image-291@2x.png"
/><button class="work4" id="drawerwORK">WORK</button>
</div>
<div class="group-div7">
<img
class="image-30-icon1"
alt=""
src="public/image-301@2x.png"
/><button class="contact3" id="drawercONTACT">CONTACT</button>
</div>
</div>
</div>
<script>
var draweraBOUT = document.getElementById("draweraBOUT");
if (draweraBOUT) {
draweraBOUT.addEventListener("click", function (e) {
window.location.href = "./a-b-o-u-t.html";
});
}
var drawerwORK = document.getElementById("drawerwORK");
if (drawerwORK) {
drawerwORK.addEventListener("click", function (e) {
window.location.href = "./w-o-r-k.html";
});
}
var drawercONTACT = document.getElementById("drawercONTACT");
if (drawercONTACT) {
drawercONTACT.addEventListener("click", function (e) {
window.location.href = "./c-o-n-t-a-c-t.html";
});
}
var scrollAnimElements = document.querySelectorAll("[data-animate-on-scroll]");
var observer = new IntersectionObserver(
(entries) => {
for (const entry of entries) {
if (entry.isIntersecting || entry.intersectionRatio > 0) {
const targetElement = entry.target;
targetElement.classList.add("animate");
observer.unobserve(targetElement);
}
}
},
{
threshold: 0.15,
}
);
for (let i = 0; i < scrollAnimElements.length; i++) {
observer.observe(scrollAnimElements[i]);
}
var layer31 = document.getElementById("layer31");
if (layer31) {
layer31.addEventListener("click", function () {
var drawerOverlay = document.getElementById("dRAWER");
if (!drawerOverlay) return;
var drawerOverlayStyle = drawerOverlay.style;
if (drawerOverlayStyle) {
drawerOverlayStyle.display = "flex";
drawerOverlayStyle.zIndex = 99;
drawerOverlayStyle.backgroundColor = "rgba(113, 113, 113, 0.4)";
drawerOverlayStyle.alignItems = "center";
drawerOverlayStyle.justifyContent = "flex-end";
}
drawerOverlay.setAttribute("closable", "");
var onClick =
drawerOverlay.onClick ||
function (e) {
if (
e.target === drawerOverlay &&
drawerOverlay.hasAttribute("closable")
) {
drawerOverlayStyle.display = "none";
}
};
drawerOverlay.addEventListener("click", onClick);
});
}
</script>
</body>
</html>
After this, I uploaded the codes on netlify
Testing out the website
Reflection
because of the pressure I was under in the last few weeks, I tried my best to learn how to code and did what I could, but I could have done better if I had more flexibility and time to study various coding techniques. Although this is very different from what I anticipated, I believe it is acceptable for the time being.
Comments
Post a Comment