Ir para conteúdo
explosivemineyt

Erro no CSS do formulário

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

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Eduardo S. B. de Oliveira
      Senhores, preciso de uma ajuda, estou criando um formulário onde o checkbox fique "checked" quando clicar em cima, mas o detalhe e que quando atualizar a pagina o checkbox permaneça marcado. É possível? 
    • Por joaon77@yahoo.com.br
      Olá pessoal!
      Criei um menu usando listas não ordenadas (ul, li) com as imagens dispostas horizontalmente. São quatro imagens. O problema é que uma das imagens aparece duplicada no layout. Não entendi. Segue o código:
      ... <span class="menuRedesSociais"> <ul> <li id="img1"><a href="#"</a></li> <li id="img2"><a href="#"></a></li> <li id="img3"><a href="#"></a></li> <li id="img4"><a href="#"></a></li> </ul> </span> span ul { margin: 0; padding: 0; } span li { list-style: none; display: inline-block; } span a:link, a:visited { padding: 15px; } li#img1 a{ background-image: url("#img1"); background-repeat: no-repeat; } li#img2 a{ background-image: url("#img2"); background-repeat: no-repeat; } li#img3 a{ background-image: url("#img3"); background-repeat: no-repeat; } li#img4 a{ background-image: url("#img4"); background-repeat: no-repeat; } A imagem que aparece duplicada é a img2. Obs. Já fiz o teste trocando a posição das imagens, só que o problema continua.
       
      Agradeço muito se alguém puder me ajudar.
       
    • Por VCastilho
      Bom Dia

      Desenvolvi um filtro HTML e estou com dificuldades em criar o JavaScript para o funcionamento do mesmo, poderiam em ajudar a criar esse JS?
      Segue o código:
       
      <div id = "filtro"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style disabled> #filtro { border-style:double; } #button1 { width: 120px; position: inherit; right: 10px; background-color: #e00505; font-size: 12px; FLOAT: right } h4 { font-size: 18px; border-style: inset; } select { border: 1px solid #000; box-sizing: border-box; width: 124px; border-radius: 5px; height: 25px; padding: 3px; } section label { width: calc(100% / 4); color: red; text-align: center; } section { display: flex; flex-wrap: wrap; } h4/ { border-style:double; } @media screen and (max-width:768px) { section label { margin-bottom: 20px; width: 100%; } } </style> <h4 style="text-align: center;">Personalize o seu Kit de Segurança</h4><br><br> <form action="#" id="form"> <section> <label> <b> Tipo do seu Kit </b><br> <select name="speed" id="speed" style=" "> <option desable>Selecione</option> <option>Residencial</option> <option>Comercial</option> </select> </label> <label> <b>Qualidade de Seu Kit</b><br> <select name="files" id="files" style=" "> <option desable> Selecione </option> <option value="HD">HD</option> <option value="Full HD">Full HD</option> <option value="Analógica">Analógica</option> </select> </label> <label> <b> Quantidade de Câmeras </b><br> <select name="number" id="number" style=" "> <option desable> Selecione </option> <option>1 Câmera</option> <option>2 Câmeras</option> <option>3 Câmeras</option> <option>4 Câmeras</option> <option>5 Câmeras</option> <option>6 Câmeras</option> <option>7 Câmeras</option> <option>8 Câmeras</option> <option>9 Câmeras</option> <option>10 Câmeras</option> <option>11 Câmeras</option> <option>12 Câmeras</option> <option>13 Câmeras</option> <option>14 Câmeras</option> <option>15 Câmeras</option> <option>16 Câmeras</option> </select> </label> <label> <b> Selecione a Marca </b><br> <select name="salutation" id="salutation"> <option desable selected>Selecione</option> <option>Intelbras</option> <option>Hikvision</option> <option>Outras</option> </select> </label> </section> <BR> <BR> </form> </div> <br> <br> <button class="kd-filter-button" id="button1">Ver resultados</button> Seria bom, se possível o botão funcionar fora da tag "form" pois para personalizar fica melhor

       
    • Por Motta
      Japonesa quebra recorde mundial calculando 'pi' com 31,4 trilhões de dígitos
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.