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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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 href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

	<div class="overlay"></div>
	<div class="search-input">
		<h6 class="mb-3 text-center text-white"><b>Feeling Stuck?</b> Search our Knowledge Base</h6>
		<div class="input-group">
			<input placeholder="search" class="search-input-styles" class="form-control" />
		</div>
	</div>


<div class="top-nav-wrapper">
  <div class="top-nav">
    <div class="hamburger-menu">
      <div class="hamburger-icon">
        <div class="bar-one"></div>
        <div class="bar-two"></div>
        <div class="bar-three"></div>
      </div>
    </div>
    <div class="logo">HostGator</div>
    <div class="nav-slider"></div>
    <div class="dashboard">
      <button class="active dashboard-btn nav-btn">Dashboard</button>
    </div>
    <div class="hosting">
          <div class="hosting-btn nav-btn">Hosting</div>
    </div>
    <div class="marketplace">
          <button class="marketplace-btn nav-btn">Marketplace</button>
    </div>
    <div class="domains">
          <button class="domain-btn nav-btn">Domains</button>
    </div>
    <div class="nav-slider"></div>
    <div class="search">
      <button class="material-icons not-active-icon search-btn">search</button>
    </div>
    <div class="message">
      <button class="material-icons not-active-icon message-btn">question_answer</button>
    </div>
    <div class="profile-info">
      <button class="material-icons not-active-icon profile-btn">person</button>
    </div>
  </div>
</div>

<div class="mobile-nav">
  <div class="mobile-dashboard-link">Dashboard</div>
  <div class="mobile-dashboard-link">Hosting</div>
  <div class="mobile-dashboard-link">Marketplace</div>
  <div class="mobile-dashboard-link">Domains</div>
</div>

<div class="main-page-wrapper">
  <div class="account-info-drop-down mt-2 hidden temporary-box-shadow">
   <div class="account-info-header border-bottom">
    <p class="my-0  pt-2 pl-3">Brian Glover</p>
     <p class="my-0 pl-3 pb-2 text-secondary"><small>Client ID: 3004877</small></p>
  </div>
 <div class="mobile-manage-account-link mobile-dropdown-link pl-3 manage-account-btn">Manage account</div>
  <div class="mobile-request-migration-link mobile-dropdown-link pl-3">Request migration</div>
      <div class="mobile-request-migration-link mobile-dropdown-link pl-3 border-top">Sign out</div>

    
    
    <!--  <div class="billing-mobile-nav-container">
      <div class="billing-text">Billing</div>
      <div class="billing-icon">
        <div class="material-icons keyboard-icon">keyboard_arrow_down</div>
      </div>
    </div> 
    
     <div class="mobile-setting-link mobile-dropdown-link">Billing<span class="material-icons keyboard-icon">keyboard_arrow_down</span></div> 
    <div class="billing-dropdown-menu">
      <div class="mobile-dropdown-link-billing">Billing History</div>
      <div class="mobile-dropdown-link-billing">Make Payment</div>
      <div class="mobile-dropdown-link-billing">Credit Cards</div>
      <div class="mobile-dropdown-link-billing">PayPal</div>
      <div class="mobile-dropdown-link-billing">Credits</div>

    </div>
  <div class="mobile-setting-link mobile-dropdown-link border-bottom">Request Migration</div>
  <div class="mobile-setting-link mobile-dropdown-link">Support</div>
  <div class="mobile-setting-link mobile-dropdown-link border-bottom">HostGator.com</div>
  <div class="mobile-setting-link mobile-dropdown-link">Logout</div> -->

</div>
  
  
  
  
  
</div>


<!--  <div class="page mt-4 message-page">
    <div class="mt-5">
       <h4 class="mb-4">Hosting</h4>
    </div>
 </div>  -->
  
  
  
  
<!--   <div class="container">
    <h4 class="mt-4 mb-4">Title</h4>
	<div class="row">
    
    

		<div class="col-lg-8">
			
			  <div class="card border-0 mb-4 temporary-box-shadow">
    <div class="d-flex">
      <div class="pl-5 pr-2 d-flex align-items-center justify-content-center">
        <div class="material-icons icons">account_circle</div>
      </div>
        <div class="flex-fill">
           <div class="card-body">
             <p class="card-title mt-2 text-secondary">Primarydomain.com</p>
						 <p class="card-subtitle ellipsis-length-long mb-2">RE: Ticket #826</p>
           </div>
        </div>
         <div class="d-flex align-items-center justify-content-center">
					 <div class="mx-5 small text-secondary">2 days ago</div>
       	 </div>
      </div>
    </div>
  </div>
			

		<div class="col-lg-4">
            

			<div class="card border-0 bg-primary">
				<div class="card-body">
					<h5 class="font-weight-bold title-line-height text-white mb-4">HostGator gives FREE SSL Certificates to customers!</h5>
					<p class="text-white mb-4">Lorem ipsum dolor milk shake in the house?</p>
					<button class="btn btn-warning text-white mb-2">Read More</button>
				</div>
			</div>
	</div>
		
	</div>
</div> -->


<div class="container">
  <div class="page my-4 dashboard-page">
    <div class="mt-5">
       <h4 class="mb-4">My Sites</h4>
  <div class="row">
    <div class="col-lg-3 col-md-6">
      <div class="card border-0 temporary-box-shadow mysites-card mb-4">
        <!-- Temporary Div that will be changed to an img tag STARTS  -->
        <div class="card-img-top weebly-bg">
          <svg width="66px" height="51px" viewBox="0 0 66 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="weebly-logo">
    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Website-Dashboard-Copy-6" transform="translate(-284.000000, -233.000000)" fill="#FFFFFF">
            <g id="Group-6" transform="translate(248.000000, 189.000000)">
                <g id="Group-5" transform="translate(36.000000, 44.000000)">
                    <path d="M58.8016176,15.0357688 L50.1777936,39.5595769 C49.1248824,42.526448 47.3738232,44.7352604 44.0789712,44.7352604 C40.9921776,44.7352604 39.1697064,43.0018742 38.2591176,40.0318905 L33.0696168,23.7101219 L32.928588,23.7101219 L27.74244,40.0318905 C26.8300296,43.0024063 25.0070304,44.7009688 21.9210288,44.7009688 C18.6256752,44.7009688 16.8730584,42.5106191 15.8219424,39.5434553 L7.2685008,15.1682529 C6.567264,13.1184746 6.2168832,11.8501394 6.2168832,10.3646154 C6.2168832,8.10334152 8.321412,6.27072534 11.2645896,6.27072534 C13.7189712,6.27072534 15.471588,7.90121024 16.032588,10.303295 L21.8521776,29.745728 L21.9914112,29.745728 L27.8811456,10.7317133 C28.6537944,7.97655056 30.0552648,6.27072534 33.0010296,6.27072534 C35.9452632,6.27072534 37.3469712,7.97370402 38.1180888,10.7288401 L44.0080872,29.745728 L44.1472944,29.745728 L49.9687056,10.303295 C50.52894,7.90121024 52.2812928,6.26476622 54.736176,6.26476622 C57.6793536,6.26476622 59.7831168,8.10411301 59.7831168,11.2138967 C59.7831168,12.3437621 59.2906776,13.4788152 58.8016176,15.0355028 L58.8016176,15.0357688 Z M54.736176,0 C49.5871464,0 45.2958528,3.44958663 43.9797072,8.61228777 C41.60706,0.85473493 35.5342944,0.00598572502 33.0010296,0.00598572502 C30.4682928,0.00598572502 24.397824,0.85473493 22.0207944,8.61047875 C20.7041472,3.45272581 16.412352,0.00598572502 11.2645896,0.00598572502 C4.9479408,0.00598572502 0,4.55633389 0,10.3651475 C0,12.9340078 0.6298248,14.9848502 1.3909104,17.2092255 L9.9675576,41.6498985 C12.8393232,49.7555811 18.6898536,50.9659745 21.9212928,50.9659745 C26.9903832,50.9659745 30.9403248,48.3498136 33.000264,43.7132178 C35.061972,48.3705907 39.0124416,51 44.0789712,51 C47.3065296,51 53.1511464,49.7875315 56.0376168,41.6519735 L64.6614408,17.1281655 L64.7287344,16.9257947 C64.8272064,16.6114511 64.9267344,16.316581 65.02056,16.0365022 C65.4797352,14.6673674 66,13.1156014 66,11.2138967 C66,4.71637887 61.2629424,0 54.736176,0 Z" id="Fill-1"></path>
                </g>
            </g>
        </g>
    </g>
</svg>
        </div>
        <!-- Temporary Div that will be changed to an img tag ENDS  -->
          <div class="card-body">
          <div class="d-flex">
            <h5 class="card-text font-weight-bold">mywebsite.com</h5>
            <div class="arrow-group ml-2">
              <div class="arrow-head"></div>
              <div class="arrow-steam"></div>
            </div>
          </div>
          <p class="card-text">Weebly</p>  
        </div>
      </div>
    </div>
    
    <div class="col-lg-3 col-md-6">
      <div class="card border-0 temporary-box-shadow mysites-card mb-4">
        <!-- Temporary Div that will be changed to an img tag STARTS  -->
        <div class="card-img-top wp-bg">
          <svg width="58px" height="58px" viewBox="0 0 58 58" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="wp-logo">
    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Website-Dashboard-Copy-6" transform="translate(-288.000000, -399.000000)" fill="#FFFFFF" fill-rule="nonzero">
            <g id="Group-9" transform="translate(248.000000, 358.000000)">
                <g id="1484701428_wordpress-copy" transform="translate(40.000000, 41.000000)">
                    <path d="M29,0 C13.010125,0 0,13.0097184 0,28.9990938 C0,44.9884691 13.010125,58 29,58 C44.989875,58 58,44.9884691 58,28.9990938 C58,13.0097184 44.989875,0 29,0 Z M2.9271875,28.9990938 C2.9271875,25.2183369 3.737375,21.6315115 5.1855625,18.3890503 L17.621125,52.4629855 C8.92475,48.2381801 2.9271875,39.3191463 2.9271875,28.9990938 Z M29,55.072904 C26.44075,55.072904 23.9703125,54.6995406 21.6358125,54.0126246 L29.4585625,31.28096 L37.4734375,53.2368988 C37.526,53.3637699 37.5894375,53.4833911 37.660125,53.5939502 C34.948625,54.5509203 32.03775,55.072904 29,55.072904 Z M32.592375,16.7741633 C34.162,16.6926034 35.57575,16.527671 35.57575,16.527671 C36.9804375,16.3609262 36.8155,14.2965532 35.409,14.3781132 C35.409,14.3781132 31.1876875,14.7097903 28.459875,14.7097903 C25.897,14.7097903 21.5923125,14.3781132 21.5923125,14.3781132 C20.187625,14.2947408 20.0226875,16.4424862 21.427375,16.527671 C21.427375,16.527671 22.75775,16.6926034 24.1624375,16.7741633 L28.22425,27.9061904 L22.5185,45.0174682 L13.0264375,16.7741633 C14.597875,16.6926034 16.0098125,16.527671 16.0098125,16.527671 C17.410875,16.3609262 17.2495625,14.2965532 15.8430625,14.3781132 C15.8430625,14.3781132 11.6199375,14.7097903 8.892125,14.7097903 C8.40275,14.7097903 7.826375,14.6989157 7.21375,14.6771663 C11.879125,7.59957501 19.8921875,2.92709603 29,2.92709603 C35.7878125,2.92709603 41.9684375,5.52070248 46.6084375,9.7726946 C46.4960625,9.76363239 46.3855,9.74913284 46.2695,9.74913284 C43.7084375,9.74913284 41.8905,11.9802506 41.8905,14.3781132 C41.8905,16.527671 43.13025,18.3437393 44.4515625,20.4932971 C45.443,22.2278054 46.603,24.4589232 46.603,27.6850723 C46.603,29.9143777 45.743875,32.5043592 44.6183125,36.112934 L42.0155625,44.799975 L32.592375,16.7741633 Z M51.8791875,16.4914221 C53.914625,20.206931 55.0728125,24.4661729 55.0728125,28.9990938 C55.0728125,38.6195431 49.8600625,47.0147808 42.1098125,51.536827 L50.0739375,28.5115465 C51.5601875,24.7924127 52.0568125,21.8181932 52.0568125,19.1756508 C52.055,18.2132433 51.993375,17.3233336 51.8791875,16.4914221 Z" id="Shape"></path>
                </g>
            </g>
        </g>
    </g>
</svg>
        </div>
        <!-- Temporary Div that will be changed to an img tag ENDS  -->
          <div class="card-body">
          <div class="d-flex">
            <h5 class="card-text font-weight-bold">mywebsite.io</h5>
            <div class="arrow-group ml-2">
              <div class="arrow-head"></div>
              <div class="arrow-steam"></div>
            </div>
          </div>
          <p class="card-text">WordPress</p>  
        </div>
      </div>
    </div>
    
    <div class="col-lg-6">
      
  <div class="card border-0 mb-4 temporary-box-shadow">
    <div class="d-flex">
      <div class="pl-4 pr-2 d-flex align-items-center justify-content-center red">
        <div class="material-icons icons">explore</div>
      </div>
        <div class="flex-fill">
           <div class="card-body">
             <p class="card-title font-weight-bold mt-2">Primarydomain.com</p>
             <p class="card-subtitle text-secondary ellipsis-length-long mb-2">Plan: <b>Shared / Baby</b>
<!--                <span class="ml-4">Package ID: <b>3452321</b></span></p> -->
           </div>
        </div>
          <div class="d-flex align-items-center justify-content-center">
         <div class="arrow-group mt-3 mr-3">
          <div class="arrow-head"></div>
          <div class="arrow-steam"></div>
       </div>
      </div>
    </div>
  </div>
      
        <div class="card border-0 mb-4 temporary-box-shadow">
    <div class="d-flex">
        <div class="pl-4 pr-2 d-flex align-items-center justify-content-center red">
        <div class="material-icons icons">explore</div>
      </div>
        <div class="flex-fill">
           <div class="card-body">
             <p class="card-title font-weight-bold mt-2">Primarydomain.com</p>
             <p class="card-subtitle text-secondary ellipsis-length-long mb-2">Plan: <b>Shared / Baby</b>
<!--                <span class="ml-4">Package ID: <b>3452321</b></span></p> -->
           </div>
        </div>
      <div class="d-flex align-items-center justify-content-center">
         <div class="arrow-group mt-3 mr-3">
          <div class="arrow-head"></div>
          <div class="arrow-steam"></div>
       </div>
      </div>
    </div>
  </div>

    </div>
    
    
    

    
 
    
   
    
  
    

    


  </div>

    
      <div class="row">
    <div class="col-lg-6">
             <h4 class="mb-4">Invoicing</h4>

        <div class="card border-0 mb-4 temporary-box-shadow">
    <div class="card-body">
  <div class="d-flex">
    <div class="package-title font-weight-bold">Package</div>
    <div class="due-date-title font-weight-bold">Due Date</div>
    <div class="total-title font-weight-bold">Total</div>
    <div class="arrow-title"></div>
  </div>
  
  <div class="invoice-table">
    <div class="package py-3">
      <div class="ellipsis-length pr-2">Shared Hatchling Plan</div>

    </div>
    <div class="due-date py-3">2019-06-18</div>
    <div class="total py-3">$4.95</div>
    <div class="arrow py-3">
<!--       <button class="show-invoice-info">></button> -->
      
       <div class="arrow-group show-invoice-info">
          <div class="arrow-head"></div>
          <div class="arrow-steam"></div>
       </div>
    </div>
  </div>
            <div class="invoice-info hidden border-bottom">
        <h6 class="font-weight-bold">Web Hosting</h6>
        <div class="mb-1">Shared Hatchling Plan</div>
        <p class="small text-secondary mb-5">Annual Cycle, $5.95/mo x 12 months (Intro 33.52% discount) Plan renew on Sept 8, 2018 @ $8.95/mo</p>
                    <div class="mb-2">Last Invoice</div>
      </div>
      

      
       <div class="invoice-table">
    <div class="package py-3">
      <div class="ellipsis-length mr-2">Business Plan</div>
    </div>
    <div class="due-date py-3">2019-06-24</div>
    <div class="total py-3">$5.95</div>
    <div class="arrow py-3"></div>
  </div>
      
       <div class="invoice-table">
    <div class="package py-3">
      <div class="ellipsis-length mr-2">Baby Plan</div>
    </div>
    <div class="due-date py-3">2019-06-20</div>
    <div class="total py-3">$3.95</div>
    <div class="arrow py-3"></div>
  </div>
      
      
      
  </div>
  </div>
      
    </div>
    <div class="col-lg-6">
      
                   <h4 class="mb-4">Domains</h4>

        <div class="card border-0 mb-4 temporary-box-shadow">
    <div class="card-body">
  <div class="d-flex">
    <div class="package-title font-weight-bold">Package</div>
    <div class="due-date-title font-weight-bold">Due Date</div>
    <div class="total-title font-weight-bold">Total</div>
    <div class="arrow-title"></div>
  </div>
  
  <div class="invoice-table">
    <div class="package py-3">
      <div class="ellipsis-length pr-2">Shared Hatchling Plan</div>

    </div>
    <div class="due-date py-3">2019-06-18</div>
    <div class="total py-3">$4.95</div>
    <div class="arrow py-3">
<!--       <button class="show-invoice-info">></button> -->
      
       <div class="arrow-group show-invoice-info">
          <div class="arrow-head"></div>
          <div class="arrow-steam"></div>
       </div>
    </div>
  </div>
            <div class="invoice-info hidden border-bottom">
        <h6 class="font-weight-bold">Web Hosting</h6>
        <div class="mb-1">Shared Hatchling Plan</div>
        <p class="small text-secondary mb-5">Annual Cycle, $5.95/mo x 12 months (Intro 33.52% discount) Plan renew on Sept 8, 2018 @ $8.95/mo</p>
                    <div class="mb-2">Last Invoice</div>
      </div>
      

      
       <div class="invoice-table">
    <div class="package py-3">
      <div class="ellipsis-length mr-2">Business Plan</div>
    </div>
    <div class="due-date py-3">2019-06-24</div>
    <div class="total py-3">$5.95</div>
    <div class="arrow py-3"></div>
  </div>
      
       <div class="invoice-table">
    <div class="package py-3">
      <div class="ellipsis-length mr-2">Baby Plan</div>
    </div>
    <div class="due-date py-3">2019-06-20</div>
    <div class="total py-3">$3.95</div>
    <div class="arrow py-3"></div>
  </div>
      
      
      
  </div>
  </div>
     
      
      

  
      
    </div>
  </div>

    
    
  </div>
    </div>
  
 <div class="page mt-4 hosting-page">
    <div class="mt-5">
       <h4 class="mb-4">Hosting</h4>
    </div>
 </div> 
  
  <div class="page mt-4 marketplace-page">
   <div class="mt-5">
     <h4 class="mb-4">Marketplace</h4>
     <div class="row">
       <div class="col-lg-3 col-md-6 col-sm-12 col-sx-12">
        <div class="card border-0 temporary-box-shadow mysites-card mb-4">
        <!-- Temporary Div that will be changed to an img tag STARTS -->
        <div class="card-img-top"></div>
        <!-- Temporary Div that will be changed to an img tag ENDS -->
          <div class="card-body">
          <div class="d-flex">
            <h5 class="card-text font-weight-bold">mywebsite.com</h5>
            <div class="arrow-group ml-2">
              <div class="arrow-head"></div>
              <div class="arrow-steam"></div>
            </div>
          </div>
          <p class="card-text">Weebly</p>  
        </div>
        </div>
       </div>
       
              <div class="col-lg-3 col-md-6 col-sm-12 col-sx-12">
        <div class="card border-0 temporary-box-shadow mysites-card mb-4">
        <!-- Temporary Div that will be changed to an img tag STARTS -->
        <div class="card-img-top"></div>
        <!-- Temporary Div that will be changed to an img tag ENDS -->
          <div class="card-body">
          <div class="d-flex">
            <h5 class="card-text font-weight-bold">mywebsite.com</h5>
            <div class="arrow-group ml-2">
              <div class="arrow-head"></div>
              <div class="arrow-steam"></div>
            </div>
          </div>
          <p class="card-text">Weebly</p>  
        </div>
        </div>
       </div>
       
              <div class="col-lg-3 col-md-6 col-sm-12 col-sx-12">
        <div class="card border-0 temporary-box-shadow mysites-card mb-4">
        <!-- Temporary Div that will be changed to an img tag STARTS -->
        <div class="card-img-top"></div>
        <!-- Temporary Div that will be changed to an img tag ENDS -->
          <div class="card-body">
          <div class="d-flex">
            <h5 class="card-text font-weight-bold">mywebsite.com</h5>
            <div class="arrow-group ml-2">
              <div class="arrow-head"></div>
              <div class="arrow-steam"></div>
            </div>
          </div>
          <p class="card-text">Weebly</p>  
        </div>
        </div>
       </div>
       
              <div class="col-lg-3 col-md-6 col-sm-12 col-sx-12">
        <div class="card border-0 temporary-box-shadow mysites-card mb-4">
        <!-- Temporary Div that will be changed to an img tag STARTS -->
        <div class="card-img-top"></div>
        <!-- Temporary Div that will be changed to an img tag ENDS -->
          <div class="card-body">
          <div class="d-flex">
            <h5 class="card-text font-weight-bold">mywebsite.com</h5>
            <div class="arrow-group ml-2">
              <div class="arrow-head"></div>
              <div class="arrow-steam"></div>
            </div>
          </div>
          <p class="card-text">Weebly</p>  
        </div>
        </div>
       </div>
       
              <div class="col-lg-3 col-md-6 col-sm-12 col-sx-12">
        <div class="card border-0 temporary-box-shadow mysites-card mb-4">
        <!-- Temporary Div that will be changed to an img tag STARTS -->
        <div class="card-img-top"></div>
        <!-- Temporary Div that will be changed to an img tag ENDS -->
          <div class="card-body">
          <div class="d-flex">
            <h5 class="card-text font-weight-bold">mywebsite.com</h5>
            <div class="arrow-group ml-2">
              <div class="arrow-head"></div>
              <div class="arrow-steam"></div>
            </div>
          </div>
          <p class="card-text">Weebly</p>  
        </div>
        </div>
       </div>
       
              <div class="col-lg-3 col-md-6 col-sm-12 col-sx-12">
        <div class="card border-0 temporary-box-shadow mysites-card mb-4">
        <!-- Temporary Div that will be changed to an img tag STARTS -->
        <div class="card-img-top"></div>
        <!-- Temporary Div that will be changed to an img tag ENDS -->
          <div class="card-body">
          <div class="d-flex">
            <h5 class="card-text font-weight-bold">mywebsite.com</h5>
            <div class="arrow-group ml-2">
              <div class="arrow-head"></div>
              <div class="arrow-steam"></div>
            </div>
          </div>
          <p class="card-text">Weebly</p>  
        </div>
        </div>
       </div>
       
              <div class="col-lg-3 col-md-6 col-sm-12 col-sx-12">
        <div class="card border-0 temporary-box-shadow mysites-card mb-4">
        <!-- Temporary Div that will be changed to an img tag STARTS -->
        <div class="card-img-top"></div>
        <!-- Temporary Div that will be changed to an img tag ENDS -->
          <div class="card-body">
          <div class="d-flex">
            <h5 class="card-text font-weight-bold">mywebsite.com</h5>
            <div class="arrow-group ml-2">
              <div class="arrow-head"></div>
              <div class="arrow-steam"></div>
            </div>
          </div>
          <p class="card-text">Weebly</p>  
        </div>
        </div>
       </div>
       
              <div class="col-lg-3 col-md-6 col-sm-12 col-sx-12">
        <div class="card border-0 temporary-box-shadow mysites-card mb-4">
        <!-- Temporary Div that will be changed to an img tag STARTS -->
        <div class="card-img-top"></div>
        <!-- Temporary Div that will be changed to an img tag ENDS -->
          <div class="card-body">
          <div class="d-flex">
            <h5 class="card-text font-weight-bold">mywebsite.com</h5>
            <div class="arrow-group ml-2">
              <div class="arrow-head"></div>
              <div class="arrow-steam"></div>
            </div>
          </div>
          <p class="card-text">Weebly</p>  
        </div>
        </div>
       </div>
       
     </div>
    </div>
  </div>
  
  <div class="page mt-4 domain-page">
    <div class="mt-5">
       <h4 class="mb-4">Domains</h4>
    </div>
  </div> 
  
    <div class="page mt-4 manage-account-page">
    <div class="mt-5">
       <h4 class="mb-4">Manage Account</h4>
      <div class="row">
        		<div class="col-lg-12">
			<div class="card border-0 mb-4 temporary-box-shadow">
				<div class="card-body">
					<h6 class="card-title font-weight-bold mt-2">Personal Information</h6>
					<p class="text-secondary mb-4">Basic info, like your name and email address, that you use on HostGator services</p>
					<p>Account Number: 30056845</p>
				</div>
				<div class="card-footer bg-white text-primary px-4 py-4"><a href="">Manage your personal info</a></div>
			</div>
		</div>
        
                		<div class="col-lg-12">
			<div class="card border-0 mb-4 temporary-box-shadow">
				<div class="card-body">
					<h6 class="card-title font-weight-bold mt-2">Personal Information</h6>
					<p class="text-secondary mb-4">Basic info, like your name and email address, that you use on HostGator services</p>
					<p>Account Number: 30056845</p>
				</div>
				<div class="card-footer bg-white text-primary px-4 py-4"><a href="">Manage your personal info</a></div>
			</div>
		</div>
        
                		<div class="col-lg-12">
			<div class="card border-0 mb-4 temporary-box-shadow">
				<div class="card-body">
					<h6 class="card-title font-weight-bold mt-2">Personal Information</h6>
					<p class="text-secondary mb-4">Basic info, like your name and email address, that you use on HostGator services</p>
					<p>Account Number: 30056845</p>
				</div>
				<div class="card-footer bg-white text-primary px-4 py-4"><a href="">Manage your personal info</a></div>
			</div>
		</div>
      </div>
      
      
    </div>
  </div> 
  
   <div class="page mt-4 message-page">
    <div class="mt-5">
       <h4 class="mb-4">Messaging</h4>
      <div class="row">
        		<div class="col-lg-8">
			
			  <div class="card border-0 mb-4 temporary-box-shadow">
    <div class="d-flex">
      <div class="pl-5 pr-2 d-flex align-items-center justify-content-center">
        <div class="material-icons icons">account_circle</div>
      </div>
        <div class="flex-fill">
           <div class="card-body">
             <p class="card-title mt-2 text-secondary">Primarydomain.com</p>
						 <p class="card-subtitle ellipsis-length-long mb-2">RE: Ticket #826</p>
           </div>
        </div>
         <div class="d-flex align-items-center justify-content-center">
					 <div class="mx-5 small text-secondary">2 days ago</div>
       	 </div>
      </div>
    </div>
  </div>
			

		<div class="col-lg-4">
            

			<div class="card border-0 bg-primary">
				<div class="card-body">
					<h5 class="font-weight-bold title-line-height text-white mb-4">HostGator gives FREE SSL Certificates to customers!</h5>
					<p class="text-white mb-4">Lorem ipsum dolor milk shake in the house?</p>
					<button class="btn btn-warning text-white mb-2">Read More</button>
				</div>
			</div>
	</div>
      </div>
      
    </div>
 </div> 

  
  
  
  
  
  
  
  
  
  
  
 









              
            
!

CSS

              
                
body {
  background:#f6f6f6;
  color:#444;
}

/* Search STARTS */
input {
  text-indent: 10px;
	border-radius:4px;
	border:none;
}

.overlay {
	position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.9);
  z-index: 2;
  cursor: pointer;
}

.search-input {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	display:none;
	// background:red;
	max-width:460px;
	// height:40px;	
	height:81px;
	z-index:3;
}



.search-input-styles {
	// height:40px;
	padding:10px;
	width:460px;
	max-width:600px;
	background:#fff;
}


/* Search ENDS */








.hidden {
  display:none;
}

.icons {
  font-size:40px !important;
}


.red {
  // background:red;
}


.temporary-box-shadow {
    box-shadow: 0 0.4rem 0.8rem 0 #E2EAF2;
}

@import url(//fonts.googleapis.com/icon?family=Material+Icons);

button:focus {outline:0;}

.page {
  // background:#fff;
  // border-radius:6px;
  // padding:20px;
  // max-width:960px;
  // width:960px;
  // margin-left:auto;
  // margin-right:auto;
  
}

.top-nav-wrapper {
  background:#377BF6;
  height:65px;
  
  .top-nav {
    max-width:1440px;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    height:65px;
    color:#fff;
  }
  .hamburger-menu {
    width:65px;
    // background:red;
    display: flex;
    align-items: center;
    flex-direction:column;
    justify-content: center;
    .hamburger-icon {
      cursor:pointer;
    .bar-one {
      height:3px;
      width:20px;
      background:#fff;
      margin:0 0 3px 0;
    }
    .bar-two {
      height:3px;
      width:20px;
      background:#fff;
      margin:0 0 3px 0;
    }
    .bar-three {
      height:3px;
      width:20px;
      background:#fff;
    }
    @media (min-width: 992px) { 
      display:none;
    }
    }
  }
  .logo {
    flex:1;
   // background:green;
    font-size:36px;
    color:#fff;
    font-weight:bold;
    line-height:65px;
    // margin:0 20px;
    padding:0 10px;
    
  }
  .nav-slider {
    flex:1;
    //background:pink;
  }
  .dashboard {
    display:none;
    @media (min-width: 992px) { 
      display: flex;
      align-items: center;
      justify-content: center;
      // flex:1;
      padding:0 12px;
    }
  }
  
  .hosting {
     display:none;
    @media (min-width: 992px) { 
      display: flex;
      align-items: center;
      justify-content: center;
      // flex:1;
      padding:0 12px;
    }
    
  }
  .marketplace {
      display:none;
    @media (min-width: 992px) { 
      display: flex;
      align-items: center;
      justify-content: center;
      // flex:1;
      padding:0 12px;
    }
  }
  .domains {
     display:none;
    @media (min-width: 992px) { 
      display: flex;
      align-items: center;
      justify-content: center;
      // flex:1;
      padding:0 12px;
    }
    
  }
  .search {
    // flex:1;
    width:50px;
     // background:orange;
       display: flex;
    align-items: center;
    justify-content: center;
  }
  .message {
    // flex:1;
    width:50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .profile-info {
    // flex:1;
    width:50px;
    // background:blue;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

  



.nav-btn {
  background:transparent;
  border-radius:6px;
  color:#fff;
  // font-weight:bold;
  font-size:14px;
  border:none;
  padding:10px 18px;
  cursor:pointer;
}

.active {
  background:#2C65CF;
  border-radius:6px;
  color:#fff;
  // font-weight:bold;
  font-size:14px;
  border:none;
  padding:10px 18px;
    cursor:pointer;
}

.not-active-icon {
  background:transparent;
  border-radius:6px;
  color:#fff;
  font-weight:bold;
  font-size:14px;
  border:none;
  padding:6px;
  cursor:pointer;
}

.active-icon {
  background:#2C65CF;
  border-radius:6px;
  color:#fff;
  font-weight:bold;
  font-size:14px;
  border:none;
  padding:6px;
  cursor:pointer;
}

.mobile-nav {
  position:absolute;
  z-index:100;
  cursor:pointer;
  // display:flex;
  // flex-direction:column;
  // max-width:991px;
  width:300px;
  .mobile-dashboard-link {
    font-size:14px;
    padding:20px;
    background:#fff;
    &:hover {
      background:#2C65CF;
      color:#fff;
    }
  }
}

  .billing-mobile-nav-container {
    display:flex;
    font-size:14px;
    padding:0 0 0 8px;
    height:40px;
    line-height:40px;
    cursor:pointer;
    .billing-text {
      flex:1;
      // background:green;
    }
    .billing-icon {
      // flex:1;
      // background:pink;
      .keyboard-icon {
        position:relative;
        top:6px;
      }
    }
    &:hover {
      background:#2C65CF;
      color:#fff;
    }
  }

.main-page-wrapper {
  max-width:1440px;
  margin-left:auto;
  margin-right:auto;
  background:green;
  position:relative;
  .account-info-drop-down {
  max-width:200px;
    width:200px;
  background:#FFF;
  border-radius:6px;
  z-index:1;
    position:absolute;
    right:0;
  .account-info-header {
    border-top-left-radius:6px;
    border-top-right-radius:6px;
    font-size:14px;
  }
  .mobile-dropdown-link {
    padding:8px;
    font-size:14px;
    cursor:pointer;
    &:hover {
      background:#2C65CF;
      color:#fff;
    }
  }
    // .mobile-dropdown-link-billing {
    //   padding:8px 8px 8px 16px;
    //   font-size:14px;
    //   cursor:pointer;
    //   &:hover {
    //     background:#2C65CF;
    //     color:#fff; 
    //   }
    // }  
}
}













.card {
  // border-radius:1rem;
}

.mysites-card:hover { 
  -webkit-transition: 0.2s linear;
  -webkit-transform: scale(0.96);
  box-shadow: 0 0.4rem 0.9rem 0 #E2EAF2;
  cursor:pointer;
}



// .card-img-top {
//   // border-top-left-radius: 10px;
//   // border-top-right-radius: 10px;
//   background:#eee;
//   height:148px;
//   width:100%;
// }

.card-img-top {
  background:#eee;
  height:148px;
  width:100%;
	position:relative;
}

.wp-logo, .weebly-logo {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
}

.wp-bg {
	background:#2EA2CC;
}

.weebly-bg {
	background:#0081FF;
}

/* Temporary Box Shadow to be deleted when added to portal */
.temporary-box-shadow {
    box-shadow: 0 0.4rem 0.8rem 0 #E2EAF2;
}




.arrow-group {
  width:35px;
  height:30px;
  position:relative;
  .arrow-head {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    position:absolute;
    left:2px;
    top:7px;
  }

  .arrow-steam {
    height:3px;
    width:12px;
    background:black;
    position:absolute;
    top:10px;
  }
}







/* Invoice Table CSS STARTS */
.ellipsis-length {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}

.ellipsis-length-long {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.invoice-table {
  display:flex;
  flex-direction:row;
    @media (max-width: 767.98px) { 
    flex-direction:column;
  } 
  &:hover {
    background:#eee;
  }
}

.package {
  width:50%;
  @media (max-width: 767.98px) { 
    width:100%;
  }
}

.due-date {
  width:25%;
  @media (max-width: 767.98px) { 
    width:100%;
  }
}

.total {
  width:20%;
  @media (max-width: 767.98px) { 
    width:100%;
    border-bottom:1px solid #ddd;
  }
}

.arrow {
  width:5%;
  @media (max-width: 767.98px) { 
    display:none;
  }
}

.package-title {
  width:50%;
  @media (max-width: 767.98px) { 
    display:none;
  }
}

.due-date-title {
  width:25%;
  @media (max-width: 767.98px) { 
    display:none;
  }
}

.total-title {
  width:20%;
  @media (max-width: 767.98px) { 
    display:none;
  }
}

.arrow-title {
  width:5%;
  @media (max-width: 767.98px) { 
    display:none;
  }
}

/* Invoice Table CSS ENDS */

              
            
!

JS

              
                var tl = new TimelineMax();

//Logos
TweenMax.set('.wp-logo', { scale: 1 })
TweenMax.set('.weebly-logo', { scale: 1 })	

// Pages 
TweenMax.set('.dashboard-page', { display: 'block' })
TweenMax.set('.hosting-page', { display: 'none' })
TweenMax.set('.marketplace-page', { display: 'none' })
TweenMax.set('.domain-page', { display: 'none' })
TweenMax.set('.message-page', { display: 'none' })
TweenMax.set('.manage-account-page', { display: 'none' })

TweenMax.to('.mobile-nav', 0, { x: -300 })

$('.hamburger-icon').on('click', function() {
    if($(this).attr('data-click-state') == 1) {
     $(this).attr('data-click-state', 0)    
        tl      
          .to('.bar-one', .3, { y: 0, rotation: 0 })
          .to('.bar-two', 0, { opacity: 1 }, '-=.3')
          .to('.bar-three', .3, { y: 0, rotation: 0 }, '-=.3')
          .to('.mobile-nav', .3, { x: -300 }, '-=.3')  
    } else {
     $(this).attr('data-click-state', 1)  
          tl
            .to('.bar-one', .3, { y: 6, rotation: 45 })
            .to('.bar-two', 0, { opacity: 0 }, '-=.3')
            .to('.bar-three', .3, { y: -6, rotation: -45 }, '-=.3')  
            .to('.mobile-nav', .3, { x: 0 }, '-=.3')
    }
 });

/* Search STARTS */
$('.search-btn').on('click', function(){
	$('.overlay').css({ display: 'block' });
	$('.search-input').css({ display: 'block' })
});

$('.overlay').on('click', function() {
		$('.overlay').css({ display: 'none' });
		$('.search-input').css({ display: 'none' })
});

/* Search ENDS */

/* Message Btn Starts */
$('.message-btn').on('click', function(){  
   $('.dashboard-page').css({ display: 'none' })
   $('.hosting-page').css({ display: 'none' })
   $('.marketplace-page').css({ display: 'none' })
   $('.domain-page').css({ display: 'none' })
   $('.manage-account-page').css({ display: 'none' })
   $('.message-page').css({ display: 'block' })
    $('.manage-account-page').css({ display: 'none' })

  
});
/* Message Btn Ends */

// Manage Account Btn STARTS
$('.manage-account-btn').on('click', function(){
   $('.dashboard-page').css({ display: 'none' })
   $('.hosting-page').css({ display: 'none' })
   $('.marketplace-page').css({ display: 'none' })
   $('.domain-page').css({ display: 'none' })
   $('.message-page').css({ display: 'none' })
  $('.manage-account-page').css({ display: 'block' })
  $('.account-info-drop-down').css({ display: 'none' })
});

// Manage Account Btn ENDS


// $('.mysites-card').on('mouseenter',this, function () {
//   tl
//     .to('.arrow-head', .2, { left: '20px' })
//     .to('.arrow-steam', .2, { width: '29px' }, '-=.2');

// }).on('mouseleave',this,  function(){
//   tl
//     .to('.arrow-head', .2, { left: '2px' })
//     .to('.arrow-steam', .2, { width: '12px' }, '-=.2')
// });

// Hover For My Sites STARTS //
$('.mysites-card').each(createEffect);
	
function createEffect(i, element) {
	var tl = new TimelineMax({ paused: true });
	var arrowHead = $(this).find('.arrow-head');
	var arrowSteam = $(this).find('.arrow-steam');
  var wpLogo = $(this).find('.wp-logo');
	var weeblyLogo = $(this).find('.weebly-logo');
	
	tl.to(arrowHead, 0.2, { left: '20px' })
		.to(arrowSteam, 0.2, { width: '29px' }, '-=.2')
  	.to(wpLogo, 0.2, { scale: .9 }, '-=.2')
		.to(weeblyLogo, 0.2, { scale: .9 }, '-=.2')
	$(element).hover(over, out);
	
	function over() {
		tl.play();
	}
	
	function out(){
		tl.reverse();
	}
}
// Hover For My Sites ENDS //

// Hover Table List Items STARTS //
$('.invoice-table').each(createTableHover);

function createTableHover(i, element) {
  var tl = new TimelineMax({ paused: true });
	// var arrowHeadTable = $(this).find('.arrow-head');
	// var arrowSteamTable = $(this).find('.arrow-steam');
   // tl.to(arrowHeadTable, 0.2, { rotation: 45, marginTop: '3px' })
   //   .to(arrowSteamTable, 0.2, { rotation: 90, marginLeft: '1px' }, '-=.2');
  
  
  var arrowGroup = $(this).find('.arrow-group');
  tl.to(arrowGroup, 0.2, { rotation: 90, transformOrigin: "10%" })
	$(element).hover(over, out);
	
	function over() {
		tl.play();
	}
	
	function out(){
		tl.reverse();
	}
  
}

// Hover Table List Items ENDS // 



$('.dashboard-btn').on('click', function(){
   $(this).addClass('active').removeClass('nav-btn');
   $('.marketplace-btn').removeClass('active').addClass('nav-btn');
   $('.domain-btn').removeClass('active').addClass('nav-btn');
   $('.hosting-btn').removeClass('active').addClass('nav-btn');
   $('.message-btn').removeClass('active-icon').addClass('not-active-icon'); 
  
   $('.dashboard-page').css({ display: 'block' })
   $('.hosting-page').css({ display: 'none' })
   $('.marketplace-page').css({ display: 'none' })
   $('.domain-page').css({ display: 'none' })
   $('.message-page').css({ display: 'none' })
    $('.manage-account-page').css({ display: 'none' })

  
  
  
});

$('.hosting-btn').on('click', function() {
    
   $(this).addClass('active').removeClass('nav-btn');
   $('.dashboard-btn').removeClass('active').addClass('nav-btn');
   $('.marketplace-btn').removeClass('active').addClass('nav-btn');
   $('.domain-btn').removeClass('active').addClass('nav-btn');
   $('.message-btn').removeClass('active-icon').addClass('not-active-icon'); 


     $('.dashboard-page').css({ display: 'none' })
     $('.hosting-page').css({ display: 'block' })
     $('.marketplace-page').css({ display: 'none' })
     $('.domain-page').css({ display: 'none' })
     $('.message-page').css({ display: 'none' })
      $('.manage-account-page').css({ display: 'none' })

  
  
  
  
});

$('.marketplace-btn').on('click', function(){
     $(this).addClass('active').removeClass('nav-btn');
     $('.hosting-btn').removeClass('active').addClass('nav-btn');
     $('.dashboard-btn').removeClass('active').addClass('nav-btn');
     $('.domain-btn').removeClass('active').addClass('nav-btn');
     $('.message-btn').removeClass('active-icon').addClass('not-active-icon'); 

  
     $('.dashboard-page').css({ display: 'none' })
     $('.hosting-page').css({ display: 'none' })
     $('.marketplace-page').css({ display: 'block' })
     $('.domain-page').css({ display: 'none' })
     $('.message-page').css({ display: 'none' })
      $('.manage-account-page').css({ display: 'none' })


  
    
  
   // tl.to('.dashboard-page', .1, { display: 'none', x: '100%' })
   //   .to('.hosting-page', .1, { display: 'none', x: '100%' })
   //   .to('.domain-page', .1, { display: 'none', x: '100%' })
   //   .to('.marketplace-page', .1, { display: 'block', x: '0%'})
});

$('.domain-btn').on('click', function() {
     $(this).addClass('active').removeClass('nav-btn');
     $('.hosting-btn').removeClass('active').addClass('nav-btn');
     $('.dashboard-btn').removeClass('active').addClass('nav-btn');
     $('.marketplace-btn').removeClass('active').addClass('nav-btn');
     $('.message-btn').removeClass('active-icon').addClass('not-active-icon'); 

  
     $('.dashboard-page').css({ display: 'none' })
     $('.hosting-page').css({ display: 'none' })
     $('.marketplace-page').css({ display: 'none' })
     $('.domain-page').css({ display: 'block' })
     $('.message-page').css({ display: 'none' })
      $('.manage-account-page').css({ display: 'none' })

  
    
  
   // tl.to('.dashboard-page', .1, { display: 'none', x: '100%' })
   //   .to('.hosting-page', .1, { display: 'none', x: '100%' })
   //   .to('.marketplace-page', .1, { display: 'none', x: '100%' })
   //   .to('.domain-page', .1, { display: 'block', x: '0%'})
});

$('.search-btn').on('click', function(){
     // $(this).removeClass('active-icon').addClass('not-active-icon');
     $('.message-btn').addClass('not-active-icon').removeClass('active-icon');
     $('.profile-btn').addClass('not-active-icon').removeClass('active-icon');
  
  
//      if($(this).attr('data-click-state') == 1) {
//      $(this).attr('data-click-state', 0)  
//             $(this).removeClass('active-icon').addClass('not-active-icon');

   
//     } else {
//      $(this).attr('data-click-state', 1) 
//            $(this).addClass('active-icon').removeClass('not-active-icon');

//     }
  
  
  


  
  
  
  
  
  
   $('.dashboard-btn').removeClass('active').addClass('nav-btn');
   $('.marketplace-btn').removeClass('active').addClass('nav-btn');
   $('.domain-btn').removeClass('active').addClass('nav-btn');
   $('.hosting-btn').removeClass('active').addClass('nav-btn');
});

$('.message-btn').on('click', function() {
  // $(this).addClass('active-icon').removeClass('not-active-icon');
   $('.message-btn').addClass('active-icon').removeClass('not-active-icon');
   $('.search-btn').addClass('not-active-icon').removeClass('active-icon');
   $('.profile-btn').addClass('not-active-icon').removeClass('active-icon');
  
   $('.dashboard-btn').removeClass('active').addClass('nav-btn');
   $('.marketplace-btn').removeClass('active').addClass('nav-btn');
   $('.domain-btn').removeClass('active').addClass('nav-btn');
   $('.hosting-btn').removeClass('active').addClass('nav-btn');
  
  
     $('.dashboard-page').css({ display: 'none' })
     $('.hosting-page').css({ display: 'none' })
     $('.marketplace-page').css({ display: 'none' })
     $('.domain-page').css({ display: 'none' })
     $('.message-page').css({ display: 'block' })
      $('.manage-account-page').css({ display: 'none' })

});

$('.profile-btn').on('click', function() {
  $(this).addClass('active-icon').removeClass('not-active-icon');
   $('.message-btn').addClass('not-active-icon').removeClass('active-icon');
   $('.search-btn').addClass('not-active-icon').removeClass('active-icon');

  

    if($(this).attr('data-click-state') == 1) {
     $(this).attr('data-click-state', 0)  
         $('.account-info-drop-down').addClass('hidden');
         $('.profile-btn').addClass('not-active-icon').removeClass('active-icon')
        $('.account-info-drop-down').css({ display: 'none' })


      // tl   
     
    } else {
     $(this).attr('data-click-state', 1)  
         $('.account-info-drop-down').removeClass('hidden');
         $('.profile-btn').removeClass('not-active-icon').addClass('active-icon')
        $('.account-info-drop-down').css({ display: 'block' })


    }
});

// Closes Mobile Nav if Link is clicked
$('.mobile-dashboard-link').on('click', function(){

           
        tl 
           .to('.bar-one', .3, { y: 0, rotation: 0 })
          .to('.bar-two', 0, { opacity: 1 }, '-=.3')
          .to('.bar-three', .3, { y: 0, rotation: 0 }, '-=.3')
          .to('.mobile-nav', .3, { x: -300 }, '-=.3') 

         

});

$('.show-invoice-info').on('click', function(){
  
 
     if($(this).attr('data-click-state') == 1) {
     $(this).attr('data-click-state', 0) 
         $('.invoice-info').addClass('hidden');

 
  
    } else {
     $(this).attr('data-click-state', 1)
        $('.invoice-info').removeClass('hidden');
    }

  
  
  
  
});












              
            
!
999px

Console