Scribd
Upload
559 views8 pages

FSD Project Mobile Phone Store: Source Code

This document contains source code for a mobile phone store website. The HTML code includes navigation links, an image of a mobile phone, and descriptions of the phone's features arranged in a circular layout. The CSS code styles the elements and controls the circular rotation of the features. Users can click arrow buttons to rotate the circle of features clockwise or counterclockwise.

Uploaded by

Mrunal Bhilare
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
559 views8 pages

FSD Project Mobile Phone Store: Source Code

This document contains source code for a mobile phone store website. The HTML code includes navigation links, an image of a mobile phone, and descriptions of the phone's features arranged in a circular layout. The CSS code styles the elements and controls the circular rotation of the features. Users can click arrow buttons to rotate the circle of features clockwise or counterclockwise.

Uploaded by

Mrunal Bhilare
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/ 8

FSD PROJECT

Mobile Phone Store


Source code:
<html>
<head>
<title>Website Design using HTML and CSS</title>
<link rel="stylesheet" href="style.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="images/mobile.jfif" class="mobile">
<div id="circle">
<div class="feature one"> <img
src="images/camera.jfif"><div><h1>Camera</h1><p>12MP Wide Angle
Lens</p></div></div>
<div class="feature two"><img
src="images/processor.png"><div><h1>Processor</h1><p>Snapdragons Octa-core
11nm</p></div></div>
<div class="feature three"><img
src="images/display.png"><div><h1>Display</h1><p>6.5" Mini-Drop
Fullscreen</p></div></div>
<div class="feature four"><img
src="images/battery.png"><div><h1>Battery Life</h1><p>5000mAh, 720Hrs
Standby</p></div> </div>
</div>
</div>
<div class="controls">
<img src="images/arrow.png" id="upBtn">
<h3> Features</h3>
<img src="images/arrow.png" id="downBtn">
</div>
<script>
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>

CSS SOURCE 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-item: centre;
}
.logo{
flex-basis: 20%;
}
.logo img{
width: 150px;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
margin: 0 20px;
}
.nav-links ul li a{
color: #fff;
text-decoration: none;
}
.information{
width: 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: 1;
}
.feature{
width: 70px;
}
.feature{
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;
tranform: rotate(-90deg);
}
.three{
bottom: 450px;
left: 350px;
tranform: rotate(-180deg);
}
.four{
bottom: 150px;
right: 350px;
tranform: rotate(-270deg);
}
.mobile{
width: 200px;
position: absolute;
top: 50%;
left: 35%;
transform: translateY(-50%);
z-index: 1;
}
.controls{
position: absolute;
right: 10%;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.controls h3{
margin: 15px 0;
color: #fff:
}
#upBtn{
width: 15px;
cursor: pointer;
}
#downBtn{
width: 15px;
cursor: pointer;
transform: rotate(180deg);
}
.overlay{
width: 0;
height: 0;
border-top: 500px solid #fff;
border-right: 500px solid transparent;
border-bottom: 500px solid #fff;
border-left: 500px solid #fff;
position: absolute;
left: 0;
top: 0;
}

Output:

You might also like