Tuesday, November 26, 2013

Send email without login in contact us form.

Send email to admin using C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Data.SqlTypes;
using System.Drawing;

using System.Net;
using System.Net.Mail;
using System.Configuration;


namespace SRWS
{
    public partial class Contact : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack)
            { }

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            try
            {
                SendMail();
                lblmsz.Text = "Your query has been sent successfully, We'll contact you soon.";
                lblmsz.ForeColor = Color.Green;

                Clear();

            }
            catch (Exception)
            {
                lblmsz.Text = "Your information is not sent.";
                lblmsz.ForeColor = Color.Red;
            }
        }
        protected void SendMail()
        {
            var fromAddress = txte.Text; // fromAddress where you send the mail

            var toAddress = "info@XXXXX.co.in"; // any address where the email will be sending

            const string fromPassword = ""; //Password of your gmail address

            string subject = "Customer Information"; // Passing the values and make a email formate to display
            string body = "Customer Name: " + txtname.Text + Environment.NewLine;
            //body += "Email: " + txte.Text + Environment.NewLine;
            body += "Customer Mobile: " + txtmo.Text + Environment.NewLine;
            body += "Message: " + txtme.InnerText + Environment.NewLine;
            MailMessage mail = new MailMessage();
            mail.To.Add(toAddress);
            mail.IsBodyHtml = true;
            mail.Body = body;

            var smtp = new System.Net.Mail.SmtpClient();// smtp settings
            {
                smtp.Host = "mail.XXXXXX.co.in";
                smtp.Port = 25;
                smtp.EnableSsl = false;
                smtp.DeliveryMethod = System.Net.Mail.SmtpDeliveryMethod.Network;
                smtp.Credentials = new NetworkCredential(fromAddress, fromPassword);
                smtp.Timeout = 20000;

            }
            // Passing values to smtp object
            smtp.Send(fromAddress, toAddress, subject, body);
        }

        protected void Button2_Click(object sender, EventArgs e)
        {
            Clear();
        }
        public void Clear()
        {
            txtname.Text = " ";
            txtmo.Text = " ";
            txte.Text = " ";
            txtme.InnerText = " ";
        }

    }

}

SlideShow Using Jquery


Image Slider

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery Photo Slider with Semi Transparent Caption</title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//Execute the slideShow
slideShow();
});
function slideShow() {
//Set the opacity of all images to 0
    $('#slideshow a').css({ opacity: 0.0 });
//Get the first image and display it (set it to full opacity)
    $('#slideshow a:first').css({ opacity: 1.0 });
//Set the caption background to semi-transparent
    $('#slideshow .caption').css({ opacity: 0.7 });
//Resize the width of the caption according to the image width
    $('#slideshow .caption').css({ width: $('#slideshow a').find('img').css('width') });
//Get the caption of the first image from REL attribute and display it
    $('#slideshow .content').html($('#slideshow a:first').find('img').attr('rel'))
.animate({ opacity: 0.7 }, 400);
//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('gallery()', 3000);
}
function gallery() {
//if no IMGs have the show class, grab the first image
    var current = ($('#slideshow a.show') ? $('#slideshow a.show') : $('#slideshow a:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('#slideshow a:first') : current.next()) : $('#slideshow a:first'));
//Get next image caption
var caption = next.find('img').attr('rel');
//Set the fade in effect for the next image, show class has higher z-index
next.css({ opacity: 0.0 })
.addClass('show')
.animate({ opacity: 1.0 }, 1000);
//Hide the current image
current.animate({ opacity: 0.0 }, 1000)
.removeClass('show');

//Set the opacity to 0 and height to 1px
$('#slideshow .caption').animate({ opacity: 0.0 }, { queue: false, duration: 0 }).animate({ height: '1px' }, { queue: true, duration: 300 });
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#slideshow .caption').animate({ opacity: 0.7 }, 100).animate({ height: '100px' }, 500);
//Display the content
$('#slideshow .content').html(caption);
}
</script>
<style type="text/css">
body{
font-family:arial
}
.clear {
clear:both
}
#slideshow {
position:relative;
height:360px
}
#slideshow a {
float:left;
position:absolute;
}
#slideshow a img {
border:none;
}
#slideshow a.show {
z-index:500
}
#slideshow .caption {
z-index:600;
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}
#slideshow .caption .content {
margin:5px
}
#slideshow .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="slideshow">
<a href="#" class="show">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide1.jpg" alt="1" height="300" rel="<h3>Slide1 Sample</h3>"/>
</a>
<a href="#">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide2.jpg" alt="2"  height="300" rel="<h3>Slide2 Example</h3>"/>
</a>
<a href="#">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide3.jpg" alt="3" height="300" rel="<h3>Slide3 Example</h3>"/>
</a>
<div class="caption"><div class="content"></div></div>
</div>
<div class="clear"></div>
</form>
</body>
</html>

Make your website fully responsive by applying css on images and text


RESPONSIVE WEBSITE CSS

<div class="section group">      
        <div class="col span_1_of_3">
            <p>
                <asp:Image ID="Image1" runat="server" ImageUrl="~/Bookmarks.png" /></p>
        </div>
        <div class="col span_1_of_3">
            <p>
                <asp:Image ID="Image2" runat="server" ImageUrl="~/Bookmarks.png" /></p>
        </div>
        <div class="col span_1_of_3">
            <p>
                Before we go to a database and talk about models, though, let's first talk about
                passing information from the controller to a view. Controller classes are invoked
                in response to an incoming URL request. A controller class is where you write the
                 is a dynamic object, which means you can put whatever you want in to it; the ViewBag
                object has no defined properties until you put something inside it. The complete
                HelloWorldController.cs file looks like this:</p>
        </div>
    </div>

CSS

/*  SECTIONS  */
.section
{
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */
.col
{
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child
{
    margin-left: 0;
}


/*  GROUPING  */
.group:before, .group:after
{
    content: "";
    display: table;
}
.group:after
{
    clear: both;
}

/*  GRID OF THREE  */
/*.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}*/
.span_3_of_3
{
    width: 100%;
}
.span_2_of_3
{
    width: 66.1%;
}
.span_1_of_3
{
    width: 32.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px)
{
    .col1
    {
        margin: 1% 0 1% 0%;
    }
    .col
    {
        margin: 1% 0 1% 0%;
    }
    .col
    {
        margin: 1% 0 1% 0%;
    }
}

@media only screen and (max-width: 480px)
{
    .span_3_of_3
    {
        width: 100%;
    }
    .span_2_of_3
    {
        width: 100%;
    }
    .span_1_of_3
    {
        width: 100%;
    }
}
img
{
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

.video embed, .video object, .video iframe
{
    width: 100%;
    height: auto;
}
/*---------------------------------------------------Page CSS---------------------------------------------------*/

.header
{
    background: url(../bg_top_img.jpg);
    height:90%;
}
.logoimage
{
    background:url(../Images/logo.png);
    margin-left:17%;
    margin-top:2%;
}
.search
{
   
}


                                               Full  Resolution   1366 x 768

                                                   Resize   800 x 600

                                                      Mobile View