css – Images in website (HTML) take too long to load

body {
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  color: #00355A;
  text-align: center;
  /*border-style: solid;*/
}

.image1 {
  width: 100%;
  height: auto;
  position: relative;
}

.image2 {
  width: 100%;
  height: auto;
  position: relative;
}

.image3 {
  width: 100%;
  height: auto;
  position: relative;
}

.image4 {
  width: 100%;
  height: auto;
  position: relative;
}

.image5 {
  width: 100%;
  height: auto;
  position: relative;
}

.ghostnav {
  display: none;
}

.ghostimage {
  display: none;
}

.ghosthome {
  display: none;
}

.ghostimage2 {
  display: none;
}

.ghostoffer1 {
  display: none;
}

.ghostoffer2 {
  display: none;
}

.about-page {
  width: 100%;
  height: auto;
}

.Aboutpageimg {
  width: 100%;
  height: auto;
}


/*
img {
    
    width: 100%;

    
    
    height: auto;
    position: relative;
    
}
*/


/*

                                                                 Navigation Bar & Logo
*/

.container {
  max-width: 100%;
}

.wrapper ul {
  text-align: left;
  margin-top: 20px;
  ;
  display: inline-flex;
  list-style: none;
}

.wrapper ul li {
  margin-top: 21px;
  margin-right: 21px;
  margin-left: 21px;
  margin-bottom: 0px;
}

.wrapper ul li a {
  text-decoration: none;
  color: #00355A;
}

.wrapper ul li a:hover {
  text-shadow: .3px .3px 1.7px rgb(95, 94, 94);
}

.sub-menu {
  display: none;
}

.wrapper ul li:hover .sub-menu {
  display: inline;
  position: absolute;
  width: 300px;
  right: 154px;
  padding-left: 10px;
  top: 3.5%;
}

.sub-menu a {
  padding-right: 20px;
}

header {
  display: flex;
  font-size: 23px;
  letter-spacing: 6px;
}

.logo {
  margin-left: 3px;
  margin-right: auto;
}


/*
.about{
    color: grey;
    text-decoration: none;
}
.offerings{
    color: grey;
    text-decoration: none;
}

*/


/*

                                                                 Palos Verdes Backround & Constituents
                                                            
*/

.backround {
  position: relative;
  text-align: center;
}

.backround2 {
  position: relative;
}

.headlines {
  width: 100%;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: .7px .7px 10px rgb(173, 172, 172);
  letter-spacing: 5px;
  font-size: 60px;
}

.headlines3 {
  width: 100%;
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  text-shadow: .7px .7px 10px rgb(173, 172, 172);
  letter-spacing: 1px;
  font-size: 25px;
}

.headlines4 {
  width: 100%;
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  text-shadow: .7px .7px 10px rgb(173, 172, 172);
  letter-spacing: 1px;
  font-size: 22px;
}

.buttonone {
  position: absolute;
  top: 60%;
  left: 50%;
  padding: 20px 60px;
  transform: translate(-50%, -50%);
  color: white;
  border: 2px solid white;
}

.buttonone:link {
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 3px;
  font-size: 22px;
  top: 48%;
  color: white;
  border: 2px solid white;
  padding: 20px 60px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        text-shadow: .7px .7px 10px rgb(95, 94, 94);

    */
}

.buttonone:hover {
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 3px;
  font-size: 22px;
  top: 48%;
  color: white;
  border: 2px solid white;
  padding: 20px 60px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  text-shadow: .7px .7px 10px rgb(95, 94, 94);
}


/*
                                                                  Home Page Body
           */

.section1 {
  position: relative;
  /*
   display: grid;
   grid-template-columns: 50% 50%;
 /*
   border-style: dashed;
   */
  width: 100%;
}

.box1 {
  text-align: center;
  right: 200px;
}

.experience {
  color: rgba(0, 0, 0, 0.473);
  font-size: 50px;
  width: 100%;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  text-shadow: .7px .7px 5px rgba(95, 94, 94, 0.644);
  border-top: 5px solid rgba(0, 128, 0, 0.397);
  border-radius: 20px;
}

.experience1 {
  font-size: 35px;
  color: grey;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  text-shadow: .7px .7px 10px rgba(95, 94, 94, 0.473);
}

.divider {
  border-top: 8px solid green;
}

.box1 {
  border-style: solid;
}

.firstbody {
  border-style: solid;
}


/*

                                                                 Buttons @ Footers
*/

.buttontwo {
  width: 18%;
  position: absolute;
  height: 3%;
  bottom: 1.5%;
  right: 22.5%;
  letter-spacing: 3px;
  font-size: 22px;
  color: white;
  border: 2px solid white;
  text-align: center;
  text-decoration: none;
  background-color: #00355A;
}

.buttontwo:hover {
  position: absolute;
  bottom: 1.5%;
  right: 22.5%;
  letter-spacing: 3px;
  font-size: 22px;
  color: white;
  border: 2px solid white;
  text-align: center;
  text-decoration: none;
  background-color: #00355a98;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  text-shadow: .7px .7px 10px rgb(95, 94, 94);
}

.about-page {
  position: relative;
}

.buttontwoo {
  position: absolute;
  bottom: 2%;
  right: 22.5%;
  letter-spacing: 3px;
  font-size: 22px;
  color: white;
  border: 2px solid white;
  padding: 20px 60px;
  text-align: center;
  text-decoration: none;
  background-color: #00355A;
}

.buttontwoo:hover {
  position: absolute;
  bottom: 2%;
  right: 22.5%;
  letter-spacing: 3px;
  font-size: 22px;
  color: white;
  border: 2px solid white;
  padding: 20px 60px;
  text-align: center;
  text-decoration: none;
  background-color: #00355a98;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  text-shadow: .7px .7px 10px rgb(95, 94, 94);
}

.offerings-box {
  position: relative;
}

.buttonthree {
  position: absolute;
  bottom: 2%;
  right: 22.5%;
  letter-spacing: 3px;
  font-size: 22px;
  color: white;
  border: 2px solid white;
  padding: 20px 60px;
  text-align: center;
  text-decoration: none;
  background-color: #00355A;
}

.buttonthree:hover {
  position: absolute;
  bottom: 2%;
  right: 22.5%;
  color: white;
  border: 2px solid white;
  padding: 20px 60px;
  text-align: center;
  text-decoration: none;
  background-color: #00355a98;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  text-shadow: .7px .7px 10px rgb(95, 94, 94);
}

.offerings2-box {
  position: relative;
}

.buttonfour {
  position: absolute;
  bottom: 2%;
  right: 22.5%;
  letter-spacing: 3px;
  font-size: 22px;
  color: white;
  border: 2px solid white;
  padding: 20px 60px;
  text-align: center;
  text-decoration: none;
  background-color: #00355A;
}

.buttonfour:hover {
  position: absolute;
  bottom: 2%;
  right: 22.5%;
  color: white;
  border: 2px solid white;
  padding: 20px 60px;
  text-align: center;
  text-decoration: none;
  background-color: #00355a98;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  text-shadow: .7px .7px 10px rgb(95, 94, 94);
}


/*

                                                                 Contact Form
*/

.wrap {
  text-align: center;
}

.containertwo {
  margin-left: auto;
  margin-right: auto;
  align-content: center;
  box-sizing: border-box;
  max-width: 700px;
  width: 100%;
  top: 20%;
  letter-spacing: 3px;
}

.containertwo .title {
  font-size: 50px;
  margin-bottom: 20px;
}

.containertwo form .user-details {
  font-size: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

form .user-details .input-box {
  margin: 20px 0 12px 0;
  width: calc(100% / 2 - 20px);
}

.user-details .input-box input {
  width: 100%;
  height: 40px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding-left: 15px;
  transition: all 0.3s ease;
}

.user-details .input-box .FirstName {
  display: block;
  margin-bottom: 5px;
}

.user-details .input-box .LastName {
  display: block;
  margin-bottom: 5px;
}

.user-details .input-box .Email {
  display: block;
  margin-bottom: 5px;
}

.user-details .input-box .Phone {
  display: block;
  margin-bottom: 5px;
}

form .product-details .product-selection {
  font-size: 30px;
  padding-bottom: 15px;
  padding-top: 15px;
}

form .product-details .category {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  font-size: 18px;
  letter-spacing: 1px;
  margin: 14px 0px;
}

.product-details .category label {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  padding-right: 50px;
}

.product-details .category .dot {
  height: 18px;
  width: 18px;
  background: #d9d9d9;
  border-radius: 50%;
  margin-right: 5px;
  border: 5px solid transparent;
  transition: all 0.3s ease;
}

.product-details .category .product3 {
  padding-right: 55px;
}

#dot-1:checked~.category label .one,
#dot-2:checked~.category label .two,
#dot-3:checked~.category label .three,
#dot-4:checked~.category label .four {
  border-color: #d9d9d9;
  background-color: #00355A;
}

form input[type="radio"] {
  display: none;
}

form .button-contact {
  height: 45px;
  margin: 20px 0;
}

form .button-contact input {
  height: 100%;
  width: 100%;
  outline: none;
  color: #fff;
  border: none;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  background: #00355A;
  border-radius: 5px;
}

form .button-contact input:hover {
  background: #00355ade;
}


/*

                                                                                     MEDIA QUERY
                                                                                     
*/

@media only screen and (max-width: 2560px) {
  .wrapper ul li {
    margin-top: 30px;
    margin-right: 21px;
    margin-left: 21px;
    margin-bottom: 50px;
  }
}

@media only screen and (max-width: 1570px) {
  .headlines {
    font-size: 45px;
  }
  .headlines3 {
    font-size: 20px;
  }
  .headlines4 {
    font-size: 20px;
  }
}

@media only screen and (max-width: 1527px) {
  .buttontwo {
    font-size: 15px;
  }
  .buttontwo:hover {
    font-size: px;
  }
  .buttontwoo {
    height: 5%;
    font-size: 10px;
  }
  .buttontwoo:hover {
    font-size: 20px;
  }
  .buttonthree {
    right: 225px;
  }
  .buttonthree:hover {
    right: 225px;
  }
  .buttonfour {
    right: 225px;
  }
  .buttonfour:hover {
    right: 225px;
  }
}

@media only screen and (max-width: 1332px) {
  .buttontwo {
    width: 18%;
    height: 3%;
    font-size: 10px;
  }
  .buttontwoo {
    font-size: 10px;
  }
  .buttontwoo:hover {
    font-size: 10px;
  }
  .headlines {
    font-size: 30px;
  }
  .headlines3 {
    font-size: 15px;
  }
  .headlines4 {
    font-size: 15px;
  }
  .buttonone {
    font-size: 10px;
    padding: 13px, 20px, 15px, 20px;
  }
  .buttonone:link {
    font-size: 10px;
    padding: 13px, 20px, 15px, 20px;
  }
  .buttonone:hover {
    font-size: 10px;
    padding: 13px, 20px, 15px, 20px;
  }
  .buttonthree {
    font-size: 10px;
  }
  .buttonthree:hover {
    font-size: 10px;
  }
  .buttonfour {
    font-size: 10px;
  }
  .buttonfour:hover {
    font-size: 10px
  }
}

@media only screen and (max-width: 1155px) {
  .buttontwo {
    font-size: 10px;
    padding: 10px, 10px, 15px, 20px;
  }
  .buttontwo:hover {
    font-size: 10px;
    right: 150px;
  }
  .buttontwoo {
    font-size: 10px;
    padding: 10px, 10px, 15px, 20px;
    right: 150px;
  }
  .buttontwoo:hover {
    font-size: 10px;
  }
  .buttonthree {
    font-size: 10px;
    padding: 0px, 0px, 15px, 20px;
    right: 150px;
  }
  .buttonthree:hover {
    font-size: 10px;
    right: 150px;
  }
  .buttonfour {
    right: 150px;
    font-size: 10px;
    padding: 0px, 0px, 15px, 20px;
  }
  .buttonfour:hover {
    right: 150px;
    font-size: 10px;
  }
  .headlines3 {
    font-size: 13px;
  }
  .headlines4 {
    font-size: 13px;
  }
  .wrapper ul li {
    font-size: 13px;
    margin-top: 10px;
    margin-right: 21px;
    margin-left: 70px;
    margin-bottom: 20px;
  }
  /*
    .logo{
        max-width: 25%;
        
    }
*/
}

@media only screen and (max-width: 977px) {
  .buttonone {
    font-size: 5px;
    padding: 10px 30px;
  }
  .buttonone:link {
    font-size: 5px;
    padding: 10px 30px;
  }
  .buttonone:hover {
    font-size: 5px;
    padding: 10px 30px;
  }
  .buttontwoo {
    font-size: 5px;
    padding: 1px, 1px, 1px, 2px;
    right: 90px;
  }
  .buttontwoo:hover {
    font-size: 5px;
    padding: 1px, 1px, 1px, 2px;
    right: 90px;
  }
  .buttonthree {
    font-size: 5px;
    padding: 1px, 1px, 1px, 2px;
    right: 90px;
  }
  .buttonthree:hover {
    right: 90px;
  }
  .buttonfour {
    font-size: 5px;
    padding: 10px 30px;
  }
  .buttonfour:hover {
    font-size: 5px;
    padding: 10px 30px;
  }
  .headlines {
    font-size: 20px;
  }
  .headlines3 {
    font-size: 10px;
  }
  .headlines4 {
    font-size: 10px;
  }
  .buttontwo {
    font-size: 5px;
  }
  .buttontwo:hover {
    font-size: 5px;
  }
  .wrapper ul li {
    font-size: 8px;
    margin-left: 20px;
  }
  .logo {
    max-width: 30%;
  }
  .wrapper ul li:hover .sub-menu {
    display: inline;
    position: absolute;
    width: 300px;
    right: 2px;
    padding-left: 10px;
    top: 3.5%;
  }
}

@media only screen and (max-width: 680px) {
  .phonehomee {
    width: 100%;
    height: auto;
  }
  .wrapper {
    display: none
  }
  .image2 {
    display: none;
  }
  .image1 {
    display: none;
  }
  .image3 {
    display: none;
  }
  .backround {
    display: none;
  }
  .backround2 {
    display: none;
  }
  .dropbtn {
    background-color: #00355A;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width: 100%;
    letter-spacing: 10px;
    font-size: 15px;
  }
  .ghostnav {
    display: block;
  }
  .dropdown-content {
    display: none;
    background-color: #00355A;
    width: 100%;
    box-shadow: 0px 8px 16px 0px #00355A;
    z-index: 1;
    letter-spacing: 10px;
  }
  .dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  .ghostnav:hover .dropdown-content {
    display: block;
  }
  .ghostimage {
    display: inline-block;
  }
  .ghosthome {
    display: block;
    width: 100%;
    height: auto;
  }
  .Aboutpageimg {
    display: none;
  }
  .buttontwoo {
    display: none;
  }
  .ghostimage2 {
    display: block;
    width: 100%;
    height: auto;
  }
  .image4 {
    display: none;
  }
  .buttonthree {
    display: none;
  }
  .ghostoffer1 {
    display: block;
    width: 100%;
    height: auto;
  }
  .image5 {
    display: none;
  }
  .buttonfour {
    display: none;
  }
  .ghostoffer2 {
    display: block;
    width: 100%;
    height: auto;
  }
  .containertwo {
    max-width: 100%;
  }
  form .user-details .input-box {
    margin-bottom: 15px;
    width: 100%;
  }
}
<!doctype html>

<!--font/helvetica-->
<html>

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Arema Insurance</title>
  <link href="https://stackoverflow.com/questions/72281869/arema-css.css" type="text/css" rel="stylesheet" />

</head>




<body>
  <div class="container">
    <div class="header1">
      <header>
        <div class="logo">
          <img src="Images/NewLogoMain_AIA.png" class="image1" width="395" height="110" />
        </div>
        <div class="wrapper">
          <ul>
            <li class="active"><a href="index.html">HOME</a></li>
            <li><a href="About_AIA.html">ABOUT</a></li>
            <li><a href="">OFFERINGS</a>
              <div class="sub-menu">
                <ul>
                  <li><a href="Offerings1.html">Basics/ Advantage</a></li>
                  <li><a href="Offerings2.html">Medicare Supplement</a></li>
                </ul>
              </div>
            </li>

            <li><a href="Contact.html">CONTACT</a></li>
          </ul>
        </div>


      </header>
    </div>
  </div>



  <img src="Images/NewLogoMain_AIA.png" class="ghostimage" width="395" height="110" />
  <div class="ghostnav">
    <button class="dropbtn">Menu</button>
    <div class="dropdown-content">
      <a href="index.html">Home</a>
      <a href="About_AIA.html">About</a>
      <a href="Offerings1.html">Basics/ Advantage</a>
      <a href="Offerings2.html">Medicare Supplement</a>
      <a href="Contact.html">Contact</a>
    </div>
  </div>
  <img src="Images/phonehome_AIA.png" class="ghosthome" width="680" height="1869">



  <div class="backround">

    <img src="Images/Ocean_AIA.png" class="image2" width="1892" height="671" alt="" />

    <div class="headlines"> WE MAKE MEDICARE EASY TO UNDERSTAND</div>

    <div class="headlines3">
      <p><b>AREMA INSURANCE AGENCY</b> will guide you to the right medicare plan that meets your needs.</p>
    </div>
    <div class="headlines4">
      <p>At no cost to you!</p>
    </div>
    <a class="buttonone" href="Contact.html" target="_blank">CONTACT US TODAY!</a>
  </div>

  <div class="backround2">
    <div class="section1">
      <img src="Images/HomePageOfficial_AIA.png" class="image3" width="1892" height="3082" alt="" />
    </div>

    <button class="buttontwo">Contact Us Today!</button>

  </div>


</body>

</html>

Leave a Comment