Bir hesap ayarları sayfasının kodlarını belirli kodlara ekleme

OnurOfc · 14 Temmuz 2023

Derdimi şöyle anlatayım;

Böyle bir sayfam var bu içeride ki main kısmına şunu eklemek istiyorum.

Ama ne yaptıysam yapayım ya CSS'ler birbirine karışıyor ya da site kafayı yiyor. Bunları nasıl yapacağım söyler misiniz?

533388 · 14 Temmuz 2023

@OnurOfc tüm csslerinizi silin sonra o alttaki temayı indirin ve index. HTML'sini acin.

OnurOfc · 14 Temmuz 2023

533388 dedi:
@OnurOfc tüm csslerinizi silin sonra o alttaki temayı indirin ve index. HTML'sini acin.

Öyle yaparsam da yukarı da ki kendi sitemin sidebarı ve navbarı silinmez mi? Ben oradaki boşluğa eklemek istiyorum bu account settings i

533388 · 14 Temmuz 2023

@OnurOfc o zaman ayrı bir div açın adını digerbolum yapın ve oraya kodlarinizi ekleyin.

OnurOfc · 14 Temmuz 2023

533388 dedi:
@OnurOfc o zaman ayrı bir div açın adını digerbolum yapın ve oraya kodlarinizi ekleyin.

O zaman da işte kafayı yiyor site aynı şöyle oluyor.

533388 · 14 Temmuz 2023

@OnurOfc önünü nedeni kendi CSS kodların ile o kodların aynı olammasi ya sen ona uygun yapacaksın'ya da hepsini baştan yapacaksın.

OnurOfc · 14 Temmuz 2023

533388 dedi:
@OnurOfc önünü nedeni kendi CSS kodların ile o kodların aynı olammasi ya sen ona uygun yapacaksın'ya da hepsini baştan yapacaksın.

Tamam zaten o account settings sayfasının css kodlarını da aldım ve ekledim ona rağmen böyle görünüyor. Kodları atsam bakar mısınız?

533388 · 14 Temmuz 2023

@OnurOfc atın yardimci olmaya calisayim.

OnurOfc · 14 Temmuz 2023

HTML:

Kod:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="profilet.css" />
    <style>
      /* Sidebar Animations */
      @keyframes sidebar-appear {
        0% {
          transform: translateX(-100%);
        }
        100% {
          transform: translateX(0);
        }
      }
      @keyframes sidebar-disappear {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-100%);
        }
      }
      /* Sidebar */
      .sidebar__menu {
        animation: sidebar-appear 1s forwards;
      }
      .sidebar__logout {
        background-color: #e74c3c;
        color: #fff;
        cursor: pointer;
        padding: 8px 16px;
        border-radius: 5px;
        text-align: center;
        margin-top: 20px;
        font-weight: bold;
        font-size: 14px;
        transition: background-color 0.3s, transform 0.3s;
      }
      .sidebar__logout:hover {
        background-color: #c0392b;
        transform: scale(1);
      }
      /* Button Animations */
      .sidebar__link {
        transition: transform 1s;
      }
      .sidebar__link:hover {
        transform: translateX(10px);
      }
    </style>
    <!-- Latest compiled and minified CSS -->
  </head>
  <body id="body">
    <section class="py-5 my-5">
    <div class="container">
      <nav class="navbar">
        <div class="nav_icon" onclick="toggleSidebar()">
          <i class="fa fa-bars" aria-hidden="true"></i>
        </div>
        <div class="navbar__left">
          <a href="index.html">Anasayfa</a>
        </div>
        <div class="navbar__right">
          <a href="#">
            <i class="fa fa-search" aria-hidden="true"></i>
          </a>
          <a href="#">
            <i class="fa fa-clock-o" aria-hidden="true"></i>
          </a>
          <a href="profil.html">
            <img
              class="active_link"
              width="30"
              src="assets/avatar.svg"
              alt=""
            />
            <!-- <i class="fa fa-user-circle-o" aria-hidden="true"></i> -->
          </a>
        </div>
      </nav>

       <main class="main__container">
       <div class="container">
        <h1 class="mb-5">Account Settings</h1>
        <div class="bg-white shadow rounded-lg d-block d-sm-flex">
          <div class="profile-tab-nav border-right">
            <div class="p-4">
              <div class="img-circle text-center mb-3">
                <img src="img/user2.jpg" alt="Image" class="shadow" />
              </div>
              <h4 class="text-center">Kiran Acharya</h4>
            </div>
            <div
              class="nav flex-column nav-pills"
              id="v-pills-tab"
              role="tablist"
              aria-orientation="vertical"
            >
              <a
                class="nav-link active"
                id="account-tab"
                data-toggle="pill"
                href="#account"
                role="tab"
                aria-controls="account"
                aria-selected="true"
              >
                <i class="fa fa-home text-center mr-1"></i>
                Account
              </a>
              <a
                class="nav-link"
                id="password-tab"
                data-toggle="pill"
                href="#password"
                role="tab"
                aria-controls="password"
                aria-selected="false"
              >
                <i class="fa fa-key text-center mr-1"></i>
                Password
              </a>
              <a
                class="nav-link"
                id="security-tab"
                data-toggle="pill"
                href="#security"
                role="tab"
                aria-controls="security"
                aria-selected="false"
              >
                <i class="fa fa-user text-center mr-1"></i>
                Security
              </a>
              <a
                class="nav-link"
                id="application-tab"
                data-toggle="pill"
                href="#application"
                role="tab"
                aria-controls="application"
                aria-selected="false"
              >
                <i class="fa fa-tv text-center mr-1"></i>
                Application
              </a>
              <a
                class="nav-link"
                id="notification-tab"
                data-toggle="pill"
                href="#notification"
                role="tab"
                aria-controls="notification"
                aria-selected="false"
              >
                <i class="fa fa-bell text-center mr-1"></i>
                Notification
              </a>
            </div>
          </div>
          <div class="tab-content p-4 p-md-5" id="v-pills-tabContent">
            <div
              class="tab-pane fade show active"
              id="account"
              role="tabpanel"
              aria-labelledby="account-tab"
            >
              <h3 class="mb-4">Account Settings</h3>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label>First Name</label>
                    <input type="text" class="form-control" value="Kiran" />
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label>Last Name</label>
                    <input type="text" class="form-control" value="Acharya" />
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label>Email</label>
                    <input
                      type="text"
                      class="form-control"
                      value="[email protected]"
                    />
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label>Phone number</label>
                    <input
                      type="text"
                      class="form-control"
                      value="+91 9876543215"
                    />
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label>Company</label>
                    <input
                      type="text"
                      class="form-control"
                      value="Kiran Workspace"
                    />
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label>Designation</label>
                    <input
                      type="text"
                      class="form-control"
                      value="UI Developer"
                    />
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group">
                    <label>Bio</label>
                    <textarea class="form-control" rows="4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero enim error similique quia numquam ullam corporis officia odio repellendus aperiam consequatur laudantium porro voluptatibus, itaque laboriosam veritatis voluptatum distinctio!</textarea
                    >
                  </div>
                </div>
              </div>
              <div>
                <button class="btn btn-primary">Update</button>
                <button class="btn btn-light">Cancel</button>
              </div>
            </div>
            <div
              class="tab-pane fade"
              id="password"
              role="tabpanel"
              aria-labelledby="password-tab"
            >
              <h3 class="mb-4">Password Settings</h3>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label>Old password</label>
                    <input type="password" class="form-control" />
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label>New password</label>
                    <input type="password" class="form-control" />
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label>Confirm new password</label>
                    <input type="password" class="form-control" />
                  </div>
                </div>
              </div>
              <div>
                <button class="btn btn-primary">Update</button>
                <button class="btn btn-light">Cancel</button>
              </div>
            </div>
            <div
              class="tab-pane fade"
              id="security"
              role="tabpanel"
              aria-labelledby="security-tab"
            >
              <h3 class="mb-4">Security Settings</h3>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label>Login</label>
                    <input type="text" class="form-control" />
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label>Two-factor auth</label>
                    <input type="text" class="form-control" />
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <div class="form-check">
                      <input
                        class="form-check-input"
                        type="checkbox"
                        value=""
                        id="recovery"
                      />
                      <label class="form-check-label" for="recovery">
                        Recovery
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <button class="btn btn-primary">Update</button>
                <button class="btn btn-light">Cancel</button>
              </div>
            </div>
            <div
              class="tab-pane fade"
              id="application"
              role="tabpanel"
              aria-labelledby="application-tab"
            >
              <h3 class="mb-4">Application Settings</h3>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <div class="form-check">
                      <input
                        class="form-check-input"
                        type="checkbox"
                        value=""
                        id="app-check"
                      />
                      <label class="form-check-label" for="app-check">
                        App check
                      </label>
                    </div>
                    <div class="form-check">
                      <input
                        class="form-check-input"
                        type="checkbox"
                        value=""
                        id="defaultCheck2"
                      />
                      <label class="form-check-label" for="defaultCheck2">
                        Lorem ipsum dolor sit.
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <button class="btn btn-primary">Update</button>
                <button class="btn btn-light">Cancel</button>
              </div>
            </div>
            <div
              class="tab-pane fade"
              id="notification"
              role="tabpanel"
              aria-labelledby="notification-tab"
            >
              <h3 class="mb-4">Notification Settings</h3>
              <div class="form-group">
                <div class="form-check">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    value=""
                    id="notification1"
                  />
                  <label class="form-check-label" for="notification1">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Dolorum accusantium accusamus, neque cupiditate quis
                  </label>
                </div>
              </div>
              <div class="form-group">
                <div class="form-check">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    value=""
                    id="notification2"
                  />
                  <label class="form-check-label" for="notification2">
                    hic nesciunt repellat perferendis voluptatum totam porro
                    eligendi.
                  </label>
                </div>
              </div>
              <div class="form-group">
                <div class="form-check">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    value=""
                    id="notification3"
                  />
                  <label class="form-check-label" for="notification3">
                    commodi fugiat molestiae tempora corporis. Sed dignissimos
                    suscipit
                  </label>
                </div>
              </div>
              <div>
                <button class="btn btn-primary">Update</button>
                <button class="btn btn-light">Cancel</button>
              </div>
            </div>
          </div>
        </div>
      </div>


       </main>
    
    
    
    
      <div id="sidebar" class="sidebar__menu">
        <div class="sidebar__title">
          <div class="sidebar__img">
            <img src="assets/logo.png" alt="logo" />
            <h1>Stockify</h1>
          </div>
          <i
            onclick="closeSidebar()"
            class="fa fa-times"
            id="sidebarIcon"
            aria-hidden="true"
          ></i>
        </div>
      
        <div class="sidebar__menu">
          <div class="sidebar__link active_menu_link">
            <i class="fa fa-home"></i>
            <a href="index.html">Anasayfa</a>
          </div>
          <h2>Teklif</h2>
          <div class="sidebar__link">
            <i class="fa fa-file-text-o" aria-hidden="true"></i>
            <a href="#">Teklif Hazırla</a>
          </div>
          <div class="sidebar__link">
            <i class="fa fa-list-alt"></i>
            <a href="#">Teklifler</a>
          </div>
          <h2>Stok Takip</h2>
          <div class="sidebar__link">
            <i class="fa fa-bar-chart"></i>
            <a href="#">Stok Takip</a>
          </div>
          <div class="sidebar__link">
            <i class="fa fa-plus-square"></i>
            <a href="#">Stok Ekle</a>
          </div>
          <div
            class="sidebar__logout"
            onclick="animateButton(this)"
            onmouseover="animateButton(this)"
          >
            <i class="fa fa-power-off"></i>
            <a href="#">Çıkış Yap</a>
          </div>
        </div>
      </div>






      </section>
      <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
        function toggleSidebar() {
          var sidebar = document.getElementById("sidebar");
          sidebar.classList.toggle("active");
        }
        function closeSidebar() {
          var sidebar = document.getElementById("sidebar");
          sidebar.classList.remove("active");
        }
        function animateButton(button) {
          button.style.animation = "none";
        }
      </script>
    </div>
  
 








  </body>
</html>

CSS:

Kod:

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
/*  styling scrollbars  */
::-webkit-scrollbar {
  width: 5px;
  height: 6px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #a5aaad;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #a13e3e;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a5aaad;
}
* {
  margin: 0;
  padding: 0;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Poppins", sans-serif;
  background-color: aliceblue;
}
.avatar-xl img {
  width: 110px;
}
.rounded-circle {
  border-radius: 50% !important;
}
.wrapper {
  padding: 30px 50px;
  border: 1px solid #ddd;
  border-radius: 15px;
  margin: 10px auto;
  max-width: 600px;
}
h4 {
  letter-spacing: -1px;
  font-weight: 400;
}
.img {
  width: 70px;
  height: 70px;
  border-radius: 6px;
  object-fit: cover;
}
#img-section p,
#deactivate p {
  font-size: 12px;
  color: #777;
  margin-bottom: 10px;
  text-align: justify;
}
#img-section b,
#img-section button,
#deactivate b {
  font-size: 14px;
}
select:focus {
  outline: none;
}
.button {
  background-color: #fff;
  color: #0779e4;
}
.button:hover {
  background-color: #0779e4;
  color: #fff;
}
.btn-primary {
  background-color: #0779e4;
}
.danger {
  background-color: #fff;
  color: #e20404;
  border: 1px solid #ddd;
}
.danger:hover {
  background-color: #e20404;
  color: #fff;
}
@media (max-width: 576px) {
  .wrapper {
    padding: 25px 20px;
  }
  #deactivate {
    line-height: 18px;
  }
}
.text-primary-p {
  color: #a5aaad;
  font-size: 14px;
  font-weight: 700;
}
.font-bold {
  font-weight: 700;
}
.text-title {
  color: #2e4a66;
}
.text-lightblue {
  color: #469cac;
}
.text-red {
  color: #cc3d38;
}
.text-yellow {
  color: #a98921;
}
.text-green {
  color: #3b9668;
}
.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 0fr 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 3fr;
  grid-template-areas:
    "sidebar nav nav nav"
    "sidebar main main main";
  /* grid-gap: 0.2rem; */
}
.navbar {
  background: #ffffff;
  grid-area: nav;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px 0 30px;
  border-bottom: 1px solid lightgray;
}
.nav_icon {
  display: none;
}
.nav_icon > i {
  font-size: 26px;
  color: #a5aaad;
}
.navbar__left > a {
  margin-right: 30px;
  text-decoration: none;
  color: #a5aaad;
  font-size: 15px;
  font-weight: 700;
}
.navbar__left .active_link {
  color: #cc2626;
  border-bottom: 3px solid #cc2626;
  padding-bottom: 12px;
}
.navbar__right {
  display: flex;
  justify-content: center;
  align-items: center;
}
.navbar__right > a {
  margin-left: 20px;
  text-decoration: none;
}
.navbar__right > a > i {
  color: #a5aaad;
  font-size: 16px;
  border-radius: 50px;
  background: #ffffff;
  box-shadow: 2px 2px 5px #d9d9d9, -2px -2px 5px #ffffff;
  padding: 7px;
}
main {
  background: #f3f4f6;
  grid-area: main;
  overflow-y: auto;
}
/* ACCOUNT SET STARTS HERE*/
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");
main.shadow {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}
.profile-tab-nav {
  min-width: 250px;
}
.tab-content {
  flex: 1;
}
.form-group {
  margin-bottom: 1.5rem;
}
.nav-pills a.nav-link {
  padding: 15px 20px;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  color: #333;
}
.nav-pills a.nav-link i {
  width: 20px;
}
.img-circle img {
  height: 100px;
  width: 100px;
  border-radius: 100%;
  border: 5px solid #fff;
}
/*  SIDEBAR STARTS HERE  */
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");
#sidebar {
  width: 200px;
  background: #262729;
  grid-area: 4 / 1 / 1 / 1;
  overflow-y: auto;
  padding: 20px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.sidebar__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #f3f4f6;
  margin-bottom: 30px;
  /* color: #E85B6B; */
}
.sidebar__img {
  display: flex;
  align-items: center;
}
.sidebar__title > div > img {
  width: 75px;
  object-fit: contain;
}
.sidebar__title > div > h1 {
  font-size: 18px;
  display: inline;
}
.sidebar__title > i {
  font-size: 18px;
  display: none;
}
.sidebar__menu > h2 {
  color: #ff5454;
  font-size: 16px;
  margin-top: 15px;
  margin-bottom: 5px;
  padding: 0 10px;
  font-weight: 700;
}
.sidebar__link {
  color: #ffffff;
  padding: 10px;
  border-radius: 3px;
  margin-bottom: 5px;
}
.active_menu_link {
  background: rgba(255, 0, 0, 0);
  color: #ffffff;
}
.active_menu_link a {
  color: #ffffff !important;
}
.sidebar__link > a {
  text-decoration: none;
  color: #a5aaad;
  font-weight: 700;
}
.sidebar__link > i {
  margin-right: 10px;
  font-size: 18px;
}
.sidebar__logout {
  margin-top: 20px;
  padding: 10px;
  color: #8e1d2a;
}
.sidebar__logout > a {
  text-decoration: none;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
}
.sidebar__logout > i {
  margin-right: 10px;
  font-size: 18px;
}
.sidebar_responsive {
  display: inline !important;
  z-index: 9999 !important;
  left: 0 !important;
  position: absolute;
}
@media only screen and (max-width: 978px) {
  .container {
    grid-template-columns: 1fr;
    /* grid-template-rows: 0.2fr 2.2fr; */
    grid-template-rows: 0.2fr 3fr;
    grid-template-areas:
      "nav"
      "main";
  }
  #sidebar {
    display: none;
  }
  .sidebar__title > i {
    display: inline;
  }
  .nav_icon {
    display: inline;
  }
}
@media only screen and (max-width: 855px) {
  .main__cards {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 0;
  }
  .charts {
    grid-template-columns: 1fr;
    margin-top: 30px;
  }
}
@media only screen and (max-width: 480px) {
  .navbar__left {
    display: none;
  }
}

@533388

533388 · 14 Temmuz 2023

@OnurOfc hocam musait oludugum ilk zaman bakacağım ve size yazarım.

Bir hesap ayarları sayfasının kodlarını belirli kodlara ekleme

Ayrıntılı düzenleme

OnurOfc

Hectopat

533388

Hectopat

OnurOfc

Hectopat

533388

Hectopat

OnurOfc

Hectopat

533388

Hectopat

OnurOfc

Hectopat

533388

Hectopat

OnurOfc

Hectopat

533388

Hectopat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz