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" type="text/css" href="myown-template.css">
        <script src="https://kit.fontawesome.com/298723f7b0.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="header">
            <h1>Belle &amp; Carrie <span>Rehabilitation Yoga</span></h1>
          <div id="nav">
            <ul>
                <li>
                    <a href="#home">Home</a>
                </li>
                <li>
                    <a href="#about">About</a>
                </li>
                <li>
                    <a href="#classes">Classes</a>
                </li>
                <li>
                    <a href="#contact">Contact</a>
                </li>
                <li>
                    <a href="#blog">Blog</a>
                </li>
            </ul>
          </div>
        </div>
        <div id="home" class="body-content">
            <div id="tagline">
                <h1 id="yoga">Yoga
                </h1>
                <hr>
                <p id="para">For Better Health &amp; Flexibility
                </p>
            </div>
            <div id="image">
                <img src="https://freewebsitetemplates.com/preview/rehabilitation-yoga/images/lady-in-yoga.jpg" alt="lady doing yoga" class="figure">
            </div>
        </div>
        <div id="about" class="body-content">
            <h2>About</h2>
            <div class="container">
                <div class="content">
                    <h3>We Have Free Templates for Everyone</h3>
                    <p>
                        Our website templates are created with inspiration, checked for quality and originality and meticulously sliced and coded. What's more, they're absolutely free! You can do a lot with them. You can modify them. You can use them to design websites for clients, so long as you agree with the Terms of Use. You can even remove all our links if you want to.
                    </p>
                    <h3>We Have More Templates for You</h3>
                    <p>
                        Looking for more templates? Just browse through all our Free Website Templates and find what you're looking for. But if you don't find any website template you can use, you can try our Free Web Design service and tell us all about it. Maybe you're looking for something different, something special. And we love the challenge of doing something different and something special.
                    </p>
                    <h3>Be Part of Our Community</h3>
                    <p>
                        If you're experiencing issues and concerns about this website template, join the discussion on our forum and meet other people in the community who share the same interests with you.
                    </p>
                    <h3>Template Details</h3>
                    <p>
                        Design version 3. Code version 1. Website Template details, discussion and updates for this Belle &amp; Carrie Rehabilitation Yoga Web Template. Website Template design by Free Website Templates. Please feel free to remove some or all the text and links of this page and replace it with your own About content.
                    </p>
                </div>
                <img src="https://freewebsitetemplates.com/preview/rehabilitation-yoga/images/lady-in-yoga.jpg" alt="lady doing yoga" class="figure-2">
            </div>
        </div>    
        <div id="classes" class="body-content">
            <h2 id="class">Classes</h2>
            <div class="container">
                <div class="content">
                    <div class="section">
                        <h3>Beginners</h3>
                        <p>
                            You can remove any link to our website from this website template, you're free to use this website template without linking back to us.
                        </p>
                        <span>MWF : 8AM to 9AM</span>
                        <span>TTHS : 10AM-11AM</span>
                    </div>
                    <div class="section">
                        <h3>Intermediate</h3>
                        <p>
                            You can remove any link to our website from this website template, you're free to use this website template without linking back to us.
                        </p>
                        <span>MWF : 10AM-11AM</span>
                        <span>TTHS : 1PM-2PM</span>
                    </div>
                    <div class="section">
                        <h3>Advanced</h3>
                        <p>
                            You can remove any link to our website from this website template, you're free to use this website template without linking back to us.
                        </p>
                        <span>MWF : 1PM-2PM</span>
                        <span>TTHS : 8AM to 9AM</span>
                    </div>
                </div>
                <img src="https://freewebsitetemplates.com/preview/rehabilitation-yoga/images/lady-in-yoga.jpg" alt="lady doing yoga" class="figure-2">
            </div>
        </div>
        <div id="contact" class="body-content">
            <h2>Contact</h2>
            <form action="index.html">
                <h3>Inquiries</h3>
                <label for="name">
                    <span>Name</span>
                    <input type="text" id="name">
                </label>
                <label for="email">
                    <span>Email</span>
                    <input type="text" id="email">
                </label>
                <label for="subject">
                    <span>Subject</span>
                    <input type="text" id="subject">
                </label>
                <label for="message">
                    <span>Message</span>
                    <textarea name="message" id="message" cols="30" rows="10"></textarea>
                </label>
                <input type="submit" id="send" value="Send">
            </form>
        </div>   
        <div id="blog" class="body-content">
            <h2>Blog</h2>
            <ul class="blog">
                <li>
                    <img src="https://i.postimg.cc/SjChDpv5/group-yoga.jpg" alt="Yoga in group">
                    <h3>Summer Yoga Classes</a></h3>
                    <span>April 7, 2023 </span>
                    <p>
                        This website template has been designed by Free Website Templates for you, for free. You can replace all this text with your own text. This is just a place holder, so you can see what the site would look like. This is just a place holder, so you can see what the site would look like.
                    </p>
                </li>
                <li>
                    <img src="https://i.postimg.cc/7fNyrnDn/yoga-concentrating.jpg" alt="yoga concentrating">
                    <h3>Inner peace</a></h3>
                    <span>April 6, 2023 </span>
                    <p>
                        You can remove any link to our website from this website template, you're free to use this website template without linking back to us. This is just a place holder, so you can see what the site would look like. This is just a place holder, so you can see what the site would look like.
                    </p>
                </li>
                <li>
                    <img src="https://i.postimg.cc/1fSZdjxz/lying-yoga.jpg" alt="Yoga lying down feet in the air">
                    <h3>A Strong and Flexible Body</a></h3>
                    <span>April 5, 2023 </span>
                    <p>
                        If you're having problems editing this website template, then don't hesitate to ask for help on the forums. This is just a place holder, so you can see what the site would look like. This is just a place holder, so you can see what the site would look like.
                    </p>
                </li>
            </ul>
        </div>
        <div id="footer">
            <div id="down">
                <span id="bottom">123 St. City Location, Country | 987654321</span>
                <p id="para-2">
                    &copy; 2023 by Belle &amp; Carrie Rehabilitation Yoga. All rights reserved.
                </p>
            </div>
            <div id="connect"> 
                <i class="fa fa-facebook"></i> 
                <i class="fa fa-twitter"></i> 
                <i class="fa fa-pinterest"></i>
                <i class="fa fa-whatsapp"></i> 
            </div>    
            
        </div>
    </body>

              
            
!

CSS

              
                *{
    padding: 0;
    margin: 0;
}
html{
    background: #077054;
}
#header{
    width: 100%;
    z-index: 3;
}
#header ul{
    margin-bottom: 8px;
    padding: 0;
    list-style: none;
    text-align: center;
}
#header li{
    display: inline;
    
}
#header li a{
    padding-left: 25px;
    padding-right: 5px;
    text-decoration: none;
    color: #b6d8cf;
}
#header li a:hover{
    color: #99fa99;
}
#header a.active{
    color: #d3a3ff;
}
#header h1{
    display: block;
    text-align: center;
    font-size: 4em;
    font-weight: normal;
    color: #99fa99;
    float: none;
    padding: 30px 20px;
}
#header span{
    display: block;
    text-align: center;
    text-transform: uppercase;
    color: #b6d8cf;
    font-size: 1.8rem;
    padding-bottom: 30px;
}

#home{
    padding-top: 0;
    margin-top: 0;
}

#home #tagline{
    background: #ffffff;
    margin: 20px auto 0;
	padding: 45px 0 46px;
    width: 90%;
    float: none;
    text-align: center;
}
#home #tagline #yoga{
    background-size: 37% auto;
    line-height: 1em;
    padding: 0 0 50px;
    color: #26ca57;
    font-size: 5em;
    text-transform: uppercase;
}
#home #tagline #para {
    font-size: 4em;
    line-height: 2em;
    padding: 43px 10px;
    color: #26ca57;
    overflow: hidden;
}
hr{ 
    height: 10px;
    width: 25%;
    box-shadow: none;
    background-color: #d3a3ff;
    text-align: center;
    margin: 0 auto;
    border: none;
}
#home .figure{ 
    display: block;
    margin-left: auto;   
    margin-right: auto; 
    width: 90%;
    max-width: 100%;
    height: 70%;
}

/* About styles */
#about{
    background: #ffffff;
    margin: 20px auto 0;
    line-height: 30px;
    color: #077054;
    width: 90%;
    
}
#about h2{
    color: #21a51e;
    font-size: 35px;
	font-weight: normal;
	line-height: 30px;
    margin: 0;
    padding: 20px 20px 44px;
}
.container{
    padding-left: 20px;
    padding-right: 20px;
}
    /* about styles ends */

    /* classes styles begins */

#classes h2{
    color: #21a51e;
    font-size: 35px;
	font-weight: normal;
	line-height: 10px;
    margin: 0;
    padding: 20px 20px 44px;
}
#classes{
    background: #ffffff;
    margin: 20px auto 0;
    line-height: 30px;
    color: #077054;
    width: 90%;
}
    /* classes styles ends */
    /* contact styles start */
#contact{
    background: #ffffff;
    margin: 20px auto 0;
    line-height: 30px;
    color: #077054;
    width: 90%;
}
#contact h2{
    color: #21a51e;
    font-size: 35px;
    font-weight: normal;
    line-height: 10px;
    margin: 0;
    padding: 20px 20px 44px;
}
#contact form {
	margin: 0 auto;
	padding: 0 20px;
	width: auto;
}
#contact form h3{
	padding: 0;
}
#contact form label input,
#contact form label textarea {
    background: #d1d3d4;
    border: 1px solid #b6d8cf;
    color: #315f52;
	border-radius: 2px;
	padding: 0 3%;
    width: 93%;
}
#contact form input#send {
	margin: 8px 2px 0 0;
	padding: 0;
    text-align: center;
    background: #077054;
    color: #99fa99;
}
    /* contact styles ends */
    /* blog styles start */
#blog{
    background: #ffffff;
    margin: 20px auto 0;
    line-height: 30px;
    color: #077054;
    width: 90%;
}
#blog h2{
    color: #21a51e;
    font-size: 35px;
    font-weight: normal;
    line-height: 10px;
    margin: 0;
    padding: 20px 20px 44px;
    }
#blog ul.blog {
    padding: 0 20px;
    list-style: none;
}
#blog ul.blog li {
	padding: 30px 0 0;
}
#blog ul.blog li img {
	margin: 0 0 20px;
	width: 100%;
}
#blog ul.blog li h3 {
	line-height: 1.35em;
}
    /* blog styles ends */

#footer {
    padding: 20px 0;
    width: 100%;
    text-align: center;
}
#footer #down #bottom{
    line-height: 2em;
    padding: 10px 0 0;
    display: block;
    font-size: 25px;
    color: #99fa99;
}
#footer #down #para-2{
    font-size: 1.125em;
    line-height: 1.65em;
    padding: 20px 0 0;
    color: #b6d8cf;
}
#footer #connect{
    font-size: 2.5em;
    color: #99fa99;
    float: none;
	margin: 30px auto 0;
	max-width: 185px;
}
@media screen
and (min-width : 300px) and (max-width : 899px) {
	#header h1 {
		font-size: 2em;
        font-weight: bold;
	}
	#header span {
		font-size: 0.6em;
		font-weight: normal;
        padding-top: 0.6em;
  }
     #header li a{
        font-size: 18px;
        padding-left: 10px;
        padding-right: 1px;
    }
    
	#home #tagline #yoga {
		font-size: 3.375em;
	}
	#home #tagline #para {
		font-size: 3.125em;
        line-height: 1.5em;
        padding-bottom: 0;
	}
    #footer #down #bottom {
        line-height: 1em;
        padding: 8px 0 0;
        display: block;
        font-size: 20px;
   }
    #footer #down #para-2 {
        font-size: 16px;
        line-height: 0.95em;
        padding: 8px 0 0;
        text-align: center;
   }
}
@media screen 
and (min-width : 900px){
    #header ul{
        background-color: none;
    }
    #header li a{
        text-transform: uppercase;
        line-height: 1.5rem;
        font-size: 20px;
        cursor: pointer;
        display: inline;
        padding-left: 70px;
        padding-right: 30px;
    }
    #home{ 
        display: flex; 
        flex-direction: row;
        background-color: #ffffff;
        width: 70%;
        align-items: center;
        margin-left: 17%;
  }
    #home #tagline{
        width: 90%;
        height: 70%;
        padding-left: 45px;
    }
    #home #tagline #yoga{
        background-size: 37% auto;
        line-height: 1em;
        padding: 0 0 50px;
        color: #26ca57;
        font-size: 5em;
    }
    #home #tagline #para {
        font-size: 6em;
        line-height: 1em;
        padding: 43px 15px 43px 20px;
        color: #26ca57;
    }
  .figure{
        margin-top: 20%;
        margin-bottom: 20%;
        width: 90%;
        padding-right: 120px;
    }
    /* about-styles */
    #about{
        width: 70%;
        margin-left: 17%;
    }
    .container{ 
        display: flex; 
        flex-direction: row;
        width: 90%;
        align-items: center;
        margin-left: 17px;
    }
    .content {
        max-width: 90%;
        height: 40%;
        margin-bottom: 35px;

    }
    .figure-2{
        margin-top: 0;
        margin-bottom: 20%;
        width: 70%;
        margin-left: 20%;
    }
    /* classes styles */
    #classes{
        width: 70%;
        margin-left: 17%;
        
    }
    #classes h2{
        color: #21a51e;
        font-size: 35px;
        font-weight: normal;
        line-height: 10px;
        margin: 0;
        padding: 70px 20px 0px;
    }
    /* contact styles */
   
    #contact{
        background: #ffffff;
        margin: 20px auto 0;
        line-height: 30px;
        color: #077054;
        width: 70%;
        margin-left: 17%;
        padding-bottom: 20px;
    }
    #contact h2{
        color: #21a51e;
        font-size: 35px;
        font-weight: normal;
        line-height: 10px;
        margin: 0;
        padding: 20px 20px 44px;

    }
    #contact form {
        margin: 25px auto 0;
        overflow: hidden;
        width: 460px;
    }
    #contact form label {
        display: block;
        padding: 15px 0 0;
    }
    #contact form label span {
        display: block;
        line-height: 27px;
        padding: 0 0 5px
    }
    #contact form label input {
        background: #d1d3d4;
        border: 1px solid #b6d8cf;
        color: #315f52;
        display: block;
        font-size: 14px;
        height: 46px;
        line-height: 46px;
        padding: 0 5px;
        width: 448px;
    }
    #contact form label textarea {
        background: #d1d3d4;
        border: 1px solid #b6d8cf;
        color: #315f52;
        display: block;
        font-size: 14px;
        height: 250px;
        line-height: 30px;
        overflow: auto;
        padding: 0 5px;
        resize: none;
        width: 448px;
    }
    #contact form input#send {
        background: #077054;
        border: none;
        border-radius: 5px;
        color: #99fa99;
        cursor: pointer;
        font-size: 14px;
        float: right;
        height: 30px;
        margin: 8px 0 0;
        width: 50px;
    }
    #contact form input#send:hover {
        background: #d3a3ff;
        color: #000000;
    }
    /* blog styles */
    #blog{
        background: #ffffff;
        margin: 20px auto 0;
        line-height: 30px;
        color: #077054;
        width: 70%;
        margin-left: 17%;
        padding-bottom: 20px;
    }
    #blog h2{
        color: #21a51e;
        font-size: 35px;
        font-weight: normal;
        line-height: 10px;
        margin: 0;
        padding: 20px 20px 44px;

    }
    #blog ul.blog {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #blog ul.blog li {
        overflow: hidden;
        padding: 104px 100px 0 0;
    }
    #blog ul.blog li:first-child {
        padding: 0 100px 0 0;
    }
    #blog ul.blog li img {
        display: block;
        float: left;
        margin: 0 20px 0 0;
        max-width: 100%;
        width: auto;
    }
    #blog ul.blog li h3 {
        line-height: 20px;
        padding: 0 0 8px;
    }
    

}
/* hide the body contents initially */
/* #home,  */
#about,
#classes,
#contact,
#blog{
    display: none;
}

              
            
!

JS

              
                $("#nav a").click(function(e){
  e.preventDefault();
  $(".body-content").hide();
  var toShow = $(this).attr('href');
  $(toShow).show();
});
              
            
!
999px

Console