selamlar, bu sayfadaki kodları tek bir sayfaya ekleyebilecek var mı ? css ve html nasıl aynı sayfada kullanılır pek bilmiyorum, iki kodu da atıyorum index.php de kullanmak istiyorum

profeal32 adlı üyeden alıntı: mesajı görüntüle hangi kodlar hocam? https://codepen.io/CodeAbbas/pen/zYMXYJg
bu kodları tek bir sayfada birleştirmeme yardımcı olabilecek var mı ?

24-05-2024, 00:35:45

#1

deffydark

selamlar, bu sayfadaki kodları tek bir sayfaya ekleyebilecek var mı ? css ve html nasıl aynı sayfada kullanılır pek bilmiyorum, iki kodu da atıyorum index.php de kullanmak istiyorum
24-05-2024, 01:02:12

#2

profeal32

hangi kodlar hocam?
24-05-2024, 01:07:26

#3

deffydark

profeal32 adlı üyeden alıntı: mesajı görüntüle

hangi kodlar hocam?

https://codepen.io/CodeAbbas/pen/zYMXYJg
24-05-2024, 01:09:29
Hocam style kodlarını <head></head> tagları arasına ekliyorsunuz. Php kodlarını da direkt sayfanın başına veya html içerisine gömebilirsiniz.
<html>
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-title" content="CodePen">
    <title>Linktree HTML/CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'>
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300;400;500&family=Raleway:wght@100;200;300;400;500&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
  <style>
        body {
        font-family: 'Josefin Sans';
        margin: 0;
        padding: 15px;
        background-color: rgb(20, 16, 25);
      }
      .wrap {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
      }
      .profile {
        text-align: center;
        color: #FFF;
        margin-bottom: 20px;
      }
      .photo {
        height: 200px;
        width: 100%;        
      }
      .img{
        height: 100%;
        width: 200px;
        border-radius: 50%;
        background: url("https://user-images.githubusercontent.com/69011963/137184767-79a13ec7-1bb3-4341-a6da-3a149c9c159a.gif");
        background-position: center;
        background-size: cover;
        margin: 0 auto;
      }
      .profile_name {
        font-weight: bold;
        font-size:18px;
        display: block;
        margin: 8px 0;
      }
      .at {
        font-size: 13px;
      }
      
.custom-btn {
  width: 100%;
  height: 45px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Josefin Sans';
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}
.btn-8 {
  background-color: #f0ecfc;
  background-image: linear-gradient(315deg, #f0ecfc 0%, #c797eb 74%);
  line-height: 42px;
  padding: 0;
  margin: 14px 0;
  border: none;
}
.btn-8 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-8 span a{
  text-decoration: none;
  color: black;
}
.btn-8 span:hover a{
  color: #c797eb;
}
.btn-8:before,
.btn-8:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: #c797eb;
  /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
  transition: all 0.3s ease;
}
.btn-8:before{
   height: 0%;
   width: 2px;
}
.btn-8:after {
  width: 0%;
  height: 2px;
}
.btn-8:hover:before {
  height: 100%;
}
.btn-8:hover:after {
  width: 100%;
}
.btn-8:hover{
  background: transparent;
}
.btn-8 span:hover{
  color: #c797eb;
}
.btn-8 span:before,
.btn-8 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: #c797eb;
  /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
  transition: all 0.3s ease;
}
.btn-8 span:before {
  width: 2px;
  height: 0%;
}
.btn-8 span:after {
  height: 2px;
  width: 0%;
}
.btn-8 span:hover:before {
  height: 100%;
}
.btn-8 span:hover:after {
  width: 100%;
}
/*     Social Icons    */  
.sociaicon{
  display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.socialsanimate{
  transition: transform 0s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  z-index: 0;
}

.socialsalign{
  padding-left: 22px;
  padding-right: 22px;
  color: inherit;
  text-decoration: underline;
}
.socialsanimate svg {
    pointer-events: none;
}
.socialssvg{
    margin-top: 8px;
    fill: rgb(255, 254, 254);
    width: 32px;
    height: 32px;
}
  </style>
</head>
<body>
    <div class="wrap">
        <div class="profile">
          <!--<img src="https://user-images.githubusercontent.com/69011963/137184767-79a13ec7-1bb3-4341-a6da-3a149c9c159a.gif" width="200" height="200" class="photo">-->
          <div class="photo">
            <div class="img"></div>
          </div>
          <span class="profile_name">Abbas Uddin</span>
          <span class="at">@CodeAbbas</span>
        </div>
        <button class="custom-btn btn-8"><span><a href="https://abbas-uddin.netlify.app/" target="_blank"><i class="fab fa-youtube"></i> YouTube</a></span></button>
        <button class="custom-btn btn-8"><span><a href="https://github.com/codeAbbas/" target="_blank"><i class="fab fa-github"></i> Github</a></span></button>
        <button class="custom-btn btn-8"><span><a href="https://codepen.io/CodeAbbas/" target="_blank"><i class="fab fa-codepen"></i> CodePen</a></span></button>
        <button class="custom-btn btn-8"><span><a href="https://www.instagram.com/code_abbas/" target="_blank"><i class="fab fa-instagram"></i> Instagram</a></span></button>
        <button class="custom-btn btn-8"><span><a href="https://abbas-uddin.netlify.app/" target="_blank"><i class="fas fa-laptop"></i> Website</a></span></button>
        <!---->
        <div class="socialicon">
          <a target="_blank" rel="noopener" data-testid="SocialIcon"
            href="mailto:abbax.uddin@gmail.com" aria-label="Abbas Uddin email address"
            class="socialsanimate socialsalign">
            <svg enable-background="new 0 0 24 24" viewBox="0 0 24 24"
              class="socialssvg">
              <path
                d="M18.821,20.5H5.179A3.683,3.683,0,0,1,1.5,16.821V7.179A3.683,3.683,0,0,1,5.179,3.5H18.821A3.683,3.683,0,0,1,22.5,7.179v9.642A3.683,3.683,0,0,1,18.821,20.5ZM5.179,4.5A2.682,2.682,0,0,0,2.5,7.179v9.642A2.682,2.682,0,0,0,5.179,19.5H18.821A2.682,2.682,0,0,0,21.5,16.821V7.179A2.682,2.682,0,0,0,18.821,4.5Z">
              </path>
              <path
                d="M12,14.209a.5.5,0,0,1-.346-.138L4.286,7.028a.5.5,0,0,1,.691-.723L12,13.018l7.023-6.713a.5.5,0,1,1,.691.723l-7.368,7.043A.5.5,0,0,1,12,14.209Z">
              </path>
              <path d="M4.7,17.833a.5.5,0,0,1-.347-.86l5.54-5.31a.5.5,0,0,1,.692.722L5.048,17.694A.5.5,0,0,1,4.7,17.833Z">
              </path>
              <path d="M19.3,17.832a.5.5,0,0,1-.346-.139l-5.538-5.308a.5.5,0,0,1,.692-.722l5.538,5.308a.5.5,0,0,1-.346.861Z">
              </path>
            </svg>
          </a>
          <a target="_blank" rel="noopener" data-testid="SocialIcon" href="https://www.facebook.com/AbbasUddin.01"
            aria-label="Abbas Uddin facebook" class="socialsanimate socialsalign">
            <svg enable-background="new 0 0 24 24"
              viewBox="0 0 24 24" class="sc-gKsewC socialssvg">
              <path
                d="M23,12A11,11,0,1,0,10.279,22.865h0a11.08,11.08,0,0,0,3.436,0h0A10.952,10.952,0,0,0,23,12ZM10.859,21.935v-6.9a.5.5,0,0,0-.5-.5H8.193V12.5h2.166a.5.5,0,0,0,.5-.5V9.686c0-2.278,1.264-3.585,3.459-3.585a15.392,15.392,0,0,1,1.858.137V7.89h-.824l-.019,0a2,2,0,0,0-2.181,1.735,1.8,1.8,0,0,0-.011.4V12a.5.5,0,0,0,.5.5H15.97l-.312,2.035H13.641a.5.5,0,0,0-.5.5v6.9A10.124,10.124,0,0,1,10.859,21.935Zm3.282-.166V15.535h1.946a.5.5,0,0,0,.5-.425l.465-3.035a.5.5,0,0,0-.494-.575H14.141V10.016a1.267,1.267,0,0,1,.308-.821,1.218,1.218,0,0,1,.9-.3h1.324a.5.5,0,0,0,.5-.5V5.806a.5.5,0,0,0-.42-.494A16.661,16.661,0,0,0,14.325,5.1c-2.754,0-4.466,1.757-4.466,4.585V11.5H7.693a.5.5,0,0,0-.5.5v3.035a.5.5,0,0,0,.5.5H9.859v6.234a10,10,0,1,1,4.282,0Z">
              </path>
            </svg>
          </a>
          <a target="_blank" rel="noopener" data-testid="SocialIcon"
            href="https://www.youtube.com/channel/UCZByLXNIH0tZCHBM-zYfH1g" aria-label="Abbas Uddin youtube"
            class="socialsanimate socialsalign">
            <svg enable-background="new 0 0 24 24" viewBox="0 0 24 24"
              class="sc-gKsewC socialssvg">
              <path
                d="M12,20.55c-.3,0-7.279-.006-9.115-.5A3.375,3.375,0,0,1,.5,17.665,29.809,29.809,0,0,1,0,12,29.824,29.824,0,0,1,.5,6.334,3.375,3.375,0,0,1,2.885,3.948c1.836-.492,8.819-.5,9.115-.5s7.279.006,9.115.5A3.384,3.384,0,0,1,23.5,6.334,29.97,29.97,0,0,1,24,12a29.97,29.97,0,0,1-.5,5.666,3.384,3.384,0,0,1-2.388,2.386C19.279,20.544,12.3,20.55,12,20.55Zm0-16.1c-.072,0-7.146.006-8.857.464A2.377,2.377,0,0,0,1.464,6.593,29.566,29.566,0,0,0,1,12a29.566,29.566,0,0,0,.464,5.407,2.377,2.377,0,0,0,1.679,1.679c1.711.458,8.785.464,8.857.464s7.146-.006,8.857-.464a2.377,2.377,0,0,0,1.679-1.679A29.66,29.66,0,0,0,23,12a29.66,29.66,0,0,0-.464-5.407h0a2.377,2.377,0,0,0-1.679-1.679C19.146,4.456,12.071,4.45,12,4.45ZM9.7,15.95a.5.5,0,0,1-.5-.5V8.55a.5.5,0,0,1,.75-.433l5.975,3.45a.5.5,0,0,1,0,.866L9.95,15.883A.5.5,0,0,1,9.7,15.95Zm.5-6.534v5.168L14.675,12Z">
              </path>
            </svg>
          </a>
            <a target="_blank" rel="noopener" data-testid="SocialIcon" href="https://tiktok.com/@abbas_uddin_01"
            aria-label="Abbas Uddin tiktok" class="socialsanimate socialsalign">
            <svg enable-background="new 0 0 24 24"
              viewBox="0 0 24 24" class="sc-gKsewC socialssvg">
              <path
                d="M9.37,23.5a7.468,7.468,0,0,1,0-14.936.537.537,0,0,1,.538.5v3.8a.542.542,0,0,1-.5.5,2.671,2.671,0,1,0,2.645,2.669.432.432,0,0,1,0-.05V1a.5.5,0,0,1,.5-.5h3.787a.5.5,0,0,1,.5.5A4.759,4.759,0,0,0,21.59,5.76a.5.5,0,0,1,.5.5L22.1,10a.533.533,0,0,1-.519.515,9.427,9.427,0,0,1-4.741-1.268v6.789A7.476,7.476,0,0,1,9.37,23.5ZM8.908,9.585a6.466,6.466,0,1,0,6.93,6.447V8.326a.5.5,0,0,1,.791-.407A8.441,8.441,0,0,0,21.1,9.5l-.006-2.76A5.761,5.761,0,0,1,15.859,1.5H13.051V16.032a.458.458,0,0,1,0,.053,3.672,3.672,0,1,1-4.14-3.695Z">
              </path>
            </svg>
          </a>
          </div>
      </div>
</body>
</html>