Css Ve Html İle Forum Teması Yapımı

pikachu · 24 Şub 2021

Merhaba değerli forum üyeleri bu gün sizlerle bir forum teması nasıl yapılır bunu öğreneceğiz:

(Bu konuda css ve html anlatmadım. Html dersleri için Trker4ktas moderatörün konularına bakın css bu gün ilerleyen saatlerde gelecek

bütün kodları kopyalayın ve index.html diye bir dosya oluşturp onun içine koyun daha sonra dosyayı sürükleyerek tarayıcının içine koyun ve temamızın nasıl olduğuna bakın)

ilk başta html taglarını giriyoruz

HTML:

<!DOCTYPE html>
<html lang="tr">
<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>Forum Teması</title>
</head>
<body>
  
</body>
</html>

daha sonra <body> taglarının arasına kodlarımız

HTML:

<html>
<head>
    <title>Developers Area</title>
    <meta charset="utf-8">
    <meta name="author" content="The61">
    <meta name ="keywords" content="dev,develop,geliştiriciler,platform,java,python,c,c++,web,türk">
    <meta name ="description" content="Developers Forum">
    <meta name ="viewport" content="width=device-width,initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">                                 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
      



      
    </script>
</head>

<!-- bu kısım css  taglarını girdiğimiz -->

<style type="text/css">
*{
    margin:0;
    padding:0;
}
body{
    background:lightgray;
    font-size:14px;
    font-family:arial;
}
.main{
    width:100%;
    height:100%;
    background:gray;
}
.main > .navbar{
    width:100%;
    height:6%;
    background:#333333;
}
.main > .navbar > .icons{
    float: left;
    padding:13px 0px 0px 50px;
}
.main > .navbar > .icons > a{
    color:white;
    padding: 15px;
}
.main > .navbar > .src{
    float: right;
    margin: 13px 30px 0px 0px;
}
.main > .navbar > .src > a{
    color:white;
    padding: 5px;
    text-decoration: none;
}
.main > .navbar > .src > #lv > #lg{
    padding-left: 3px;
}

.main > .header{
    width:100%;
    height:10%;
    background:#FFFFFF
}
.main > .header > .logo{
    float:left;
    margin:20px 0px 0px 50px;
}
.main > .header > .menu{
    float:right;
    padding:30px 20px 0px 0px;
}
.main > .header > .menu > a{
    color:black;
    padding:6px;
    text-decoration: none;
    transition: all 500ms;
}
.main > .header > .menu > a:hover{
    color:white;
    background:#328BC2;
    transition: all 500ms;
}
.main >  #day{
    width:100%;
    height:5%;
    background:#348BC1;
}
.main > #day > p{
    color:#F7F9F9;
    font-size:14px;
    padding:10px 0px 0px 50px;
}
.main > #day > a{
    float:right;
    margin:-15px 10px 0px 0px;
    color:#F7F9F9;
    font-size: 14px;
    text-decoration: none;
}
.main > .banner{
    width:100%;
    height: 35%;
    background:linear-gradient(to right bottom,#2975B3,#348BC1);
}
.main > .banner > #bannertext > h1{
    text-align: center;
    color: white;
    padding-top: 30px;
    font-size: 50px;
    font-weight:200;
}
.main > #banneralt{
    width:100%;
    height:10%;
    background:#333333;
}
.main > #banneralt > p{
    color:#55585F;
    text-align: center;
    padding-top: 15px;
}
.main > .content{
    width:100%;
    height:100%;
    background:none;
}
.main > .content > .left-column{
    float: left;
    width:900px;
    height:%100;
    background:lightgray;
}
.main > .content > .right-column{
    float:left;
    width: 449px;
    height: 700px;
    background:lightgray;
}
.main > .content > .left-column > .cat-1{
    width:700px;
    height:300px;
    border-radius:5px;
    margin:10px auto;
    background:white;
    overflow:hidden;
}
.main > .content > .left-column > .cat-1 > #topic{
    width:%100;
    height:15%;
    background:#348BC1;
    border-radius:5px 5px 0px 0px;
}
.main > .content > .left-column > .cat-1 > #topic > h2{
    color:white;
    font-size:18px;
    font-weight: lighter;
    padding:15px 0px 0px 15px;
}
.main > .content > .left-column > .cat-1 > #timeline{
    width:%100;
    height:8%;
    background:#333333;
}
.main > .content > .left-column > .cat-1 > #timeline > #fr{
    float:left;
    margin:5px 0px 0px 40px;
    font-size:12px;
    text-decoration: none;
    color:white;
}
.main > .content > .left-column > .cat-1 > #timeline > a{
    float:right;
    color:white;
    font-size:12px;
    text-decoration: none;
    margin:5px 50px 0px 0px;
}
.main > .content > .left-column > .cat-1 > #post{
    width:%100;
    height:20%;
    background:white;
    border-bottom:1px solid lightgray;
}
.main > .content > .left-column > .cat-1 > #post > #post-img{
    float:left;
    margin:12px 10px 0px 6px;
}
.main > .content > .left-column > .cat-1 > #post > #post-name{
    padding:10px 0px 0px 0px;
}
.main > .content > .left-column > .cat-1 > #post > #post-name > p{
    font-size:12px;
}
.main > .content > .left-column > .cat-1 > #post > #post-top{
    float:left;
    margin:-25px 10px 0px 410px;
}
.main > .content > .left-column > .cat-1 > #post > #post-posts{
    float:left;
    margin:-25px 0px 0px 500px;
}
.main > .content > .left-column > .cat-1 > #post > #last{
    float:left;
    margin:-35px 0px 0px 570px;
}
.main > .content > .right-column > .newp{
    width:300px;
    height:300px;
    margin:10px 0px 0px 50px;
    border-radius:5px;
    background:white;
    overflow: hidden;
}
.main > .content > .right-column > .newp > #topico{
    width:%100;
    height:15%;
    border-radius:5px 5px 0px 0px;
    background:#348BC1;
}
.main > .content > .right-column > .newp > #topico > h2{
    color:white;
    font-size:18px;
    font-weight: lighter;
    padding:15px 0px 0px 15px;
}
.main > .content > .right-column > .newp > #post2{
    width:%100;
    height:25%;
    margin-top:0px;
    background:none;
    border-bottom:1px solid lightgray;
}
.main > .content > .right-column > .newp > #post2 > #post-img{
    float:left;
    width:60px;
    height:60px;
    margin:10px 0px 0px 10px;
    background-image:url(https://s3.amazonaws.com/uifaces/faces/twitter/getsocial_now/128.jpg);
    background-size:cover;
    background-position:center;
}
.main > .content > .right-column > .newp > #post2 > #post-text{
    float:left;
    margin:15px 0px 0px 10px;
}
.main > .content > .right-column > .newp > #post2 > #post-text > h4{
    font-size:13px;
}
.main > .content > .right-column > .newp > #post2 > #post-text > p{
    font-size:12px;
}
</style>

<!-- css tagları burada bitiyor -->

<body>
    <div class ="main">
        <div class ="navbar">
         <div class ="icons">
             <a href ="#"><i class="fab fa-facebook-f"></i></a>
             <a href ="#"><i class="fab fa-twitter"></i></a>
             <a href ="#"><i class="fab fa-google"></i></a>
             <a href ="#"><i class="fas fa-rss"></i></a>
         </div>
         <div class ="src">
          <a href ="#"><i class="fas fa-search"></i></a>
          <a id="lv" href="#">Login<i id="lg" class="fas fa-sign-in-alt"></i></a>
         </div>
        </div>
        <div class ="header">
        <div class ="logo">
          <h1><span style ="color:#2975B3;">FORUM</span>PLUS</h1>
      </div>
      <div class ="menu">
          <a href ="#">FORUMS</a>
          <a href ="#">ARTICLES</a>
          <a href ="#">BLOGS</a>
          <a href ="#">WHATS'NEW</a>
          <a href ="#">COLOR</a>
          <a href ="#">CONTACT</a>
        </div>
    </div>
    <div id ="day">
        <p>Saturday,September 17.2016</p>
        <a href ="#">FAQ</a>
        <a href ="#">Calendar</a>
    </div>
    <div class ="banner">
     <div id ="bannertext">
         <h1>Welcome To Forum Plus</h1>
    </div>
</div>
    <div id ="banneralt">
        <p>İf this is your first visit be sure to check out the FAQ by clicking the link above.You may have to register before you can post click the register link <br>proceed.To start viewing messages select the forum that you want to visit from the selection below</p>
    </div>
    <div style ="clear:both;"></div>
        <div class ="content">
         <div class  ="left-column">
          <div class ="cat-1">
           <div id="topic">
               <h2>HELPS SUPPORTS</h2>
           </div>
           <div id ="timeline">
               <a id ="fr" href ="#">FORUM</a>
               <a href ="#">LAST POSTS</a>
               <a href ="#">POSTS</a>
               <a href ="#">TOPİCS</a>
           </div>
            <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
  </div>
           <div class ="cat-1">
           <div id="topic">
               <h2>GENERAL DİSCUSSION</h2>
           </div>
           <div id ="timeline">
               <a id ="fr" href ="#">FORUM</a>
               <a href ="#">LAST POSTS</a>
               <a href ="#">POSTS</a>
               <a href ="#">TOPİCS</a>
           </div>
                <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>

          </div>
                     <div class ="cat-1">
           <div id="topic">
               <h2>GENERAL DİSCUSSION</h2>
           </div>
           <div id ="timeline">
               <a id ="fr" href ="#">FORUM</a>
               <a href ="#">LAST POSTS</a>
               <a href ="#">POSTS</a>
               <a href ="#">TOPİCS</a>
           </div>
                <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>

          </div>
                     <div class ="cat-1">
           <div id="topic">
               <h2>GENERAL DİSCUSSION</h2>
           </div>
           <div id ="timeline">
               <a id ="fr" href ="#">FORUM</a>
               <a href ="#">LAST POSTS</a>
               <a href ="#">POSTS</a>
               <a href ="#">TOPİCS</a>
           </div>
                <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>
           <div id ="post">
                <div id ="post-img">
                    <i class="fas fa-file fa-2x"></i>
                </div>
                <div id ="post-name">
             <h4>POST İNSTALLATİON</h4>
             <p>Post installation</p>
         </div>
         <div id ="post-top">
             <p>2</p>
          </div>
          <div id ="post-posts">
              <p>2</p>
          </div>
          <div id ="last">
              <p>Learn D7 coding..<br>
                  by <a href ="#">admin</a></p>
          </div>
      </div>

          </div>
         </div>
         <div class ="right-column">
          <div class ="newp">
          <div id ="topico">
              <h2>New Forum Posts</h2>
          </div>
          <div id ="post2">
           <div id ="post-img"></div>
           <div id ="post-text">
               <h4>Learn D7 Coding..</h4>
               <p>by <a href ="#">admin</a><br>
            Sun Oct 04,2015 05:30pm
               </p>
           </div>
          </div>
                   <div id ="post2">
           <div id ="post-img"></div>
           <div id ="post-text">
               <h4>Learn D7 Coding..</h4>
               <p>by <a href ="#">admin</a><br>
            Sun Oct 04,2015 05:30pm
               </p>
           </div>
          </div>
                   <div id ="post2">
           <div id ="post-img"></div>
           <div id ="post-text">
               <h4>Learn D7 Coding..</h4>
               <p>by <a href ="#">admin</a><br>
            Sun Oct 04,2015 05:30pm
               </p>
           </div>
          </div>
         </div>
        </div>
    </div>
</body>
</html>

Türker · 24 Şub 2021

Kod:

[CODE=html]

[/CODE] olarak yazsana daha güzel olur

Türker · 24 Şub 2021

Güzel bir görünüşü var ben beğendim.

storyman · 24 Şub 2021

Ellerinize sağlık???????? Bu arada head'daki "lang=en" ' i tr yapın, ikide bi çeviri sorar yoksa tarayıcı ????

Türker · 25 Şub 2021

d

storyman' Alıntı:
Ellerinize sağlık???????? Bu arada head'daki "lang=en" ' i tr yapın, ikide bi çeviri sorar yoksa tarayıcı ????

düzenledim

pikachu · 25 Şub 2021

Trker4ktas' Alıntı:
d

düzenledim

Trker4ktas o dururken bana düşmez düzenlemek

Türker · 25 Şub 2021

	Benzer konular	Forum			Tarih
	Satış EVScreativ \| APP SMMPanel Creativ V2 HTML5, CSS3, jQuery Full Responsive (Mobil Uyumlu)	Tema Alışverişi	1	2K	18 Nis 2021
	Satış EVScreativ \| APP SMMPanel Creativ HTML5, CSS3, jQuery Full Responsive (Mobil Uyumlu)	Tema Alışverişi	1	412	18 Nis 2021
	Satış EVSCREATİV \| CV PROFİL HTML5, CSS3, jQuery Full Responsive (Mobil Uyumlu)	Tema Alışverişi	1	375	17 Nis 2021
	Html-Css-Bootstrap ile Yazılmış siteye yönetim paneli yapılacak	Yazılım Hizmetleri	8	688	10 Mar 2021
T	???? TÜM HTML Ve CSS ???? İşleriniz Yapılır ????	Freelancer İlanlar	1	351	7 Kas 2020
	Satış ⭐ PollyMovie ⭐ Modern & Responsive Film Teması # HTML-CSS-Bootstrap4 ⭐ Karanlık & Aydınlık Tema	Tema Alışverişi	1	1K	9 Eyl 2020
	Satış Kurumsal Tema - Full Responsive - HTML & CSS & Bootstrap4	Tema Alışverişi	1	711	15 Ağu 2020
	Satış Kişisel Portföy Teması - Full Responsive - HTML & CSS	Tema Alışverişi	1	470	11 Ağu 2020

Ara

Ara

Css Ve Html İle Forum Teması Yapımı

pikachu

www.teknoleo.com

Türker

Yeni Üye

Türker

Yeni Üye

storyman

Yeni Üye

Türker

Yeni Üye

pikachu

www.teknoleo.com

Türker

Yeni Üye

Konu görüntüleyen kullanıcılar

Benzer konular