Jump to content

Recommended Posts

Bom dia,

Eu encontro-me a tentar realizar um formulário login do tipo google, mas apesar de estar a funcionar, por vezes quando recarrego a pagina aparece assim e tenho que carregar na pagina ou no campo ou outro local qualquer para atualizar.

 

Gostaria de conseguir corrijir mas apesar de pesquisar não encontro como corrijir.

 

o meu código html: 

Spoiler

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <link rel="stylesheet" href="CSS/bootstrap.css" />
        <link rel="stylesheet" href="CSS/agency.css" />
    <!--Login Error Messages-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="js/jquery.js"></script>
</head>
<body>
<!-- Login -->
<section id="login" class="login">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <form id="loginForm" class="form-signin">
                    <div class="col-sm-12 text-center">
                        <h2 class="section-heading text-uppercase">Login</h2>
                    </div>
                    <div class="bs-example">
                        <div class="alert alert-danger fade in invalid-feedback" style="display:block">
                            <a href="#" class="close">&times;</a>
                            <a href="#" class="alert-link"><strong>IncorrectEmailOrPassword</strong></a>
                        </div>
                        <div class="invalid-feedback alert alert-danger fade in" style="display:block">
                            <a href="#" class="close">&times;</a>
                            <a href="#" class="alert-link"><strong>AcceptedTermsAndPoliciesPasswordIsRequired</strong></a>
                        </div>
                        <div class="invalid-feedback alert alert-danger fade in" style="display:block">
                            <a href="#" class="close">&times;</a>
                            <a href="#" class="alert-link"><strong>InvalidRequest</strong></a>
                        </div>
                        <div class="invalid-feedback alert alert-danger fade in" style="display:block">
                            <a href="#" class="close">&times;</a>
                            <a href="#" class="alert-link"><strong>GenericError</strong></a>
                        </div>
                        <div class="invalid-feedback alert alert-danger alert-info fade in" style="display:block">
                            <a href="#" class="close"</a>
                            <a href="#" class="alert-link"><strong>NoConnectionError</strong></a>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-label-group">
                            <input type="email" class="form-control" id="email" autofocus="" placeholder="Email" required />
                            <label for="email">Email</label>
                        </div>
                        <div class="form-label-group">
                            <input type="password" class="form-control" id="password"autofocus="" placeholder="Password" required" />
                            <label for="password">Password</label>
                        </div>
                        <div v-if="errorCode === 'USER_MUST_ACCEPT_TERMS_AND_POLICIES'" class="checkbox mb-3">
                            <input type="checkbox" id="acceptedTermsAndPolicies"/> AcceptedTermsAndPolicies
                        </div>
                        <div class="checkbox mb-3">
                            <input type="checkbox" id="keepMeLoggedIn" /> KeepMeLoggedIn
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="col-lg-12 text-center">
                        <button type="submit" class="btn btn-primary btn-xl text-uppercase" id="goButton">Go</button>
                       
                    </div>
                </form>

            </div>  
    </div>
        </div>
</section>
</body>
</html>

 

Meu código css: 

Spoiler

body {
  overflow-x: hidden;
}

p {
  line-height: 1.75;
}

a {
  color: #c02026;
}

a:hover {
  color: #0040ff;
}

.text-primary {
  color: #c02026 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

section {
  padding: 100px 0;
}

section h2.section-heading {
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 15px;
}

section h3.section-subheading {
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 75px;
  text-transform: none;
  font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@media (min-width: 768px) {
  section {
    padding: 150px 0;
  }
}

.btn {
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
}

.btn-xl {
  font-size: 18px;
  padding: 20px 40px;
}

.btn-primary {
  background-color: #c02026;
  border-color: #c02026;
}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
  background-color: #0040ff !important;
  border-color: #0040ff !important;
  color: white;
}

.btn-primary:active, .btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(254, 209, 55, 0.5) !important;
}

::-moz-selection {
  background: #c02026;
  text-shadow: none;
}

::selection {
  background: #c02026;
  text-shadow: none;
}

img::selection {
  background: transparent;
}

img::-moz-selection {
  background: transparent;
}

#mainNav {
  background-color: lightgrey;
}

#mainNav .navbar-toggler {
  font-size: 12px;
  right: 0;
  padding: 13px;
  text-transform: uppercase;
  color: white;
  border: 0;
  background-color: #c02026;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#mainNav .navbar-brand {
  color: #c02026;
  font-family: 'Kaushan Script', 'Helvetica Neue', Helvetica, Arial, cursive;
}

#mainNav .navbar-brand.active, #mainNav .navbar-brand:active, #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
  color: #0040ff;
}

#mainNav .navbar-nav .nav-item .nav-link {
  font-size: 90%;
  font-weight: 400;
  padding: 0.75em 0;
  letter-spacing: 1px;
  color: white;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
  color: #c02026;
}

@media (min-width: 992px) {
  #mainNav {
    padding-top: 25px;
    padding-bottom: 25px;
    -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
    -moz-transition: padding-top 0.3s, padding-bottom 0.3s;
    transition: padding-top 0.3s, padding-bottom 0.3s;
    border: none;
    background-color: transparent;
  }
  #mainNav .navbar-brand {
    font-size: 1.75em;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  #mainNav .navbar-nav .nav-item .nav-link {
    padding: 1em 1em !important;
  }
  #mainNav.navbar-shrink {
    padding-top: 0;
    padding-bottom: 0;
    background-color: #212529;
  }
  #mainNav.navbar-shrink .navbar-brand {
    font-size: 1.25em;
    padding: 12px 0;
  }
}

header.masthead {
  text-align: center;
  color: white;
  background-image: url("../images/header-bg.jpg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

header.masthead .intro-text {
  padding-top: 150px;
  padding-bottom: 100px;
}

header.masthead .intro-text .intro-lead-in {
  font-size: 22px;
  font-style: italic;
  line-height: 22px;
  margin-bottom: 25px;
  font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

header.masthead .intro-text .intro-heading {
  font-size: 50px;
  font-weight: 700;
  line-height: 50px;
  margin-bottom: 25px;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@media (min-width: 768px) {
  header.masthead .intro-text {
    padding-top: 150px;
    padding-bottom: 200px;
  }
  header.masthead .intro-text .intro-lead-in {
    font-size: 40px;
    font-style: italic;
    line-height: 40px;
    margin-bottom: 25px;
    font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  header.masthead .intro-text .intro-heading {
    font-size: 75px;
    font-weight: 700;
    line-height: 75px;
    margin-bottom: 50px;
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
}

.service-heading {
  margin: 15px 0;
  text-transform: none;
}

#jobs .jobs-item {
  right: 0;
  margin: 0 0 15px;
}

#jobs .jobs-item .jobs-link {
  position: relative;
  display: block;
  max-width: 400px;
  margin: 0 auto;
  cursor: pointer;
}

#jobs .jobs-item .jobs-link .jobs-hover {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  transition: all ease 0.5s;
  opacity: 0;
  background: rgba(254, 209, 54, 0.9);
}

#jobs .jobs-item .jobs-link .jobs-hover:hover {
  opacity: 1;
}

#jobs .jobs-item .jobs-link .jobs-hover .jobs-hover-content {
  font-size: 20px;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 20px;
  margin-top: -12px;
  text-align: center;
  color: white;
}

#jobs .jobs-item .jobs-link .jobs-hover .jobs-hover-content i {
  margin-top: -12px;
}

#jobs .jobs-item .jobs-link .jobs-hover .jobs-hover-content h3,
#jobs .jobs-item .jobs-link .jobs-hover .jobs-hover-content h4 {
  margin: 0;
}

#jobs .jobs-item .jobs-caption {
  max-width: 400px;
  margin: 0 auto;
  padding: 25px;
  text-align: center;
  background-color: #fff;
}

#jobs .jobs-item .jobs-caption h4 {
  margin: 0;
  text-transform: none;
}

#jobs .jobs-item .jobs-caption p {
  font-size: 16px;
  font-style: italic;
  margin: 0;
  font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#jobs * {
  z-index: 2;
}

@media (min-width: 767px) {
  #jobs .jobs-item {
    margin: 0 0 30px;
  }
}

.jobs-modal {
  padding-right: 0px !important;
}

.jobs-modal .modal-dialog {
  margin: 1rem;
  max-width: 100vw;
}

.jobs-modal .modal-content {
  padding: 100px 0;
  text-align: center;
}

.jobs-modal .modal-content h2 {
  font-size: 3em;
  margin-bottom: 15px;
}

.jobs-modal .modal-content p {
  margin-bottom: 30px;
}

.jobs-modal .modal-content p.item-intro {
  font-size: 16px;
  font-style: italic;
  margin: 20px 0 30px;
  font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.jobs-modal .modal-content ul.list-inline {
  margin-top: 0;
  margin-bottom: 30px;
}

.jobs-modal .modal-content img {
  margin-bottom: 30px;
}

.jobs-modal .modal-content button {
  cursor: pointer;
}

.jobs-modal .close-modal {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 75px;
  height: 75px;
  cursor: pointer;
  background-color: transparent;
}

.jobs-modal .close-modal:hover {
  opacity: 0.3;
}

.jobs-modal .close-modal .lr {
  /* Safari and Chrome */
  z-index: 1051;
  width: 1px;
  height: 75px;
  margin-left: 35px;
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: #212529;
}

.jobs-modal .close-modal .lr .rl {
  /* Safari and Chrome */
  z-index: 1052;
  width: 1px;
  height: 75px;
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  background-color: #212529;
}

.timeline {
  position: relative;
  padding: 0;
  list-style: none;
}

.timeline:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 40px;
  width: 2px;
  margin-left: -1.5px;
  content: '';
  background-color: #e9ecef;
}

.timeline > li {
  position: relative;
  min-height: 50px;
  margin-bottom: 50px;
}

.timeline > li:after, .timeline > li:before {
  display: table;
  content: ' ';
}

.timeline > li:after {
  clear: both;
}

.timeline > li .timeline-panel {
  position: relative;
  float: right;
  width: 100%;
  padding: 0 20px 0 100px;
  text-align: left;
}

.timeline > li .timeline-panel:before {
  right: auto;
  left: -15px;
  border-right-width: 15px;
  border-left-width: 0;
}

.timeline > li .timeline-panel:after {
  right: auto;
  left: -14px;
  border-right-width: 14px;
  border-left-width: 0;
}

.timeline > li .timeline-image {
  position: absolute;
  z-index: 100;
  left: 0;
  width: 80px;
  height: 80px;
  margin-left: 0;
  text-align: center;
  color: white;
  border: 7px solid #e9ecef;
  border-radius: 100%;
  background-color: #c02026;
}

.timeline > li .timeline-image h4 {
  font-size: 10px;
  line-height: 14px;
  margin-top: 12px;
}

.timeline > li.timeline-inverted > .timeline-panel {
  float: right;
  padding: 0 20px 0 100px;
  text-align: left;
}

.timeline > li.timeline-inverted > .timeline-panel:before {
  right: auto;
  left: -15px;
  border-right-width: 15px;
  border-left-width: 0;
}

.timeline > li.timeline-inverted > .timeline-panel:after {
  right: auto;
  left: -14px;
  border-right-width: 14px;
  border-left-width: 0;
}

.timeline > li:last-child {
  margin-bottom: 0;
}

.timeline .timeline-heading h4 {
  margin-top: 0;
  color: inherit;
}

.timeline .timeline-heading h4.subheading {
  text-transform: none;
}

.timeline .timeline-body > ul,
.timeline .timeline-body > p {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .timeline:before {
    left: 50%;
  }
  .timeline > li {
    min-height: 100px;
    margin-bottom: 100px;
  }
  .timeline > li .timeline-panel {
    float: left;
    width: 41%;
    padding: 0 20px 20px 30px;
    text-align: right;
  }
  .timeline > li .timeline-image {
    left: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
  }
  .timeline > li .timeline-image h4 {
    font-size: 13px;
    line-height: 18px;
    margin-top: 16px;
  }
  .timeline > li.timeline-inverted > .timeline-panel {
    float: right;
    padding: 0 30px 20px 20px;
    text-align: left;
  }
}

@media (min-width: 992px) {
  .timeline > li {
    min-height: 150px;
  }
  .timeline > li .timeline-panel {
    padding: 0 20px 20px;
  }
  .timeline > li .timeline-image {
    width: 150px;
    height: 150px;
    margin-left: -75px;
  }
  .timeline > li .timeline-image h4 {
    font-size: 18px;
    line-height: 26px;
    margin-top: 30px;
  }
  .timeline > li.timeline-inverted > .timeline-panel {
    padding: 0 20px 20px;
  }
}

@media (min-width: 1200px) {
  .timeline > li {
    min-height: 170px;
  }
  .timeline > li .timeline-panel {
    padding: 0 20px 20px 100px;
  }
  .timeline > li .timeline-image {
    width: 170px;
    height: 170px;
    margin-left: -85px;
  }
  .timeline > li .timeline-image h4 {
    margin-top: 40px;
  }
  .timeline > li.timeline-inverted > .timeline-panel {
    padding: 0 100px 20px 20px;
  }
}

.team-member {
  margin-bottom: 50px;
  text-align: center;
}

.team-member img {
  width: 225px;
  height: 225px;
  border: 7px solid #fff;
}

.team-member h4 {
  margin-top: 25px;
  margin-bottom: 0;
  text-transform: none;
}

.team-member p {
  margin-top: 0;
}

section#what {
    background-color: #c02026;
    color: white;
    background-repeat: no-repeat;
    background-position: center;
}

section#what .form-group {
  margin-bottom: 25px;
}

section#what .form-group input,
section#what .form-group textarea {
  padding: 20px;
}

section#what .form-group input.form-control {
  height: auto;
}

section#what .form-group textarea.form-control {
  height: 248px;
}

section#what .form-control:focus {
  border-color: #c02026;
  box-shadow: none;
}

section#what ::-webkit-input-placeholder {
  font-weight: 700;
  color: #ced4da;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

section#what :-moz-placeholder {
  font-weight: 700;
  color: #ced4da;
  /* Firefox 18- */
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

section#what ::-moz-placeholder {
  font-weight: 700;
  color: #ced4da;
  /* Firefox 19+ */
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

section#what :-ms-input-placeholder {
  font-weight: 700;
  color: #ced4da;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#map {
    width: 100%;
    height: 140px;
    background-color: grey;
}

footer {
  padding: 25px 0;
  text-align: center;
}

footer span.copyright {
  font-size: 90%;
  line-height: 40px;
  text-transform: none;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

footer ul.quicklinks {
  font-size: 90%;
  line-height: 40px;
  margin-bottom: 0;
  text-transform: none;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

ul.social-buttons {
  margin-bottom: 0;
}

ul.social-buttons li a {
  font-size: 20px;
  line-height: 40px;
  display: block;
  width: 40px;
  height: 40px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  color: white;
  border-radius: 100%;
  outline: none;
  background-color: #212529;
}

ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
  background-color: #c02026;
}

section#login .form-group {
  margin-bottom: 25px;
}

section#login .form-group input,
section#login .form-group textarea {
  padding: 20px;
}

section#login .form-group input.form-control {
  height: auto;
}

section#login .form-group textarea.form-control {
  height: 248px;
}

section#login .form-control:focus {
  border-color: #c02026;
  box-shadow: none;
}

section#login ::-webkit-input-placeholder {
  font-weight: 700;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

section#login :-moz-placeholder {
  font-weight: 700;
  /* Firefox 18- */
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

section#login ::-moz-placeholder {
  font-weight: 700;
  /* Firefox 19+ */
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

section#login :-ms-input-placeholder {
  font-weight: 700;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


/* CSS Login*/
:root {
    --input-padding-x: .75rem;
    --input-padding-y: .75rem;
}

.form-signin {
    width: 100%;
    max-width: 420px;
    padding: 15px;
    margin: 0 auto;
}

.form-label-group {
    position: relative;
    margin-bottom: 1rem;
}

    .form-label-group > input,
    .form-label-group > label {
        padding: var(--input-padding-y) var(--input-padding-x);
    }

    .form-label-group > label {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        margin-bottom: 0; /* Override default `<label>` margin */
        line-height: 1.5;
        border: 1px solid transparent;
        border-radius: .25rem;
        transition: all .1s ease-in-out;
    }

    .form-label-group input::-webkit-input-placeholder {
        color: transparent;
    }

    .form-label-group input:-ms-input-placeholder {
        color: transparent;
    }

    .form-label-group input::-ms-input-placeholder {
        color: transparent;
    }

    .form-label-group input::-moz-placeholder {
        color: transparent;
    }

    .form-label-group input::placeholder {
        color: transparent;
    }

    .form-label-group input:not(:placeholder-shown) {
        padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
        padding-bottom: calc(var(--input-padding-y) / 3);
    }

        .form-label-group input:not(:placeholder-shown) ~ label {
            padding-top: calc(var(--input-padding-y) / 3);
            padding-bottom: calc(var(--input-padding-y) / 3);
            font-size: 12px;
            color: #777;
        }
body .login {
    background-image: url('../images/sara-haccp-background.jpg');
    background-color: #ededed;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: table;
    min-height: 50vh;
    width: 100%;
    padding: 0;
}
.form-signin {
    margin-top: 5%;
    margin-bottom: 5%;
    background: #fff;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.8);
    box-shadow: 0 0 15px rgba(0,0,0,.8);
    max-width: 50%;
    padding: 26px 26px 6px 26px;
    width: 100%;
}
@media screen and (max-width: 992px) {
    .form-signin {
        max-width:100%;
    }
}
.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear
}

    .fade.in {
        opacity: 1
    }
/*Fim CSS Login*/

/*CSS Menu*/
.navbar {
    background-image: url('/img/texture-background-sara.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    "
}
    .navbar img.logo {
        background-repeat: no-repeat;
        background-size: cover;
        width: 75%;
        height: 100%;
        vertical-align: baseline;
    }
#mainNav .navbar-nav .nav-item .nav-link {
    color: black;
    float: none;
    display: table-cell;
    vertical-align: bottom;
}
/*Fim CSS MENU*/

 

Meu bootstrap.css(ficheiro muito grande, posso disponibilizar por um drive ou algo do genero) bootstrap versão v4.0.0

 

Screenshot_3.png

Screenshot_4.png

Screenshot_5.png

Screenshot_6.png

Share this post


Link to post
Share on other sites

Olá,

esse comportamento pode ser devido algum conflito uma coisa estranha que notei e que você tem 2 scripts jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/jquery.js"></script>

uma outra coisa que poderia ajudar e você colocar o <link> no <head> e os <script> no final do <body> mas se for algo relacionado ao css pode estar no css que não foi colacado aqui:

 

<link rel="stylesheet" href="CSS/agency.css" />

jsbin: https://jsbin.com/peyosidaye/edit?html,css,output

Share this post


Link to post
Share on other sites
15 horas atrás, wanderval disse:

Olá,

esse comportamento pode ser devido algum conflito uma coisa estranha que notei e que você tem 2 scripts jQuery.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/jquery.js"></script>

uma outra coisa que poderia ajudar e você colocar o <link> no <head> e os <script> no final do <body> mas se for algo relacionado ao css pode estar no css que não foi colacado aqui:

 


<link rel="stylesheet" href="CSS/agency.css" />

jsbin: https://jsbin.com/peyosidaye/edit?html,css,output

Olá, o codigo Agency.Css é o que está disponibilizado, eu esqueci de colocar o nome no spoiler

Apaguei o jquery(<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js "></script>) que estava a mais e não estava a ser disponibilizado, e o erro é do css mesmo, visto que a transição é feita pelo mesmo.

O vue.js é para uns outros negocios que eu estou usando e não tem nada a ver com o erro.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By gbL078
      Consegui resolver o problema, por favor podem deletar o tópico.
    • By duarte.php
      Boa noite, pessoal, estou fazendo meu tcc (nível técnico kkk) e preciso de ajuda com uma conexão com o banco.
       
      Fiz um formulário para consultar empréstimos em uma biblioteca através do rm (id) e exibir os dados que estão cadastrados neste rm. 
      Estou com dificuldades para que os dados sejam puxados e exibidos na página. 
       
      Esta é a parte que pede o RM no html
      <h4 class="title">Insira o seu RM: </h4> <input type="text" name="rm" class="form-control" required/>  
      Este é o código php
      <?php $rm = $_POST['rm']; include("conecta.php"); $busca = mysql_query("SELECT * FROM tb_locador WHERE rm='$rm'"); $dado = mysql_fetch_array($busca); $nome = $dado['nome']; $ano = $dado['ano']; $curso = $dado['curso']; $tel = $dado['tel']; echo "RM: " . $rm . "<br>"; echo "Nome do locador: ".$nome. "<br>"; echo "Curso do locador: ".$curso. "<br>"; echo "Ano de início do curso: ".$ano. "<br>"; echo "Telefone do locador: ".$tel. "<br>"; ?> Até então, o único dado exibido é o RM, como faço para exibir o nome, curso, ano e telefone? 
       
    • By guzulino
      Então... eu preciso inserir uma paulada de dados em um banco de dados de vez em quando, eu até consigo importar de um CSV pro banco, mas eu preciso fazer isso através do php e eu não tenho nem ideia de como fazer isso, procurei por aqui e não achei, se alguém tem alguma resposta ou referência, manda o link que eu vou dar uma olhada. Valeu.
    • By andre2654
      Bom dia, peço humildemente a ajuda de vocês,
      Enfim, estou fazendo um exemplo de site, só para teste mesmo, onde terá uma janela principal perguntando em qual site a pessoa quer ir(1 só empresa, porém dois negócios) ai se a pessoa clicar em alguma das melecas, quero que ela abra mostrando o site, ou só uma imagem mesmo

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.