<!DOCTYPE html>
<html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">    

    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">


<style>
    ul.two-button li a:focus {
    outline: none;
    box-shadow: none;
  }   

    .wrapper{
        width: 100%;
    }

h1{
    font-size: 48px;
    line-height: 58px;
    margin-top: 0px;
    font-family: "Roboto Slab",palatino,serif;
    color: #444444;
    font-weight: 300;
    letter-spacing: -.2px;
}

p{
       font-size: 18px;
       font-weight: 300;
       line-height: 22px;
       font-family: Roboto,arial,sans-serif;
       color: #444444;

}
.wrapper img{
    /*width: 100%;*/
}

.top {
    display: flex;
    align-items: center;
    padding:80px 0px;
}

.top-left{
    width: 55%;
    padding-right: 50px;
}

.top-left ul.listing-alpha{
  padding-left: 20px;
}
.top-left ul.listing-alpha li {
    font-size: 17px;
    font-weight: 300;
    line-height: 22px;
    font-family: Roboto,arial,sans-serif;
    color: #444444;
}

.top-right-image{
    width: calc(100% - 55%);
    /*padding-left:90px;*/
    text-align: left;
}
.site-width {
    margin: 0 auto;
    width: auto;
    padding:0px 20px 0px 60px;
}

.top-section,
.bootom-section {
    background: #fff;
}

.middle-section{
    min-height: 600px;
}

.middle-section.light-grey {
    background: #f6f6f6;
}


ul.two-button li a {
     text-decoration: none;
    font-size: 18px;
     padding: 10px 20px;
     font-family: "Roboto Slab",palatino,serif;
}

ul.two-button li:nth-of-type(1) a{
  color: #fff;
  background:#e7803e;
  border:1px solid #e7803e;
}

ul.two-button li:nth-of-type(2) a{
  color: #000;
  background:#fff;
  border: 1px solid #000;
  margin-left: 5px;
}

.top-button {
    padding-top: 30px;
    padding-bottom:20px;    
}


ul.two-button{
  display: flex;
  justify-content: center;
}

</style>
</head>


<body>
<div class="main">
    <div class="wrapper">
        
        <div class="top-section">
            <div class="site-width">
                <div class="top-button">
                    <ul class="two-button">
                      <li><a target="_blank" href="https://phoeniixx.com/product/custom-my-account-for-woocommerce/">UPGRADE TO PREMIUM VERSION</a></li>
                      <li><a target="_blank" href="http://custommyaccount.phoeniixxdemo.com/">LIVE DEMO</a></li>
                    </ul>

        </div>
            </div>
                  </div>

        <div class="top-section">
            <div class="site-width">
                <div class="top">
                   <div class="top-left">
                    

                    <h1>Allow Users To Upload Profile Picture</h1>
                    <p>This feature of the plugin lets your users add a profile picture of their own choice, instead of keeping the default avatar as their profile image</p>
                    </div>
                

            <div class="top-right-image"><img src="<?php echo PHOENCMAFWPLUGINURL;?>assets/images/upload-image.jpg"></div>
            </div>
            </div>
         </div>


      <div class="middle-section light-grey">
            <div class="site-width">
                <div class="top">
            <div class="top-left">
                <h1>Add As Many Menu Options As You Want</h1>
                <p>The plugin lets you add as many Menu Options as you want to. There is no limit to the number of options you could add to the list.</p>
            </div>

            <div class="top-right-image"><img src="<?php echo PHOENCMAFWPLUGINURL;?>assets/images/add-menu.jpg"></div>
         </div></div></div>


         
      <div class="middle-section light-grey">
            <div class="site-width">
                <div class="top">
            <div class="top-left">
                <h1>Role Based Menu</h1>

                <p>The plugin lets you add as many Menu Options as you want to. There is no limit to the number of options you could add to the list.</p>
            </div>

            <div class="top-right-image"><img src="<?php echo PHOENCMAFWPLUGINURL;?>assets/images/user-role-base.jpg"></div>
         </div></div></div>

         

         
         <div class="middle-section light-grey">
            <div class="site-width">
                <div class="top">
            <div class="top-left">
                <h1>Adding Shortcodes</h1>
                <p>The plugin supports shortcode, and so you can easily add any shortcodes in My Account area.For eg :- Contact form 7</p>
            </div>

            <div class="top-right-image"><img src="<?php echo PHOENCMAFWPLUGINURL;?>assets/images/shortcode.jpg">
                          </div>

         </div></div></div>



         <div class="middle-section light-grey">
            <div class="site-width">
                <div class="top">
            <div class="top-left">
                <h1>Display Menu Options<br/>As ‘Side Bar’ Or As ‘Tab'</h1>
                <p>You could display the menu options either as Side Bars appearing on left side of the page, or you could display the menu options as multiple consecutive tabs.</p>
            </div>

            <div class="top-right-image">
              <img src="<?php echo PHOENCMAFWPLUGINURL;?>assets/images/menu-side-bar.jpg"><br/>
              <br/>
              <img src="<?php echo PHOENCMAFWPLUGINURL;?>assets/images/menu-tab.jpg">


            </div>
         </div></div>
        </div>
      

          <div class="middle-section light-grey">
            <div class="site-width">
                <div class="top">
            <div class="top-left">
                <h1>Sort The Menu Options</h1>
                <p>This feature lets you rearrange the menu options as and when you want to. Based on your priority, you could easily sequence the menu options in the backend.

                </p>
            </div>

            <div class="top-right-image"><img src="<?php echo PHOENCMAFWPLUGINURL;?>assets/images/menu-option-manage-menu.jpg"></div>
         </div></div></div>

          <div class="middle-section light-grey">
            <div class="site-width">
                <div class="top">
            <div class="top-left">
                <h1>Edit The Menu Options</h1>
                <p>This feature lets you edit various features of a menu option. The list of editable features includes- ‘Label’, ‘Icon’ & ‘Custom Content’ written under that particular menu option. </p>
            </div>

            <div class="top-right-image"><img src="<?php echo PHOENCMAFWPLUGINURL;?>assets/images/edit-menu-option.jpg"></div>
         </div></div></div>

         <div class="middle-section light-grey">
            <div class="site-width">
                <div class="top">
            <div class="top-left">
                <h1>Delete Any Of The Menu Options</h1>
                <p>If at any point in time, you, surely want to permanently delete a particular Menu Option from the list of options, then you could easily do that at the backend. However, if you want to temporarily deactivate a menu option, then there is a separate option for that.</p>
            </div>

            <div class="top-right-image"><img src="<?php echo PHOENCMAFWPLUGINURL;?>assets/images/Delete-Any-menu.jpg"></div>
         </div></div></div>

         
         <div class="middle-section light-grey">
            <div class="site-width">
                <div class="top">
            <div class="top-left">
                <h1>Temporarily Deactivate One Or More Menu Options</h1>
                <p>If in case, there is a Menu Option that you want to hide for some time, then you could easily do that by temporarily deactivating the feature, at the backend.</p>
            </div>

            <div class="top-right-image"><img src="<?php echo PHOENCMAFWPLUGINURL;?>assets/images/Deactivate-menu.jpg"></div>
         </div></div></div>


        <div class="middle-section light-grey">
            <div class="site-width">
                <div class="top">

            <div class="top-left">
                <h1>Explore Various Styling Options</h1>
                <p>The plugin lets you style the Menu options as per your need. You could set

                  <ul class="listing-alpha" style="list-style-type:upper-alpha;">
                      <li>Menu Item Color</li>
                      <li>Menu Item Color on Hover</li>
                      <li>Logout Color</li>
                      <li>Logout Color on Hover</li>
                      <li>Logout Background Color</li>
                      <li>Logout Background Color on Hover, as per your requirements.</li>
                      </ul>
               </p>
            </div>

            <div class="top-right-image"><img src="<?php echo PHOENCMAFWPLUGINURL;?>assets/images/menu-color.jpg"></div>
         </div></div></div>

<div class="bootom-section">
            <div class="site-width">
                <div class="top">

            <div class="top-left">
                    <h1>Multilingual Support</h1>
                  <p>Our plugin currently translated into 25 languages</p>

                  <ul class="listing-alpha" style="list-style-type:upper-alpha;">
                      <li>Deutsch (German)</li>
                      <li>Français (French)</li>
                      <li>العَرَبِيَّة (Arabic)</li>
                      <li>Greek (Greek)</li>
                      <li>Italiano (Italian)</li>
                      <li>Español (Spanish)</li>
                      <li>And many more...</li>
                      </ul>
               </p>
            </div>

            <div class="top-right-image"><img src="<?php echo PHOENCMAFWPLUGINURL;?>assets/images/phoeniixx.png"></div>
         </div>
     </div></div>




         <div class="bootom-section">
            <div class="site-width">
                <div class="top-button bottom-button">
        <ul class="two-button">
                      <li><a target="_blank" href="https://phoeniixx.com/product/custom-my-account-for-woocommerce/">UPGRADE TO PREMIUM VERSION</a></li>
                      <li><a target="_blank" href="http://custommyaccount.phoeniixxdemo.com/">LIVE DEMO</a></li>
                    </ul>

                  </div></div></div>



    </div>

</div>

   
</body>
</html>


