Click here to Skip to main content
15,887,027 members
Search within:


How to orgainse this code in different files
Please Sign up or sign in to vote.
1.00/5 (3 votes)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mayuri_Bake</title>
    <link rel="shortcut icon" type="image" href="./image/logo3.png">
    <link rel="stylesheet" href="style.css">
    <!-- bootstrap links -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <!-- bootstrap links -->
    <!-- fonts links -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Uchen&display=swap" rel="stylesheet">
    <!-- fonts links -->
    <!-- icons links -->
    <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
    <!-- icons links -->
    <!-- animation links -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <!-- animation links -->
</head>
<body>
    <div class="all-content">
        <!-- navbar -->
        <nav class="navbar navbar-expand-md" id="navbar">
            <!-- Brand -->
            <a class="navbar-brand" href="#" id="logo"><img src="./image/logo3.png" alt="" width="50px">
                Mayuri's
                Cake Bake 
                </a>         
            <!-- Toggler/collapsibe Button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
              <span><img src="./image/menu.png" alt="" width="30px"></span>
            </button>
          
            <!-- Navbar links -->
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
              <ul class="navbar-nav">
                <li class="nav-item">
                  <a class="nav-link" href="#">Home</a>
                </li>
                <!-- dropdown -->
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" id="navbardrop" data-toggle="dropdown">
                     Category
                    </a>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">Cakes</a>
                        <a href="#" class="dropdown-item">Donuts</a>
                        <a href="#" class="dropdown-item">Tea Time Cake</a>
                        <a href="#" class="dropdown-item">Chocolates</a>
                    </div>
                </li>
                <!-- dropdown -->
                <li class="nav-item">
                  <a class="nav-link" href="#">Galary</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Contact</a>
                </li>
              </ul>
            </div>
            <div class="icons">
                <img src="./image/user.png" alt="" width="20px">
                <img src="./image/heart.png" alt="" width="20px">
                <img src="./image/add.png" alt="" width="24px">
            </div>
          </nav>
        <!-- navbar end -->
        <!-- home section -->
        <div class="home">
            <div class="content" data-aos="zoom-out-right">
                <h3>Delicious Cakes
                    <br>Baked With Love
                </h3>
                <h2>Category </h2>
                <p>The home of fresh baking,
                    <br>Every flavour has a story.
                </p>
                <a href="#" class="btn">Order Now</a>
            </div>
            <div class="img"  data-aos="zoom-out-left">
                <img src="./image/background.png" alt="">
            </div>
        </div>
        <!-- home section end -->
              <!-- top cards -->
      <div class="container" id="box"    data-aos="fade-up"
      data-aos-duration="1500">
        <div class="row">
            <div class="col-md-4 py-3 py-md-0">
                <div class="card">
                    <img src="./image/box1.jpg" alt="">
                </div>
            </div>
            <div class="col-md-4 py-3 py-md-0">
                <div class="card">
                    <img src="./image/box2.jpg" alt="">
                </div>
            </div>
            <div class="col-md-4 py-3 py-md-0">
                <div class="card">
                    <img src="./image/box3.jpg" alt="">
                </div>
            </div>
        </div>
      </div>
      <!-- top cards end -->

      <!-- banner -->
        <div class="banner"    data-aos="fade-up"
        data-aos-duration="1500">
            <div class="content">
                <h3>Delicious Cake</h3>
                <h2>UPTO 50% OFF</h2>
                <p></p>
                <div id="btnorder"><button>Order Now</button></div>
            </div>
            <div class="img">
                <img src="./image/banner-background.png" alt="">
            </div>
        </div>
      <!-- banner end -->

      <!-- product cards -->
      <section id="product-cards"    data-aos="fade-up"
      data-aos-duration="1500">
        <div class="container">
            <h1>CAKES</h1>
            <div class="row" style="margin-top:50px;">
               <div class="col-md-3 py-3 py-md-0">
                <div class="card">
                    <div class="overlay">
                        <button type="button" class="btn btn-secondary" title="Quick View"><img src="./image/views.png" alt="" width="30px"></button>
                        <button type="button" class="btn btn-secondary" title="Add to Wishlist"><img src="./image/heart.png" alt="" width="30px"></button>
                        <button type="button" class="btn btn-secondary" title="Add to Cart"><img src="./image/add.png" alt="" width="30px"></button>
                    </div>
                    <img src="./image/c1.png" alt="">
                    <div class="card-body">
                        <h3>Chocolate Cake</h3>
                        <div class="star">
                           
            </a>
            <a href="https://www.instagram.com/mayuri_bakess/" target="_blank">
            ^__i class="bx bxl-instagram">
            </a>
            </div>
        <div class="copyright text-center">
            © Copyright ^__strong>Cake Bakery .All Rights Reserved
        </div>
        <div class="credit text-center">
            Designed By <a href="#"><span>Sakshi and Pragya</span></a>
        </div>
      </footer>
      <!-- footer -->

      <a href="#" class="arrow">^__i><img src="./image/up-arrow.png" alt="" width="50px"></a>



    </div>


 



    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        AOS.init();
      </script>
</body>
</html>



CSS FILE STARTS FROM HERE:


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Uchen', serif;
}
.all-content{
    background: #2e1700;
}
/* navbar */
#navbar{
    background-color: #FFB74D;
    padding-left: 60px;
    font-weight: bold;
}
#logo{
    font-size: 23px;
    color: white;
}
#logo img{
    margin-bottom: 15px;
}
.brand-name{
    font-weight: bold;
}
.sub-text{
    margin-top: -8px;
}
.navbar-nav{
    margin-left: 10px;
}
.nav-link{
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
    margin-left: 15px;
    transition: 0.5s ease;
}
.nav-link:hover{
    background-color: rgba(161,109,14,1);
    color: white;
    border-radius: 5px;
}
.icons{
    margin-left: 30px;
}
.icons img{
    margin-left: 10px;
    transition: 0.5s ease;
    cursor: pointer;
}
.icons img:hover{
    transform: translateY(-5px);
}
@media screen and (max-width:330px){
    #logo{
        font-size: 15px;
    }
}
/* navbar end */

/* home section */
.home{
    width: 100%;
    height: 88.5vh;
    display: flex;
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(./image/background.jpg);
    background-size: cover;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 0;
}
.home .img{
    flex: 1 1 400px;
}
.home .img img{
    width: 100%;
}
.home .content{
    flex: 1 1 400px;
    margin-left: 60px;
}
.content h3{
    color: white;
    font-size: 60px;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
}
.content h2{
    font-size: 60px;
    color: white;
    text-shadow: 1px 1px 1px black;
    font-weight: bold;
}
.changecontent::after{
    content: ' ';
    color: rgba(161,109,14,1);
    animation: changetext 10s infinite linear;
    font-weight: bold;
}
@keyframes changetext{
    0%{content: "Cakes";}
    40%{content: "Donuts";}
    60%{content: "Tea Time Cakes";}
    100%{content: "Chocolates";}
   
}
.content p{
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
}
.content .btn{
    width: 110px;
    height: 38px;
    background-color: #573818;
    color: white;
}
@media screen and (max-width:800px){
    .content h3{
        font-size: 50px;
    }
}
@media screen and (max-width:860px){
    .home{
        height: 120vh;
    }
}
@media screen and (max-width:560px){
    .home{
        height: 100vh;
    }
}
@media screen and (max-width:330px){
    .content h2{
        font-size: 30px;
    }
    .content h3{
        font-size: 30px;
    }
}
/* home section end */

/* top cards */
#box{
    margin-top: 50px;
}
#box .card{
    box-shadow: 0px 0px 5px black;
    margin-top: 10px;
    transition: 0.5s ease;
    cursor: pointer;
}
#box .card:hover{
    transform: translateY(-10px);
}
/* top cards end */
/* banner */
.banner{
    width: 100%;
    height: 60vh;
    display: flex;
    background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url(./image/banner2.png);
    background-size: cover;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    box-shadow: 0px 0px 10px black;
    margin-top: 50px;
}
.banner .img{
    flex: 1 1 200px;
}
.banner .img img{
    width: 80%;
}
.banner .content{
    flex: 1 1 400px;
    margin-left: 60px;
    margin-top: 60px;
}
.banner .content h3{
    color: rgba(161,109,14,1);
    font-weight: bold;
}
.banner .content h2{
    font-size: 50px;
    color: rgba(161,109,14,1);
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
}
.banner .content p{
    color: rgba(161,109,14,1);
}
#btnorder button{
    width: 150px;
    height: 32px;
    letter-spacing: 5px;
    background-color: rgba(161,109,14,1);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
@media screen and (max-width:800px){
    .banner .content h3{
        font-size: 50px;
    }
}
@media screen and (max-width:855px){
    .banner{
        height: 100vh;
    }
}
/* banner end */
/* product cards */
#product-cards h1{
    text-align: center;
    font-weight: bold;
    margin-top: 50px;
    color: rgba(161,109,14,1);
    text-shadow: 1px 1px 1px black;
    border-bottom: 2px solid rgba(161,109,14,1);
}
#product-cards .card{
    background-color: #FFDAB9 ;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
    border-radius: 5px;
    cursor: pointer;
}
.overlay{
    display: block;
    opacity: 0;
    position: absolute;
    top: 10%;
    margin-left: 0;
    width: 70px;
}
#product-cards .card:hover .overlay{
    opacity: 1;
    margin-left: 5%;
    transition: 0.5s ease;
}
.overlay i img{
    background-color: #2e1700;
    height: 30px;
    width: 30px;
    font-size: 20px;
    padding: 7px;
    margin: -20%;
    margin-bottom: 5%;
    cursor: pointer;
}
.overlay .btn-secondary{
    background: transparent !important;
    border: none;
    box-shadow: none;
}
#product-cards h3{
    color: white;
    text-shadow: 1px 1px 1px black;
}
.star .checked{
     color: yellow;
}
#product-cards p{
    color: #2e1700;
    font-weight: bold;
}
#product-cards h6{
    font-size: 20px;
    color: #2e1700;
    font-weight: bold;
}
#product-cards h6 span button{
    width: 100px;
    height: 26px;
    font-size: 15px;
    background: transparent;
    letter-spacing: 3px;
    border: 2px solid #573818;
    border-radius: 5px;
    float: right;
    font-weight: bold;
    transition: 0.5s ease;
    cursor: pointer;
}
#product-cards h6 span button:hover{
    background-color: #2e1700;
    color: white;
}

/* product cards end */

/* gallary */
#gallary{
    margin-top: 50px;
}
#gallary h1{
    text-align: center;
    font-weight: bold;
    margin-top: 50px;
    color: rgba(161,109,14,1);
    text-shadow: 1px 1px 1px black;
    border-bottom: 2px solid rgba(161,109,14,1);
}
#gallary .card{
    box-shadow: 3px 3px 3px black;
    cursor: pointer;
}
#gallary .overlay{
    opacity: 0;
    width: 100%;
    color: white;
    text-shadow: 1px 1px 1px black;
}
#gallary .card:hover .overlay{
    opacity: 5;
    margin-top: 20%;
    transition: 0.5s ease;
}
/* gallary */

/* about */
#about{
    margin-top: 50px;
}
#about h1{
    text-align: center;
    font-weight: bold;
    margin-top: 50px;
    color: rgba(161,109,14,1);
    text-shadow: 1px 1px 1px black;
    border-bottom: 2px solid rgba(161,109,14,1);
}
#about .card{
    background-color: rgba(161,109,14,1);
    box-shadow: 0px 0px 5px black;
}
#about p{
    color: rgba(161,109,14,1);
    text-shadow: 1px 1px 1px black;
    font-weight: bold;
}
#bt button{
    width: 150px;
    height: 32px;
    letter-spacing: 3px;
    background-color: rgba(161,109,14,1);
    color: white;
    border: none;
    cursor: pointer;
}
@media screen and (max-width:1000px){
    #about p{
        font-size: 10px;
    }
}
@media screen and (max-width:760px){
    #about p{
        font-size: 20px;
    }
}
/* about */

/* contact */
#contact{
    margin-top: 100px;
}
#contact h1{
    text-align: center;
    font-weight: bold;
    margin-top: 50px;
    color: rgba(161,109,14,1);
    text-shadow: 1px 1px 1px black;
    border-bottom: 2px solid rgba(161,109,14,1);
}
#contact input{
    background-color: rgba(161,109,14,1);
}
#contact input::placeholder{
    color: white;
}
#contact textarea{
    background-color: rgba(161,109,14,1);
}
#contact textarea::placeholder{
    color: white;
}
#messagebtn{
    text-align: center;
}
#messagebtn button{
    width: 200px;
    height: 30px;
    letter-spacing: 3px;
    font-weight: bold;
    background: transparent;
    border: 2px solid white;
    color: white;
    transition: 0.5s;
    cursor: pointer;
}
#messagebtn button:hover{
    background-color: rgba(161,109,14,1);
}
/* contact */

/* footer */
#footer{
    width: 100%;    
    background-color: #573818;
    box-shadow: 0px 0px 5px black;
    margin-top: 100px;
}
#footer h1{
    color: white;
    padding-top: 30px;
}
#footer p{
    color: white;
}
.icons i{
    background-color: white;
    color: #573818;
    border-radius: 50px;
    padding: 6px;
    font-size: 30px;
    transition: 0.5s;
    cursor: pointer;
}
.icons i:hover{
    background-color: rgba(161,109,14,1);
    color: white;
}
.copyright{
    color: white;
    margin-top: 20px;
}
.credite{
    color: white;
}
/* footer */
html{
    scroll-behavior: smooth;
}
.arrow{
    position: fixed;
    background-color: rgba(161,109,14,1);
    border-radius: 50px;
    height: 50px;
    bottom: 40px;
    right: 50px;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
}<pre lang="CSS"><pre lang="HTML">


What I have tried:

HTML
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Uchen', serif;
}
.all-content{
    background: #2e1700;
}
/* navbar */
#navbar{
    background-color: #FFB74D;
    padding-left: 60px;
    font-weight: bold;
}
#logo{
    font-size: 23px;
    color: white;
}
#logo img{
    margin-bottom: 15px;
}
.brand-name{
    font-weight: bold;
}
.sub-text{
    margin-top: -8px;
}
.navbar-nav{
    margin-left: 10px;
}
.nav-link{
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
    margin-left: 15px;
    transition: 0.5s ease;
}
.nav-link:hover{
    background-color: rgba(161,109,14,1);
    color: white;
    border-radius: 5px;
}
.icons{
    margin-left: 30px;
}
.icons img{
    margin-left: 10px;
    transition: 0.5s ease;
    cursor: pointer;
}
.icons img:hover{
    transform: translateY(-5px);
}
@media screen and (max-width:330px){
    #logo{
        font-size: 15px;
    }
}
/* navbar end */

/* home section */
.home{
    width: 100%;
    height: 88.5vh;
    display: flex;
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(./image/background.jpg);
    background-size: cover;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 0;
}
.home .img{
    flex: 1 1 400px;
}
.home .img img{
    width: 100%;
}
.home .content{
    flex: 1 1 400px;
    margin-left: 60px;
}
.content h3{
    color: white;
    font-size: 60px;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
}
.content h2{
    font-size: 60px;
    color: white;
    text-shadow: 1px 1px 1px black;
    font-weight: bold;
}
.changecontent::after{
    content: ' ';
    color: rgba(161,109,14,1);
    animation: changetext 10s infinite linear;
    font-weight: bold;
}
@keyframes changetext{
    0%{content: "Cakes";}
    40%{content: "Donuts";}
    60%{content: "Tea Time Cakes";}
    100%{content: "Chocolates";}
   
}
.content p{
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
}
.content .btn{
    width: 110px;
    height: 38px;
    background-color: #573818;
    color: white;
}
@media screen and (max-width:800px){
    .content h3{
        font-size: 50px;
    }
}
@media screen and (max-width:860px){
    .home{
        height: 120vh;
    }
}
@media screen and (max-width:560px){
    .home{
        height: 100vh;
    }
}
@media screen and (max-width:330px){
    .content h2{
        font-size: 30px;
    }
    .content h3{
        font-size: 30px;
    }
}
/* home section end */

/* top cards */
#box{
    margin-top: 50px;
}
#box .card{
    box-shadow: 0px 0px 5px black;
    margin-top: 10px;
    transition: 0.5s ease;
    cursor: pointer;
}
#box .card:hover{
    transform: translateY(-10px);
}
/* top cards end */
/* banner */
.banner{
    width: 100%;
    height: 60vh;
    display: flex;
    background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url(./image/banner2.png);
    background-size: cover;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    box-shadow: 0px 0px 10px black;
    margin-top: 50px;
}
.banner .img{
    flex: 1 1 200px;
}
.banner .img img{
    width: 80%;
}
.banner .content{
    flex: 1 1 400px;
    margin-left: 60px;
    margin-top: 60px;
}
.banner .content h3{
    color: rgba(161,109,14,1);
    font-weight: bold;
}
.banner .content h2{
    font-size: 50px;
    color: rgba(161,109,14,1);
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
}
.banner .content p{
    color: rgba(161,109,14,1);
}
#btnorder button{
    width: 150px;
    height: 32px;
    letter-spacing: 5px;
    background-color: rgba(161,109,14,1);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
@media screen and (max-width:800px){
    .banner .content h3{
        font-size: 50px;
    }
}
@media screen and (max-width:855px){
    .banner{
        height: 100vh;
    }
}
/* banner end */
/* product cards */
#product-cards h1{
    text-align: center;
    font-weight: bold;
    margin-top: 50px;
    color: rgba(161,109,14,1);
    text-shadow: 1px 1px 1px black;
    border-bottom: 2px solid rgba(161,109,14,1);
}
#product-cards .card{
    background-color: #FFDAB9 ;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
    border-radius: 5px;
    cursor: pointer;
}
.overlay{
    display: block;
    opacity: 0;
    position: absolute;
    top: 10%;
    margin-left: 0;
    width: 70px;
}
#product-cards .card:hover .overlay{
    opacity: 1;
    margin-left: 5%;
    transition: 0.5s ease;
}
.overlay i img{
    background-color: #2e1700;
    height: 30px;
    width: 30px;
    font-size: 20px;
    padding: 7px;
    margin: -20%;
    margin-bottom: 5%;
    cursor: pointer;
}
.overlay .btn-secondary{
    background: transparent !important;
    border: none;
    box-shadow: none;
}
#product-cards h3{
    color: white;
    text-shadow: 1px 1px 1px black;
}
.star .checked{
     color: yellow;
}
#product-cards p{
    color: #2e1700;
    font-weight: bold;
}
#product-cards h6{
    font-size: 20px;
    color: #2e1700;
    font-weight: bold;
}
#product-cards h6 span button{
    width: 100px;
    height: 26px;
    font-size: 15px;
    background: transparent;
    letter-spacing: 3px;
    border: 2px solid #573818;
    border-radius: 5px;
    float: right;
    font-weight: bold;
    transition: 0.5s ease;
    cursor: pointer;
}
#product-cards h6 span button:hover{
    background-color: #2e1700;
    color: white;
}

/* product cards end */

/* gallary */
#gallary{
    margin-top: 50px;
}
#gallary h1{
    text-align: center;
    font-weight: bold;
    margin-top: 50px;
    color: rgba(161,109,14,1);
    text-shadow: 1px 1px 1px black;
    border-bottom: 2px solid rgba(161,109,14,1);
}
#gallary .card{
    box-shadow: 3px 3px 3px black;
    cursor: pointer;
}
#gallary .overlay{
    opacity: 0;
    width: 100%;
    color: white;
    text-shadow: 1px 1px 1px black;
}
#gallary .card:hover .overlay{
    opacity: 5;
    margin-top: 20%;
    transition: 0.5s ease;
}
/* gallary */

/* about */
#about{
    margin-top: 50px;
}
#about h1{
    text-align: center;
    font-weight: bold;
    margin-top: 50px;
    color: rgba(161,109,14,1);
    text-shadow: 1px 1px 1px black;
    border-bottom: 2px solid rgba(161,109,14,1);
}
#about .card{
    background-color: rgba(161,109,14,1);
    box-shadow: 0px 0px 5px black;
}
#about p{
    color: rgba(161,109,14,1);
    text-shadow: 1px 1px 1px black;
    font-weight: bold;
}
#bt button{
    width: 150px;
    height: 32px;
    letter-spacing: 3px;
    background-color: rgba(161,109,14,1);
    color: white;
    border: none;
    cursor: pointer;
}
@media screen and (max-width:1000px){
    #about p{
        font-size: 10px;
    }
}
@media screen and (max-width:760px){
    #about p{
        font-size: 20px;
    }
}
/* about */

/* contact */
#contact{
    margin-top: 100px;
}
#contact h1{
    text-align: center;
    font-weight: bold;
    margin-top: 50px;
    color: rgba(161,109,14,1);
    text-shadow: 1px 1px 1px black;
    border-bottom: 2px solid rgba(161,109,14,1);
}
#contact input{
    background-color: rgba(161,109,14,1);
}
#contact input::placeholder{
    color: white;
}
#contact textarea{
    background-color: rgba(161,109,14,1);
}
#contact textarea::placeholder{
    color: white;
}
#messagebtn{
    text-align: center;
}
#messagebtn button{
    width: 200px;
    height: 30px;
    letter-spacing: 3px;
    font-weight: bold;
    background: transparent;
    border: 2px solid white;
    color: white;
    transition: 0.5s;
    cursor: pointer;
}
#messagebtn button:hover{
    background-color: rgba(161,109,14,1);
}
/* contact */

/* footer */
#footer{
    width: 100%;    
    background-color: #573818;
    box-shadow: 0px 0px 5px black;
    margin-top: 100px;
}
#footer h1{
    color: white;
    padding-top: 30px;
}
#footer p{
    color: white;
}
.icons i{
    background-color: white;
    color: #573818;
    border-radius: 50px;
    padding: 6px;
    font-size: 30px;
    transition: 0.5s;
    cursor: pointer;
}
.icons i:hover{
    background-color: rgba(161,109,14,1);
    color: white;
}
.copyright{
    color: white;
    margin-top: 20px;
}
.credite{
    color: white;
}
/* footer */
html{
    scroll-behavior: smooth;
}
.arrow{
    position: fixed;
    background-color: rgba(161,109,14,1);
    border-radius: 50px;
    height: 50px;
    bottom: 40px;
    right: 50px;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
}
Posted
Updated 9-Oct-23 5:20am
v2
Add a Solution
Comments
OriginalGriff 9-Oct-23 11:30am    
This is not a good question - we cannot work out from that little what you are trying to do.
Remember that we can't see your screen, access your HDD, or read your mind - we only get exactly what you type to work with - we get no other context for your project. You are going to have to give us a load more info on exactly what you are trying to achieve.

Imagine this: you go for a drive in the country, but you have a problem with the car. You call the garage, say "it broke" and turn off your phone. How long will you be waiting before the garage arrives with the right bits and tools to fix the car given they don't know what make or model it is, who you are, what happened when it all went wrong, or even where you are?

That's what you've done here. So stop typing as little as possible and try explaining things to people who have no way to access your project!

Use the "Improve question" widget to edit your question and provide better information.

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
Use 2 files from 2 different folders tkinter
Difference in the code
I am having a different output on this C++ code
different compilers, different file size
Why my forms in different languages not work?
How to write the pass (or key) in a different file, not on a coding file ? C#
Different CSS for different computer resulotions
Opening a file on a shared drive with different mapped drives on different computers
This code is not printing anything I have tried different compilers
How to compare XML files and highlight differences

Advertise
Privacy
Cookies
Terms of Use
Last Updated 9 Oct 2023
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web03 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900