Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <link
  rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
  integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
  crossorigin="anonymous"
/>

  <header id="header">
    <div class="vw">
    <a href=""> <img
        id="header-img" 
        class="img-container"
        src="https://bgmc-station.com/assets/header/logo.png"
                             alt="BGMC LOGO"/></a>
    </div>
    
    <nav id="nav-bar">
      <ul>
        <li><a href="#features" class="nav-link">Features</a></li>
        
        <li><a href="#reasons" class="nav-link">Reasons</a></li>
        
        <li><a href="#streams" class="nav-link">Our Music</a></li>
        
        <li><a href="#pricing" class="nav-link">Pricing</a></li>
      </ul>
    </nav>
  </header>

<article id="signup">
 <h1 id="signup_title"> <strong>Music for Business</strong></h1>
  <p id="description">
    "The music that arrives in more than 200 countries"
  </p>
  
  <form id="form" action="https://www.freecodecamp.com/email-submit).">
    <input
     type="email"
     id="email"
     name="email"
     placeholder="Please enter your email address..."
     required
    >
    <br>
    <br>
    <input
     type="submit"
     id="submit"
     name="submit"
     value="Get Started">
  </form>
</article>
   <div class="line-background">
</div>
<main id="main">
  <div id="features" class="container">
    <div class="row">
      <div class="col-md-8 col-sm-12">
       <h1 class="title">What is "BGMC Station"?</h1>
         <p class="des">Music for business</p>
        <br>
        <p class="info">
           "BGMC Station" is a background music distribution service for your business. You can use the "Cafe Music BGM channel" music <b>commercially</b>. This music has already been watched on <b>more than 2,000,000 people in 200 countries around the world</b> on YouTube. You do <b>not need copyright procedures to use it</b>.
     <br>   You can use it at <b>1,078 yen per month </b>(tax excluded) only. No initial registration fee and cancellation fee at all. There is no need for dedicated equipment and setting a contract period, so you can start using our service anytime you want. <br>
<br>
Try high-quality music with a <b>14-day</b> free trial. What you need for a free trial is just <b>your email address and setting up a password</b>. Please be assured you will not be charged automatically after the free trial ends.</p>
      </div>
      <div class="col-md-4 col-sm-12">
        <div class="icon">
        <i class="fas fa-headphones-alt"></i>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4 col-sm-12">
        <div class="icon">
          <i class="fas fa-globe-americas"></i>
        </div>
      </div>
      <div class="col-md-8 col-sm-12">
        
        <h1 class="title"  id="reasons">Three reasons chosen</h1>
        <p class="des">Features of BGMC Station</p>
        <p class="info">
          <ul>
            <li><i class="fa-li fa fa-check-square"></i>
              <strong class="reason">Used around the world:</strong>
              <br>
              <p class="expl">You can commercially use the music of "Cafe Music BGM channel" watched on YouTube to 2,000,000 people in 200 countries around the world.</p></li>
            <br>
   <!--Reasons 2-->
             <li><i class="fa-li fa fa-check-square"></i>
              <strong class="reason">All sound sources are live</strong>
              <br>
              <p class="expl">All sound sources are original live performances. We are recording every month.</p></li>
            <br>
 <!--Reasons 3-->  
                  <li><i class="fa-li fa fa-check-square"></i>
              <strong class="reason">All instrument songs without vocals</strong>
              <br>
              <p class="expl">All songs are instrumental performance only, with no vocals. We will produce a comfortable space.</p></li>
        </ul>
        </p>
      </div>
    </div>
  </div>
<div class="line-background">
</div>

<h1 id="streams">Our music</h1>

<iframe class="chill" id="video" width="560" height="315" src="https://www.youtube.com/embed/ggg8K7Iv6vs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<iframe id="tokyo" width="560" height="315" src="https://www.youtube.com/embed/6uddGul0oAc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br><br>
<button  id="view"><a style="text-decoration: none; color: black;" href="https://www.youtube.com/channel/UCQINXHZqCU5i06HzxRkujfg"  target="_blank" >View more</a></button>
<br><br><br>
<div class="line-background">
</div>

<h1 id="pricing">Pricing</h1>
    <div class="grid-items">
      <div class="item">
        <div class="item-header">BASIC SERVICE</div>
        <div class="item-content">
          <p>Initial cost: <strong></strong>0yen</p>
          <p>Monthly cost:	<strong>1,078yen</strong></p>
          <p>Minimum contract period:	<strong>None</strong></p>
          <p>Free trial:	<strong>14 days</strong></p>
        </div>
        <div class="item-footer">
          <button class="btn-lg">Select</button>
        </div>
      </div>
      <div class="item">
        <div class="item-header">SERVICE A</div>
        <div class="item-content">
          <p>Initial cost: <strong></strong> 0yen</p>
          <p>Monthly cost: <strong>2,068yen	</strong></p>
          <p>Minimum contract period: <strong>None</strong> </p>
          <p>Free trial: <strong></strong>14 days</p>
        </div>
        <div class="item-footer">
          <button class="btn-lg">Select</button>
        </div>
      </div>
      <div class="item">
        <div class="item-header">SERVICE B</div>
        <div class="item-content">
          <p>Initial cost: <strong></strong> 3,300yen</p>
          <p>Monthly cost: <strong>4,169yen〜	</strong></p>
          <p>Minimum contract period: <strong>6 months</strong> </p>
          <p>Free trial: <strong></strong>7 days</p>             </div>
        <div class="item-footer">
          <button class="btn-lg">Select</button>
        </div>
      </div>
    </div>
</main>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');



/*
CSS rules to specify families:
font-family: 'Lato', sans-serif;
*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  scroll-behavior: smooth;
}

.page-position {
  position: absolute;
}

.vw {
  width: 60vw;
}

#header {
  position: fixed;
  top: 0;
  display: flex;
  align-items: center;
  background-color: #000000;
  width: 100%;
  height: 77px;
  color: grey;
}

#header-img {
  margin: 0px 60px;
}

header ul li {
  display: inline;
  margin-right: 3.1rem;
  font-size: 19px;
}

ul li a {
  text-decoration: none;
  color: #696969;
  -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            -ms-transition: all 1s ease;
            transition: all 1s ease;
}

ul li a:hover {
  text-decoration: bold;
  color: white;
  transition: 0.8s;
  cursor: pointer;
}


#signup {
  padding-top: 105px;
  height: 350px;
  background: #eee;
}
#signup_title {
  text-align: center;
  font-size: 60px;
  font-weight: 500;
  color: black;
}
#description {
  text-align: center;
  font-size: 1.8rem;
  font-style: italic;
  font-weight: 200;
  padding-top: 7px;
}

#form {
 text-align: center;
  padding-top: 25px;
 
}

#email {
 border-radius: 3px;
  width: 275px;
  height: 32px;
  padding-left: 5px;
  padding: 5px;
  -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            -ms-transition: all 1s ease;
            transition: all 1s ease;
}

#email:focus {
  border-color: blue;
  transition: 1s;
  width: 290px;
}

#submit {
  width: 140px;
  height: 35px;
  border-radius: 5px;
  background-color: #FFEF00;
  font-size: 20px;
  padding-top: 2px;
  -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            -ms-transition: all 1s ease;
            transition: all 1s ease;

}

#submit:hover {
  background-color: #FFA500;
  transition: 1s;
  box-shadow: 5px 10px;
  
}


#main {
  height: auto;
  width: 100%;
  padding-top: 25px;
  background-color: #F5FFFA;
}

.title {
  font-size: 55px;
  font-style: bold;
}

.des {
  font-size: 40px;
  font-style: bold;
  padding-top: 10px;
}

.info {
  font-size: 18px;
}


.line-background {
  height: 100px;
  width: 100%;
  background-color: black;
}
.container{
  padding: 2.6rem 10rem 0rem 10rem;
}
@media (max-width:650px){
  .container{
    padding: 2rem 1rem;
  }
}
.row{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 2.6rem 0 2.6rem 0;
  border-bottom: 1px solid #ddd;
}
.col-md-8{
  width: 66.66%;
}
.col-md-4{
  width: 33.34%;
  text-align: center;
}
.icon{
  width: 100%;
  height: 100%;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: space-around;
}
i{
  font-size: 300px;
  color: orange;
}
.fa-headphones-alt {
  color: black;
  margin-left: 95px;
  margin-top: 65px;
  vertical-alignment: center;
}
.info{
  font-size: 18px;
  margin: 10px 0;
  font-weight: 400;
}
.more-info{
  font-size: 17px;
  font-weight: 300;
}
@media (max-width:650px){
  .row{
    display: flex;
    flex-direction: column;
  }
  .col-sm-12{
    width:100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

.reason {
  font-size: 20px;
}

.expl {
  font-size: 17px;
}

.fa-globe-americas {
  color: #32CD32;
  margin-top: 30px;
  margin-left: -90px;
  font-size: 305px;
}

#streams {
  text-align: center;
  font-size: 75px;
  padding-top: 15px;
}

#tokyo {
  margin-left: -12px;
}

.chill {
  margin-left: 80px;
  padding-right: 15px;
}

#view {
  text-align: center;
  width: 140px;
  height: 35px;
  border-radius: 5px;
  background-color: #FFEF00;
  font-size: 20px;
  padding-top: 2px;
  text-decoration: none;
  margin-left: 560px;
  -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            -ms-transition: all 1s ease;
            transition: all 1s ease;
}

#view:hover {
  background-color: #FFA500;
  transition: 1s;
  box-shadow: 5px 10px;
  text-decoration: none;
  
}

#pricing {
  text-align: center;
  font-size: 75px;
  padding-top: 15px;
}

.grid-items{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 350px;
  margin: 2.6rem 0;
}
.item{
  background-color: white;
  width: 100%;
  height: 100%;
  border: 0.5px solid orange;
  margin: 1rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 300px;
  transition: 0.3s;
}
.item:hover{
  box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
.item-header{
  background-color: orange;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 100%;
  font-weight: 700;
  font-size: 20px;
  color: white;
  padding: 1rem;
}
.item-content{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #ddd;
}
.item-footer{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
}
.btn-lg {
  background-color: orange;
  padding: 0.8rem 2rem;
  color: white;
  border: none;
  border-radius: 1px;
  font-size: 17px;
  transition: 0.3s;
}
.btn-lg:hover{
  background: darkorange;
}
@media (max-width:800px){
  .grid-items{
    flex-wrap: wrap;
  }
}

#footer {
  width: 100%;
  height: 170px;
  background-color: #000000;
}

#thanks {
  color: white;
  text-align: center;
  font-size: 55px;
  padding-top: 15px;
}

#text {
  color: gray;
  text-decoration: none;
  font-size: 50px;
  text-align: center;
  padding-top: 10px;
}

#Y {
  text-decoration: none;
  color: #696969;
  -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            -ms-transition: all 1s ease;
            transition: all 1s ease;
}

#I {
  text-decoration: none;
  color: gray;
}

#T {
  text-decoration: none;
  color: #696969;
  -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            -ms-transition: all 1s ease;
            transition: all 1s ease;
}

#F {
  text-decoration: none;
  color: #696969;
  -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            -ms-transition: all 1s ease;
            transition: all 1s ease;
}

#Y:hover {
  color: white;
  transition: 0.8s;
  cursor: pointer;
}

#I:hover {
  color: white;
  transition: 0.8s;
  cursor: pointer;
}

#T:hover {
  color: white;
  transition: 0.8s;
  cursor: pointer;
}

#F:hover {
  color: white;
  transition: 0.8s;
  cursor: pointer;
}

@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
  }
}

@media (max-width: 650px) {
  #signup {
   height: 400px; 
  }
  header ul li {
    font-size: 15px;
    margin-right: 1px;
  }
  header {
    height: 25px;
    width: 100%;
  }
  #header-img {
    height: 45px;
  }
  .title {
    text-align: center;
  }
  .des {
    text-align: center;
  }
  .fa-headphones-alt{
    text-align: center;
    padding-right: 60px;
  }
  .fa-globe-americas {
    padding-left: 140px;
  }
  .reason {
    padding-left: 10px;
  }
  .expl {
    padding-left: 10px;
  }
  .chill {
    padding-right: 80px;
  }
  #tokyo {
    padding-left: 107px;
  }
  button {
    margin-left: 260px;
  }
}
              
            
!

JS

              
                //The logo that I use belong to a Japanese company called BGMC station, that channel has a Youtube channel. And here's the link: https://www.youtube.com/channel/UCJhjE7wbdYAae1G25m0tHAA

//Also, here's their website: https://bgmc-station.com/en

//You should listen to their music because they are really good
              
            
!
999px

Console