Scribd
Upload
77 views30 pages

Assessment 2 Web

The document contains HTML and CSS code for a portfolio website. The HTML code includes different sections like home, about, skills, services and contact. The CSS code contains styling for navigation bar, different sections and other elements. Together the HTML and CSS code create a fully responsive portfolio website.

Uploaded by

prathampalgandhi10
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
77 views30 pages

Assessment 2 Web

The document contains HTML and CSS code for a portfolio website. The HTML code includes different sections like home, about, skills, services and contact. The CSS code contains styling for navigation bar, different sections and other elements. Together the HTML and CSS code create a fully responsive portfolio website.

Uploaded by

prathampalgandhi10
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

Assessment 1

Web Programming Lab

Name: Pratham Pal Gandhi

Reg No.: 22BCE0635

Lab Slot: L13+L14+L27+L28


HTML CODE

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Portfolio Website</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="scroll-button">
<a href="#home"><i class="fas fa-arrow-up"></i></a>
</div>
<nav>
<div class="navbar">
<div class="logo"><a href="#">Portfolio</a></div>
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact Me</a></li>
<div class="cancel-btn">
<i class="fas fa-times"></i>
</div>
</ul>
<div class="media-icons">
<a href="https://www.linkedin.com/in/pratham-gandhi-15270b269"><i class="fab fa-linkedin"></i></a>
<a href="https://www.instagram.com/pratham_xo/"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</nav>
<section class="home" id="home">
<div class="home-content">
<div class="text">
<div class="text-one">Hello,</div>
<div class="text-two">I'm Pratham Gandhi</div>
<div class="text-three">Web Developer</div>
<div class="text-four">From Bangalore</div>
</div>
<div class="button">
<button>Hire Me</button>
</div>
</div>
</section>
<section class="about" id="about">
<div class="content">
<div class="title"><span>About Me</span></div>
<div class="about-details">
<div class="left">
<img
src="file:///Users/prathamgandhi/Downloads/Responsive%20Personal%20Portfolio%20Website/Images/IMG_346
5.JPG" alt="">
</div>
<div class="right">
<div class="topic">Designing Is My Passion</div>
<p>
I started web development in my second year in college and instantly found it to be very interesting. I
have been learning Javascript, CSS, and HTML and have gradually become proficient in the same. I am capable
of making fully immersive websites and overall any frontend development.
</p>
<div class="button">
<button>Download CV</button>
</div>
</div>
</div>
</div>
</section>
<section class="skills" id="skills">
<div class="content">
<div class="title"><span>My Skills</span></div>
<div class="skills-details">
<div class="text">
<div class="topic">Skills Reflects Our Knowledge</div>
<p>I am proficient in Python, HTML, CSS, Javascript as well as Swift(IOS App Development). I specialize
in frontend but i can also do basic data analytics</p>
<div class="experience">
<div class="num">2</div>
<div class="exp">
Years Of <br />
Experience
</div>
</div>
</div>
<div class="boxes">
<div class="box">
<div class="topic">HTML</div>
<div class="per">90%</div>
</div>
<div class="box">
<div class="topic">CSS</div>
<div class="per">80%</div>
</div>
<div class="box">
<div class="topic">JavaScript</div>
<div class="per">60%</div>
</div>
<div class="box">
<div class="topic">Swift UI</div>
<div class="per">75%</div>
</div>
</div>
</div>
</div>
</section>

<section class="services" id="services">


<div class="content">
<div class="title"><span>My Services</span></div>
<div class="boxes">
<div class="box">
<div class="icon">
<i class="fas fa-desktop"></i>
</div>
<div class="topic">Web Devlopment</div>
<p>Fully interactive and aesthetic webpages will be delivered in the given stipulated time</p>
</div>
<div class="box">
<div class="icon">
<i class="fas fa-paint-brush"></i>
</div>
<div class="topic">Data Analytics</div>
<p>Using Python libraries like Numpy and Pytorch</p>
</div>
<div class="box">
<div class="icon">
<i class="fas fa-chart-line"></i>
</div>
<div class="topic">Digital Marketing</div>
<p>Social Media as well as Digital Advertisements </p>
</div>
<div class="box">
<div class="icon">
<i class="fab fa-android"></i>
</div>
<div class="topic">Icon Design</div>
<p>Can also create catchy icons</p>
</div>
<div class="box">
<div class="icon">
<i class="fas fa-camera-retro"></i>
</div>
<div class="topic">Photography</div>
<p>High definition pictures with an aesthetic touch</p>
</div>
<div class="box">
<div class="icon">
<i class="fas fa-tablet-alt"></i>
</div>
<div class="topic">Apps Development</div>
<p>IOS app development using Swift UI on Xcode</p>
</div>
</div>
</div>
</section>

<section class="contact" id="contact">


<div class="content">
<div class="title"><span>Contact Me</span></div>
<div class="text">
<div class="topic">Have Any Project?</div>
<p>I am competent and willing to take up on any task and provide you with best result possible in the given
stipulated time.</p>
<div class="button">
<button>Let's Chat</button>
</div>
</div>
</div>
</section>
<section>
<button class="chatbot-toggler">
<span class="material-symbols-rounded">Click Here!</span>
<span class="material-symbols-outlined">Close</span>
</button>
<div class="chatbot">
<header>
<h2>Chatbot</h2>
<span class="close-btn material-symbols-outlined">close</span>
</header>
<ul class="chatbox">
<li class="chat incoming">
<span class="material-symbols-outlined">smart_toy</span>
<p>Hi there 👋<br>How can I help you today?</p>
</li>
</ul>
<div class="chat-input">
<textarea placeholder="Enter a message..." spellcheck="false" required></textarea>
<span id="send-btn" class="material-symbols-rounded">send</span>
</div>
</div>
</section>
<footer>
<div class="text">
<span>Created By <a href="#">Pratham Gandhi</a> | &#169; 2024 All Rights Reserved</span>
</div>
</footer>

<script src="script.js"></script>
</body>
</html>

CSS Code
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;7
00&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
scroll-behavior: smooth;
}

::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #4070f4;
border-radius: 12px;
transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
background: #4070f4;
}
nav{
position: fixed;
width: 100%;
padding: 20px 0;
z-index: 998;
transition: all 0.3s ease;
font-family: 'Ubuntu', sans-serif;
}
nav.sticky{
background: #4070f4;
padding: 13px 0;
}
nav .navbar{
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
margin: auto;
}
nav .navbar .logo a{
font-weight: 500;
font-size: 35px;
color: #4070f4;
}
nav.sticky .navbar .logo a{
color: #fff;
}
nav .navbar .menu{
display: flex;
position: relative;
}
nav .navbar .menu li{
list-style: none;
margin: 0 8px;
}
.navbar .menu a{
font-size: 18px;
font-weight: 500;
color: #4070f4;
padding: 6px 0;
transition: all 0.4s ease;
}
.navbar .menu a:hover{
color: gold;
}
nav.sticky .menu a{
color: #FFF;
}
nav.sticky .menu a:hover{
color: #0E2431;
}
.navbar .media-icons a{
color: #4070f4;
font-size: 18px;
margin: 0 6px;
}
nav.sticky .media-icons a{
color: #FFF;
}
nav .menu-btn,
.navbar .menu .cancel-btn{
position: absolute;
color: #fff;
right: 30px;
top: 20px;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
display: none;
}
nav .menu-btn{
color: #4070f4;
}
nav.sticky .menu-btn{
color: #FFF;
}
.navbar .menu .menu-btn{
color: #fff;
}
.home{
height: 100vh;
width: 100%;
background-
image:url("https://c.wallhere.com/photos/05/73/space_space_art_stars_planet_nebula_galaxy_Veil_Nebula-
282756.jpg!d");
background-size: cover;
background-position: center;
background-attachment: fixed;
font-family: 'Ubuntu', sans-serif;
}
.home .home-content{
width: 90%;
height: 100%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;

}
.home .text{
backdrop-filter: blur(18px) saturate(155%);
-webkit-backdrop-filter: blur(18px) saturate(155%);
background-color: rgba(37, 37, 39, 0.45);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.125);
}

.home .text-one{
font-size: 25px;
color: #0E2431;
}
.home .text-two{
color: #0E2431;
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .text-three{
font-size: 40px;
margin: 5px 0;
color: #4070f4;
}
.home .text-four{
font-size: 23px;
margin: 5px 0;
color: #4070f4;
}
.home .button{
margin: 14px 0;
}
.home .button button{
outline: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 25px;
font-weight: 400;
background: #4070f4;
color: #fff;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.4s ease;
}
.home .button button:hover{
border-color: #4070f4;
background-color: #fff;
color: #4070f4;
}
section{
padding-top: 40px;
}
section .content{
width: 80%;
margin: 40px auto;
font-family: 'Poppins', sans-serif;
}
.about .about-details{
display: flex;
justify-content: space-between;
align-items: center;
}
section .title{
display: flex;
justify-content: center;
margin-bottom: 40px;
}
section .title span{
color: #0E2431;
font-size: 30px;
font-weight: 600;
position: relative;
padding-bottom: 8px;
}
section .title span::before,
section .title span::after{
content: '';
position: absolute;
height: 3px;
width: 100%;
background: #4070f4;
left: 0;
bottom: 0;
}
section .title span::after{
bottom: -7px;
width: 70%;
left: 50%;
transform: translateX(-50%);
}
.about .about-details .left{
width: 45%;
}
.about .left img{
height: 400px;
width: 400px;
object-fit: cover;
border-radius: 12px;
}
.about-details .right{
width: 55%;
}
section .topic{
color: #0E2431;
font-size: 25px;
font-weight: 500;
margin-bottom: 10px;
}
.about-details .right p{
text-align: justify;
color: #0E2431;
}
section .button{
margin: 16px 0;
}
section .button button{
outline: none;
padding: 8px 16px;
border-radius: 4px;
font-size: 25px;
font-weight: 400;
background: #4070f4;
color: #fff;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.4s ease;
}
section .button button:hover{
border-color: #4070f4;
background-color: #fff;
color: #4070f4;
}
.skills{
background: #F0F8FF;
}
.skills .content{
padding: 40px 0;
}
.skills .skills-details{
display: flex;
justify-content: space-between;
align-items: center;
}
.skills-details .text{
width: 50%;
}
.skills-details p{
color: #0E2431;
text-align: justify;
}
.skills .skills-details .experience{
display: flex;
align-items: center;
margin: 0 10px;
}
.skills-details .experience .num{
color: #0E2431;
font-size: 80px;
}
.skills-details .experience .exp{
color: #0E2431;
margin-left: 20px;
font-size: 18px;
font-weight: 500;
margin: 0 6px;
}
.skills-details .boxes{
width: 45%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.skills-details .box{
width: calc(100% / 2 - 20px);
margin: 20px 0;
}
.skills-details .boxes .topic{
font-size: 20px;
color: #4070f4;
}
.skills-details .boxes .per{
font-size: 60px;
color: #4070f4;
}
.services .boxes{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.services .boxes .box{
margin: 20px 0;
width: calc(100% / 3 - 20px);
text-align: center;
border-radius: 12px;
padding: 30px 10px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
cursor: default;
transition: all 0.4s ease;
}
.services .boxes .box:hover{
background: #4070f4;
color: #fff;
}
.services .boxes .box .icon{
height: 50px;
width: 50px;
background: #4070f4;
border-radius: 50%;
text-align: center;
line-height: 50px;
font-size: 18px;
color: #fff;
margin: 0 auto 10px auto;
transition: all 0.4s ease;
}
.boxes .box:hover .icon{
background-color: #fff;
color: #4070f4;
}
.services .boxes .box:hover .topic,
.services .boxes .box:hover p{
color: #0E2431;
transition: all 0.4s ease;
}
.services .boxes .box:hover .topic,
.services .boxes .box:hover p{
color: #fff;
}

.contact{
background: #F0F8FF;
}
.contact .content{
margin: 0 auto;
padding: 30px 0;
}
.contact .text{
width: 80%;
text-align: center;
margin: auto;
}

footer{
background: #4070f4;
padding: 15px 0;
text-align: center;
font-family: 'Poppins', sans-serif;
}
footer .text span{
font-size: 17px;
font-weight: 400;
color: #fff;
}
footer .text span a{
font-weight: 500;
color: #FFF;
}
footer .text span a:hover{
text-decoration: underline;
}
.scroll-button a{
position: fixed;
bottom: 20px;
right: 20px;
color: #fff;
background: #4070f4;
padding: 7px 12px;;
font-size: 18px;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.15);
display: none;
}

@media (max-width: 1190px) {


section .content{
width: 85%;
}
}
@media (max-width: 1000px) {
.about .about-details{
justify-content: center;
flex-direction: column;
}
.about .about-details .left{
display: flex;
justify-content: center;
width: 100%;
}
.about-details .right{
width: 90%;
margin: 40px 0;
}
.services .boxes .box{
margin: 20px 0;
width: calc(100% / 2 - 20px);
}
}
@media (max-width: 900px) {
.about .left img{
height: 350px;
width: 350px;
}
}

@media (max-width: 750px) {


nav .navbar{
width: 90%;
}
nav .navbar .menu{
position: fixed;
left: -100%;
top: 0;
background: #0E2431;
height: 100vh;
max-width: 400px;
width: 100%;
padding-top: 60px;
flex-direction: column;
align-items: center;
transition: all 0.5s ease;
}
.navbar.active .menu{
left: 0;
}
nav .navbar .menu a{
font-size: 23px;
display: block;
color: #fff;
margin: 10px 0;
}
nav.sticky .menu a:hover{
color: #4070f4;
}
nav .navbar .media-icons{
display: none;
}
nav .menu-btn,
.navbar .menu .cancel-btn{
display: block;
}
.home .text-two{
font-size: 65px;
}
.home .text-three{
font-size: 35px;
}
.skills .skills-details{
align-items: center;
justify-content: center;
flex-direction: column;
}
.skills-details .text{
width: 100%;
margin-bottom: 50px;
}
.skills-details .boxes{
justify-content: center;
align-items: center;
width: 100%;
}
.services .boxes .box{
margin: 20px 0;
width: 100%;
}
.contact .text{
width: 100%;
}
}

@media (max-width: 500px){


.home .text-two{
font-size: 55px;
}
.home .text-three{
font-size: 33px;
}
.skills-details .boxes .per{
font-size: 50px;
color: #4070f4;
}
}
.chatbot-toggler {
position: fixed;
bottom: 30px;
left: 35px;
outline: none;
border: none;
height: 50px;
width: 50px;
display: flex;
cursor: pointer;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #4070f4;
transition: all 0.2s ease;
}
body.show-chatbot .chatbot-toggler {
transform: rotate(90deg);
}
.chatbot-toggler span {
color: #fff;
position: absolute;
}
.chatbot-toggler span:last-child,
body.show-chatbot .chatbot-toggler span:first-child {
opacity: 0;
}
body.show-chatbot .chatbot-toggler span:last-child {
opacity: 1;
}
.chatbot {
position: fixed;
right: 35px;
bottom: 90px;
width: 420px;
background: #fff;
border-radius: 15px;
overflow: hidden;
opacity: 0;
pointer-events: none;
transform: scale(0.5);
transform-origin: bottom right;
box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
0 32px 64px -48px rgba(0,0,0,0.5);
transition: all 0.1s ease;
}
body.show-chatbot .chatbot {
opacity: 1;
pointer-events: auto;
transform: scale(1);
}
.chatbot header {
padding: 16px 0;
position: relative;
text-align: center;
color: #fff;
background: #4070f4;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.chatbot header span {
position: absolute;
right: 15px;
top: 50%;
display: none;
cursor: pointer;
transform: translateY(-50%);
}
header h2 {
font-size: 1.4rem;
}
.chatbot .chatbox {
overflow-y: auto;
height: 510px;
padding: 30px 20px 100px;
}
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar {
width: 6px;
}
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-track {
background: #fff;
border-radius: 25px;
}
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 25px;
}
.chatbox .chat {
display: flex;
list-style: none;
}
.chatbox .outgoing {
margin: 20px 0;
justify-content: flex-end;
}
.chatbox .incoming span {
width: 32px;
height: 32px;
color: #fff;
cursor: default;
text-align: center;
line-height: 32px;
align-self: flex-end;
background: #4070f4;
border-radius: 4px;
margin: 0 10px 7px 0;
}
.chatbox .chat p {
white-space: pre-wrap;
padding: 12px 16px;
border-radius: 10px 10px 0 10px;
max-width: 75%;
color: #fff;
font-size: 0.95rem;
background: #4070f4;
}
.chatbox .incoming p {
border-radius: 10px 10px 10px 0;
}
.chatbox .chat p.error {
color: #721c24;
background: #f8d7da;
}
.chatbox .incoming p {
color: #000;
background: #f2f2f2;
}
.chatbot .chat-input {
display: flex;
gap: 5px;
position: absolute;
bottom: 0;
width: 100%;
background: #fff;
padding: 3px 20px;
border-top: 1px solid #ddd;
}
.chat-input textarea {
height: 55px;
width: 100%;
border: none;
outline: none;
resize: none;
max-height: 180px;
padding: 15px 15px 15px 0;
font-size: 0.95rem;
}
.chat-input span {
align-self: flex-end;
color: #4070f4;
cursor: pointer;
height: 55px;
display: flex;
align-items: center;
visibility: hidden;
font-size: 1.35rem;
}
.chat-input textarea:valid ~ span {
visibility: visible;
}
@media (max-width: 490px) {
.chatbot-toggler {
right: 20px;
bottom: 20px;
}
.chatbot {
right: 0;
bottom: 0;
height: 100%;
border-radius: 0;
width: 100%;
}
.chatbot .chatbox {
height: 90%;
padding: 25px 15px 100px;
}
.chatbot .chat-input {
padding: 5px 15px;
}
.chatbot header span {
display: block;
}
}

JS Code
let nav = document.querySelector("nav");
let scrollBtn = document.querySelector(".scroll-button a");
console.log(scrollBtn);
let val;
window.onscroll = function() {
if(document.documentElement.scrollTop > 20){
nav.classList.add("sticky");
scrollBtn.style.display = "block";
}else{
nav.classList.remove("sticky");
scrollBtn.style.display = "none";
}

}
let body = document.querySelector("body");
let navBar = document.querySelector(".navbar");
let menuBtn = document.querySelector(".menu-btn");
let cancelBtn = document.querySelector(".cancel-btn");
menuBtn.onclick = function(){
navBar.classList.add("active");
menuBtn.style.opacity = "0";
menuBtn.style.pointerEvents = "none";
body.style.overflow = "hidden";
scrollBtn.style.pointerEvents = "none";
}
cancelBtn.onclick = function(){
navBar.classList.remove("active");
menuBtn.style.opacity = "1";
menuBtn.style.pointerEvents = "auto";
body.style.overflow = "auto";
scrollBtn.style.pointerEvents = "auto";
}

let navLinks = document.querySelectorAll(".menu li a");


for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener("click" , function() {
navBar.classList.remove("active");
menuBtn.style.opacity = "1";
menuBtn.style.pointerEvents = "auto";
});
}
const chatbotToggler = document.querySelector(".chatbot-toggler");
const closeBtn = document.querySelector(".close-btn");
const chatbox = document.querySelector(".chatbox");
const chatInput = document.querySelector(".chat-input textarea");
const sendChatBtn = document.querySelector(".chat-input span");
let userMessage = null;
const API_KEY = "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";
const inputInitHeight = chatInput.scrollHeight;
const createChatLi = (message, className) => {
const chatLi = document.createElement("li");
chatLi.classList.add("chat", `${className}`);
let chatContent = className === "outgoing" ? `<p></p>` : `<span class="material-symbols-
outlined">smart_toy</span><p></p>`;
chatLi.innerHTML = chatContent;
chatLi.querySelector("p").textContent = message;
return chatLi;
}
const generateResponse = (chatElement) => {
const API_URL = "https://api.openai.com/v1/chat/completions";
const messageElement = chatElement.querySelector("p");
const requestOptions = {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${API_KEY}`
},
body: JSON.stringify({
model: "gpt-3.5-turbo",
messages: [{role: "user", content: userMessage}],
})
}

fetch(API_URL, requestOptions).then(res => res.json()).then(data => {


messageElement.textContent = data.choices[0].message.content.trim();
}).catch(() => {
messageElement.classList.add("error");
messageElement.textContent = "Oops! Something went wrong. Please try again.";
}).finally(() => chatbox.scrollTo(0, chatbox.scrollHeight));
}
const handleChat = () => {
userMessage = chatInput.value.trim();
if(!userMessage) return;
chatInput.value = "";
chatInput.style.height = `${inputInitHeight}px`;

chatbox.appendChild(createChatLi(userMessage, "outgoing"));
chatbox.scrollTo(0, chatbox.scrollHeight);

setTimeout(() => {

const incomingChatLi = createChatLi("Thinking...", "incoming");


chatbox.appendChild(incomingChatLi);
chatbox.scrollTo(0, chatbox.scrollHeight);
generateResponse(incomingChatLi);
}, 600);
}
chatInput.addEventListener("input", () => {

chatInput.style.height = `${inputInitHeight}px`;
chatInput.style.height = `${chatInput.scrollHeight}px`;
});
chatInput.addEventListener("keydown", (e) => {
if(e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) {
e.preventDefault();
handleChat();
}
});
sendChatBtn.addEventListener("click", handleChat);
closeBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot"));
chatbotToggler.addEventListener("click", () => document.body.classList.toggle("show-chatbot"));

You might also like