Recommand · May 14, 2022 0


How to make the page work with a linked file?

How to make the page work with a linked file?

I am doing the Contact Us page but I am having problems with the functioning of the animations. In my Contact Us page I insert the footer which is a separate file, but when I add it the Contact Us page animations don’t work, what should I do?

Thank you very much for helping!!

/*
  Topnav
*/

.topnav {
  background-color: #fff;
  overflow: auto;
  padding-left: 1em;
  margin-top: -95px;
}

.topnav a {
  float: left;
  color: #707070;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 15px;
  font-family: Arial;
}

.topnav a:hover {
  color: #D4988E;
}

.topnav a.active {
  background-color: #fff;
  color: #D4988E;
}

.topnav-right {
  float: right;
  padding-right: 1em;
}

body {
    background-color: #444442;
    padding-top: 85px;
}

h1 {
    font-family: 'Poppins', sans-serif, 'arial';
    font-weight: 600;
    font-size: 72px;
    color: white;
    text-align: center;
}

h4 {
    font-family: 'Roboto', sans-serif, 'arial';
    font-weight: 400;
    font-size: 20px;
    color: #9b9b9b;
    line-height: 1.5;
}

body {
    background-color: #ffffff;
    padding-top: 85px;
}

h1 {
    font-family: 'Poppins', sans-serif, 'arial';
    font-weight: 600;
    font-size: 72px;
    color: #D4988E;
    text-align: center;
}

h4 {
    font-family: 'Roboto', sans-serif, 'arial';
    font-weight: 400;
    font-size: 20px;
    color: #D4988E;
    line-height: 1.5;
}

/* ///// inputs /////*/

input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
    font-size: 0.75em;
    color: #ffffff;
    top: -5px;
    -webkit-transition: all 0.225s ease;
    transition: all 0.225s ease;
}

.styled-input {
    float: left;
    width: 293px;
    margin: 1rem 0;
    position: relative;
    border-radius: 4px;
}

@media only screen and (max-width: 768px){
    .styled-input {
        width:100%;
    }
}

.styled-input label {
    color: #ffffff;
    padding: 1.3rem 30px 1rem 30px;
    position: absolute;
    top: 10px;
    left: 0;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    pointer-events: none;
}

.styled-input.wide { 
    width: 650px;
    max-width: 100%;
}

input,
textarea {
    padding: 30px;
    border: 0;
    width: 100%;
    font-size: 1rem;
    background-color: #D4988E;
    color: white;
    border-radius: 4px;
}

input:focus,
textarea:focus { outline: 0; }

input:focus ~ span,
textarea:focus ~ span {
    width: 100%;
    -webkit-transition: all 0.075s ease;
    transition: all 0.075s ease;
}

textarea {
    width: 100%;
    min-height: 15em;
}

.input-container {
    width: 650px;
    max-width: 100%;
    margin: 20px auto 25px auto;
}

.submit-btn {
    float: right;
    padding: 7px 35px;
    border-radius: 60px;
    display: inline-block;
    background-color: #D4988E;
    color: white;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.06),
              0 2px 10px 0 rgba(0,0,0,0.07);
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}

.submit-btn:hover {
    transform: translateY(1px);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10),
              0 1px 1px 0 rgba(0,0,0,0.09);
}

@media (max-width: 768px) {
    .submit-btn {
        width:100%;
        float: none;
        text-align:center;
    }
}

input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 

input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<link rel="stylesheet" href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/css/ContactUs.css">
<script src="https://kit.fontawesome.com/e8f8804c71.js" crossorigin="anonymous"></script>


<title>Contact Us</title>


</head>
<body>

<!-- topnav======================================== -->

<div class="topnav">
  <a href="index.html">Homepage</a>
  <a href="CustomOrders.html">Custom Order</a>
  <a class="active" href="#home">Contact</a>
  <a href="AboutUs.html">About</a>
  
  <div class="topnav-right">
  <a href="#"><i class="fa-brands fa-instagram"></i></a>
  <a href="#"><i class="fa-brands fa-linkedin-in"></i></a> 
  <a href="#"><i class="fa-brands fa-facebook-f"></i></a> 
  <a href="#"><i class="fa-solid fa-cart-shopping"></i></a> 
  <a href="#"><i class="fa-solid fa-user"></i></a>  
  </div>

</div>





<div class="container">
    <div class="row">
            <h1>contact us</h1>
    </div>
    <div class="row">
            <h4 style="text-align:center">We'd love to hear from you!</h4>
    </div>
    <div class="row input-container">
            <div class="col-xs-12">
                <div class="styled-input wide">
                    <input type="text" required />
                    <label>Name</label> 
                </div>
            </div>
            <div class="col-md-6 col-sm-12">
                <div class="styled-input">
                    <input type="text" required />
                    <label>Email</label> 
                </div>
            </div>
            <div class="col-md-6 col-sm-12">
                <div class="styled-input" style="float:right;">
                    <input type="text" required />
                    <label>Phone Number</label> 
                </div>
            </div>
            <div class="col-xs-12">
                <div class="styled-input wide">
                    <textarea required></textarea>
                    <label>Message</label>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="btn-lrg submit-btn">Send Message</div>
            </div>
    </div>
</div>





<!-- footer======================================== -->
<div class="footer">  
  <div style="position:relative;padding-top:0%; bottom: 0%;">
    <iframe src="Footer.html" width="100%" height="370" scrolling="no"></iframe>
    <style>iframe {border: none}</style>
  </div>
  </div>



You may also like…




amazon-web-services android angular api arrays c# css dart dataframe django docker excel express firebase flutter html ios java javascript jquery json kotlin laravel linux list mongodb mysql node.js pandas php postgresql python python-3.x r react-native reactjs regex spring spring-boot sql sql-server string swift typescript vue.js