Scribd
Upload
11 views

CSS Micro Project

Uploaded by

mohammad.rashid2181
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
11 views

CSS Micro Project

Uploaded by

mohammad.rashid2181
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/ 16

Abstract

Title: Develop a Smartphone Specification Website

Summary:-
This micro-project involves creating a smartphone specification website using HTML, CSS, and
JavaScript. The project leverages JavaScript to make the website interactive and user-friendly, ensuring
that visitors can easily understand the content. It provides an engaging interface for displaying details
about smartphones, such as camera features, processor specifications, display characteristics, and battery
life.

Objective:-
To explore and apply skills in HTML, CSS, and JavaScript for designing an interactive and visually
appealing website dedicated to smartphone specifications.

Outcome:-
Participants learned to build interactive web pages, integrate JavaScript for enhanced functionality, and
design a responsive layout using CSS. This experience also helped in understanding the structured process
of developing web applications, from concept to completion.

Page | 1
Introduction

This project focuses on designing and implementing a smartphone specification website using HTML, CSS,
and JavaScript. The website is crafted to be user-friendly and visually appealing, leveraging JavaScript to
enhance interactivity and ease of navigation. The primary objective is to create a platform where visitors can
effortlessly access and comprehend smartphone specifications. Through this project, the aim was to explore and
understand the practical aspects of web development, including layout design, styling, and adding dynamic
features using JavaScript.

Page | 2
Annexure – I
Title of Micro-project :- Develop a smartphone specification website.
Brief Introduction :- In this project we have developed a smartphone specification website using
JavaScript , HTML and CSS Used JavaScript to make website more attractive and easy to use so that
anyone visits website will easily understands content of website.
Aim of the Micro-project :- To Study How to Create Website for Smartphones Specification
Website using HTML CSS JavaScript

Resources Used :-
Name of
Sr. No. Specifications Qty.
Resource/material
1 for 1
1 Computers System Desktop
student
1 for 1
2 Software VS Code
student

Action Plan :-

Name of
Planned Planned
Sr. No. Details of Activity Responsible
Start date Finish date
TeamMembers

Discussion and Finalization of 01-09-24 03-09-24 Mohammad Yusuf


1
the Project Title Siddique
04-09-24 06-09-24 Mohammad Yusuf
2 Preparation of Abstracts
Siddique

07-09-24 09-09-24 Mohammad Yusuf


3 Literature Review
Siddique

4 Collection of Data
10-09-24 15-09-24 Mohammad Yusuf
Siddique

5 Discussion and Outline of 16-09-24 17-09-24 Mohammad Yusuf


Content Siddique

6 Rough Writing of the Projects 18-09-24 20-09-24 Mohammad Yusuf


Contents Siddique

7 Editing and Proof Reading of 21-09-24 24-09-24 Mohammad Yusuf


the Contents Siddique

8 Final Completion of the Project 25-09-24 01-10-24 Mohammad Yusuf


Siddique

Page | 3
Annexure – II

Title of Micro-project :- Develope a smartphone specification website.

Brief Introduction :- In this project we have developed a smartphone specification website using
JavaScript , HTML and CSS Used JavaScript to make website more attractive and easy to use so that
anyone visits website will easily understands content of website

Aim of the Micro-project :- To Study How to Create Website for Smartphones Specification
Website using HTML CSS JavaScript

Course Outcomes :-
o Learned to make interactive website using JavaScript

Actual Methodology followed :-


o First we discussed and decided the topic of project
o Did some research on the selected topic
o Create a website
o Showed Project to the subject teacher
o Created project report o Submitted to the teacher

Resources Used :-

Name of
Sr. No. Specifications Qty.
Resource/material
1 for 1
1 Computers System Desktop
student
1 for 1
2 Software VS Code
student

Page | 4
• Html Code

<!DOCTYPE html>

<html>

<head>

<title>Website Design Using HTML and CSS</title>

<link rel=”stylesheet” href=”style-1.css”>

</head>

<body>

<div class=”main”>

<nav>

<div class=”logo”>

<img src=”images/logo.png”>

</div>

<div class=”nav-links”>

<ul>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Phone</a></li>

<li><a href=”#”>Accessories</a></li>

<li><a href=”#”>Cart</a></li>

</ul>

</div>

</nav>

<div class=”information”>

<div class=”overlay”></div>

<img src=”img/mobile.png” class=”mobile”>

<div id=”circle”>

<div class=”feature one”>

<img src=”images/camera.png”>

<div>

<h1>Camera</h1>

<p>12MP , Wide Angle Lens</p>

</div>
Page | 5
</div>

<div class=”feature two”>

<img src=”img/processor.png”>

<div>

<h1>Processor</h1>

<p>Snapdragon Octa-core 11nm</p>

</div>

</div>

<div class=”feature three”>

<img src=”img/display.png”>

<div>

<h1>Display</h1>

<p>6.5” Mini-Drop Fillscreen</p>

</div>

</div>

<div class=”feature four”>

<img src=”img/battery.png”>

<div>

<h1>Battery Life</h1>

<p>5000mAH, 72hrs Standby</p> </div> </div>

</div>

</div>

</div>

<div class=”controls”>

<img src=”img/arrow.png” id=”upBtn”>

<h3>Features</h3>

<img src=”img/arrow.png” id=”downBtn”>

</div>

<!-- ><script src=”” async defer></script>

<script>

Page | 6
Var circle =

document.getElementById(“circle”); Var

upBtn = document.getElementById(“upBtn”);

Var downBtn = document.getElementById(“downBtn”);

Var rotateValue =

circle.style.transform; Var

rotateSum;

upBtn.onclick = function(){

rotateSum = rotateValue + “rotate(

90deg)”; circle.style.transform =

rotateSum; rotateValue = rotateSum;

downBtn.onclick = function()

rotateSum = rotateValue + “rotate(90deg)”;

circle.style.transform =

rotateSum; rotateValue =

rotateSum;

</script>

</body>

</html>

Page | 7
• CSS Code

*{

Margin: 0;

Padding: 0;

Font-family: sans-serif;

.main

Width:

100%;

Height:

100vh;

Position:

relative;

Overflow:

hidden;

Background: linear-gradient(to right , #9c27b0, #8ecdff);

Nav

Width: 80%;

Position:

sticky;

Margin: 20px

auto; z-index:

1; display:

flex;

align-items: center;

.logo

{
Page | 8
Flex-basis: 20%;

.logo img

Width: 150px;

.nav

link

s{

Fle

x:

1;

Text-align: right;

.nav-links ul

li{ Line

style: none;

Display: inline

block;

Margin: 0 20px;

.nav-links

ul li a

Color:

#fff;

Text-decoration: none;

.information

Width:

Page | 9
1000px;

Height:

1000px;

Position:

absolute; Top:

50%;

Left: -10%;

Transform: translateY(-50%);

#circle

Width:

1000px;

Height:

1000px;

Position:

absolute;

Top: 0;

Left: 0;

Border-radius: 50%;

Transform:

rotate(0deg);

Transition: 1s;

.feature

img{ Wi

dth:

70px;

.feature

Page | 10
{

Position:

absolute;

Display: flex;

Color: #fff;

.feature div

Margin-left: 30px;

.feature div p

Margin-top:

8px;

.one

Top:

450px;

Right:

50px;

.two

Top:

150px;

Left:

350px;

Transform: rotate(-90deg);

}.three

Page | 11
Bottom:

450px;

Left: 50px;

Transform: rotate(-180deg);

}.four

Bottom:

150px;

Right:

350px;

Transform: rotate(-270deg);

.mobile

Width: 200px;

Position:

absolute;

Top: 50%;

Left: 35%;

Transform: translate

50%); z-index: 1;

.controls

Position:

absolute;

Right: 10%;

Top: 50%;

Transform: translateY(-50);

Page | 12
.controls h3

Margin:

15px 0;

Color:#fff;

#upBtn

Width:

15px;

Cursor:

pointer;

#dowpoint

Width:

15px;

Cursor:

pointer;

Transform: rotate(180deg);

.overlay

Hight: 0;

Width: 0;

Border-right: 500px solid

transparent; Border-top: 500px

solid #fff;

Border-bottom: 500px

solid #fff; Border-left:

500px solid #fff; Position:

Page | 13
aboslute;

Left: 0;

Top: 0;

• Output

Page | 14
Page | 15
Conclusion

The micro-project, "Develop a Smartphone Specification Website," successfully demonstrated the


process of creating an interactive website using HTML, CSS, and JavaScript. Through this project, we:

• Gained practical experience in designing and implementing responsive web interfaces.


• Learned to enhance website usability with JavaScript, making it user-friendly and visually
appealing.
• Developed skills in integrating HTML, CSS, and JavaScript for a cohesive web design.

This project provided valuable insights into web development and equipped the team with
foundational skills for building interactive web applications. Overall, it was a rewarding experience that met
the outlined objectives and contributed to our learning outcomes.

Reference

1. https://www.w3schools.com/js/js_datatypes.asp
2. https://www.tutorialspoint.com/index.htm
3. https://www.javatpoint.com/

Page | 16

You might also like