Scribd
Upload
33 views10 pages

2 ND

The document describes an experiment to create a web-based profile landing page. It includes the student's details, aims of the project, tasks to be completed, HTML and CSS code, and what was learned. The code created a basic landing page structure with a navigation bar, header, hero section, and footer. It also included styling like responsive design and dark mode functionality. The student learned basic HTML, CSS, and JavaScript concepts as well as advanced features like animations and responsiveness. Performance was evaluated based on worksheets, demonstrations, quizzes, and achieving the learning outcomes of the experiment.

Uploaded by

Sajan Kumar Singh
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
33 views10 pages

2 ND

The document describes an experiment to create a web-based profile landing page. It includes the student's details, aims of the project, tasks to be completed, HTML and CSS code, and what was learned. The code created a basic landing page structure with a navigation bar, header, hero section, and footer. It also included styling like responsive design and dark mode functionality. The student learned basic HTML, CSS, and JavaScript concepts as well as advanced features like animations and responsiveness. Performance was evaluated based on worksheets, demonstrations, quizzes, and achieving the learning outcomes of the experiment.

Uploaded by

Sajan Kumar Singh
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/ 10

Experiment- 1

Name: Sajan kumar UID: 23MCA20356


Branch: MCA Section/Group: mca4 / a
Semester: 2nd Subject Code:23CAH-554
Date of Performance:25/01/2024

1. Aim: Create a web-based project to demonstrate the landing page of your profile

Taskto be done:

1. Create the basic structure.

2. Create a navigation bar.

3. Stick the navbar to the top of the screen.

4. Create a great background.

5. Add some style.

2. Step ofpractical:

HTML CODE :-

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS LInk -->
<link rel="stylesheet" href="./style.css" />
<!-- Google Font, Poppins -->
<!-- CDN -->
<!-- FontAweosme CDN -->
<title>Porfolio</title>

</head>

<body>
<!-- Started -->
<!-- Header -->
<header>
<nav>
<!-- Logo -->
<div class="logo">Sajan_Singh</div>
<!-- Menus -->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><img src="./assets/moon.png" id="icon"></li>
</ul>
<!-- Search Area -->
<div class="search-field">
<input type="text" placeholder="Search" />
<button>Search</button>
</div>
</nav>
</header>
<!-- Hero Section -->
<section class="hero-section">
<!-- Left Section of HERO -->
<div class="hero-left-section">
<h1>Hello, I am a <span id="text"> </span></h1>
<p>
I am an aspiring <span>Full Stack JavaScript Developer</span>, who is
currently working as <span>a Freelancer</span> for
<span>National and International Client.</span>
</p>
</div>
<!-- Right Hero Section -->
<div class="hero-right-section">
<img src="./assets/Picsart_23-02-02_18-05-03-082.png" alt="Avatar" />
<div>
<button
onclick="window.location.href='https://api.whatsapp.com/send?phone=+918873078315&text=Hello%20ther
e!'"
class="hero-right-section-btn">Chat With me</button>
</div>
</div>
</section>
<!-- About Section -->

<footer>
<p>Copyright © 2024 Sajan singh. All rights reserved.</p>
<ul>
<li><a href="https://github.com/SajanKumarSing1432">Github</a></li>
<li><a href="https://www.linkedin.com/in/sajan-kumar-singh-a59952262/">LinkedIn</a></li>
<li><a
href="https://www.instagram.com/sajan_kumar_singh__?igsh=eHp5Z29wenc4ZG9u">Instagram</a></li>
</ul>
</footer>

<!-- javaScript -->


<!-- CDN -->
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>

<script>
// Dark mood
var icon = document.getElementById("icon");
icon.onclick = function() {
document.body.classList.toggle("dark-theme");
if (document.body.classList.contains("dark-theme")) {
icon.src = "./assets/sun.png";
} else {
icon.src = "./assets/moon.png";
}
};
// Typing Animation
var typed = new Typed('#text', {
strings: ['Web Developer ','MERN Stack Developer', 'Photo &amp; Video Editor', 'Front-End Developer.'],
typeSpeed: 50,
backSpeed:50,
backDelay:100,
loop:true
});

</script>

</body>

</html>

CSS CODE :-
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--primary-color:#f9fbff;
--secondry-color:#212121;
}
.dark-theme{
--primary-color:#212121;
--secondry-color:#edf1fd;
}
body {
height: 100vh;
width: 100vw;
background-color:var(--primary-color);
display: flex;
flex-direction: column;
justify-content: space-between;
}

li {
list-style: none;
cursor: pointer;
}
#icon{
width: 30px;
cursor: pointer;
}

a{
text-decoration: none;
}

button {
background-color: rgb(18, 155, 155);
padding: 4px 10px;
cursor: pointer;
color: white;
border: 1px solid white;
border-radius: 5px;
font-weight: 700;
width: fit-content;
}

button:hover {
background-color: white;
color: rgb(18, 155, 155);
border: 1px solid black;
}

header {
padding: 15px 0;
}
nav {
display: flex;
width: 100%;
align-items: center;
justify-content: space-around;
}

nav .logo {
font-weight: 700;
font-size: 25px;
color: var(--secondry-color);
}
nav ul {
display: flex;
align-items: center;
gap: 30px;
font-weight: 500;
}

nav ul li:hover {
text-decoration: underline;
font-weight: 900;
}

.search-field {
display: flex;
gap: 30px;
}

input {
padding: 4px 10px;
}

.hero-section {
display: flex;
align-items: center;
}

.hero-left-section {
width: 60%;
padding: 0 8%;
}
.hero-left-section h1{
color: var(--secondry-color) ;
}
.hero-left-section p{
color: var(--secondry-color);
}
.hero-left-section h1 {
font-weight: 800;
font-size: 38px;
margin-bottom: 16px;
}
.hero-left-section h1 span {
color: rgb(18, 155, 155);
font-weight: 900;
background-color:var(--primary-color);
padding: 0 15px;
}

.hero-left-section p {
font-weight: 500;
font-size: 30px;
}

.hero-left-section p span {
font-size: 25px;
font-weight: 700;
color: rgb(18, 155, 155);
}

.hero-right-section {
display: flex;
flex-direction: column;
width: 40%;
align-items: center;
justify-content: center;
gap: 30px;
}
.hero-right-section-btn {
display: flex;
align-items: center;
gap: 30px;
}

.hero-right-section img {
height: 300px;
width: 300px;
border-radius: 50%;
}

footer {
font-weight: 600;
display: flex;
padding: 20px 0;
justify-content: space-around;
}

footer ul {
display: flex;
align-items: center;
gap: 30px;
}
footer p{
color:var(--secondry-color);
}

@media (max-width: 768px) {


/* Styles for smaller screens */

body{
background-color: var(--primary-color);
}
.hero-section {
display: grid;
align-items: center;
overflow: auto;
margin: 10px;
padding: auto;
}
nav{
display:flex ;
flex-direction: column;
}
header {
height: 45%;
}
.logo{
justify-self: start;
}
.search-field{
flex-direction: column;
}

.hero-left-section {
height: 80vh;
width: 80vw;
padding: 0 8%;
}
.hero-right-section{
height: 100vh;
width: 100vw;
}
footer{
display: block;
block-size: auto;
flex-direction: column-reverse;
padding: 20px 0;
}
.search-field {
display: flex;
flex-direction: row;
}

Program 3

A. Output:-
Learning outcomes(WhatIhavelearnt):
1. I Have learnt about basic concept of html , css and javscript.
2. I Have also learn some advanced feature of html and css
Ex- animation, responsive .

EvaluationGrid:

Sr.No. Parameters MarksObtained MaximumMarks


1. Worksheet 10
2. Demonstration/Performance/Pre 5
Lab Quiz
3. PostLabQuiz 5

You might also like