I am using one snippet.now i need to loop this snippet with database value.how to achieve this?following is my snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
/* image thumbnail */
.thumb {
display: block;
width: 100%;
margin: 0;
}
/* Style to article Author */
.by-author {
font-style: italic;
line-height: 1.3;
color: #aab6aa;
}
/* Main Article [Module]
-------------------------------------
* Featured Article Thumbnail
* have a image and a text title.
*/
.featured-article {
width: 482px;
height: 350px;
position: relative;
margin-bottom: 1em;
}
.featured-article .block-title {
/* Position & Box Model */
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
/* background */
background: rgba(0,0,0,0.7);
/* Width/Height */
padding: .5em;
width: 100%;
/* Text color */
color: #fff;
}
.featured-article .block-title h2 {
margin: 0;
}
/* Featured Articles List [BS3]
--------------------------------------------
* show the last 3 articles post
*/
.main-list {
padding-left: .5em;
}
.main-list .media {
padding-bottom: 1.1em;
border-bottom: 1px solid #e8e8e8;
}
</style>
<script>
</script>
</head>
<body>
<div class="container">
<div class="row">
Articale post
</div>
<div class="row">
<div class="col-md-5 col-lg-5">
<!-- artigo em destaque -->
<div class="featured-article">
<a href="#">
<img src="http://placehold.it/482x350" alt="" class="thumb">
</a>
<div class="block-title">
<h2>Lorem ipsum dolor asit amet</h2>
<p class="by-author"><small>By Jhon Doe</small></p>
</div>
</div>
<!-- /.featured-article -->
</div>
<div class="col-md-7 col-lg-7">
<ul class="media-list main-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/150x90" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Lorem ipsum dolor asit amet</h4>
<p class="by-author">By Jhon Doe</p>
</div>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/150x90" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Lorem ipsum dolor asit amet</h4>
<p class="by-author">By Jhon Doe</p>
</div>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/150x90" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Lorem ipsum dolor asit amet</h4>
<p class="by-author">By Jhon Doe</p>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Now i need to loop latest post from database and first post must display big image as 482*350 and next posts must be in the side (150*150).Any help is appreciated.
Updated::
Post table
id|post_title|post_description|featured_image|author_id|created_at|updated_at
In your Controller you need to fetch the first article and the 3 other ones:
$posts = Posts::orderBy('created_at')->take(4)->get();
$firstPost = $posts->pop();
return view('home', compact('firstPost', 'posts');
In your template file you can loop through them:
<div class="row">
<div class="col-md-5 col-lg-5">
<!-- artigo em destaque -->
<div class="featured-article">
<a href="#">
<img src="{{ $firstPost->featured_image }}" alt="" class="thumb">
</a>
<div class="block-title">
<h2>{{ $firstPost->post_title }}</h2>
<p class="by-author"><small>By {{ $firstPost->author->name }}</small></p>
</div>
</div>
<!-- /.featured-article -->
</div>
<div class="col-md-7 col-lg-7">
<ul class="media-list main-list">
#foreach($posts as $post) {
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="{{ $post->featured_image" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">{{ $post->post_title }}</h4>
<p class="by-author">By {{ $post->author->names }}</p>
</div>
</li>
#endforeach
</ul>
</div>
</div>
In your Post Model you need a relationship to the author, e.g.
Class Posts extends Model {
public function author {
return $this->hasOne('App\Author');
}
}
Related
When i am listing products i want them to have fixed height according to its step by step div's max height. For example below there is a screenshot from amazon that has what i want. All 4 elements' height are same.
and i'm using the code below to list products
<div class="shop-product-wrap">
<div class="row row-8">
<?php foreach ($products as $product): ?>
<div class="product-col col-lg-3 col-md-4 col-sm-6">
<!-- Single Product Start -->
<div class="single-product-wrap mt-10">
<div class="product-image">
<a href="<?= $product['url'] ?>"><img class="lazy"
src="<?= public_url('images/other/thumbnail.jpg') ?>"
data-src="<?= image_url($product['image_small']) ?>"
alt=""></a>
</div>
<div class="product-button">
<a onclick="wishlist.add(<?= $product['product_id'] ?>)"
class="add-to-wishlist">
<i class="icon-heart"></i></a>
</div>
<div class="product-content">
<h6 class="product-name"><?= $product['product_name'] ?>
</h6>
<div class="starts-icon-box">
<i class="stars-icon"></i>
</div>
<div class="price-box">
<div class="single-product-discount-and-price">
<?php if ($product['product_discount_price']): ?>
<span class="onsale"><?= (100 - (round(($product['product_price'] * 100) / $product['product_discount_price']))) . '%' ?></span>
<?php endif; ?>
<div class="old-and-new-price">
<span class="old-price"><?= $product['product_discount_price'] ?> TL</span>
<span class="new-price"><?= number_format($product['product_price'], 2) ?> TL</span>
</div>
</div>
</div>
<div class="product-button-action">
<a onclick="cart.add(<?= $product['product_id'] ?>,1)"
class="add-to-cart">Add to cart</a>
</div>
</div>
</div>
<!-- Single Product End -->
</div>
<?php endforeach; ?>
</div>
</div>
and when i listing products they all take the height they can according to their content such as its name and so that they don't have the same height. How can i make them have same height step-by-step.
Sorry for my bad english.
You have to use div tag with same class name for every product item and add a parent div like this...
<div class="parent">
<div class="child">Item 1</div>
<div class="child">Item 2</div>
<div class="child">Item 3</div>
<div class="child">Item 4</div>
</div>
Then use flex box for parent and child element...
.parent{
display: flex;
flex-wrap: wrap;
align-content: stretch;
height: 600px; /*or something*/
}
.child{
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
Please visit those links for more information about flex box...
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-content_stretch
Basically what I need to do foreach three divs and show 5 services from the database.
I don't know how to do that. Can someone explain to me how?
I try everything but just I have no idea how to do it.
Second div should not be in row.
Output be like on image link that I put below.
Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image1.jpg); height: 300px; background-color: red;">
<figcaption>
<h3>Service Title Goes Here 1</h3>
</figcaption>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image2.jpg); height: 300px; background-color: green;">
<figcaption>
<h3>Service Title Goes Here 2</h3>
</figcaption>
</div>
</div>
</div>
<div class="col-lg-4 service-middle">
<div class="service-img service" style="background-image: url(images/image3.jpg); height: 600px; background-color: blue;">
<figcaption>
<h3>Service Title Goes Here 3</h3>
</figcaption>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image4.jpg); height: 300px; background-color: yellow;">
<figcaption>
<h3>Service Title Goes Here 4</h3>
</figcaption>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image5.jpg); height: 300px; background-color: pink;">
<figcaption>
<h3>Service Title Goes Here 5</h3>
</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This should look like this
Hmm, I can't test this out yet but try to put this css; What it does is, were setting the height of .service-img.service to 50%. Then on the selector .service-middle>.service-img.service we're adding 100% height.
Do let me know if this worked and how it looked like on your screen. Thanks.
PS: dont run snippet, just use the css, bootstrap is not included.
.service-img.service {
height: 50%;
}
.height100{
height:100px;
}
.service-middle>.service-img.service{
height:100% !important;
}
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row height100">
<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image1.jpg); height: 300px; background-color: red;">
<figcaption>
<h3>Service Title Goes Here 1</h3>
</figcaption>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image2.jpg); height: 300px; background-color: green;">
<figcaption>
<h3>Service Title Goes Here 2</h3>
</figcaption>
</div>
</div>
</div>
<div class="col-lg-4 service-middle">
<div class="service-img service" style="background-image: url(images/image3.jpg); height: 618px; background-color: blue;">
<figcaption>
<h3>Service Title Goes Here 3</h3>
</figcaption>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image4.jpg); height: 300px; background-color: yellow;">
<figcaption>
<h3>Service Title Goes Here 4</h3>
</figcaption>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image5.jpg); height: 300px; background-color: pink;">
<figcaption>
<h3>Service Title Goes Here 5</h3>
</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Not really sure if the div.row should go in 2nd row, but I hope you get the idea.
I'm just using a ternary operator to add the service-middle class: <?php echo $num == 2? 'sevice-middle' : '' ?>
<?php if ($num == 1): ?>
<div class="col-lg-4" <?php echo 'num= '.$num; ?> >
<?php endif ?>
<?php foreach ($services as $service): $num++; ?>
<div class="row">
<div class="sevice-img service <?php echo $num == 2? 'sevice-middle' : '' ?> " style="background-image: url(<?php echo 'images/'.$service['image']); ?>); height: 300px;">
<figcaption>
<h3><?php echo $service['title']; ?></h3>
</figcaption>
</div>
</div>
<?php endforeach ?>
<?php if ($num > 0): ?>
</div>
<?php endif ?>
The primary bug you are facing is this:
<?php if ($num == 1): ?>
should be
<?php if ($num === 1): ?>
For more info:
How does true/false work in PHP?
How do I hide the image tag if there is no image present? Basically, I have an image gallery that has 4 images that can be set. However, if a product has 2 images how do I hide the other 2 image tags? What would be the best method to use?
<img src="/images/large/<?=$prod_id?>.jpg" onclick="openModal();currentSlide(1)" style="border: 1px solid #cccccc;" class="hover-single"/>
<div class="row">
<p style="text-align:center;">Click on image to enlarge</p>
<div class="column">
<img src="/images/large2/<?=$prod_id?>.jpg" style="width:80px; height:80px; border-right: 1px solid #cccccc; padding-right: 5px;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="/images/large3/<?=$prod_id?>.jpg" style="width:80px; height:80px; border-right: 1px solid #cccccc; padding-right: 5px;" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="/images/large4/<?=$prod_id?>.jpg" style="width:80px; height:80px;" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal" style="display: block;">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides" style="display: block;">
<div class="numbertext">1 / 4</div>
<img src="/images/large1/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">2 / 4</div>
<img src="/images/large2/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">3 / 4</div>
<img src="/images/large3/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">4 / 4</div>
<img src="/images/large4/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<a class="prev" onclick="plusSlides(-1)"><</a>
<a class="next" onclick="plusSlides(1)">></a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="gallery cursor active" src="/images/large1/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="gallery cursor" src="/images/large2/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="gallery cursor" src="/images/large3/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(3)">
</div>
<div class="column">
<img class="gallery cursor" src="/images/large4/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(4)">
</div>
</div>
</div>
Your modal-content code can be rewritten as below:
check if the image file exists or not
display the slide if the image file exists, do nothing if not.
for($i = 1; $i<=4; $i++) {
$img_file = '/images/large'.$i.'/'.$prod_id.'.jpg';
if(file_exists($img_file)) {
$display = ($i == 1) ? ' block' : ' none';
echo '<div class="mySlides" style="display:'.$display.';">';
echo ' <div class="numbertext">'.$i.' / 4</div>';
echo ' <img src="'.$img_file.'" style="width:95%; height:95%; margin-left: 2.5%;">';
echo '</div>';
}
}
The above code can be used to replace the following code section:
<div class="mySlides" style="display: block;">
<div class="numbertext">1 / 4</div>
<img src="/images/large1/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">2 / 4</div>
<img src="/images/large2/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">3 / 4</div>
<img src="/images/large3/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">4 / 4</div>
<img src="/images/large4/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
Sure it is not the best way to check file_exists each time. This can be improved by means of storing the number of images for each product in your data set / database. Then just set a new variable such as $img_num to replace the 4 in the loop.
Try this code:
<div class="row">
<p style="text-align:center;">Click on image to enlarge</p>
<div class="column">
<?php if(file_exists('/images/large2/'.$prod_id.'.jpg')){<?php>
<img src="/images/large2/<?=$prod_id?>.jpg" style="width:80px; height:80px; border-right: 1px solid #cccccc; padding-right: 5px;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"><?php }
</php>
Here is possible idea for your requirement :
$query = "here is your query";
$res = "your query executed";
$imagearray = array();
$i = 0;
while($row = mysql_fetch_array($res))
{
if(file_exists(imagepath.$row["image"]))
{
$imagearray[$i] = $row["image"];
$i++
}
}
Hi their Brother ild flue did a good work, but we can enhance the code a bit more but making the fetching a bit more dynamic, I propose the code below,
scan the dir for existing folders(in that way u don't need to depend
on the arbitrary number to indicate the folder
see that those paths with ur image exist or not
display the specified images and let the rest of the be discarded.
<div id="myModal" class="modal" style="display: block;">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<?php
$k=1;
$dirs = array_filter(glob('images/*'), 'is_dir');
foreach ( $dirs as $allLargeDir ){
$imgPath=$allLargeDir."/".$prod_id.".jpg";
if(file_exists($imgPath)){
?>
<div class="mySlides" style="display: block;">
<div class="numbertext"><?php echo $k++." / ".$n; ?></div>
<img src="<?php echo $imgPath;?>" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<?php
}
}
?>
I added a hover effect on a button. The code effect worked perfectly until I added some PHP code inside my page. Everything except the hover effect is working fine. It tried to understand the problem by using console but got no hint.
Here's my code:
CSS:
#secondary-content
{
position: relative;
top: 100vh;
}
#write-blog
{
position: relative;
top: -50%;
z-index: 3;
}
.ghost-button
{
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
}
.ghost-button:hover, .ghost-button:active
{
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
Here's the code inside my body:
<div class="slider fullscreen" data-indicators="false">
<ul class="slides">
<li>
<img src="Includes/images/map2.jpg">
<div class="caption left-align">
<h3 class="light white-text">History doesn't repeats itself,<br>but it does rhyme.</h3>
</div>
</li>
<li>
<div class="caption right-align">
<h1 class="light white-text">First solve the problem.<br>Then, write the code.</h1>
</div>
<img src="Includes/images/sublime_text.jpeg"> <!-- random image -->
</li>
<li>
<div class="caption center-align">
<h4 class="light white-text">Art speaks where words are unable to explain.</h4>
</div>
<img src="Includes/images/art1.jpg">
</li>
<li>
<img src="Includes/images/music2.jpg">
<div class="caption right-align">
<h5 class="light grey-text text-lighten-3">Where words fail, Music speaks.</h5>
</div>
</li>
<li>
<div class="caption left-align">
<h4 class="light white-text">Science is the poetry of<br>reality.</h4>
</div>
<img src="Includes/images/science.jpg"> <!-- random image -->
</li>
</ul>
<div id="write-blog" class="center-align">
<a class="ghost-button" href="">WRITE A BLOG</a>
</div>
</div>
<div id="secondary-content">
<div class="container">
<?php
$blog = DB::getInstance()->get('blogs', array('deletion_status', '=', '0'));
if($blogs = $blog->fetchRecords(2))
{
foreach($blogs as $blog)
{
$date=strtotime($blog->created_on); // changing the format of timestamp fetched from the database, converting it to milliseconds
echo
"<div class='section'>
<div class='row'>
<div class='col s2'>
<blockquote>".
date('M', $date)."<br>".
date('Y d', $date).
"</blockquote>
</div>
<div class='col s8'>
<h5>".ucfirst($blog->title)."</h5>
<h6>".ucfirst($blog->description)."</h6><br>
<div class='row'>
<div class='col s1'>
<i class='material-icons' style='color:grey'>remove_red_eye</i>
</div>
<div class='col s1'>
{$blog->views}
</div>
<div class='col s1 offset-s2'>
<i class='material-icons' style='color:grey'>thumb_up</i>
</div>
<div class='col s1'>
{$blog->likes}
</div>
<div class='col s1 offset-s2'>
<i class='material-icons' style='color:grey'>thumb_down</i>
</div>
<div class='col s1'>
{$blog->dislikes}
</div>
</div>
<div class='divider'></div>
</div>
</div>
</div>";
}
}
?>
</div>
<script src="Includes/js/jquery.min.js"></script>
<script type="text/javascript" src="Includes/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('.slider').slider();
});
</script>
The code below the div having id 'secondary-content' is also working fine. What wrong am I doing here?
Is my coding not correct or what's the problem in hover and footer. And i need to know about php mail program is that right or do I have mistakes in it i am not able to find errors because mail function doesnt work in local server.
<?php
if(isset($_POST["submit"])){
if($_POST["name"]==""||$_POST["email"]==""||$_POST["phone"]==""||$_POST["msg"]==""){
echo "Fill All Fields..";
}
else
{
$email=$_POST['email'];
$email= filter_var($email, FILTER_VALIDATE_EMAIL);
if (!$email){
echo "Invalid Sender's Email";
}
else{
$subject = $_POST['sub'];
$message = $_POST['msg'];
$headers = 'From:'. $email2 . "\r\n";
$headers .= 'Cc:'. $email2 . "\r\n";
$message = wordwrap($message, 70);
mail("recievers#gmail.com", $subject, $message, $headers);
echo "Your mail has been sent successfuly!";
}
}
}
?>
#wrapper
{
width:100%;
height:auto;
margin:0px;
background-color:orange;
}
#navbar
{
height:60px;
width:100%;
background-color:black;
color:white;
float:left;
}
ul li
{
display: block;
position: relative;
padding:20px 20px;
float:left;
}
ul li a
{
color:white;
}
#navbar a:hover
{
color:red;
padding:5px;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img
{
width: 70%;
height:15%;
margin: auto;
background-color:white;
}
.thumbnail
{
height:300px;
width:300px;
padding:25px auto;
margin:5px;
}
.contact
{
width:60%;
height:300px;
background-color:grey;
padding:100px 25px;
float:left;
}
.enquiry
{
width:40%;
height:300px;
background-color:seagreen;
float:left;
padding-left:5px;
}
input[type=text]:focus {
border: 3px solid red;
}
input[type="text"]
{
margin: 0 0 15px 0;
}
.footer
{
height:60px;
width:100%;
background-color:black;
padding:10px;
color:white;
float:left;
}
.footer img
{
float:right;
margin:5px;
padding:5px;
}
<!doctype html>
<html>
<head>
<title>student</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="wrapper"><!--start wrapper-->
<div id="navbar"><!--start nav-->
<ul>
<li><a href="home.html">Home</li>
<li><a href="about.html">About us</li>
<li><a href="services.html">Services</li>
<li><a href="products.html">Products</li>
<li><a href="contact.html">Contact us</li>
</ul>
</div><!--end nav-->
<div id="myCarousel" class="carousel slide" data-ride="carousel"><!--carasel start-->
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="D:\task\photo\h.jpg" alt="Home" height="400px">
<div class="carousel-caption">
<h3>Home</h3>
</div>
</div>
<div class="item">
<img src="D:\task\photo\as.jpg" alt="About us" height="400px">
<div class="carousel-caption">
<h3>About us</h3>
</div>
</div>
<div class="item">
<img src="D:\task\photo\s.jpg" alt="Services" height="400px">
<div class="carousel-caption">
<h3>Services</h3>
</div>
</div>
<div class="item">
<img src="D:\task\photo\p.jpg" alt="Products" height="400px">
<div class="carousel-caption">
<h3>products</h3>
</div>
</div>
<div class="item">
<img src="D:\task\photo\c.jpg" alt="Contact us" height="400px">
<div class="carousel-caption">
<h3>Contact us</h3>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!--end carosel-->
<div class="container-fluid text-center bg-grey"><!--boxes-->
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\i.jpg" alt="Innovation">
<p><strong>Innovation</strong></p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\cr.png" alt="Creative">
<p><strong>Creativity</strong></p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\po.jpg" alt="Positive">
<p><strong>Positivity</strong></p>
</div>
</div>
</div><!--end boxes-->
<div id="con">
<div class="contact">
<h1>Address</h1>
<p><span class="glyphicon glyphicon-map-marker"></span>
Abc private limited
no54,2ndstreet,
madipakkam,
chennai-67.
</p>
<p><span class="glyphicon glyphicon-envelope"></span> ABCPVT#gmail.com</p>
</div>
<div class="enquiry">
<h1>Enquiry Form</h1>
<table border="0" align="center">
<form name="form" action="email.php" id="form" method="post">
<tr>
<tr>
<td>Name</td>
<td><input name="name" placeholder="Name" type="text" value=""></td>
</tr>
<tr>
<td>Email</td>
<td><input name="email" placeholder="Email" type="text" value=""></td>
</tr>
<tr>
<td>Phone</td>
<td><input name="phone" placeholder="phonenumber" type="text" value=""></td>
</tr>
<tr>
<td>Message</td>
<td><textarea name="msg" placeholder="Type your text here..."></textarea></td>
</tr>
<td colspan="2" style="text-align:center"><input id="send" name="submit" type="submit" value="Submit"></td>
</tr>
</form>
</table>
</div>
</div>
<div class="footer">
copyrights © to WWW.abcpvt.com
<img src="E:\photos\fb.png" alt="fb"/>
<img src="E:\photos\ln.png" alt="tweet"/>
<img src="E:\photos\tw.png" alt="linkedin"/>
</div>
</div><!--end wrapper-->
</body>
</html>
You can send mail from localhost with sendmail package , sendmail package is inbuild in XAMPP. So if you are using XAMPP then you can easily send mail from localhost.
for example you can configure C:\xampp\php\php.ini and c:\xampp\sendmail\sendmail.ini for gmail to send mail.
in C:\xampp\php\php.ini find extension=php_openssl.dll and remove the semicolon from the beginning of that line to make SSL working for gmail for localhost.
in php.ini file find [mail function] and change
SMTP=smtp.gmail.com
smtp_port=587
sendmail_from = my-gmail-id#gmail.com
sendmail_path = "\"C:\xampp\sendmail\sendmail.exe\" -t"
Now Open C:\xampp\sendmail\sendmail.ini. Replace all the existing code in sendmail.ini with following code
[sendmail]
smtp_server=smtp.gmail.com
smtp_port=587
error_logfile=error.log
debug_logfile=debug.log
auth_username=my-gmail-id#gmail.com
auth_password=my-gmail-password
force_sender=my-gmail-id#gmail.com
Now you have done!! create php file with mail function and send mail from localhost.
PS: don't forgot to replace my-gmail-id and my-gmail-password in above code. Also, don't forget to remove duplicate keys if you copied settings from above. For example comment following line if there is another sendmail_path :
sendmail_`path="C:\xampp\mailtodisk\mailtodisk.exe"
in the php.ini file
Also remember to restart the server using the XAMMP control panel so the changes take effect.
OR
XMail or hMailServer can do the trick.
OR
try PHPMailer
Hover is not working
It is because of carousel-inner is overflow in your #navbar div ,so use overflow: hidden;
footer is not taking 100%!! Because footer is #wrapper child class, so 100% will take that parent(#wrapper) width only.Thus use vw instead of % and calculate margin-left property will solve your problem
#navbar
{
height:60px;
width:100%;
background-color:black;
color:white;
overflow: hidden;
}
.footer
{
height:60px;
width: 100vw;
margin-left: calc(-51vw + 50%);
background-color:black;
padding:10px;
color:white;
position: fixed;
bottom: 0;
}
#con {
margin-bottom: 23vw;
}
The reasons for the footer not been 100%.
Its 100% per say but it becomes more than 100% after adding padding:10px;. To solve this you have to options. Its either you use width:100%; and add no padding, or you add padding and use display:block; instead of width:100%;
Secondly, you have a closing div missing for the box.
You have
<div class="container-fluid text-center bg-grey"><!--boxes-->
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\i.jpg" alt="Innovation">
<p><strong>Innovation</strong></p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\cr.png" alt="Creative">
<p><strong>Creativity</strong></p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\po.jpg" alt="Positive">
<p><strong>Positivity</strong></p>
</div>
</div>
</div><!--end boxes-->
Instead of:
<div class="container-fluid text-center bg-grey"><!--boxes-->
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\i.jpg" alt="Innovation">
<p><strong>Innovation</strong></p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\cr.png" alt="Creative">
<p><strong>Creativity</strong></p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\po.jpg" alt="Positive">
<p><strong>Positivity</strong></p>
</div>
</div>
</div><!-- this is the missing closing div-->
</div><!--end boxes-->
Then lastly. You have to take away float:left; from the footer and use clear:both; instead. Doing this you will notice you have a better result.