Copy link to clipboard
Copied
Good evening. I'm in the midst of error checking my pages one by one. I'm currently error checking my home page MICHAEL GUYDON PHOTOGRAPHY​ So far I've been able to clear out all but two errors. The logo on the top left shows up as an error.<img src="logo camera.fw.png" alt="" width="240" height="53" class="img-fluid"></a> The second error is this one. When I attempt to omit this, it enlarges my navigation menu font. <a class="navbar-brand" href="#"></a>
↩
<link href="css/bootstrap-4.0.0.css" rel="stylesheet"><style type="text/css">
↩. Is there any solution to this? Thanks in advance.
instead of
<style type="text/css"> .... </style>
write
<style> .... </style>
I just used ... instead of retyping all the CSS code
Copy link to clipboard
Copied
the src image contains a white space... remove it by replacing it by an underscore, or simply remove it... (think to modify the image filename according
simply remove the yellow backgrounded text... it is an opening tag, that contains nothing, and worth doesn't have any closing tag
Copy link to clipboard
Copied
Thanks for the reply. When I remove that particular line in "yellow", it enlarge my font and removes my background image. So it seems like it's serving a purpose. Correct me on this one? Thanks.
Copy link to clipboard
Copied
you have some styles in there I assume you removed this bit which you'll need to retain:
<style type="text/css">
#image {
}
body {
background-image: url(Jennifer.jpg);
background-repeat: no-repeat;
background-size: cover;
}
body,td,th {
font-size: 9rem;
}
body,td,th {
font-size: 0.8rem;
}
</style>
Copy link to clipboard
Copied
So what is the solution to this as far as coding it, in order to retain those elements, without using the <style type="text/css"> Or do I need to add something else to the style code, that's missing?
Copy link to clipboard
Copied
youps sorry I didn't previously visit your web site, so I didn't see that some style was lying around... so as Energize point at keep it fully (opening STYLE tag, content and closing STYLE tag)... and you can only remove the type attribute... so only gets <style>
Copy link to clipboard
Copied
I somewhat understand what you're saying. Could you give me an example? I want to make sure that I'm doing this right.
Copy link to clipboard
Copied
instead of
<style type="text/css"> .... </style>
write
<style> .... </style>
I just used ... instead of retyping all the CSS code
Copy link to clipboard
Copied
Copy link to clipboard
Copied
file CONTACT
line 103 a </li> is missing
line 118 you should remove the <p> tag
again after the adress tag you should remove
line 156 remove the tags <p class="m-4">
<div class="container">
<p class="m-2">
</div>
then add the following closing tags
</div>
</div>
</div>
</form>
</div>
</body>
Copy link to clipboard
Copied
so here the corrected file
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ffffff">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<meta charset="utf-8">
<title>CONTACT</title>
<link rel="stylesheet" href="bootstrap.min.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="css/bootstrap-4.0.0.css" rel="stylesheet">
<style>
#image {
}
body {
background-image: url(Jennifer.jpg);
background-repeat: no-repeat;
background-size: cover;
}
body, td, th {
font-size: 9rem;
}
body, td, th {
font-size: 0.8rem;
color: #FFFFFF;
}
hr {
background: white;
}
.contact-form {
background: rgba(0,0,0, .6);
color: white;
margin-top: 100px;
padding: 20px;
box-shadow: 0px 0px 10px 3px grey;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<a href="http://michaelguydonphotography.com/">
<img src="logocamera.fw.png" alt="" width="240" height="53" class="img-fluid">
</a>
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> </li>
<li class="nav-item dropdown">
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="http://michaelguydonphotography.com/">HOME<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://michaelguydonphotography.com/portraits" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> PORTFOLIO </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="http://michaelguydonphotography.com/portraits">PORTRAITS</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://michaelguydonphotography.com/fashion">FASHION</a>
<div class="dropdown-divider"></div>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://michaelguydonphotography.com/editorial">EDITORIAL</a>
<div class="dropdown-divider"></div>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://michaelguydonphotography.com/advertisement">ADVERTISEMENT</a>
<div class="dropdown-divider"></div>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://michaelguydonphotography.com/conceptual">CONCEPTUAL</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://michaelguydonphotography.com/sepiavision">SEPIA VISION</a>
</div>
</li>
<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/resume">RESUME <span class="sr-only">(current)</span></a> </li>
<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/about">ABOUT <span class="sr-only">(current)</span></a> </li>
<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/contact">CONTACT <span class="sr-only">(current)</span></a></li>
<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/guestbook">GUESTBOOK <span class="sr-only">(current)</span></a> </li>
</ul>
</form>
</div>
</nav>
<div class="container contact-form" >
<h1>CONTACT US</h1>
<p class="required small">* = Required fields</p>
<hr>
<form id="contact" class="form-horizontal" method="post" action="/contact.php">
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2"> </div>
<div class="row">
<div class="col-md-6">MICHAEL GUYDON
<address>P.O. BOX 3203 BERKELEY, CA. 94703</address>
<p>Phone:- 415-684-4047</p>
</div>
<div class="col-md-6">
<div class="form-group">
<label>*name</label>
<input name="name" type="text" required class="form-control" id="name" placeholder="First & Last" value="">
<span class="required small"></span>
</div>
<div class="form-group">
<label>*email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="you@domain.com" value="" required>
<span class="required small"></span>
</div>
<div class="form-group">
<label>phone</label>
<input type="tel" class="form-control" id="phone" name="phone" placeholder="(123) 456-7890" value="">
<span class="required small"></span>
</div>
<div class="form-group">
<label>*message</label>
<textarea name="message" rows="4" required class="form-control" id="message" placeholder="Leave a message"></textarea>
<span class="required small"></span>
</div>
<div class="form-group">
<label>human test</label>
<h3 class="human">6 + 6 = ?</h3>
<input type="text" class="form-control" id="human" name="human" placeholder="Your Answer" value="">
<span class="required small"></span>
</div>
<div class="form-group">
<button type="submit" id="submit" name="submit" class="btn-lg btn-primary btn-block">SUBMIT</button>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Copy link to clipboard
Copied
Update. The contact page works. However, what's missing is the confirmation that pops up, that was in the initial code that was given to me on here, from Nancy O'Shea. What I've noticed while doing a compare and contrast is the differences in the php code that was in the initial code from the one that I had pasted a few days ago. The same one that you guys looked at. I only copied and pasted it and never modified the code, but to just add my email and host provider's email. My point being, I see some different approaches in the codes. Interesting. With that being said. How do I get the confirmation that email was sent, back on the page?
Copy link to clipboard
Copied
The contact form I gave you was built for Bootstrap 3.7, not 4.0.
There's a big difference between the 2 versions. Revert to the original code I gave you and it should work.
Copy link to clipboard
Copied
good catch Nancy...
Copy link to clipboard
Copied
did you got all three files working now, or do you still need any help on one of them
Copy link to clipboard
Copied
Regarding the contact page. They both function. The initial one always worked, but the issue were the errors, while error checking it. When I'd implemented your code, replacing the other, it works too, but with no errors. What is missing is the confirmation that the message was sent. But Nancy clarified why which is related to the previous Bootstrap support, so I put her code back in for the time being. As each reply and suggestion is given to me, I'm learning, vs guessing what code behavior works and what doesn't. If you could add a confirmation to the code, or show me where and how to add it, I'd use your code, because it's error free. And I'll update it to Bootstrap 4. I just want to make sure that the client knows that his or her message has been sent. The only reason why I know that it work, is when I check my messages.
Regarding my other pages, Fashion, portrait. I'm still trying to figure that one out. I just have to make sure that I'm grasping the directions that were given to me on here. My other pages were easy, where I didn't need help, those checked off error free. So that's a motivator to keep it going. Not that I need that to be motivated. I'm going to get it done either way. It's my will. Let me know it a message confirmation can be added to the code? Thanks.
Copy link to clipboard
Copied
do all three pages are currently on line ?
CONTACT I guess that is the one using the old code that Nancy reference too...
Copy link to clipboard
Copied
Yes. All three are on. Yes, you're correct, regarding the old code that Nancy is talking about.
Copy link to clipboard
Copied
Legacys7 wrote
Yes. All three are on. Yes, you're correct, regarding the old code that Nancy is talking about.
There is an answer for your fashion page validation issues in this thread - post No. 16. Have you applied those changes?
Copy link to clipboard
Copied
well concerning CONTACT, everything is fine until after the last SUBMIT BUTTON
where you have to add all the appropriate closing tags
so after line 145 add
</div>
</div>
</div>
</form>
</div>
then remove from lines 157 to 160 lines which seams to be just NOISES
so remove
<p class="m-4">
<div class="container">
<p class="m-2">
</div>
and instead of it add a closing BODY tag
</body>
that should do the job....
next thread I will just send you the corrected code
Copy link to clipboard
Copied
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ffffff">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<meta charset="utf-8">
<title>CONTACT</title>
<link rel="stylesheet" href="bootstrap.min.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="css/bootstrap-4.0.0.css" rel="stylesheet">
<style>
#image {
}
body {
background-image: url(Jennifer.jpg);
background-repeat: no-repeat;
background-size: cover;
}
body, td, th {
font-size: 9rem;
}
body, td, th {
font-size: 0.8rem;
color: #FFFFFF;
}
hr {
background: white;
}
.contact-form {
background: rgba(0,0,0, .6);
color: white;
margin-top: 100px;
padding: 20px;
box-shadow: 0px 0px 10px 3px grey;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light"> <a href="http://michaelguydonphotography.com/"> <img src="logocamera.fw.png" alt="" width="240" height="53" class="img-fluid"> </a> <a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> </li>
<li class="nav-item dropdown">
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a> </div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/">HOME<span class="sr-only">(current)</span></a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://michaelguydonphotography.com/portraits" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> PORTFOLIO </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="http://michaelguydonphotography.com/portraits">PORTRAITS</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://michaelguydonphotography.com/fashion">FASHION</a>
<div class="dropdown-divider"></div>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://michaelguydonphotography.com/editorial">EDITORIAL</a>
<div class="dropdown-divider"></div>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://michaelguydonphotography.com/advertisement">ADVERTISEMENT</a>
<div class="dropdown-divider"></div>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://michaelguydonphotography.com/conceptual">CONCEPTUAL</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://michaelguydonphotography.com/sepiavision">SEPIA VISION</a></div>
</li>
<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/resume">RESUME <span class="sr-only">(current)</span></a> </li>
<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/about">ABOUT <span class="sr-only">(current)</span></a> </li>
<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/contact">CONTACT <span class="sr-only">(current)</span></a>
<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/guestbook">GUESTBOOK <span class="sr-only">(current)</span></a> </li>
</ul>
</form>
</div>
</nav>
<div class="container contact-form" >
<h1>CONTACT US</h1>
<p class="required small">* = Required fields</p>
<hr>
<form id="contact" class="form-horizontal" method="post" action="/contact.php">
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2"> </div>
<div class="row">
<div class="col-md-6">MICHAEL GUYDON
<p>
<address>
P.O. BOX 3203 BERKELEY, CA. 94703
</address>
<p>
<p>Phone:- 415-684-4047</p>
</div>
<div class="col-md-6">
<div class="form-group">
<label>*name</label>
<input name="name" type="text" required class="form-control" id="name" placeholder="First & Last" value="">
<span class="required small"></span> </div>
<div class="form-group">
<label>*email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="you@domain.com" value="" required>
<span class="required small"></span> </div>
<div class="form-group">
<label>phone</label>
<input type="tel" class="form-control" id="phone" name="phone" placeholder="(123) 456-7890" value="">
<span class="required small"></span> </div>
<div class="form-group">
<label>*message</label>
<textarea name="message" rows="4" required class="form-control" id="message" placeholder="Leave a message"></textarea>
<span class="required small"></span> </div>
<div class="form-group">
<label>human test</label>
<h3 class="human">6 + 6 = ?</h3>
<input type="text" class="form-control" id="human" name="human" placeholder="Your Answer" value="">
<span class="required small"></span> </div>
<div class="form-group">
<button type="submit" id="submit" name="submit" class="btn-lg btn-primary btn-block">SUBMIT</button>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
</body>
</html>
Copy link to clipboard
Copied
well I ve started to comment all the error from the PORTRAIT file, but it is a real mess... so I stopped and removed all comments and in the next thread I will just copy a reorganised file... test it, I haven't time to do it... so test it, and if that works, study from there comparing both files OLD and NEW
in the same way, you have a SCRIPT link to vue.js and I'm not sure that you really need it... because you just use SWIPER...
any way...
Copy link to clipboard
Copied
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ffffff">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css'>
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PORTRAITS</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.0.0.css" rel="stylesheet">
<style>
body {
margin: 0;
background-color: #000;
}
* {
box-sizing: border-box;
}
.swiper-container {
height: 100vh;
width: 100vw;
text-align: center;
}
@media screen and (max-width: 768px) {
.swiper-slide {
width: 100%;
}
}
img {
max-height: 100%;
max-width: 100%;
}
.swiper-button-prev, .swiper-button-next {
display: flex;
justify-content: center;
background-image: none!important;
color: #fff;
font-size: 35px;
height: auto!important;
}
@media screen and (max-width: 768px) {
.swiper-button-prev {
top: 100px;
background-color: #000;
border-radius: 4px;
padding: 0 9px 0 5px;
}
.swiper-button-next {
top: 100px;
background-color: #000;
border-radius: 4px;
padding: 0 5px 0 9px;
}
}
.caption {
color: white;
}
</style>
</head>
<body style="padding-top: 70px">
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light"><a href="http://michaelguydonphotography.com/"><img src="logocamera.fw.png" alt="" width="240" height="53" class="img-fluid"></a> <a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> </li>
<li class="nav-item dropdown">
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/">HOME<span class="sr-only">(current)</span></a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> PORTFOLIO </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="http://michaelguydonphotography.com/portraits">PORTRAITS</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://michaelguydonphotography.com/fashion">FASHION</a>
<div class="dropdown-divider"></div>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://michaelguydonphotography.com/editorial">EDITORIAL</a>
<div class="dropdown-divider"></div>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://michaelguydonphotography.com/advertisement">ADVERTISEMENT</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://michaelguydonphotography.com/conceptual">CONCEPTUAL</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="http://michaelguydonphotography.com/sepiavision">SEPIA VISION</a>
</div>
</li>
<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/resume">RESUME <span class="sr-only">(current)</span></a> </li>
<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/about">ABOUT <span class="sr-only">(current)</span></a> </li>
<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/contact">CONTACT <span class="sr-only">(current)</span></a>
<li class="nav-item active"> <a class="nav-link" href="http://michaelguydonphotography.com/guestbook">GUESTBOOK <span class="sr-only">(current)</span></a> </li>
</ul>
</form>
</div>
</nav>
<div id="app">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="resize/Jamaica.jpg" alt="Image Description"></div>
<div class="swiper-slide"><img src="resize/grace.jpg" alt="Image Description"></div>
</div>
<div class="swiper-button-prev"><i class="fa fa-angle-left"></i></div>
<div class="swiper-button-next"><i class="fa fa-angle-right"></i></div>
</div>
</div>
<!-- end app -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Popper JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<!--latest Bootstrap 4 JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js'></script>
<script >
var app = new Vue({
el: '#app',
data: {
infinite: true
},
mounted: function () {
var mySwiper = new Swiper ('.swiper-container', {
centeredSlides:true,
direction: 'horizontal',
loop: this.infinite,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
});
}
})
</script>
</body>
</html>
Copy link to clipboard
Copied
On your 'contact' page you have some mal-formed code. You are ok down to your closing </nav>
You need to replace your form code with the below, down to the comment <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<form id="contact" class="form-horizontal" method="post" action="/contact.php">
<div class="container contact-form" >
<div class="row">
<div class="col-md-6">
<div class="form-group">
MICHAEL GUYDON<p>
<address>P.O. BOX 3203 BERKELEY, CA. 94703</address>
<p><p>Phone:- 415-684-4047</p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>*name</label>
<input name="name" type="text" required class="form-control" id="name" placeholder="First & Last" value="">
<span class="required small"></span>
</div>
<div class="form-group">
<label>*email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="you@domain.com" value="" required>
<span class="required small"></span>
</div>
<div class="form-group">
<label>phone</label>
<input type="tel" class="form-control" id="phone" name="phone" placeholder="(123) 456-7890" value="">
<span class="required small"></span>
</div>
<div class="form-group">
<label>*message</label>
<textarea name="message" rows="4" required class="form-control" id="message" placeholder="Leave a message"></textarea>
<span class="required small"></span>
</div>
<div class="form-group">
<label>human test</label>
<h3 class="human">6 + 6 = ?</h3>
<input type="text" class="form-control" id="human" name="human" placeholder="Your Answer" value="">
<span class="required small"></span>
</div>
<div class="form-group">
<button type="submit" id="submit" name="submit" class="btn-lg btn-primary btn-block">SUBMIT</button>
</div>
</div>
</div>
</div>
</form>
ALSO you have this right at the foot of the page. Delete it.
<p class="m-4">
<div class="container"><p class="m-2">
</div>
Not sure why you are calling the Bootstrap css twice?
<link rel="stylesheet" href="bootstrap.min.css">
<link href="css/bootstrap-4.0.0.css" rel="stylesheet">
Once is sufficient from the cnd or locally:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Copy link to clipboard
Copied
Will look at this. Thanks.