INTERACTIVE DESIGN - PROJECT 2
Fadil puthiya madathummal peedikakandy / 0354579
Interactive Design / B'Creative Media / Taylor's University
Project 2 - Working Landing Page
The landing page we created for project 1 must be coded via HTML, CSS and bootstrap for this project. Our website must be fully operational as well.
HTML
<!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="./mac-book-pro-14-17.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="macbook-pro-14-17">
<p class="your-logo" id="logo" data-scroll-to="yOURLOGO">YOUR LOGO</p>
<div class="frame-div">
<h1 class="home1" id="Home">HOME</h1>
<button class="about" id="aBOUT">ABOUT</button
><button class="about" id="wORK">WORK</button
><button class="about" id="cONTACT">CONTACT</button>
</div>
<div class="uiux-designer">UI/UX DESIGNER</div>
<button
class="fadil-p"
id="Fadil p"
data-scroll-to="fADILP"
data-animate-on-scroll
>
FADIL P
</button>
<div class="work1">Work</div>
<img class="chevron-down-icon" alt="" src="public/chevrondown.svg" /><img
class="frame-icon"
alt=""
src="public/frame-3.svg"
/>
<div class="rectangle-div1"></div>
<div class="contact-me" data-scroll-to="cONTACTMEText">CONTACT ME</div>
<img class="social-dribbble" alt="" /><img
class="social-linkedin"
alt=""
src="public/social--linkedin.svg"
/><img
class="social-twitter"
alt=""
src="public/social--twitter.svg"
/><img
class="social-instagram"
alt=""
src="public/social--instagram.svg"
/><img
class="communication-mail"
alt=""
src="public/communication--mail.svg"
/><img
class="line-icon"
alt=""
src="public/line-1.svg"
data-scroll-to="line"
/><img class="line-icon1" alt="" src="public/line-2.svg" /><img
class="line-icon2"
alt=""
src="public/line-8.svg"
/><img class="line-icon3" alt="" src="public/line-8.svg" />
<div class="line-div"></div>
<img class="image-3-icon" alt="" src="public/image-3@2x.png" /><img
class="image-7-icon"
alt=""
src="public/image-7@2x.png"
/><img class="image-5-icon" alt="" src="public/image-5@2x.png" /><img
class="image-6-icon"
alt=""
src="public/image-6@2x.png"
/><img class="image-8-icon" alt="" src="public/image-8@2x.png" /><img
class="image-9-icon"
alt=""
src="public/image-9@2x.png"
/><img class="image-10-icon" alt="" src="public/image-10@2x.png" />
<div class="about1" data-scroll-to="aboutText">About</div>
<div class="fun-works">Fun works</div>
<div class="profile">Profile</div>
<div class="skills">Skills</div>
<div class="fadil-p1">Fadil p</div>
<img class="vector-icon" alt="" src="public/vector.svg" /><img
class="vector-icon1"
alt=""
src="public/vector1.svg"
/><img class="vector-icon2" alt="" src="public/vector2.svg" /><img
class="frame-icon1"
alt=""
src="public/frame-2.svg"
/>
<div class="quality">QUALITY</div>
<div class="excellent-comms">
<p class="excellent">EXCELLENT</p>
<p class="comms">COMMS</p>
</div>
<div class="style">STYLE</div>
<div class="value-for-money">
<p class="excellent"><span>VALUE</span></p>
<p class="for-money"><span>FOR MONEY</span></p>
</div>
<div class="ever-worry-that-your-websites">
Ever worry that your website's or app's quality will be average? You may
be sure that I'll deliver the best designs in the industry.
</div>
<div class="afraid-about-the-cost-not-to">
Afraid about the cost? Not to worry, it will be rewarding.
</div>
<div class="i-can-develop-the-latest-desig">
I can develop the latest designs and trends you desire.
</div>
<div class="let-me-know-what-kind-of-produ">
Let me know what kind of product you require; I'm always ready to
discuss
</div>
<div class="line-div1"></div>
<div class="line-div2"></div>
<div class="line-div3"></div>
<div class="line-div4"></div>
<img class="image-11-icon" alt="" src="public/image-11@2x.png" /><img
class="image-15-icon"
alt=""
src="public/image-11@2x.png"
/><img class="image-19-icon" alt="" src="public/image-11@2x.png" /><img
class="image-12-icon"
alt=""
src="public/image-12@2x.png"
/><img class="image-16-icon" alt="" src="public/image-12@2x.png" /><img
class="image-20-icon"
alt=""
src="public/image-12@2x.png"
/><img class="image-13-icon" alt="" src="public/image-13@2x.png" /><img
class="image-17-icon"
alt=""
src="public/image-13@2x.png"
/><img class="image-21-icon" alt="" src="public/image-13@2x.png" /><img
class="image-14-icon"
alt=""
src="public/image-14@2x.png"
/><img class="image-18-icon" alt="" src="public/image-14@2x.png" /><img
class="image-22-icon"
alt=""
src="public/image-14@2x.png"
/><img class="self-1-icon" alt="" src="public/self-1@2x.png" />
<div class="rectangle-div2"></div>
<div class="line-div5"></div>
<div class="line-div6"></div>
<div class="line-div7"></div>
<div class="line-div8"></div>
<div class="line-div9"></div>
<div class="line-div10"></div>
<div class="line-div11"></div>
<div class="im-a-ux-designer-blah-blah-bl">
I’m a UX designer blah blah blah blah
</div>
<div class="line-div12"></div>
<div class="line-div13"></div>
<img class="image-23-icon" alt="" src="public/image-23@2x.png" />
<div class="line-div14"></div>
<div class="line-div15"></div>
<div class="line-div16"></div>
<div class="line-div17"></div>
<div class="line-div18"></div>
<div class="line-div19"></div>
<div class="line-div20"></div>
<div class="line-div21"></div>
<img class="image-25-icon" alt="" src="public/image-25@2x.png" /><img
class="image-25-icon1"
alt=""
src="public/image-251@2x.png"
/><img class="image-26-icon" alt="" src="public/image-26@2x.png" /><img
class="image-25-icon2"
alt=""
src="public/image-252@2x.png"
/><img class="image-24-icon" alt="" src="public/image-24@2x.png" /><img
class="image-25-icon3"
alt=""
src="public/image-253@2x.png"
/><img class="image-27-icon" alt="" src="public/image-27@2x.png" /><img
class="image-28-icon"
alt=""
src="public/image-28@2x.png"
/>
<div class="fadilpp69gmailcom">Fadilpp69@gmail.com</div>
<div class="fadhil-">@_.Fadhil_</div>
<div class="blahnonymous">@blahnonymous</div>
<div class="httplinkedincomin">http://linkedin.com/in</div>
<div class="name">Name</div>
<div class="email">Email</div>
<div class="your-message">Your message</div>
<input class="rectangle-input" type="text" /><input
class="rectangle-input1"
type="text"
/><input class="rectangle-input2" type="text" />
</div>
<script>
var hOME = document.getElementById("Home");
if (hOME) {
hOME.addEventListener("click", function () {
var anchor = document.querySelector("[data-scroll-to='fADILP']");
if (anchor) {
anchor.scrollIntoView({ block: "start", behavior: "smooth" });
}
});
}
var aBOUT = document.getElementById("aBOUT");
if (aBOUT) {
aBOUT.addEventListener("click", function () {
var anchor = document.querySelector("[data-scroll-to='aboutText']");
if (anchor) {
anchor.scrollIntoView({ block: "start", behavior: "smooth" });
}
});
}
if (wORK) {
wORK.addEventListener("click", function () {
var anchor = document.querySelector("[data-scroll-to='line']");
if (anchor) {
anchor.scrollIntoView({ block: "start", behavior: "smooth" });
}
});
}
var cONTACT = document.getElementById("cONTACT");
if (cONTACT) {
cONTACT.addEventListener("click", function () {
var anchor = document.querySelector("[data-scroll-to='cONTACTMEText']");
if (anchor) {
anchor.scrollIntoView({ block: "start", behavior: "smooth" });
}
});
}
var fADILP = document.getElementById("Fadil p");
if (fADILP) {
fADILP.addEventListener("click", function () {
var anchor = document.querySelector("[data-scroll-to='yOURLOGO']");
if (anchor) {
anchor.scrollIntoView({ block: "start", behavior: "smooth" });
}
});
}
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]);
}
</script>
</body>
</html>
Comments
Post a Comment