| Server IP : 210.245.233.93 / Your IP : 216.73.216.226 Web Server : Apache/2.2.15 (CentOS) System : Linux webserver2.onesolution.com.hk 2.6.32-754.35.1.el6.x86_64 #1 SMP Sat Nov 7 12:42:14 UTC 2020 x86_64 User : apache ( 48) PHP Version : 5.3.3 Disable Function : exec, shell_exec, system, passthru, popen, proc_open, pcntl_exec MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/hkosl.com/muscircle_html/en/ |
Upload File : |
<!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">
<title>MUSCIRCLE</title>
<link href="../css/style.css" type="text/css" rel="stylesheet">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/agency.css" rel="stylesheet">
<link rel="stylesheet" href="../css/secondeffect.css" type="text/css" media="screen"/>
<link rel="shortcut icon" href="../img/smallLogo.png">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html"><img src="../img/whiteLOGO.png" width="auto" height="50px" style="margin-top:0px;"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="overflow: hidden;">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">EN</a>
</li>
<li>
<a href="#">中文</a>
</li>
<li>
<a href="#" id="ToHIW">HOW IT WORKS</a>
</li>
<li>
<a href="#" id="ToLearn">LEARN</a>
</li>
<li>
<a href="#" data-toggle="modal" data-target="#myModa2">LOG IN</a>
</li>
<li>
<a href="#" data-toggle="modal" data-target="#myModal">SIGNUP</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="modal fade" id="myModal" role="dialog">
<div class="PopUpformSection">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><b>Tutor</b> sign up</h4>
</div>
<div class="modal-body">
<button class="FBSignIn"><img src="../img/fbSignInIcon.png"> Sign up with Facebook</button>
<button class="GoogleSignIn"><img src="../img/GoolgePlusIcon.png"> Sign up with Google</button>
<div class="OR">OR</div>
<form role="form">
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="First Name" />
<i class="form-control-feedback glyphicon glyphicon-user" style="color:#555;"></i>
</div>
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Last Name" />
<i class="form-control-feedback glyphicon glyphicon-user" style="color:#555;"></i>
</div>
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Email Address" />
<i class="form-control-feedback glyphicon glyphicon-envelope" style="color:#555;"></i>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password" />
<i class="form-control-feedback glyphicon glyphicon-lock" style="color:#555;"></i>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Confirm Password" />
<i class="form-control-feedback glyphicon glyphicon-lock" style="color:#555;"></i>
</div>
<input type="button" class="SignUpSubmit" value="Sign Up">
</form>
<br>
<div class="AgreeTerms">By click "Sign up" you confirm that you agree to our <a href="#">terms of service </a></div>
</div>
<div class="modal-footer">
Already have an account? <a href="#">Sign in</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModa2" role="dialog">
<div class="PopUpformSection">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><b>LOG IN</b></h4>
</div>
<div class="modal-body">
<button class="FBSignIn"><img src="../img/fbSignInIcon.png"> Sign up with Facebook</button>
<button class="GoogleSignIn"><img src="../img/GoolgePlusIcon.png"> Sign up with Google</button>
<div class="OR">OR</div>
<form role="form">
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Email Address" />
<i class="form-control-feedback glyphicon glyphicon-envelope" style="color:#555;"></i>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password" />
<i class="form-control-feedback glyphicon glyphicon-lock" style="color:#555;"></i>
</div>
<input type="button" class="SignUpSubmit" value="Log in">
</form>
<div class="ForgotPW"><a href="#">Forgot your password?</a></div>
</div>
<div class="modal-footer" id="LogInFooter">
Sign up as a <a href="#">Student</a> or <br>
Sign up as a <a href="#">Tutor</a>
</div>
</div>
</div>
</div>
<header>
<div class="container">
<div class="intro-text">
<div class="intro-heading">ARE YOU LOOKING FOR TUTOR</div>
<div class="BeginsBTN">
<a href="#" class="BeginSTD">Become a Student</a>
<a href="#" class="BeginTutor">Become a Tutor</a>
</div>
<div class="SearchBox">
<input type="text" placeholder="Enter keywords">
<a href="category.html" class="searchBT"><span class="glyphicon glyphicon-search"></span></a>
</div><br>
<div class="Guarantee">MUSCIRCLE Price Guarantee <img src="../img/Guarantee.png" width="15px" height="auto"></div>
</div>
</div>
</header>
<div class="HowItWorks" id="HIW">
<div class="container">
<div class="row">
<div class="col-sm-12" id="IntroParagh">
<span class="BigTitle">HOW IT WORKS</span> <br>
<div class="redThickBorder"><hr></div>
<div class="IntroContent">
Learn more about our booking procedures
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="StudentVersion">
<div class="HIWHead">學生版</div>
<div class="STRow">
<div class="HIWText">
<h11>1. 找導師</h11><br>
根據需求尋找心儀導師或發佈求學資訊讓導師主動跟你聯絡
</div>
<div class="HIWImg"><img src="../img/howitworks/img1.png"></div>
</div>
<div class="STRow">
<div class="HIWText">
<h11>2. 溝通確認</h11><br>
邀請導師於平台上溝通 確認學習需求和時間
</div>
<div class="HIWImg"><img src="../img/howitworks/img2.png"></div>
</div>
<div class="STRow">
<div class="HIWText">
<h11>3. 確認試堂</h11><br>
於平台付款 向導師購買試堂時段每次試堂共2節
</div>
<div class="HIWImg"><img src="../img/howitworks/img3.png"></div>
</div>
<div class="STRow">
<div class="HIWText">
<h11>4. 試堂及評價老師</h11><br>
按照購買試堂時段上課於第2節試堂後可根據上課體驗給導師合適的評價
</div>
<div class="HIWImg"><img src="../img/howitworks/img4.png"></div>
</div>
<div class="STRow">
<div class="HIWText">
<h11>5. 正式上課</h11><br>
試堂滿意後根據教學協議跟導師正式開始學習
</div>
<div class="HIWImg"><img src="../img/howitworks/img5.png"></div>
</div>
</div>
</div>
<div id="PhoneImgSection">
<div class="col-lg-4" id="PhoneImg">
<img src="../img/howitworks/iphone.png">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="TutorVersion">
<div class="HIWHead">導師版</div>
<div class="TTRow">
<div class="HIWImg"><img src="../img/howitworks/img6.png"></div>
<div class="HIWText">
<h11>1. 註冊導師</h11><br>
輸入個人資料及相關音樂履歷 登記成為導師通過核實後學生可於導師清單中尋找心儀導師
</div>
</div>
<div class="TTRow">
<div class="HIWImg"><img src="../img/howitworks/img7.png"></div>
<div class="HIWText">
<h11>2. 溝通確認</h11><br>
於平台上跟學生溝通於試堂前跟學生先確認學習需求及時間 於最短時間內提升配對成功機會
</div>
</div>
<div class="TTRow">
<div class="HIWImg"><img src="../img/howitworks/img8.png"></div>
<div class="HIWText">
<h11>3. 試堂</h11><br>
按協定時間跟學生試堂 試堂後 導師及學生均有權選擇是否正式開始長期學習
</div>
</div>
<div class="TTRow">
<div class="HIWImg"><img src="../img/howitworks/img9.png"></div>
<div class="HIWText">
<h11>4. 配套</h11><br>
平台會給導師提供音樂教學以外的配套 例如：上課時間表 學費提示 讓老師可有效管理不同學生之需求
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="LearnSection">
<div class="container">
<div class="Title"><img src="../img/home/MusicIconI.png"> LEARN WITH US</div>
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="MusicOption">
<div class="hovereffect">
<img class="img-responsive" src="../img/home/image1.jpg" alt="">
<div class="overlay">
<div class="MusicTitle"><a href="index.html"><h2>Piano Class</h2></a></div>
<p>
<a href="#">Read More</a>
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="MusicOption">
<div class="hovereffect">
<img class="img-responsive" src="../img/home/image2.jpg" alt="">
<div class="overlay">
<div class="MusicTitle"><a href="index.html"><h2>Guitar Class</h2></a></div>
<p>
<a href="#">Read More</a>
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="MusicOption">
<div class="hovereffect">
<img class="img-responsive" src="../img/home/image3.jpg" alt="">
<div class="overlay">
<div class="MusicTitle"><a href="index.html"><h2>Drum Class</h2></a></div>
<p>
<a href="#">Read More</a>
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="MusicOption">
<div class="hovereffect">
<img class="img-responsive" src="../img/home/image4.jpg" alt="">
<div class="overlay">
<div class="MusicTitle"><a href="index.html"><h2>Violin Class</h2></a></div>
<p>
<a href="#">Read More</a>
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="MusicOption">
<div class="hovereffect">
<img class="img-responsive" src="../img/home/image5.jpg" alt="">
<div class="overlay">
<div class="MusicTitle"><a href="index.html"><h2>Saxophone Class</h2></a></div>
<p>
<a href="#">Read More</a>
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="MusicOption">
<div class="hovereffect">
<img class="img-responsive" src="../img/home/image6.jpg" alt="">
<div class="overlay">
<div class="MusicTitle"><a href="index.html"><h2>Vocal Training</h2></a></div>
<p>
<a href="#">Read More</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="MostPopularCourses">
<div class="container">
<div class="Title"><img src="../img/home/MusicIconII.png"> RECOMMEND FOR YOU</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="PopulatCourse">
<img src="../img/booking/1.jpg"> <br><br>
<span class="ParkTitle">David Guitar Lesson</span> <br>
<span class="Country">- New Territories -</span> <br>
<hr>
<a href="booking.html" class="RMBookBT">BOOK NOW</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="PopulatCourse">
<img src="../img/booking/2.jpg"> <br><br>
<span class="ParkTitle">Simon Violin Lesson</span> <br>
<span class="Country">- Hong Kong -</span> <br>
<hr>
<a href="booking.html" class="RMBookBT">BOOK NOW</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="PopulatCourse">
<img src="../img/booking/3.jpg"> <br><br>
<span class="ParkTitle">Sally Guitar Lesson</span> <br>
<span class="Country">- Kowloon -</span> <br>
<hr>
<a href="booking.html" class="RMBookBT">BOOK NOW</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="PopulatCourse">
<img src="../img/booking/4.jpg"> <br><br>
<span class="ParkTitle">Tina's Piano</span> <br>
<span class="Country">- New Territories -</span> <br>
<hr>
<a href="booking.html" class="RMBookBT">BOOK NOW</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="PopulatCourse">
<img src="../img/booking/5.jpg"> <br><br>
<span class="ParkTitle">Arron Cello Lesson</span> <br>
<span class="Country">- Kowloon -</span> <br>
<hr>
<a href="booking.html" class="RMBookBT">BOOK NOW</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="PopulatCourse">
<img src="../img/booking/6.jpg"> <br><br>
<span class="ParkTitle">Jade's Piano</span> <br>
<span class="Country">- Kowloon -</span> <br>
<hr>
<a href="booking.html" class="RMBookBT">BOOK NOW</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="PopulatCourse">
<img src="../img/booking/7.jpg"> <br><br>
<span class="ParkTitle">Celia Piano Lesson</span> <br>
<span class="Country">- Hong Kong -</span> <br>
<hr>
<a href="booking.html" class="RMBookBT">BOOK NOW</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="PopulatCourse">
<img src="../img/booking/8.jpg"> <br><br>
<span class="ParkTitle">John Guitar Lesson</span> <br>
<span class="Country">- Hong Kong -</span> <br>
<hr>
<a href="booking.html" class="RMBookBT">BOOK NOW</a>
</div>
</div>
</div>
</div>
</div>
<center><div class="BackToTop" id="back-to-top">BACK TO TOP</div></center>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="FTDescription">
<img src="../img/whiteLOGO.png" width="auto" height="60px"> <br><br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="FTEmailSub">
<span class="FTTitle">Newsletter</span> <br><br>
Enter your Email address: <br>
<div class="EmailInputBox">
<input type="text" placeholder="Email address"> <br>
<button type="button" class="EmailSubBT">Subscribe</button>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="FTDirectLink">
<span class="FTTitle">Links</span> <br>
<div class="Links">About Us</div>
<div class="Links">Privacy Policy</div>
<div class="Links">Terms of Use</div>
<div class="Links">Feedback</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="ContactInfo">
<span class="FTTitle">Contact Info</span> <br>
<div class="detail"><div class="locationIcon"><img src="../img/locationIcon.png"> </div><div class="locationaddress">Unit 16, 11/F., Wah Shing Centre, 11-13 Shing Yip Street, Kwun Tong, Kowloon, Hong Kong</div></div>
<div class="detail"><img src="../img/PhoneIcon.png"> (+852) 0000 0000</div>
<div class="detail"><img src="../img/emailIcon.png"> info@muscircle.com</div>
</div>
</div>
</div>
</div>
</div>
<div class="FooterBlack">
<div class="container">
<div class="row">
<div class="CopyRight">
© COPYRIGHT 2016 BY MUSCIRCLE. ALL RIGHTS RESERVED.
</div>
<div class="SocialMedia">
<a href=""><img src="../img/FaceBookIcon.png"></a>
<a href=""><img src="../img/TwitterIcon.png"></a>
<a href=""><img src="../img/GoolgePlusWhiteIcon.png"></a>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/agency.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="../js/classie.js"></script>
<script src="../js/cbpAnimatedHeader.js"></script>
<!-- Contact Form JavaScript -->
<script src="../js/jqBootstrapValidation.js"></script>
</body>
</html>