Kumpulan Dropdown Menu tanpa JavaScript

1:56 AM
A+ A- Print Email
Biasanya dropdown menu dibuat menggunakan JavaScript/jQuery. Padahal tanpa itupun dropdown menu (baik vertikal maupun horizonal) dapat diciptakan. Berikut ini saya salinkan untuk pembaca jelasinblog.blogspot.com beberapa contoh dropdown menu tanpa JavaScript.

Neoteric Dark Red

Kumpulan Dropdown Menu tanpa JavaScript


HTML 
<!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
    <li class="topmenu"><a href="#" style="height:32px;line-height:32px;"><img src="http://css3menu.com/images/neoteric-dark-red/home1.png" alt=""/>Home</a>
    </li>
    <li class="topmenu"><a href="#" style="height:32px;line-height:32px;"><span><img src="http://css3menu.com/images/neoteric-dark-red/info.png" alt=""/>Product info</span></a>

        <ul>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/pencil.png" alt=""/>Features</a>
            </li>
            <li><a href="#"><span><img src="http://css3menu.com/images/neoteric-dark-red/hammer.png" alt=""/>Installation</span></a>

                <ul>
                    <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/push_pin.png" alt=""/>Description of files</a>
                    </li>
                    <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/gear.png" alt=""/>How to setup</a>
                    </li>
                </ul>
            </li>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/documents.png" alt=""/>Parameters info</a>
            </li>
            <li><a href="#"><span><img src="http://css3menu.com/images/neoteric-dark-red/world.png" alt=""/>Supported browsers</span></a>

                <ul>
                    <li><a href="#">Firefox</a>
                    </li>
                    <li><a href="#">Internet Explorer</a>
                    </li>
                    <li><a href="#">Opera</a>
                    </li>
                    <li><a href="#">Safari</a>
                    </li>
                    <li><a href="#">Google Chrome</a>
                    </li>
                </ul>
            </li>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/help1.png" alt=""/>CSS3 info</a>
            </li>
        </ul>
    </li>
    <li class="topmenu"><a href="#" style="height:32px;line-height:32px;"><span><img src="http://css3menu.com/images/neoteric-dark-red/heart.png" alt=""/>Samples</span></a>

        <ul>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/add.png" alt=""/>Android template</a>
            </li>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/add1.png" alt=""/>Mac template</a>
            </li>
            <li><a href="#"><span><img src="http://css3menu.com/images/neoteric-dark-red/add2.png" alt=""/>Mercury template</span></a>

                <ul>
                    <li><a href="#">Blue theme</a>
                    </li>
                    <li><a href="#">Green theme</a>
                    </li>
                    <li><a href="#">Lilac theme</a>
                    </li>
                    <li><a href="#">Orange theme</a>
                    </li>
                </ul>
            </li>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/add3.png" alt=""/>Elegant template</a>
            </li>
            <li><a href="#"><span><img src="http://css3menu.com/images/neoteric-dark-red/add4.png" alt=""/>Point template</span></a>

                <ul>
                    <li><a href="#">Aquamarine theme</a>
                    </li>
                    <li><a href="#">Blue theme</a>
                    </li>
                    <li><a href="#">Green theme</a>
                    </li>
                    <li><a href="#">Grey theme</a>
                    </li>
                    <li><a href="#">Orange theme</a>
                    </li>
                    <li><a href="#">Red theme</a>
                    </li>
                </ul>
            </li>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/add5.png" alt=""/>Toolbars template</a>
            </li>
        </ul>
    </li>
</ul>
<p class="_css3m"><a href="http://css3menu.com/neoteric-dark-red.html" target="_blank">Original Code </a> </p><p class="_css3m"> <a href="http://jelasinblog.blogspot.com/2014/05/kumpulan-dropdown-menu-tanpa-javascript.html">Back to Tutorial </a>
</p>
<!-- End css3menu.com BODY section -->

CSS
ul#css3menu1, ul#css3menu1 ul {
    margin:0;
    list-style:none;
    padding:0;
    background-color:#201816;
    border-width:0;
    border-style:solid;
    border-color:;
}
ul#css3menu1 ul {
    visibility:hidden;
    position:absolute;
    left:0;
    top:100%;
    opacity:0;
    -moz-transition:all 0.5s;
    -webkit-transition:opacity 0.5s;
    -o-transition:opacity 0.5s, visibility 0.5s;
    transition:opacity 0.5s;
    background-color:#CB4E48;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    -moz-box-shadow:0 -8px 16px -4px #ba3b35 inset;
    -webkit-box-shadow:0 -8px 16px -4px #ba3b35 inset;
    box-shadow:0 -8px 16px -4px #ba3b35 inset;
    padding:0 7px 7px;
}
ul#css3menu1 li:hover>ul {
    visibility:visible;
    opacity:1;
}
ul#css3menu1 li {
    position:relative;
    display:block;
    white-space:nowrap;
    font-size:0;
    float:left;
}
ul#css3menu1 li:hover {
    z-index:1;
}
ul#css3menu1 ul ul {
    position:absolute;
    left:100%;
    top:0;
    -moz-box-shadow:0 -8px 16px -4px #ba3b35 inset;
    -webkit-box-shadow:0 -8px 16px -4px #ba3b35 inset;
    box-shadow:0 -8px 16px -4px #ba3b35 inset;
}
ul#css3menu1 {
    font-size:0;
    z-index:999;
    position:relative;
    display:inline-block;
    zoom:1;
    padding:0;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    *display:inline;
}
* html ul#css3menu1 li a {
    display:inline-block;
}
ul#css3menu1>li {
    margin:0;
}
ul#css3menu1 a:active, ul#css3menu1 a:focus {
    outline-style:none;
}
ul#css3menu1 a {
    display:block;
    vertical-align:middle;
    text-align:left;
    text-decoration:none;
    font:16px Dosis, Arial, sans-serif;
    color:#000000;
    cursor:pointer;
    padding:17px 20px;
    background-color:;
    background-repeat:repeat;
    border-width:0px;
    border-style:none;
    border-color:;
}
ul#css3menu1 ul li {
    float:none;
    margin:7px 0 0;
}
ul#css3menu1 ul a {
    text-align:left;
    padding:5px 15px;
    background-color:transparent;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    color:#EDC1BF;
    text-decoration:none;
    text-shadow:0 1px 1px #BE3C36;
}
ul#css3menu1 li:hover>a, ul#css3menu1 li a.pressed {
    border-style:none;
    color:#FFFFFF;
    text-decoration:none;
}
ul#css3menu1 img {
    border:none;
    vertical-align:middle;
    margin-right:17px;
}
ul#css3menu1 ul span {
    background-image:none;
    padding-right:5px;
}
ul#css3menu1 ul li:hover>a, ul#css3menu1 ul li a.pressed {
    background-color:#BC433D;
    color:#ffffff;
    text-decoration:none;
    text-shadow:0 1px 1px #BE3C36;
}
ul#css3menu1 li.topmenu>a {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
    background-color:#201816;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    -moz-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -o-transition:all 0.5s;
    color:#988989;
}
ul#css3menu1 li.topmenu:hover>a, ul#css3menu1 li.topmenu a.pressed {
    -moz-box-shadow:inset 0 8px 12px -2px #ba3b35;
    -webkit-box-shadow:inset 0 8px 12px -2px #ba3b35;
    box-shadow:inset 0 8px 12px -2px #ba3b35;
    background-color:#CB4E48;
    color:#FFFFFF;
}


Reflex Black Vertical



HTML
<!-- Start Reflex Black Vertical dropdown -->
<ul id="css3menu1" class="topmenu">
    <li class="topfirst"><a href="#" title="Home" style="width:146px;"><img src="http://css3menu.com/images/reflex-black-vertical/computer on.png" alt=""/>Home</a>
    </li>
    <li class="topmenu"><a href="#" title="Product info" style="width:146px;"><span><img src="http://css3menu.com/images/reflex-black-vertical/splash green.png" alt=""/>Product info</span></a>

        <ul>
            <li class="subfirst"><a href="#" title="Features"><img src="http://css3menu.com/images/reflex-black-vertical/applications.png" alt=""/>Features</a>
            </li>
            <li><a href="#" title="Installation"><span><img src="http://css3menu.com/images/reflex-black-vertical/advanced.png" alt=""/>Installation</span></a>

                <ul>
                    <li class="subfirst"><a href="#" title="Description of files"><img src="http://css3menu.com/images/reflex-black-vertical/notebook.png" alt=""/>Description of files</a>
                    </li>
                    <li class="sublast"><a href="#" title="How to setup"><img src="http://css3menu.com/images/reflex-black-vertical/library bookmarked.png" alt=""/>How to setup</a>
                    </li>
                </ul>
            </li>
            <li><a href="#" title="Parameters info"><img src="http://css3menu.com/images/reflex-black-vertical/info3.png" alt=""/>Parameters info</a>
            </li>
            <li><a href="#" title="Supported browsers"><span><img src="http://css3menu.com/images/reflex-black-vertical/color.png" alt=""/>Supported browsers</span></a>

                <ul>
                    <li class="subfirst"><a href="#" title="Firefox">Firefox</a>
                    </li>
                    <li><a href="#" title="Internet Explorer">Internet Explorer</a>
                    </li>
                    <li><a href="#" title="Opera">Opera</a>
                    </li>
                    <li><a href="#" title="Safari">Safari</a>
                    </li>
                    <li class="sublast"><a href="#" title="Google Chrome">Google Chrome</a>
                    </li>
                </ul>
            </li>
            <li class="sublast"><a href="#" title="CSS3 info"><img src="http://css3menu.com/images/reflex-black-vertical/edit2.png" alt=""/>CSS3 info</a>
            </li>
        </ul>
    </li>
    <li class="topmenu"><a href="#" title="Samples" style="width:146px;"><span><img src="http://css3menu.com/images/reflex-black-vertical/star1.png" alt=""/>Samples</span></a>

        <ul>
            <li class="subfirst"><a href="#" title="Android template"><img src="http://css3menu.com/images/reflex-black-vertical/universal1.png" alt=""/>Android template</a>
            </li>
            <li><a href="#" title="Mac template"><img src="http://css3menu.com/images/reflex-black-vertical/universal2.png" alt=""/>Mac template</a>
            </li>
            <li><a href="#" title="Mercury template"><span><img src="http://css3menu.com/images/reflex-black-vertical/universal3.png" alt=""/>Mercury template</span></a>

                <ul>
                    <li class="subfirst"><a href="#" title="Blue theme">Blue theme</a>
                    </li>
                    <li><a href="#" title="Green theme">Green theme</a>
                    </li>
                    <li><a href="#" title="Lilac theme">Lilac theme</a>
                    </li>
                    <li class="sublast"><a href="#" title="Orange theme">Orange theme</a>
                    </li>
                </ul>
            </li>
            <li><a href="#" title="Elegant template"><img src="http://css3menu.com/images/reflex-black-vertical/universal4.png" alt=""/>Elegant template</a>
            </li>
            <li><a href="#" title="Point template"><span><img src="http://css3menu.com/images/reflex-black-vertical/universal5.png" alt=""/>Point template</span></a>

                <ul>
                    <li class="subfirst"><a href="#" title="Aquamarine theme">Aquamarine theme</a>
                    </li>
                    <li><a href="#" title="Blue theme">Blue theme</a>
                    </li>
                    <li><a href="#" title="Green theme">Green theme</a>
                    </li>
                    <li><a href="#" title="Grey theme">Grey theme</a>
                    </li>
                    <li><a href="#" title="Orange theme">Orange theme</a>
                    </li>
                    <li class="sublast"><a href="#" title="Red theme">Red theme</a>
                    </li>
                </ul>
            </li>
            <li class="sublast"><a href="#" title="Toolbars template"><img src="http://css3menu.com/images/reflex-black-vertical/universal6.png" alt=""/>Toolbars template</a>
            </li>
        </ul>
    </li>
    <li class="toplast"><a href="#" title="Download" style="width:146px;"><img src="http://css3menu.com/images/reflex-black-vertical/install.png" alt=""/>Download</a>
    </li>
</ul>
<p class="_css3m"><a href="http://css3menu.com/" target="_blank">CSS3 Button </a>
</p>
<p class="_css3m"><a href="http://jelasinblog.blogspot.com/2014/05/kumpulan-dropdown-menu-tanpa-javascript.html">Back to Tutorial </a>
</p>
<!-- End section -->

CSS 

ul#css3menu1, ul#css3menu1 ul {
    margin:0;
    list-style:none;
    padding:0;
    background-color:#FFFFFF;
    border-width:0;
    border-style:solid;
    border-color:;
}
ul#css3menu1 ul {
    visibility:hidden;
    position:absolute;
    left:200%;
    top:0;
    opacity:0;
    -moz-transition:all 0.5s;
    -webkit-transition:opacity 0.5s, left 0.5s;
    -o-transition:opacity 0.5s, left 0.5s, visibility 0.5s;
    transition:opacity 0.5s, left 0.5s;
    -moz-box-shadow:0px 0px 2px #000;
    -webkit-box-shadow:0px 0px 2px #000;
    box-shadow:0px 0px 2px #000;
    background-color:#3e3f41;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    padding:0;
}
ul#css3menu1 li:hover>ul {
    visibility:visible;
    opacity:1;
}
ul#css3menu1 li {
    position:relative;
    display:block;
    white-space:nowrap;
    font-size:0;
}
ul#css3menu1 li:hover {
    z-index:1;
}
ul#css3menu1 ul ul {
    position:absolute;
    left:200%;
    top:0;
}
ul#css3menu1>li:hover>ul {
    left:100%;
}
ul#css3menu1 ul li:hover>ul {
    left:100%;
}
ul#css3menu1 {
    font-size:0;
    z-index:999;
    position:relative;
    display:block;
    float:left;
    padding:0 4px 0 0;
    background-color:#6f7474;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
ul#css3menu1>li {
    margin:0;
}
ul#css3menu1 a:active, ul#css3menu1 a:focus {
    outline-style:none;
}
ul#css3menu1 a {
    display:block;
    vertical-align:middle;
    text-align:left;
    text-decoration:none;
    font:bold 14px'Scada', Lucida Sans Unicode, Lucida Grande, sans-serif;
    color:#FFF5A5;
    text-shadow:1px 1px 1px rgba(0, 0, 0, 0.9);
    cursor:pointer;
    padding:3px;
    background-color:;
    background-repeat:repeat;
    border-width:0px;
    border-style:none;
    border-color:;
}
ul#css3menu1 ul li {
    float:none;
    margin:0;
}
ul#css3menu1 ul a {
    text-align:left;
    padding:7px;
    -moz-box-shadow:0;
    -webkit-box-shadow:0;
    box-shadow:0;
    background-color:transparent;
    background-image:none;
    border-width:1px 0 1px 0;
    border-style:solid;
    border-color:#545557 transparent #303132 transparent;
    font:13px'Scada', Lucida Sans Unicode, Lucida Grande, sans-serif;
    color:#FFF5A5;
    text-decoration:none;
}
ul#css3menu1 li:hover>a, ul#css3menu1 li a.pressed {
    border-style:none;
    color:#FFFFFF;
    text-shadow:1px 1px 1px rgba(0, 0, 0, 0.9);
    text-decoration:none;
}
ul#css3menu1 img {
    border:none;
    vertical-align:middle;
    margin-right:3px;
}
ul#css3menu1 span {
    display:block;
    overflow:visible;
    background-image:url("arrowsub.png");
    background-position:right center;
    background-repeat:no-repeat;
    padding-right:30px;
}
ul#css3menu1 ul span {
    background-image:url("arrowsub.png");
    padding-right:22px;
}
ul#css3menu1 ul li:hover>a, ul#css3menu1 ul li a.pressed {
    -moz-box-shadow:;
    -webkit-box-shadow:;
    box-shadow:;
    background-color:transparent;
    background-image:-o-linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
    background-image:-moz-linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
    background-image:linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
    background-image:-webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
    border-style:solid;
    border-color:#545557 transparent #303132 transparent;
    color:#FFFFFF;
    text-decoration:none;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr=#00000000, endColorstr=#4DFFFFFF)
}
ul#css3menu1>li>a {
    padding:9px 15px;
}
ul#css3menu1 li.topfirst>a {
    background-color:#393d3e;
    background-image:-o-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:-moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:-webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    border-width:1px;
    border-style:solid;
    border-color:#464a4a #474b4c #2b2e2e #474b4c;
    border-radius:3px 3px 0 0;
    -moz-border-radius:3px 3px 0 0;
    -webkit-border-radius:3px;
    -webkit-border-bottom-right-radius:0;
    -webkit-border-bottom-left-radius:0;
    padding:9px 15px;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#21FFFFFF, endColorstr=#00FFFFFF)
}
ul#css3menu1 li.topfirst:hover>a, ul#css3menu1 li.topfirst a.pressed {
    background-color:#333738;
    background-image:-o-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:-moz-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:linear-gradient(45deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:-webkit-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    border-style:solid;
    border-color:#464a4a #474b4c #2b2e2e #474b4c;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#00555555, endColorstr=#7FEEEEEE)
}
ul#css3menu1 li.topmenu>a {
    background-color:#393d3e;
    background-image:-o-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:-moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:-webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    border-width:1px;
    border-style:solid;
    border-color:#464a4a #474b4c #2b2e2e #474b4c;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    padding:9px 15px;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#21FFFFFF, endColorstr=#00FFFFFF)
}
ul#css3menu1 li.topmenu:hover>a, ul#css3menu1 li.topmenu a.pressed {
    background-color:#333738;
    background-image:-o-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:-moz-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:linear-gradient(45deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:-webkit-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    border-style:solid;
    border-color:#464a4a #474b4c #2b2e2e #474b4c;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#00555555, endColorstr=#7FEEEEEE)
}
ul#css3menu1 li.toplast>a {
    background-color:#393d3e;
    background-image:-o-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:-moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:-webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    border-width:1px;
    border-style:solid;
    border-color:#464a4a #474b4c #2b2e2e #474b4c;
    border-radius:0 0 3px 3px;
    -moz-border-radius:0 0 3px 3px;
    -webkit-border-radius:0;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
    padding:9px 15px;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#21FFFFFF, endColorstr=#00FFFFFF)
}
ul#css3menu1 li.toplast:hover>a, ul#css3menu1 li.toplast a.pressed {
    background-color:#333738;
    background-image:-o-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:-moz-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:linear-gradient(45deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:-webkit-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    border-style:solid;
    border-color:#464a4a #474b4c #2b2e2e #474b4c;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#00555555, endColorstr=#7FEEEEEE)
}
ul#css3menu1 li.subfirst>a {
    border-width:0 0 1px 0;
    border-radius:3px 3px 0 0;
    -moz-border-radius:3px 3px 0 0;
    -webkit-border-radius:3px;
    -webkit-border-bottom-right-radius:0;
    -webkit-border-bottom-left-radius:0;
}
ul#css3menu1 li.sublast>a {
    border-width:1px 0 0 0;
    border-radius:0 0 3px 3px;
    -moz-border-radius:0 0 3px 3px;
    -webkit-border-radius:0;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
}
Dua contoh di atas sudah cukup memberi gambaran bagaimana menciptakan dropdown menu tanpa JavaScript/jQuery. Lebih lanjut Kumpulan Dropdown Menu tanpa JavaScript dapat Anda eksplorasi dihttp://css3menu.com

Selamat belajar :)
Labels: , ,

Post a Comment

Subscribe to: Post Comments (Atom)

Contact Form

Name

Email *

Message *

Powered by Blogger.