HTML&CSS Hile Paylaşım Teması

PWX · 22 Kas 2020

Hile Paylaşım Teması - HTML&CSS

Herkese merhaba, bu konumda sizlere pek bir şeye benzemeyen hile paylaşım
menüsü tasarımımı tanıtacağım ve kodlarını vereceğim.
Tasarım aşağı yukarı budur;

Çok mükemmel olmadığının farkındayım henüz web tasarımı dalında kendimi geliştirmekteyim.
Menünün kenarlarını border-radius kodu ile oval yapmaya çalıştım ama yapamadım,
menünün kenarlarını nasıl oval yapabilirim bilgisi olan birisi cevap verirse sevinirim.

Tema Kodları;

Kod:

<!doctype html>
<html lang="en">
       
       <**** charset="UTF-8">
       <title>menu1</title>
	   
  *********
  
        [USER=869007]impo[/USER]rt url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');

body {
    font-family: 'Oswald', sans-serif;
}
 
* {
	padding: 0;
	margin: 0;
	border: 0;
	list-style: none;
} 

.menu1 {
  width: 375px;
  
 }
 
.menu1 a {
  background-color: #eee; 
  color: black; 
  display: block; 
  padding: 14px; 
  text-decoration: none; 
}

.menu1 a:hover {
  background-color: #ccc; 
}

.menu1 a.title2 {                    
  background-color: #00857c; 
  color: white;
}

.menu1 {
	background-color: #000000;        
	border: 0px solid #a9a9a9;
	padding: 0px;
    margin: -0px 0px 0px -0px;
}

.menu1 {
	text-shadow: 0px 0px 0px #000;  
}

.menu1 a.deactive {                    
  background-color: #ff0000; 
  color: white;
}

  body {

background-image:url([url]https://i.hizliresim.com/AlTWWM.jpg);[/url]

background-repeat:no-repeat;                                    

background-size: cover;

}

h1 {
	color: #ffffff;
	text-shadow: 2px 2px 5px #000;
}

.Box1 {
  box-shadow: 2px 2px 5px #000;              
}

.A1 {
  text-shadow: 1px 1px 5px #000;
  margin: Auto;                         
}

h1{font-size:3.7em;     



  </style>
  
  <body>
  
       <center>
   <h1 class="animate__animated animate__bounce">Animated Header</h1>
   
   
   
  <div class="menu1">
  <a href="#" class="title2">Menu Title</a>
  <a href="#" class="active">Active Menu1</a>
  <a href="#" class="active">Active Menu2</a>
  <a href="#" class="active">Active Menu3</a>
  <a href="#" class="deactive">Deactive Menu1</a>
  <a href="#" class="deactive">Deactive Menu2</a>
  <a href="#" class="deactive">Deactive Menu3</a>
  </div>
	  

   <head>
   <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
   </head>
    
    
    
	<div class='Box1' style='width:400px; height:45px; background:#28ed35; border-radius:250px '> <font class= 'A1' color='white' face='Verdana' size='6'>Created By PWX</font></div>
  </center> 
  </body>


</html>

İndirme Linkleri;
Temayı İndir
Virus Total

12yim · 22 Kas 2020

Kod:

<!DOCTYPE html>
<html lang="en">
<head>
    <**** charset="UTF-8">
    <**** name="viewport" content="width=device-width, initial-scale=1.0">
    <title>********</title>
   
    *********

        body {
            font-family: 'Oswald', sans-serif;
            text-align: center;
        }
         
        * {
            padding: 0;
            margin: 0;
            border: 0;
            list-style: none;
        } 
        
        .menu1 {
          width: 375px;
          
         }
         
        .menu1 a {
          background-color: #eee; 
          color: black; 
          display: block; 
          padding: 14px; 
          text-decoration: none; 
        }
        
        .menu1 a:hover {
          background-color: #ccc; 
        }
        
        .menu1 a.title2 {                    
          background-color: #00857c; 
          color: white;
        }
        
        .menu1 {
            background-color: #000000;        
            border: 0px solid #a9a9a9;
            padding: 0px;
            margin: -0px 0px 0px -0px;
        }
        
        .menu1 {
            text-shadow: 0px 0px 0px #000;  
            display: inline-block;
        }
        
        .menu1 a.deactive {                    
          background-color: #ff0000; 
          color: white;
        }
        
          body {
        
        background-image:url(https://i.hizliresim.com/AlTWWM.jpg);
        
        background-repeat:no-repeat;                                    
        
        background-size: cover;
        
        }
        
        h1 {
            color: #ffffff;
            text-shadow: 2px 2px 5px #000;
        }
        
        .Box1 {
          box-shadow: 2px 2px 5px #000;              
        }
        
        .A1 {
          text-shadow: 1px 1px 5px #000;
          margin: Auto;                         
        }
        
        h1{font-size:3.7em;}     
        
            a{
                display: inline-block;
            }
            .menu1{
              
            }
            .radius1{
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
            }
            .radius2{
                border-top-right-radius: 5px;
                border-top-left-radius: 5px;
            }
          </style>
</head>

<body>
    <center>
            <h1 class="animate__animated animate__bounce">Animated Header</h1>
     
       <div class="menu1">
         <ul>
      <li> <a href="#" class="title2 radius2">Menu Title</a></li>
      <li><a href="#" class="active">Active Menu1</a></li>
      <li><a href="#" class="active">Active Menu2</a></li>
      <li><a href="#" class="active">Active Menu3</a></li>
      <li><a href="#" class="deactive">Deactive Menu1</a></li>
      <li><a href="#" class="deactive">Deactive Menu2</a></li>
    <li><a href="#" class="deactive radius1">Deactive Menu3</a></li>
     </ul>
       </div>
           
     
     
        
        
         <div class='Box1' style='width:400px; height:45px; background:#28ed35; border-radius:250px; margin-top:20px;  '> <font class= 'A1' color='white' face='Verdana' size='6'>Created By PWX</font></div>
        </center>
</body>
</html>

a ları li etiketi içine almayı alışkanlık yaparsan güzel olur css dosyalarına linki header kısmında vermen gerekiyor. Düzenini biraz karışık ayarlamışsın border radiusu dive verirsen li leri etkilemez direk li lere özel radius vermen gerekir. border-bottom-left-radius: 25px; ile özel radiuslar verebilirsin. style etiketinin içinde en son yazdığın style kodunun süslü parantezini kapatmamışsın. Kolay gelsin.

hocamızın dedıgı gıbı bu marıana web cart curtlar zaman kaybıdır ve gercek degıllerdır. redroomları napıcaksınız anlamıyorum insanlık bu kadarmı yok oldu boş işler arkadaşlar zamanınızı oyun oynarak bıle gecırsenız daha ıyı edersınız bunlarla ugrascagınıza

bay404 · 22 Kas 2020

Arkaplan ne güzel durmuş elinize sağlık fakat ortadaki renkler iyi değil absürt duruyor. Bence ortadaki renkler biraz daha soluk renkler ve hafif şeffaf olursa daha iyi olur

HTML&CSS Hile Paylaşım Teması

PWX

Üye

12yim

Uzman üye

bay404

Uzman üye

Sosyal medya sayfalarımız