curve design html css

before

.contact-w3ls {

1. background: #000;
2. position: relative;
3. padding-top: 0!important;
4. margin-top: 6.3em;

}

.contact-w3ls:before {

1. content: "";
2. position: absolute;
3. top: -106px;
4. border-width: 0 882px 106px 0;
5. border-style: solid;
6. border-color: transparent transparent #00aeef #00aeef;
7. display: block;
8. width: 0;

}

.contact-w3ls:after {

1. content: "";
2. position: absolute;
3. top: -120px;
4. right: 0;
5. border-width: 0px 1904px 120px 0;
6. border-style: solid;
7. border-color: transparent transparent #000 #000;
8. display: block;
9. transform: rotateY(180deg);
10. -webkit-transform: rotateY(180deg);
11. -o-transform: rotateY(180deg);
12. -ms-transform: rotateY(180deg);
13. -moz-transform: rotateY(180deg);
14. width: 0;

}

packges html css

style

<style>
        .block.packges-wrapper{
               text-align: center;
        }
            .pricing {
     
    text-align: center;
        border: 1px solid rgba(179, 174, 174, 0.52);
    color: #777;
    font-size: 14px;
    padding-left: 0;
    margin-bottom: 30px;
    font-family: 'Lato';
    width: 22%;
    display: inline-block;
    margin: 0 10px;
}
.pricing li:first-child {
    padding: 20px 13px;
    background-color: #3498db;
}

.pricing li + li {
    border-top: 1px solid #f0f0f0;
}
.pricing li {
    list-style: none;
    padding: 9px;
}
.pricing li:nth-child(even){background-color: #f2f2f2}
.pricing big {
    font-size: 32px;
}

.p-yel big,
.p-green big ,
.p-red big{
    color: #FFF;
}
.p-green h3 {
    color: #4c7737;
}
.p-yel h3 {
    color: #ffbb42;
}
 .p-red h3 {
    color: #e13c4c;
}
.p-blue big, .p-blue h3 {
    color: #3f4bb8;
}
.pricing button {
    width: auto;
    margin: auto;
    font-size: 15px;
    font-weight: bold;
    border-radius: 50px;
    color: #fff;
    padding: 9px 24px;
    background: #aaa;
    opacity: 1;
    transition: opacity .2s ease;
    border: none;
    outline: none;
}
.p-green button {
    background: #4c7737;
}
.p-yel button {
    background: #ffbb42;
}
.p-red button {
    background: #e13c4c;
}
.p-blue button {
    background: #3f4bb8;
}

/*.p-green li {
  background-color: #f1c40f;

}
.p-yel li {
  background-color: #e67e22;

}
.p-red li {
  background-color: #e74c3c;

}*/
        </style>


html

 <!-- start packges -->

                 <section class="container">
  <div class="row white">
                <div class="block packges-wrapper">

                    <div class="col-xs-12 col-sm-6 col-md-12">
                            <ul class="pricing p-green">
                                <li>
                                    <img src="http://bread.pp.ua/n/settings_g.svg" alt="">
                                    <big>Start</big>
                                </li>
                                <li>Responsive Design</li>
                                <li>Color Customization</li>
                                <li>HTML5 &amp; CSS3</li>
                                <li>Styled elements</li>
                                <li>
                                    <h3>$199</h3>
                                    <span>per month</span>
                                </li>
                                <li>
                                    <button>Join Now</button>
                                </li>
                            </ul>

                                <ul class="pricing p-yel">
                                <li>
                                    <img src="http://bread.pp.ua/n/settings_y.svg" alt="">
                                    <big>Good</big>
                                </li>
                                <li>Responsive Design</li>
                                <li>Color Customization</li>
                                <li>HTML5 &amp; CSS3</li>
                                <li>Styled elements</li>
                                <li>
                                    <h3>$299</h3>
                                    <span>per month</span>
                                </li>
                                <li>
                                    <button>Join Now</button>
                                </li>
                            </ul>

                               <ul class="pricing p-red">
                                <li>
                                    <img src="http://bread.pp.ua/n/settings_r.svg" alt="">
                                    <big>Ultima</big>
                                </li>
                                <li>Responsive Design</li>
                                <li>Color Customization</li>
                                <li>HTML5 &amp; CSS3</li>
                                <li>Styled elements</li>
                                <li>
                                    <h3>$399</h3>
                                    <span>per month</span>
                                </li>
                                <li>
                                    <button>Join Now</button>
                                </li>
                            </ul>
                    </div>


             


                </div><!-- /block -->
            </div><!-- /row -->
  </section>
  <!-- end packges -->

links saved for work

links saved for work 


https://saved.io/           =  login and view all your book mark sites and work on it...
 user = name shahzad_samejo@yahoo.com



https://www.canva.com/

hover 3d menu effect

https://www.dartdrones.com/    menu check and make



.main-nav li ul {
-webkit-transform: perspective(400) rotateX(90deg);
    -webkit-transform-origin: 50% 0;
    -webkit-transition: .35s;
    transition: .35s;
}

.main-nav li:hover ul {
display: block;
opacity: 1;
visibility: visible;
margin-top:0px;
   
   
    -webkit-transform: perspective(400) rotateX(0deg);
    -webkit-transform-origin: 50% 0;
    -webkit-transition: .35s;
    transition: .35s;


}