WEBSITE OF MUSIC STUDIO

A PROJECT REPORT

Submitted in partial fulfillment of the Requirements for the Award of the

Degree of

BACHELOR OF SCIENCE (COMPUTER SCIENCE)

SUBMITTED BY

ARUL RONALD

SEAT NO:

Under the guidance of

Prof. SUCHITA REVANKAR

DEPARTMENT OF COMPUTER SCINECE

N.R. SWAMY COLLEGE OF COMMERCE & ECONOMICS

& SMT. THIRUMALAI COLLEGE OF SCIENCE

(Affiliated to University of Mumbai)

MUMBAI- 400031

MAHARASHTRA

1
 ACKNOWLEDGEMENT
To list who all have helped me is difficult because they are so numerous and
the depth is so enormous.
I would like to acknowledge the following as being idealistic channels
channels and fresh dimensions in the completion of this project.
I take this opportunity to thanks the University of Mumbai for giving me a
chance to do tis project.
I would like to thanks my Principal, Dr Usha Iyer for providing the
necessary facilities required for completion of this project.
I take this opportunity our Prof.SUCHITA REVANKAR for this moral
support and guidance.
I would also like to express my sincere gratitude towards my project guide
Prof. SUCHITA REVANKAR whose guidance and care made related to
my project.
I would like to thanks my College Library , for having provided various
reference books and related to my project.
Lastly, I would like to thanks each and every person who directly or indirectly
helped me in the completion of the project,especially My Parents and Peers
who supported me through out my project.

Date;

ARUL RONALD

6
 DECLARATION BY STUDENT

I, ARUL RONALD here by , declare that the work embodied in this project
work titled”WEBSITE OF “MUSIC STUDIO ” forms my own
contributions to the research work carried out under the guidance of Prof.
SUCHITA REVENKAR is a result of myown research work and has not
been previously submitted to any other university for any other Degree to
this or any other University.
Where ever reference has been made to previous works of others, it has been
clearly indicated as such and included in the bibliography.
I, here by further declare that all information of this document has been
obtained and present in accordance with academic rules and ethical conduct.
Roll no :- 39038 Year,2022-2023
Exam seat no:- ................ Year 2022-2023

Name and Signature of Students

Date;
Place;

7
 S.I.W.S
N.R SWAMY COLLEGE OF COMMERCE AND ECONOMICS
&
SMT. THIRUMALAI COLLEGE OF SCIENCE
Plot No.337, Major R. Parmeshwaran Marg, Sewree Wadala Estate,
Wadala, Mumbai-400 031.

T.Y.B.Sc.(Computer Science)
Semester V

CERTIFICATE
Class: TYBSC(CS) University Seat No.:

Roll No.: 39038

This is to certify that the content entered in this journal is the work of
Mr. ARUL RONALD in the Computer Science Department of S.I.W.S
Degree College during the year 2022 – 2023.

__________________
Teacher-In-Charge Co-ordinator

__________________
Internal Examiner External Examiner

Date: _________________
College Stamp
 INDEX
Sr Content PageNo
.
1 INTRODUCTION
OBJECTIVES 1

2 SYNOPSIS 2-4`

3 TECHNOLOGY 5
USED

4 CODE
1. JavaScript 6
2. CSS 7-26
3. HTML 27-32
5 DIAGRAM
1. UML 33
2. ER 34
3. Use Case 35
4. Data Flow 36
5. Class 37
6. Sequence 38

6 Modules 39-41

7 LITERATURE REVIEW 42

8 TESTING 43

9 GANTT CHART 44

10 OUTCOME/CONCLUSION 45

11 References 46
 #INTRODUCTION
A music studio website has more potential than just being great at informing and showing how fantastic
their recording studio is. It has the opportunity to inform audiences about the art of music recording in
general, as well as educating musicians on what an accomplished example of mixing and mastering is
supposed to achieve Investing time, money, and energy into recording at a music studio can be a
grandiose expenditure for many artists and musicians. Sometimes all it takes to line up a new customer
is giving them the encouraging virtual nudge they need to pull the trigger and book a session.Managing
and operating a music studio can be an utter whirlwind of an enterprise. Unlike your typical business model of
providing customers with a specific product or service, recording studio owners face an overwhelming
variety of occupational obstacles. Aside from fierce competition and implementing state-of-the-art
equipment and technology, a successful recording studio has to balance professionalism with individualism,
for both employees and clients alike.

#OBJECTIVES OF THE WEBSITE

The Objectives Of The Music Studio Websites are :

1) Its Helps the artist to contact the studio easily.

2) It Also Helps to Promote a studio world-wide so that more and more people knows about it.

3) The Artist Can Get to know the Features and Services Available in The Studio.

4) The Artist Can Book Their Slots Online For Recording And Music Purposes.

5) People Can Hire Musicians From Studio For Live Concerts and Various Works .

1
 #SYNOPSIS

Title of The Project: Music Studio Website

About The Project: This Project Made Of the Musical Artist For Booking Slot in Music Studio.

The primary reason to chose this particular topic: This Topic is Chosen Because Nowadays,
Artist Needs a Place Where they can make their Talent Creative. Music Studio helps the artist to create their
song in professional method and helps them to reach their goal.So, This website Can help them to book their
slots and Distribute Their Music World Wide.

The main objective of the project: The Main Objective of this Project is to Help the underated
musical artist to fullfill their goals.

Scope Of The Project: With a music website you both create and control the content.Everything about
you is in one place. This makes it easy for someone to help promote your music and understand who you are as
a musician. You can create branding with a website design - it'll set you apart and showcase your vibe

Working Methodology:

2
 DETAILS ABOUT THE HARDWARE AND SOFTWARE USED :

Windows requirements Mac Linux requirements

requirements

Operating system Windows 8 or later macOS Sierra 64-bit

10.12 or later Ubuntu 14.04+,
Debian 8+,
openSUSE 13.3+, or
Fedora Linux 24+

Processor Intel Pentium 4 or later Intel Intel Pentium 4 or later

Memory 2 GB minimum, 4 GB recommended

Screen resolution 1280x1024 or larger

Application window 1024x680 or larger

size

Internet connection Required

3
LISTING OUT THE TESTING TECHNOLOGIES:

Here is a comprehensive list of the most widely used testing tools grouped by the types of testing:

 Load, Stress and Performance Testing Tools

 Web Functional, GUI and Regression testing Tools
 Link Manager testing tools
 Website Security Testing Tools
 Cross-browser testing tools
 W3C CSS validator
 W3C Link Checker

CONCLUSION: Music Studio Website helps to booking the slots Online and it is very easy to contact the
Studio Artist for Music Work Related query.A recording studio is a very unique business
prospect and starting a commercial recording studio can be quite overwhelming. In fact,
start out any business requires a business plan. A well-written business plan will be both
your guide to maintaining the business and a standard document to gain investment or start-
up funding

4
 # TECHNOLOGY USED

HTML

.
HTML is the combination of Hypertext and Markup language. Hypertext defines the link between
the web pages. A markup language is used to define the text document within tag which defines the
structure of web pages.

JAVASCRIPT

Javascript is used by programmers across the world to create dynamic and interactive
web content like applications and browsers. JavaScript is so popular that it's the most
used programming language in the world, used as a client-side programming language
by 97.0% of all websites.

CSS

CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter
the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other
decorative features

5
 # CODE
JAVA SCRIPT
plugin-active.js:

$(document).ready(function() {
// Mobile menu trigger script
$(".menu-trigger").click(function() {
$(this).toggleClass('active');
$(".mobile-menu").toggleClass('visible');
});
// Smoothscroll script
$('.nav-link').click(function() {
var dis = $(this),
disTarget = dis.data('target'),
ScrollTo = $(disTarget).offset().top;
dis.addClass('active').siblings('.nav-link').removeClass('active');
$('html,body').animate({ scrollTop: ScrollTo });
});
// contact form script
$('.form-wrap input').blur(function() {
tmpval = $(this).val();
if (tmpval == '') {
$(this).addClass('empty');
$(this).removeClass('not-empty');
} else {
$(this).addClass('not-empty');
$(this).removeClass('empty');
}
});
// testimonial slider
$('.testimonial-slider').bxSlider({
auto: true,
mode: 'fade',
infiniteLoop: true,
controls: false
});
// Changing the defaults
window.sr = ScrollReveal();
// Customizing a reveal set
sr.reveal('.each-service', { origin: 'bottom', distance: '100px', duration: 1000, delay: 0, easing: 'cubic-
bezier(0.6, 0.2, 0.1, 1)' });
// sript for fixed header on scroll
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 60) {
$("#Header").addClass("header-fixed");
} else {
$("#Header").removeClass("header-fixed");
}
});
});

6
 CSS

style.css

body {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 400px;
line-height: 1.5;
}
/* Reset style */
*{
margin: 0;
padding: 0;
}
a, a:hover, a:active, a:focus {
text-decoration: none;
outline: 0;
}
ul, li {
margin: 0;
padding: 0;
}
.hidden-lg-up {
display: none;
}
#MainContainer h1 {
font-size: 40px;
font-weight: bold;
line-height: 1.2;
margin: 0 0 20px;
}
#MainContainer h2 {
font-size: 32px;
font-weight: bold;
line-height: 1.2;
margin: 0 0 15px;
}
#MainContainer h3 {
font-size: 28px;
font-weight: bold;
line-height: 1.2;
margin: 0 0 10px;
}
#MainContainer h4 {
font-size: 20px;
font-weight: bold;
line-height: 1.5;
margin: 0;
}
#MainContainer h5 {

7
 font-size: 18px;
font-weight: bold;
line-height: 1.5;
margin: 0
}
#MainContainer p {
font-size: 16px;
font-weight: 400;
line-height: 1.5;
margin: 0 0 15px;
}
/* utility classes*/
.primary-btn {
font-size: 18px;
color: #000;
border: 2px solid #000;
padding: 7px 20px;
}
.primary-btn:hover {
color: #0098aa;
border-color: #0098aa;
}
.block-heading {
text-align: center;
margin-bottom: 50px;
}
.block-heading p:last-child {
margin: 0;
}
/* Header style goes here */
#Header {
position: fixed;
top: 0;
left: 0;
width: 100%;
transition: all 0.3s ease-in-out;
z-index: 9;
}
#Header.header-fixed {
background: rgba(0, 0, 0, 0.8);
transition: all 0.3s ease-in-out;
}
#Header.header-fixed .site-logo-wrap {
padding: 15px 0;
transition: all 0.3s ease-in-out;
}
#Header.header-fixed .site-logo-wrap .logo img {
width: 70px;
transition: all 0.3s ease-in-out;
}
#Header.header-fixed .main-menu {
padding: 27px 0;

8
 transition: all 0.3s ease-in-out;
}
#Header.header-fixed .main-menu li a {
padding: 5px 10px;
transition: all 0.3s ease-in-out;
}
#Header.header-fixed a.menu-trigger {
top: 22px;
transition: all 0.3s ease-in-out;
}
#Header .site-logo-wrap {
width: 30%;
float: left;
padding: 30px 0;
transition: all 0.3s ease-in-out;
}
#Header .site-logo-wrap .logo {
color: #fff;
font-size: 24px;
font-style: italic;
display: inline-block;
}
#Header .site-logo-wrap .logo img {
display: inline-block;
vertical-align: middle;
width: 80px;
}
#Header .main-menu {
width: 70%;
text-align: right;
float: right;
padding: 30px 0;
transition: all 0.3s ease-in-out;
}
#Header .main-menu li {
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
#Header .main-menu li a {
position: relative;
font-size: 16px;
color: #fff;
padding: 15px 10px;
}
#Header .main-menu li a::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;

9
 background-color: #0098aa;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
#Header .main-menu li a:hover::before, #Header .main-menu li a.active::before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/* mobile menu style*/
#Header .mobile-menu {
width: 180px;
left: -180px;
background-color: rgba(0, 0, 0, 1);
position: absolute;
top: 0;
z-index: -1;
height: 100vh;
-webkit-transition: left .5s .5s;
-moz-transition: left .5s .5s;
transition: left .5s .5s;
}
#Header .mobile-menu.visible {
left: 0;
-webkit-transition: left .5s;
-moz-transition: left .5s;
transition: left .5s;
}
#Header .mobile-menu ul {
margin-top: 85px;
}
#Header .mobile-menu ul li {
list-style: none;
padding: 0 0 20px 40px;
}
#Header .mobile-menu ul li a {
font-size: 16px;
color: #fff;
padding: 0;
}
/* menu toggler style */
#Header a.menu-trigger {
cursor: pointer;
position: relative;
top: 35px;
width: 40px;
height: 40px;
float: right;
transition: all 0.3s ease-in-out;

10
 }
#Header a.menu-trigger span,
#Header a.menu-trigger span:before,
#Header a.menu-trigger span:after {
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s;
transition: all 0.4s;
background-color: white;
display: block;
position: absolute;
width: 30px;
height: 3px;
left: 0;
}
#Header a.menu-trigger span:before,
#Header a.menu-trigger span:after {
content: "";
}
#Header a.menu-trigger span {
top: 10px;
}
#Header a.menu-trigger span:before {
-moz-transform-origin: 33% 100%;
-ms-transform-origin: 33% 100%;
-webkit-transform-origin: 33% 100%;
transform-origin: 33% 100%;
top: -10px;
z-index: 10;
}
#Header a.menu-trigger span:after {
-moz-transform-origin: 33% 0;
-ms-transform-origin: 33% 0;
-webkit-transform-origin: 33% 0;
transform-origin: 33% 0;
top: 10px;
}
#Header a.menu-trigger.active span,
#Header a.menu-trigger.active span:before,
#Header a.menu-trigger.active span:after {
background-color: transparent;
}
#Header a.menu-trigger.active span:before {
-moz-transform: translateY(4px) translateX(1px) rotate(45deg);
-ms-transform: translateY(4px) translateX(1px) rotate(45deg);
-webkit-transform: translateY(4px) translateX(1px) rotate(45deg);
transform: translateY(4px) translateX(1px) rotate(45deg);
background-color: white;
}
#Header a.menu-trigger.active span:after {
-moz-transform: translateY(-8px) translateX(1px) rotate(-45deg);
-ms-transform: translateY(-8px) translateX(1px) rotate(-45deg);

11
-webkit-transform: translateY(-8px) translateX(1px) rotate(-45deg);
transform: translateY(-8px) translateX(1px) rotate(-45deg);
background-color: white;
}
/*Banner style goes here */
#HeroBanner {
display: table;
width: 100%;
height: 100vh;
background: url(../images/banner.jpg)no-repeat 0 0 / cover;
background-attachment: fixed;
}
#HeroBanner .hero-content {
display: table-cell;
background-color: rgba(10,40,60,0.7);
text-align: center;
vertical-align: middle;
padding: 0 15px;
}
#HeroBanner .hero-content h1 {
font-size: 48px;
color: #fff;
text-transform: uppercase;
margin: 0 0 20px;
}
#HeroBanner .hero-content p {
font-size: 28px;
color: #fff;
margin: 0 0 30px;
}
#HeroBanner .hero-content .hero-cta {
font-size: 22px;
color: #fff;
text-decoration: none;
border: 2px solid #fff;
border-radius: 0;
display: inline-block;
padding: 10px 20px;
transition: all 0.3s ease-in-out;
}
#HeroBanner .hero-content .hero-cta:hover {
background-color: #0098aa;
border: 2px solid #0098aa;
transition: all 0.3s ease-in-out;
}
/* services section style goes here */
#Services {
padding: 80px 0 50px;
background-color: #fafafa;
}
#Services .block-heading {
margin-bottom: 100px;

12
 }
#Services .block-heading p:last-of-type {
margin: 0;
}
#Services .services-wrapper {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#Services .each-service {
position: relative;
text-align: center;
max-width: calc(33.33% - 30px);
border: 1px solid #e6e6e6;
background-color: #fff;
margin: 0 15px 50px;
padding: 55px 20px 25px;
}
#Services .each-service .service-icon {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
padding: 15px;
background-color: #0098aa;
border-radius: 50%;
transition: all 0.2s ease-in-out;
}
#Services .each-service .service-icon i {
font-size: 24px;
color: #fff;
transition: all 0.2s ease-in-out;
}
#Services .each-service:hover .service-icon {
background-color: #ffffff;
border: 1px solid #0098aa;
transition: all 0.2s ease-in-out;
}
#Services .each-service:hover .service-icon i {
color: #0098aa;
transition: all 0.2s ease-in-out;
}
#Services .each-service h5 {
margin: 0 0 10px;
}
#Services .each-service p:last-child {

13
 margin: 0;
}
/* porfolio style goes here */
#Portfolio {
background-color: #fafafa;
padding: 80px 0;
}
#Portfolio .block-heading p:last-of-type {
margin: 0;
}
#Portfolio .portfolio-wrapper .each-portfolio {
position: relative;
width: calc(33.3% - 10px);
float: left;
margin: 0 5px 10px;
text-decoration: none;
outline: 0 none;
}
#Portfolio .each-portfolio img {
width: 100%;
height: auto;
}
#Portfolio .each-portfolio .hover-cont-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 152, 170, 0.8);
color: #fff;
display: block;
text-align: center;
opacity: 0;
transition: all 0.3s ease-in-out;
padding: 20px;
}
#Portfolio .each-portfolio .hover-cont-wrap .p-title {
font-size: 22px;
color: #fff;
position: relative;
top: -100px;
transition: top 0.3s ease-in-out;
}
#Portfolio .each-portfolio .hover-cont-wrap .p-desc {
position: relative;
top: 100px;
transition: top 0.3s ease-in-out;
color: #fff;
margin: 0;
}
#Portfolio .each-portfolio .hover-cont-wrap .icon-div {
font-size: 25px;

14
 }
#Portfolio .each-portfolio .hover-cont-wrap .hover-cont-block {
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#Portfolio .portfolio-wrapper .each-portfolio:hover .hover-cont-wrap {
opacity: 1;
transition: all 0.3s ease-in-out;
}
#Portfolio .portfolio-wrapper .each-portfolio:hover .hover-cont-wrap .p-title, #Portfolio .portfolio-wrapper .each-
portfolio:hover .hover-cont-wrap .p-desc {
top: 0;
transition: top 0.3s ease-in-out;
}
.fancybox-toolbar button {
display: none !important;
}
.fancybox-toolbar .fancybox-button.fancybox-button--close {
display: inline-block !important;
}
/* about us section style goes here */
#About {
position: relative;
}
#About .about-wrapper {
width: 50%;
padding: 80px 50px 80px 10px;
}
#About .about-wrapper p:last-child {
margin: 0;
}
#About:after {
content: '';
position: absolute;
top: 0;
right: 0;
background: url("../images/about-us.jpg") no-repeat center / cover;
width: 50%;
height: 100%;
}
/* Testimonial section style goes here */
#Testimonial {
width: 100%;
display: table;
background: url(../images/banner-one.jpg) no-repeat 0 30% / cover;
background-attachment: fixed;
}
#Testimonial .block-heading h2 {
margin: 0;
}

15
 #Testimonial .testimonial-wrap {
display: table-cell;
background-color: rgba(10,40,60,0.7);
color: #fff;
padding: 50px 0;
}
#Testimonial .testimonial-slider {
text-align: center;
}
.bx-wrapper {
box-shadow: none;
border: 0;
background: transparent;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: transparent;
border: 1px solid #fff;
}
.bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus, .bx-wrapper .bx-
pager.bx-default-pager a:hover {
background: #fff;
}
/* Contact us section style goes here */
#ContactUs {
padding: 70px 0;
}
#ContactUs .contact-title {
font-size: 30px;
color: #000;
text-align: center;
margin: 0 0 30px;
}
#ContactUs .contact-outer-wrapper {
width: 100%;
height: auto;
display: table;
margin: 0 auto;
}
#ContactUs .address-block {
width: 40%;
height: 100%;
display: table-cell;
color: #333;
position: relative;
padding: 40px;
}
#ContactUs .address-block::after {
position: absolute;
content: "";
right: 3%;
width: 1px;
height: 80%;

16
 background: #ccc;
top: 10%;
}
#ContactUs .add-title {
font-size: 22px;
font-weight: bold;
margin: 0 0 50px;
}
#ContactUs .c-detail {
margin-bottom: 20px;
}
#ContactUs .c-detail:last-child {
margin-bottom: 0;
}
#ContactUs .c-detail .c-icon {
width: 8%;
display: inline-block;
font-size: 20px;
vertical-align: top;
}
#ContactUs .c-detail .c-info {
width: 90%;
display: inline-block;
vertical-align: top;
}
#ContactUs .c-detail span .fa {
vertical-align: top;
}
#ContactUs .form-wrap {
width: 60%;
display: table-cell;
padding: 40px;
}
#ContactUs .form-wrap .floating-label {
position: relative;
width: 47%;
display: inline-block;
margin-bottom: 30px;
}
#ContactUs .form-wrap .fname, #ContactUs .form-wrap .contact {
margin-right: 20px;
}
#ContactUs .form-wrap .user-msg {
width: 98%;
display: block;
margin-bottom: 40px;
}
#ContactUs .floating-input {
width: 100%;
border: 0;
border-bottom: 1px solid #999999;
box-shadow: none;

17
 background-color: transparent;
padding-top: 3px;
}
#ContactUs .floating-input:focus {
outline: 0;
}
#ContactUs .form-wrap label {
position: absolute;
top: 0px;
left: 0;
font-size: 14px;
text-align: left;
color: #999999;
transition: top 0.2s ease-in-out;
z-index: -1;
margin: 0;
}
#ContactUs .floating-input:focus ~ label, #ContactUs .floating-input.not-empty ~ label {
top: -18px;
font-size:12px;
color:#0098aa;
transition: top 0.2s ease-in-out;
}
#ContactUs .submit-btn {
text-align: center;
}
#ContactUs .submit-btn button {
font-size: 16px;
border: 0;
border-radius: 0;
background-color: #0098aa;
color: #fff;
padding: 10px 20px;
cursor: pointer;
outline: 0;
}
#ContactUs .submit-btn button:hover {
background-color: rgba(0,152,170,0.8);
}
/* footer style goes here */
#Footer {
background-color: rgba(0, 0, 0, 0.9);
padding: 50px 0;
}
#Footer .footer-logo-wrap {
width: 100%;
font-size: 12px;
color: #fff;
}
#Footer .footer-logo-wrap a {
color: #0098aa;
outline: 0;

18
 }
#Footer .footer-logo-wrap {
width: 100%;
text-align: center;
}
#Footer .social-share {
width: 100%;
margin-bottom: 30px;
}
#Footer .social-share ul {
text-align: center;
}
#Footer .social-share ul li {
list-style: none;
display: inline-block;
vertical-align: middle;
}
#Footer .social-share ul li a {
font-size: 22px;
color: #fff;
padding: 0 10px;
}
#Footer .social-share ul li a:hover .fa-facebook {
color: #3b5998;
}
#Footer .social-share ul li a:hover .fa-twitter {
color: #00aced;
}
#Footer .social-share ul li a:hover .fa-linkedin {
color: #0077B5;
}
#Footer .social-share ul li a:hover .fa-instagram {
color: #fb3958;
}

19
 custom-responsive-style.css

@media (max-width: 575px) {

/* header style */
#Header .mobile-menu ul li {
list-style: none;
padding: 0 0 20px 20px;
}
/* Hero banner style */
#HeroBanner .hero-content h1 {
font-size: 28px;
}
#HeroBanner .hero-content p {
font-size: 20px;
}
#HeroBanner .hero-content a {
font-size: 18px;
}
#Header .site-logo-wrap {
padding: 23px 0;
}
#Header .site-logo-wrap .logo img {
width: 55px;
}
#Header.header-fixed .site-logo-wrap .logo img {
width: 50px;
transition: all 0.3s ease-in-out;
}
/* services style */
#Services .services-wrapper {
display: block;
}
#Services .each-service {
max-width: 100%;
margin: 0 0 50px;
}
#Services {
padding: 50px 0;
}
#Services .each-service:last-child {
margin: 0;
}
/* porfolio style */
#Portfolio {
padding: 50px 0;
}
#Portfolio .portfolio-wrapper .each-portfolio {
position: relative;
width: 100%;
float: left;
margin: 0 0 10px;

20
 }
#Portfolio .each-portfolio .hover-cont-wrap {
opacity: 1;
height: auto;
top: auto;
bottom: 0;
}
#Portfolio .each-portfolio .hover-cont-wrap .p-title {
top: 0;
}
#Portfolio .each-portfolio .hover-cont-wrap .p-desc {
top: 0;
}
#Portfolio .each-portfolio .hover-cont-wrap .hover-cont-block {
top: 0;
transform: translateY(0%);
}
/* about us style */
#About .about-wrapper {
width: 100%;
text-align: center;
padding: 50px 0;
}
#About:after {
display: none;
}
/* testimonial slider style */
#Testimonial .testimonial-slider li br {
display: none;
}
/* contact us style */
#ContactUs {
padding: 50px 0;
}
#ContactUs .contact-outer-wrapper {
display: block;
}
#ContactUs .address-block {
display: block;
width: 100%;
border-bottom: 1px solid #ccc;
padding: 0 0 30px;
}
#ContactUs .address-block::after {
display: none;
}
#ContactUs .form-wrap {
display: block;
width: 100%;
padding: 30px 0 0;
}
#ContactUs .form-wrap .floating-label {

21
 width: 100%;
}
#ContactUs .form-wrap .fname,
#ContactUs .form-wrap .contact {
margin-right: 0;
}
#ContactUs .contact-title {
margin: 0 0 50px;
}
#Services .block-heading {
margin-bottom: 70px;
}
.block-heading {
margin-bottom: 30px;
}
#ContactUs .contact-title {
margin: 0 0 20px;
}
#ContactUs .add-title {
text-align: center;
margin: 0 0 30px;
}
.hidden-lg-up {
display: block;
}
.hidden-md-down {
display: none;
}
}
/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767px) {
/* Header style */
.navbar-nav {
background-color: rgba(0, 0, 0, 0.5);
}
/* Hero banner style goes here */
#HeroBanner .hero-content h1 {
font-size: 28px;
}
#HeroBanner .hero-content p {
font-size: 20px;
}
#HeroBanner .hero-content a {
font-size: 18px;
}
/* services section. style */
#Services .each-service {
max-width: 100%;
margin: 0 0 50px;
}
#Services .each-service:last-child {
margin: 0;

22
 }
/* portfolio section style */
#Portfolio .portfolio-wrapper .each-portfolio {
position: relative;
width: calc(50% - 10px);
float: left;
margin: 0 5px 10px;
}
#Portfolio .each-portfolio .hover-cont-wrap {
position: relative;
opacity: 1;
}
#Portfolio .each-portfolio .hover-cont-wrap .p-title {
top: 0;
}
#Portfolio .each-portfolio .hover-cont-wrap .p-desc {
top: 0;
}
#Portfolio .each-portfolio .hover-cont-wrap .hover-cont-block {
top: 0;
transform: translateY(0%);
}
/* about us section style */
#About .about-wrapper {
width: 100%;
text-align: center;
padding: 80px 0;
}
#About:after {
display: none;
}
/* testmonial slider style*/
#Testimonial .testimonial-slider li br {
display: none;
}
/* contact section style */
#ContactUs {
padding: 50px 0;
}
#ContactUs .contact-outer-wrapper {
display: block;
}
#ContactUs .address-block {
display: block;
width: 100%;
border-bottom: 1px solid #ccc;
padding: 0 0 30px;
}
#ContactUs .address-block::after {
display: none;
}
#ContactUs .form-wrap {

23
 display: block;
width: 100%;
padding: 30px 0 0;
}
#ContactUs .form-wrap .floating-label {
width: 100%;
}
#ContactUs .form-wrap .fname,
#ContactUs .form-wrap .contact {
margin-right: 0;
}
#ContactUs .contact-title {
margin: 0 0 50px;
}
#Services .block-heading {
margin-bottom: 70px;
}
.block-heading {
margin-bottom: 30px;
}
#ContactUs .contact-title {
margin: 0 0 20px;
}
#ContactUs .add-title {
text-align: center;
margin: 0 0 30px;
}
.hidden-lg-up {
display: block;
}
.hidden-md-down {
display: none;
}
}
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991px) {
/* Header style */
.navbar-nav {
background-color: rgba(0, 0, 0, 0.5);
}
#Header .site-logo-wrap .logo img {
width: 60px;
}
/* Hero banner style */
#HeroBanner .hero-content h1 {
font-size: 28px;
}
#HeroBanner .hero-content p {
font-size: 20px;
}
#HeroBanner .hero-content a {
font-size: 18px;

24
 }
/* mobile menu style */
#Header .mobile-menu {
width: 300px;
left: -300px;
}
#Header .mobile-menu ul {
margin-top: 100px;
}
/* service section style*/
#Services .each-service {
max-width: calc(50% - 30px);
}
/* porfolio section style */
#Portfolio .portfolio-wrapper .each-portfolio {
width: calc(50% - 10px);
}
#Portfolio .each-portfolio .hover-cont-wrap {
position: relative;
opacity: 1;
}
#Portfolio .each-portfolio .hover-cont-wrap .p-title, #Portfolio .each-portfolio .hover-cont-wrap .p-desc {
top: 0;
}
#Portfolio .each-portfolio .hover-cont-wrap .hover-cont-block {
top: 0;
transform: translateY(0%);
}
/* testimonial slider style */
#Testimonial .testimonial-slider li br {
display: none;
}
/* contact us section style */
#ContactUs .contact-outer-wrapper {
display: block;
}
#ContactUs .address-block {
display: block;
width: 100%;
border-bottom: 1px solid #ccc;
padding: 0 0 30px;
}
#ContactUs .address-block::after {
display: none;
}
#ContactUs .form-wrap {
display: block;
width: 100%;
padding: 30px 0 0;
}
#ContactUs .c-detail .c-icon {
width: 6%;

25
 }
#ContactUs .c-detail .c-info {
width: 92%;
}
.hidden-lg-up {
display: block;
}
.hidden-md-down {
display: none;
}
}
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199px) {
/* portfolio section style */
#Portfolio .each-portfolio .hover-cont-wrap {
position: relative;
opacity: 1;
}
#Portfolio .each-portfolio .hover-cont-wrap .p-title, #Portfolio .each-portfolio .hover-cont-wrap .p-desc {
top: 0;
}
#Portfolio .each-portfolio .hover-cont-wrap .hover-cont-block {
top: 0;
transform: translateY(0%);
}
/* contact us section style */
#ContactUs .c-detail .c-icon {
width: 10%;
}
#ContactUs .c-detail .c-info {
width: 87%;
}
}
/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
...
}

26
 HTML
<html>
<head>
<title>Rony Sound Factory</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- favicons -->
<link rel="apple-touch-icon" sizes="57x57" href="images/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="images/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="images/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- favicons -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/custom-responsive-style.css">
<link href="//fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script type="text/javascript" src="script/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="script/all-plugins.js"></script>
<script type="text/javascript" src="script/plugin-active.js"></script>
</head>
<body data-spy="scroll" data-target=".main-navigation" data-offset="150">
<section id="MainContainer">
<!-- Header starts here -->
<header id="Header">
<nav class="main-navigation">
<div class="container clearfix">
<div class="site-logo-wrap">
<a class="logo" href="#"><img src="images/ds-logo.svg" alt="Design Studio"></a>
</div>
<a href="javascript:void(0)" class="menu-trigger hidden-lg-up"><span>&nbsp;</span></a>
<div class="main-menu hidden-md-down">
<ul class="menu-list">
<li><a class="nav-link" href="javascript:void(0)" data-target="#HeroBanner">Home</a></li>
<li><a class="nav-link" href="javascript:void(0)" data-target="#Services">Services</a></li>
<li><a class="nav-link" href="javascript:void(0)" data-target="#About">About</a></li>
<li><a class="nav-link" href="javascript:void(0)" data-target="#Portfolio">Our Studio</a></li>
<li><a class="nav-link" href="javascript:void(0)" data-target="#ContactUs">Contact</a></li>

27
 </ul>
</div>
</div>
<div class="mobile-menu hidden-lg-up">
<ul class="mobile-menu-list">
<li><a class="nav-link" href="javascript:void(0)" data-target="#HeroBanner">Home</a></li>
<li><a class="nav-link" href="javascript:void(0)" data-target="#Services">Services</a></li>
<li><a class="nav-link" href="javascript:void(0)" data-target="#About">About</a></li>
<li><a class="nav-link" href="javascript:void(0)" data-target="#Portfolio">Our Studio</a></li>
<li><a class="nav-link" href="javascript:void(0)" data-target="#ContactUs">Contact</a></li>
</ul>
</div>
</nav>
</header>
<!-- Header ends here -->
<!-- Banner starts here -->
<section id="HeroBanner">
<div class="hero-content">
<h1>Welcome</h1>
<p>I am Arul Ronald ,Founder of Rony Sound Factory</p>
<a href="#" class="hero-cta">Get Started</a>
</div>
</section>
<!-- Banner ends here -->
<!-- Services section starts here -->
<section id="Services">
<div class="container">
<div class="block-heading">
<h2>Services</h2>
<p>Services are as Follows:</p>
</div>
<div class="services-wrapper">
<div class="each-service">
<div class="service-icon"><i class="fa fa-desktop" aria-hidden="true"></i></div>
<h5 class="service-title">Recording</h5>
<p class="service-description">We Record Vocals For Every Type Of Artist with Quality.</p>
</div>
<div class="each-service">
<div class="service-icon"><i class="fa fa-line-chart" aria-hidden="true"></i></div>
<h5 class="service-title">Mixing</h5>
<p class="service-description">We Have Best Mixing Engeneers who mix the tracks with high
quality mixing plugins .</p>
</div>
<div class="each-service">
<div class="service-icon"><i class="fa fa-paper-plane" aria-hidden="true"></i></div>
<h5 class="service-title">Mastering</h5>
<p class="service-description">We Have Best Mastering Engeneers who can make a tracks in a
Distribution Level.</p>
</div>
<div class="each-service">
<div class="service-icon"><i class="fa fa-university" aria-hidden="true"></i></div>
<h5 class="service-title">Music Production</h5>

28
 <p class="service-description">We Also Produce own music for Every Genre Artist such as, Hip-
Hop,EDM,Future Bass,Movie Background Scoring and many more.</p>
</div>
<div class="each-service">
<div class="service-icon"><i class="fa fa-camera-retro" aria-hidden="true"></i></div>
<h5 class="service-title">Intrument Players</h5>
<p class="service-description">You All can also Hire Musicians From our Studio For Live
concerts,events,etc.</p>
</div>
<div class="each-service">
<div class="service-icon"><i class="fa fa-shopping-bag" aria-hidden="true"></i></div>
<h5 class="service-title">Distribution</h5>
<p class="service-description">We Also Have Our Own Distribution Company Where we can
Distribute Your Music in various platform like Spotify,Apple Music,amazon music,etc.</p>
</div>
</div>
</div>
</section>
<!-- Services section ends here -->
<!-- About Us section starts here -->
<section id="About">
<div class="container">
<div class="about-wrapper">
<h2>About Us</h2>
<p>We Have Highly Trained People Who have an experience of Sound Designing, Mixing And
Mastering, Music Production, etc.We have workes in various project like Rap Songs, Melody Songs, Movie
Background Scoring and Many more.We analyse the custumer expectations and we always try to work more
than their expectations.</p>
</div>
</div>
</section>
<!-- About Us section ends here -->
<!-- Portfolio section starts here -->
<section id="Portfolio">
<div class="container">
<div class="block-heading">
<h2>Our Studio</h2>
<p>Rony Sound Factory.</p>
</div>
<div class="portfolio-wrapper clearfix">
<a class="each-portfolio" data-fancybox="gallery" href="images/p-one.jpg">
<img src="images/p-one.jpg" alt="p-one">
<div class="hover-cont-wrap">
<div class="hover-cont-block">
<h5 class="p-title">Title</h5>
<div class="p-desc">
<div></div>
<div class="icon-div"><i class="fa fa-search-plus" aria-hidden="true"></i></div>
</div>
</div>
</div>
</a>

29
<a class="each-portfolio" data-fancybox="gallery" href="images/p-two.jpg">
<img src="images/p-two.jpg" alt="p-one">
<div class="hover-cont-wrap">
<div class="hover-cont-block">
<h5 class="p-title">Title</h5>
<div class="p-desc">
<div></div>
<div class="icon-div"><i class="fa fa-search-plus" aria-hidden="true"></i></div>
</div>
</div>
</div>
</a>
<a class="each-portfolio" data-fancybox="gallery" href="images/p-three.jpg">
<img src="images/p-three.jpg" alt="p-one">
<div class="hover-cont-wrap">
<div class="hover-cont-block">
<h5 class="p-title">Title</h5>
<div class="p-desc">
<div></div>
<div class="icon-div"><i class="fa fa-search-plus" aria-hidden="true"></i></div>
</div>
</div>
</div>
</a>

<a class="each-portfolio" data-fancybox="gallery" href="images/p-six.jpg">

<img src="images/p-six.jpg" alt="p-one">
<div class="hover-cont-wrap">
<div class="hover-cont-block">
<h5 class="p-title">Title</h5>
<div class="p-desc">
<div></div>
<div class="icon-div"><i class="fa fa-search-plus" aria-hidden="true"></i></div>
</div>
</div>
</div>
</a>
<a class="each-portfolio" data-fancybox="gallery" href="images/p-one.jpg">
<img src="images/p-one.jpg" alt="p-one">
<div class="hover-cont-wrap">
<div class="hover-cont-block">
<h5 class="p-title">Title</h5>
<div class="p-desc">
<div></div>
<div class="icon-div"><i class="fa fa-search-plus" aria-hidden="true"></i></div>
</div>
</div>
</div>
</a>
<a class="each-portfolio" data-fancybox="gallery" href="images/p-two.jpg">
<img src="images/p-two.jpg" alt="p-one">

30
 <div class="hover-cont-wrap">
<div class="hover-cont-block">
<h5 class="p-title">Title</h5>
<div class="p-desc">
<div></div>
<div class="icon-div"><i class="fa fa-search-plus" aria-hidden="true"></i></div>
</div>
</div>
</div>
</a>

</section>
<!-- Portfolio section ends here -->
<section id="Testimonial">
<div class="testimonial-wrap">
<div class="container">
<div class="block-heading">
<h2>What Clients Say About Us</h2>
</div>
<ul class="testimonial-slider">
<li>" I would like to thank Ronald and the team for the fantastic work<br> for making music for my song.
"</li>
<li>" I'd say that the team is excellent and it is some of the best service<br> I have received many
apritiations on Rony's work "</li>
<li>" It's been great working with you. The Music is also great. I can certainly recommend your<br>
music to others as cost effective music. "</li>
</ul>
</div>
</div>
</section>
<!-- Contact us section starts here -->
<section id="ContactUs">
<div class="container contact-container">
<h3 class="contact-title">Get In Touch</h3>
<div class="contact-outer-wrapper">
<div class="address-block">
<p class="add-title">Contact Details</p>
<div class="c-detail">
<span class="c-icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span> <span
class="c-info"> Royal Palm, Aray Milk Colony, Goregoan, Mumbai</span>
</div>
<div class="c-detail">
<span class="c-icon"><i class="fa fa-phone" aria-hidden="true"></i></span> <span class="c-
info">+917700078429</span>
</div>
<div class="c-detail">
<span class="c-icon"><i class="fa fa-envelope" aria-hidden="true"></i></span> <span class="c-
info">[email protected]</span>
</div>
</div>
<div class="form-wrap">
<p class="add-title">Send Us Message</p>

31
 <form>
<div class="fname floating-label">
<input type="text" class="floating-input" name="full name" id="full-name-field" />
<label for="full-name-field">Full Name</label>
</div>
<div class="email floating-label">
<input type="email" class="floating-input" name="email" id="mail-field" />
<label for="mail-field">Email</label>
</div>
<div class="contact floating-label">
<input type="tel" class="floating-input" name="contact" id="contact-us-field" />
<label for="contact-us-field">Contact</label>
</div>
<div class="company floating-label">
<input type="text" class="floating-input" name="company" id="company-field" />
<label for="company-field">Company</label>
</div>
<div class="user-msg floating-label">
<textarea class="floating-input" name="user message" id="user-msg-field"></textarea>
<label for="user-msg-field" class="msg-label">Your Message</label>
</div>

<div class="submit-btn">

<button type="submit">Submit</button>
</div>

</form>
</div>
</div>
</div>
</section>
<!-- Contact us section ends here -->
<!-- Footer section starts here -->
<footer id="Footer">
<div class="container">
<div class="social-share">
<ul>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
</ul>
</div>
<div class="footer-logo-wrap">
Designed by Arul Ronald
</div>
</div>
</footer>
</section>
</body>
</html>

32
 # DIAGRAM

1. UML DIAGRAM

HOME

GET
STARTED

SERVICES ABOUT OUR CONTACT

STUDIO

RECORDING
GET IN
TOUCH
MIXING FULL
NAME

MASTERING SUBMIT EMAIL

MUSIC CONTACT
PRODUCTION

INSTRUMENT COMPANY
PLAYERS

DISTRIBUTION YOUR
MESSAGE

33
 2. ENTITY/RELATIONSHIP(ER)
DIAGRAM

Music Vocal
Production
Vocal
Proccessing Lyrics

Mixing Artist Track Composition

Artist
(Studio) (Custumer)

Distribution Genre

Mastering Payment

34
3. USE CASE DIAGRAM

35
4. DATA FLOW
DIAGRAM

36
5. CLASS DIAGRAM

37
 6. SEQUENCE DIAGRAM

Artist Producer Final

Track

---------Requesting For Music--------------------Music Production---------------------Distribuition------------

38
# MODULES

39
40
41
 # LITERATURE REVIEW

A recording studio will provide many advantages for your video production. When you work with a recording
studio, you will be able to gain the guidance of an expert, as well as substantially improve the quality of your
recording. At Lightchild Media, we are passionate about providing you with access to the ideal recording
processes, equipment, and tools to meet all of your needs. When you have the appropriate information about the
advantages of working with a recording studio, you will be better equipped to make the best decisions for your
own situation. These services can help you to improve your song content marketing, as well as convey your
business in a more professional manner.

Professional Sound Quality

The atmosphere you record in will have a huge impact on the quality of your sound. Recording in a professional
recording studio will ensure you are able to obtain similarly professional sound quality. If your viewers have
difficulty understanding your message, it will be even more difficult to get your message across. By making
recordings with high quality, you will be able to ensure that all
of your videos are as effective as possible. This goes a long way toward improving the value of your video
marketing strategy, as well as ensuring that you can communicate clearly with your consumers.

Access to Quality Equipment

The quality of the equipment that you use when recording your song will have a substantial impact on the
quality of your song. Unfortunately, video recording equipment can be extremely expensive. This can be a
ludicrous expense for limited use. By recording your song in a recording studio,
you will gain access to top-notch equipment. This goes a long way toward enhancing the quality of your
finished product. If you settle for recording your video on a cell phone, it will be obvious that you didn’t use
quality equipment. This can potentially diminish the trust that your consumers have in your services. It is
important to show them that you care about the image of your business.

Control Over the Environment

When you record in an unprofessional environment, you may find that your recording is impacted by
unexpected occurrences. From construction on the street to a barking dog next door, this can make it incredibly
difficult to obtain a high quality song. A recording studio provides you with complete control over the
environment that you record in. The best equipment will help you to ensure that your song is completely
adjusted to meet all of your specific needs.

Optimized Acoustics

Acoustics will have a large impact on the sound quality of your song. A recording studio is designed with
acoustics in mind, which will ensure that the sound quality of your song is optimized. When you work with a
recording studio, you will be able to ensure that your song is created with the best possible sound.

42
 # TESTING

Test Case ID: #MST00

Test Scenario: To Submit Artist Details

Test Steps:

The user enters the information

In the ’Full Name’ field, the user enters a Full Name .

In the ’email’ field, the user enters a registered email address.

In the ’Contact’ field, the user enters Contact.

In the ’Company’ field, the user enters Company Name.

In the ’Your Message’ field, the user enters a Message to Studio Artist.

The user clicks ‘Submit.’

Prerequisites: A Registered Gmail ID with a unique Name and Contact.

Browser: Chrome v 86. Device:Windows 10.

Test Data: To Submit The Details

Expected/Intended Results: Once Details are entered, the web page redirects to the same Page That Means
the Information is submitted to studio

Actual Results: As Expected

Test Status – Pass/Fail: Pass

43
#GANTT CHART

44
 # OUTCOME/CONCLUSION

A recording studio is a very unique business prospect and starting a commercial recording studio can be quite
overwhelming. In fact, start out any business requires a business plan. A well-written business plan will be both
your guide to maintaining the business and a standard document to gain investment or start-up funding. A
recording studio owner needs to demonstrate that they don't just have strong management skills but should also
have qualified employees working on professional recording equipment. Most studio owners are musicians and
not professionals with a business-oriented background. If you're an ambitious artist with a plan to start a new
recording studio, you can streamline the whole process by having a business plan. Here is a step-by-step business
plan that will help you set up your new recording studio.

45
 # REFERENCES

SITES

(getbootstrap.com)

Wikipedia

REFERENCE BOOKS

https://www.interviewbit.com/blog/html-css-books/

https://www.scribbr.com/citing-sources/cite-a-website/#

46
47