Scribd
Upload
3 views8 pages

Web Development Assignment Rishikesh

The document is an assignment report for a web development project titled 'The AI Cloud IDE Webpage' submitted by Rishikesh on October 12, 2025. It includes HTML and CSS code for the webpage, detailing the structure and styling of various elements such as the navbar, hero section, code editor, and AI assistant sidebar. The code emphasizes a modern design with responsive features and interactive components.

Uploaded by

jaiswalrishi10
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
3 views8 pages

Web Development Assignment Rishikesh

The document is an assignment report for a web development project titled 'The AI Cloud IDE Webpage' submitted by Rishikesh on October 12, 2025. It includes HTML and CSS code for the webpage, detailing the structure and styling of various elements such as the navbar, hero section, code editor, and AI assistant sidebar. The code emphasizes a modern design with responsive features and interactive components.

Uploaded by

jaiswalrishi10
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

Assignment Report

Project: The AI Cloud IDE Webpage


Subject: Web Development
Submitted by: Rishikesh
Date: October 12, 2025

Department of Web Technologies


Website Preview:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF--8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The AI Cloud IDE</title>
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
<link rel="stylesheet" href="[Link]">
</head>
<body> ... </body>
</html>
CSS Code:
/* Basic Reset and Font Setup */
body {
margin: 0;
font-family: 'Poppins', sans-serif;
background-color: #2a0e4a;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* Main Navbar Container */


.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #2a0e4a;
padding: 15px 4%;
color: white;
}

.nav-left, .nav-right {
display: flex;
align-items: center;
gap: 35px;
}

/* Logo Styling */
.logo {
font-size: 22px;
font-weight: 600;
color: #ffffff;
text-decoration: none;
padding-left: 35px;
position: relative;
display: flex;
align-items: center;
}

.logo::before {
content: '';
width: 24px;
height: 28px;
background-color: #8e2de2;
border-radius: 4px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}

.logo::after {
content: '';
width: 14px;
height: 28px;
background-color: #d1c4e9;
border-radius: 4px 0 0 4px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) skewX(-20deg);
transform-origin: left;
}

.logo span {
position: relative;
z-index: 1;
}

/* Navigation Links */
.nav-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 30px;
}
.nav-links a, .nav-login {
text-decoration: none;
color: #d1c4e9;
font-size: 16px;
font-weight: 400;
transition: color 0.3s ease;
}

.nav-links a:hover, .nav-login:hover {


color: #ffffff;
}

.nav-dropdown::after {
content: '■';
font-size: 12px;
margin-left: 6px;
}

.nav-signup-btn {
text-decoration: none;
color: #ffffff;
background-color: rgba(255, 255, 255, 0.1);
padding: 10px 22px;
border-radius: 8px;
font-weight: 500;
transition: background-color 0.3s ease;
}

.nav-signup-btn:hover {
background-color: rgba(255, 255, 255, 0.2);
}

/* Hero Section */
.hero-section {
padding: 80px 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: #ffffff;
}

.hero-text-content {
margin-bottom: 50px;
}

.hero-text-content h1 {
font-size: 64px;
font-weight: 700;
margin: 0 0 15px 0;
background: linear-gradient(180deg, #FFFFFF 60%, #d1c4e9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}

.hero-text-content p {
font-size: 20px;
color: #d1c4e9;
line-height: 1.6;
margin: 0 0 30px 0;
}

.hero-cta-button {
display: inline-block;
background-color: #7c3aed;
color: #ffffff;
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 15px 35px;
border-radius: 50px;
transition: transform 0.3s ease, background-color 0.3s ease;
}

.hero-cta-button:hover {
background-color: #6b2ac9;
transform: scale(1.05);
}

/* Code Editor (REVISED) */


.code-editor-window {
width: 90%;
max-width: 1100px;
background-color: #1e1e1e;
border-radius: 10px;
border: 1px solid #4a4a4a;
box-shadow: 0 0 60px -15px rgba(142, 45, 226, 0.4);
overflow: hidden;
margin: 0 auto;
}

.editor-tabs {
display: flex;
background-color: #252526;
border-bottom: 1px solid #4a4a4a;
padding: 0 10px;
}

.tab {
padding: 12px 18px;
color: #999;
font-size: 14px;
cursor: pointer;
border-bottom: 2px solid transparent;
position: relative;
top: 1px;
}

.[Link] {
color: #fff;
border-bottom-color: #8e2de2;
}

.editor-body {
display: flex;
height: 550px;
}

.code-content {
flex-grow: 1;
overflow-y: auto;
background-color: #1e1e1e;
}

.code-content pre, .code-content code {


margin: 0;
padding: 10px 0;
font-family: 'IBM Plex Mono', monospace;
font-size: 14px;
line-height: 22px;
color: #d4d4d4;
}

.line-num {
display: inline-block;
width: 40px;
padding-right: 15px;
text-align: right;
color: #6e7681;
}

.code-comment { color: #6a9955; }


.code-keyword { color: #d19a66; }
.code-function { color: #61afef; }
.code-tag { color: #e06c75; }
.code-attr { color: #98c379; }
.code-attr-value { color: #56b6c2; }

.code-highlight-block {
background-color: rgba(10, 132, 24, 0.2);
display: block;
border-left: 2px solid #0a8418;
}

.collaborator-cursor {
position: relative;
display: inline-block;
background-color: #0a8418;
color: white;
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
}
.collaborator-cursor::before {
content: '';
position: absolute;
left: -2px;
top: -12px;
width: 2px;
height: 20px;
background-color: #0a8418;
}

/* AI Assistant Sidebar */
.editor-sidebar {
width: 320px;
background-color: #252526;
border-left: 1px solid #4a4a4a;
display: flex;
flex-direction: column;
}

.sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
border-bottom: 1px solid #4a4a4a;
color: #eee;
}

.header-left { display: flex; align-items: center; gap: 8px; font-weight: 500; }


.chat-icon { width: 10px; height: 10px; background-color: #8e2de2; border-radius: 50%;}

.avatar-group { display: flex; }


.avatar {
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid #252526;
margin-left: -8px;
}
.avatar-1 { background-color: #e06c75; }
.avatar-2 { background-color: #98c379; }
.avatar-3 { background-color: #61afef; }

.sidebar-chat {
flex-grow: 1;
padding: 15px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 15px;
}

.[Link] {
background-color: #3a3a3c;
color: #eee;
padding: 10px 15px;
border-radius: 8px;
align-self: flex-end;
}

.[Link] {
background-color: #7c3aed;
color: #ffffff;
padding: 15px;
border-radius: 8px;
align-self: flex-start;
}
.ai-response-intro { font-weight: bold; margin-bottom: 10px; }
.ai-file-info { margin-top: 15px; }
.file-name { font-weight: bold; }
.ai-file-info p { margin: 4px 0; font-size: 14px; color: #e0e0e0; }

.processing-indicator {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 15px;
border-top: 1px solid #4a4a4a;
font-size: 14px;
color: #d1c4e9;
}

.spinner {
width: 16px;
height: 16px;
border: 2px solid #d1c4e9;
border-top-color: #7c3aed;
border-radius: 50%;
animation: spin 1s linear infinite;
}

.stop-button {
margin-left: auto;
background: #3a3a3c;
border: 1px solid #555;
color: #eee;
padding: 4px 10px;
border-radius: 5px;
cursor: pointer;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

/* Floating Support Button */


.support-button {
position: fixed;
bottom: 25px;
left: 25px;
background-color: #00d68a;
color: #1a323f;
padding: 12px 20px;
border-radius: 50px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
z-index: 1000;
transition: transform 0.3s ease, background-color 0.3s ease;
}

.support-button svg { width: 24px; height: 24px; }


.support-button span { font-size: 18px; font-weight: 600; line-height: 1; }
.support-button:hover { background-color: #00b371; transform: translateY(-3px) scale(1.02); box-shado

You might also like