Scribd
Upload
6 views

S

The document provides instructions for creating two types of websites using HTML and CSS: a computer outlet website and a music website. It includes detailed HTML and CSS code snippets for each site, outlining the structure and design elements. The computer outlet site focuses on customization options for PCs, while the music site features an audio player for listening to music.

Uploaded by

Kanak Gupta
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

S

The document provides instructions for creating two types of websites using HTML and CSS: a computer outlet website and a music website. It includes detailed HTML and CSS code snippets for each site, outlining the structure and design elements. The computer outlet site focuses on customization options for PCs, while the music site features an audio player for listening to music.

Uploaded by

Kanak Gupta
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

CONTENT:

S.NO: TOPIC: PAGE NO:


1. CREATING A WEBSITE OF COMPUTER 2-13
OUTLET & CUSTOMIZATION (using html
and css)
2. CREATING A MUSIC WEBSITE (using 13-19
html and css)
CREATING A WEBSITE OF COMPUTER
OUTLET & CUSTOMIZATION:

HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>my website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="navbar">
<div class="icon">
<h2 class="logo">PraRoz</h2>
</div>
<div class="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">DESIGN</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="search">
<input class="srch"type="search" name="" placeholder="Type To
Text">
<a href="#"><button class="btn">Search</button></a>
</div>
</div>
<div class="content">
<h1>Computer Outlets & <br><span>Workshop &</span><br>Customize
Your PC</h1>
<p class="par">CUSTOMIZE YOUR PC BY YOUR OWN.<br>In our website
you can customize your pc or make your pc according to your need.<br>
You have to only type the software name and your needs and we let
you to fulfil your customization.<br>
For any query contacts to us our EMAIL aur our CUSTOMER CARE.</p>

<button class="cn"> <a href="#">JOIN US </a></button>


<div class="form">
<h2>Customize</h2>
<input type="text" name="text" placeholder="Enter Product Name">
<input type="text" name="" placeholder="Enter Quantity Here">
<button class="btnn"><a href="#">CLICK</a></button>
<p class="link">Want to create a account<br>
<a href="#">Sign up </a>here </a></p>
<p class="liw">Log in with</p>
</div>
</div>
</div>
</body>
</html>

CSS CODE:
{
margin:0;
padding: 0;
}
.main{
width: 100%;
background: linear-gradient(to
top,rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%),url(Screenshot_20231108_173434_Ch
rome.jpg);
background-position: center;
background-size: cover;
height: 101vh;

}
.navbar{
width: 1200px;
height: 75px;
margin: auto;
}
.icon{
width: 200px;
float: left;
height: 70px;
}
.logo{
color: #ff7200;
font-size: 35px;
font-family: Arial;
padding-left: 20px;
float: left;
padding-top: 10px;
}
.menu{
width: 400px;
float: left;
height: 70px;
}
ul{
float: left;
display: flex;
justify-content: center;
align-items: center;
}
ul li{
list-style: none;
margin-left: 62px;
margin-top: 27px;
font-size: 14px;
}
ul li a{
text-decoration: none;
color: #fff;
font-family: Arial;
font-weight: bold;
transition: 0.4s ease-in-out;
}
ul li a:hover{
color: #ff7200;
}
.search{
width: 330px;
float: left;
margin-left: 270px;
}
.srch{
font-family: 'Times New Roman';
width: 200px;
height: 40px;
background: transparent;
border: 1px solid#ff7200;
margin-top: 13px;
color: #fff;
border-right: none;
font-size: 16px;
float: left;
padding: 10px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.btn{
width: 100px;
height: 40px;
background: #ff7200;
border: 2px solid #ff7200;
margin-top: 13px;
color: #fff;
font-size: 15px;
border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.btn:focus{
outline: none;
}
.srch:focus{
outline: none;
}
.content{
width: 1200px;
height: auto;
margin: auto;
color: #fff;
position: relative;
}
.content .par{
padding-left: 20px;
padding-bottom: 25px;
font-family: Arial;
letter-spacing: 1.2px;
line-height: 30px;
}
.content h1{
font-family: 'Times New Roman';
font-size: 50px;
padding-left: 20px;
margin-top: 9%;
letter-spacing: 2px;
}
.content .cn{
width: 160px;
height: 40px;
background: #ff7200;
border: none;
margin-bottom: 10px;
margin-left: 20px;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
}
.content.cn a{
text-decoration: none;
color: #000;
transition: .3s ease;

}
.cn:hover{
background-color: #fff;
}
.content span{
color: #ff7200;
font-size: 65px;
}
.form{
width: 250px;
height: 380px;
background: linear-gradient(to top,rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%);
position: absolute;
top: -20px;
left: 870px;
border-radius: 10px;
padding: 25px;
}
.form h2{
width: 220px;
font-family: sans-serif;
text-align: center;
color: #ff7200;
font-size: 22px;
background-color: #fff;
border-radius: 10px;
margin: 2px;
padding: 8px;
}
.form input{
width: 240px;
height: 35px;
background: transparent;
border-bottom:1px solid #ff7200;
border-top: none;
border-right: none;
border-left: none;
color: #fff;
font-size: 15px;
letter-spacing: 1px;
margin-top: 30px;
font-family: sans-serif;
}
.form input:focus{
outline: none;
}
::placeholder{
color: #fff;
font-family: Arial;
}
.btnn{
width: 240px;
height: 40px;
background: #ff7200;
border: none;
margin-top: 30px;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
color: #fff;
}
.btnn:hover{
background: #fff;
color: #ff7200;
}
.btnn a{
text-decoration:none;
color: #000;
font-weight: bold;
}
.form .link{
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
padding-top: 20px;
text-align: center;
}
.form .link a{
text-decoration: none;
color: #ff7200;
}
.liw{
padding-top: 15px;
padding-bottom: 10px;
text-align: center;}

OUTPUT:

-----------------------------------------------------------------------------
CREATING A MUSIC WEBSITE:
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>my website</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div class="container">
<div class="navbar">
<img src="U.png" class="logo">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SPECIFICATIONS</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">CONNECT</a></li>
</ul>
</div>

<div class="content">
<div class="left-col">
<h1>THE<br> REAL<br> SOUND</h1>
</div>

<div class="right-col">
<p>Click Here To Listen</p>
<img src="d.png" id="icon">
</div>
</div>
</div>

<audio id="mySong">
<source src="Ram_Ram___MC_SQUARE___Hustle_2.0(256k).mp3"
type="audio/mp3">

<script>
var mySong = document.getElementById("mySong");
var icon = document.getElementById("icon");

icon.onclick = function(){
if(mySong.paused){
mySong.play();
icon.src="f.png";
}else{
mySong.paused();
icon.src="d.png”;}}
</script>
</body>
</html>

CSS CODE:
*{
margin:0;
padding: 0;
font-family: sans-serif;
}
.container{
height: 100vh;
width: 100%;
background-image: url(Screenshot_20231108_045753_Chrome.jpg);
background-size: cover;
background-position: center;
position: relative;
}
.navbar{
width: 88%;
margin: auto;
padding: 15px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo{
width: 140px;
cursor: pointer;
}
.navbar ul li{
list-style: none;
display: inline-block;
margin: 0 15px;
}
.navbar ul li a{
text-decoration: none;
color: #000000;
font-size: 15px;
}
.content{
width: 100%;
position: absolute;
top: 30%;
}
.left-col{
margin-left: 6%;
}
.left-col h1{
font-size: 90px;
color: #fff;
line-height: 110px;
float: left;
}
.right-col{
float: right;
margin-right: 6%;
margin-top: 120px;
display: flex;
align-items: center;
}
.right-col p{
font-size: 18px;
color: #5f5f5f;
font-weight: 400;
margin-right: 15px;
}
#icon{
width: 80px;
cursor: pointer;}

OUTPUT: WHEN MUSIC PLAYER IS OFF-


WHEN MUSIC PLAYER IS ON-

-- ----------------------------------------------------------------------------------

You might also like