Highlighted

W3C error check question

Participant ,
Nov 21, 2018

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.

Adobe Community Professional
Correct answer by B i r n o u | Adobe Community Professional

instead of

<style type="text/css"> .... </style>

write

<style> .... </style>

I just used ... instead of retyping all the CSS code

Views

4.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

W3C error check question

Participant ,
Nov 21, 2018

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.

Adobe Community Professional
Correct answer by B i r n o u | Adobe Community Professional

instead of

<style type="text/css"> .... </style>

write

<style> .... </style>

I just used ... instead of retyping all the CSS code

Views

4.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 21, 2018 0
Adobe Community Professional ,
Nov 21, 2018

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2018 1
Participant ,
Nov 21, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2018 0
Adobe Community Professional ,
Nov 21, 2018

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>

Paul-M, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2018 1
Participant ,
Nov 21, 2018

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2018 0
Adobe Community Professional ,
Nov 21, 2018

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2018 1
Participant ,
Nov 21, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2018 0
Adobe Community Professional ,
Nov 21, 2018

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2018 1
Participant ,
Nov 22, 2018

Copy link to clipboard

Copied

Thanks for the help. I have two more pages that I'm stuck on. This one CONTACTFASHION  and PORTRAITS . I see errors. Most of them I corrected with no problems.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2018 0
Adobe Community Professional ,
Nov 22, 2018

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2018 0
Adobe Community Professional ,
Nov 22, 2018

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2018 0
LEGEND ,
Nov 22, 2018

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">

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2018 1
Adobe Community Professional ,
Nov 22, 2018

Copy link to clipboard

Copied

Contact page, you have some unclosed <div> tags in your code.

Every <div> requires a matching closing </dov> tag.  The same goes for matching <li>, <p> <h1> <h2> etc...  This is why it's so important for you to learn proper document structure in HTML code, so you can fix your errors.
Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2018 0
Participant ,
Nov 22, 2018

Copy link to clipboard

Copied

Will look at this. Thanks.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2018 0
LEGEND ,
Nov 22, 2018

Copy link to clipboard

Copied

FASHION Page:

1) Move all of the swiper css out of the <body></body> section of the page and into the <head></head> section or put it in a linked 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>

2) At the end of the swiper css, currently in the <body></body> section of your page, your have the below code - delete it

</head>

<body>

3) Ideally move all the linked files directly following your closing </nav> tag into the <head></head> section of the page.

<!--latest jQuery Core-->

<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>

<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'>

4) All the below images need an alt tag to pass validation <img src="resize/Tyrie.jpg" alt="Image Description"> or you can leave the alt tag blank alt=""

1. <img src="resize/Tyrie.jpg">

2. <img src="resize/Jennifer.jpg">

3. <img src="images/Yolanda.jpg">

4. <img src="resize/Alice.jpg">

5) Ensure you only have one call to the Bootstrap css - at the moment you again have it in the page twice.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2018 0
Participant ,
Nov 22, 2018

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2018 0
Adobe Community Professional ,
Nov 22, 2018

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.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2018 0
Adobe Community Professional ,
Nov 23, 2018

Copy link to clipboard

Copied

did you got all three files working now, or do you still need any help on one of them

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 0
Adobe Community Professional ,
Nov 23, 2018

Copy link to clipboard

Copied

good catch Nancy...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 0
Participant ,
Nov 23, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 0
Adobe Community Professional ,
Nov 23, 2018

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...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 0
Participant ,
Nov 23, 2018

Copy link to clipboard

Copied

Yes. All three are on. Yes, you're correct, regarding the old code that Nancy is talking about.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 0
LEGEND ,
Nov 23, 2018

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 0
Adobe Community Professional ,
Nov 23, 2018

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 0
Adobe Community Professional ,
Nov 23, 2018

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 0
Adobe Community Professional ,
Nov 23, 2018

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...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 0
Adobe Community Professional ,
Nov 23, 2018

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 1
Adobe Community Professional ,
Nov 22, 2018

Copy link to clipboard

Copied

if that works, I will correct the two otehrs ones... for now... dinner...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2018 1
Participant ,
Nov 22, 2018

Copy link to clipboard

Copied

I'll address this. Thanks.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2018 0
Adobe Community Professional ,
Nov 23, 2018

Copy link to clipboard

Copied

So, is this ok ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 1
Participant ,
Nov 23, 2018

Copy link to clipboard

Copied

It's perfect. No errors. So what I need to do is a compare and contrast of the errors that were there before you corrected them, so that I can learn from this. I really do appreciate your time and the time that you've put into this. It's much appreciated. I'll use this code for the rest of portfolio pages. It just makes sense. The contact form works too, which it worked from the beginning. I just have to add an confirmation show up, like in the one Nancy sent in the other form. That way, the client knows that their message was sent.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 0
Adobe Community Professional ,
Nov 23, 2018

Copy link to clipboard

Copied

are you on windows... if so WinMerge will help you to compare files and you can see from there what change and where in between old and new file

personnaly I use Ultra Compare but it is not free as winmerge StackPath

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 1
Participant ,
Nov 23, 2018

Copy link to clipboard

Copied

Yes, I'm using Windows. How do I add a email sent confirmation to this particular contact form?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 0
Adobe Community Professional ,
Nov 23, 2018

Copy link to clipboard

Copied

Legacys7  wrote

How do I add a email sent confirmation to this particular contact form?

The contact from I builti in Bootstrap 3.3.7  works as expected.  You broke it when you pasted the form into a Bootstrap 4.0 document.   BS 4 is not backwards compatible with BS 3. 

OPTION 1:  Revert your contact page to use BS 3.3.7

OPTION 2:  Re-build the form yourself  in BS 4.0 or higher.

https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form

As I recall, you wanted to learn to work with code.  Option 2 might be a good learning exercise for you.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 0
Legacys7 LATEST
Participant ,
Nov 23, 2018

Copy link to clipboard

Copied

Thanks again Birnou..

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 0