In Aptana Studio 3, Create Web Page With CSS Method 2

**We will continue the previous lessos and I will show you make the web page with CSS method in Aptana Studio 3 and The professional, open source development tool for the open web.

Aptana Studio 3 programında bugün birönceki dersimize kaldığımız yerden devam ediyoruz.Bu dersimde CSS yöntemi ile filtreleri, sayfalara geçiş işlemlerini ve buton işlemlerini ekleyip site hazırlama işlemimizi sonlandıracağız. Bu yöntem hem pratik hemde çok kullanışlıdır. İstediğiniz yerde oynama imkanı vermektedir. Lütfen dikkatle takip edip sizlerde uygulayınız.

Source

** Son şekillerini verceğimiz sayfamıza yazı ekleme işlemiyle videomuza devam edip çok faydalı işlemleri göstereceğim. Hadi videoya geçelim.**

NEW Index.html Kodları

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Main Page</title>
        <meta charset ="utf-8">
    <link rel="stylesheet" href="stil.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    </head>
    
    <body>
    <nav>
        <a href="#gor1">HOME</a>
        <a href="#say1">SERVICES</a>
        <a href="#gor2">WORKS</a>
        <a href="#say2">ABOUT</a>
        <a href="#gor3">SUPPORT</a>
        <a href="#say3">CONTACT</a>
    </nav>
    <div id="gor1" class="gorsel">
        <div class="anasayfa anayazi">
            <h1>APTANA STUDIO 3</h1>
            <p>Aptana Studio 3.6.1 is our code base and complete environment that includes extensive capabilities to build. 
                <br>Ruby and Rails, PHP, and Python applications, along with complete HTML, CSS and JavaScript editing.</p>
                <span>Get more info</span>
        </div>
        <div class="anasayfa anafiltre"></div>  
    </div>  
    <div id="say1" class="sayfa"></div>     
    <div id="gor2" class="gorsel"></div>        
    <div id="say2" class="sayfa"></div> 
    <div id="gor3" class="gorsel"></div>        
    <div id="say3" class="sayfa"></div>
    
    </body>
        </html>

NEW Stil.css Kodları

*{
    margin: 0px;
    padding: 0px;   
}
body, html{
    height: 100%;
}
nav{
    z-index: 2;
    position: absolute;
    height: 100px;
    width: 100%;
    text-align: center;
    line-height: 100px;
}
nav a{
    color: #fff;
    font-family: 'Roboto Slab', serif;
    font-size: 20px;
    margin-left: 15px;
    text-decoration: none;
    padding: 12px 12px;
}
nav a:hover{
    background-color: #000;
}
.gorsel{
    height: 100%;
    background-color: lightblue;
    background-size: cover;
    background-attachment: fixed;
}
.sayfa{
    height: 50%;
    background-color: lightgreen;
}
#gor1{
    background-image: url("1.jpg");
}
#gor2{
    background-image: url("2.jpeg");
}
#gor3{
    background-image: url("3.jpg");
}
.anasayfa{
    position: absolute;
    float: left;
}
.anayazi{
    height: 100%;
    width: 100%;
    z-index: 1;
    text-align: center;
    margin-top: 280px;
}
.anayazi h1{
    font-family: 'Oswald', sans-serif;
    font-size:70px;
    color: black;
}
.anayazi p{
    font-family: 'Oswald', sans-serif;
    font-size:20px;
    color: red;
    margin-bottom: 20px;
}
.anayazi span{
    font-family: 'Oswald', sans-serif;
    font-size:20px;
    color: #fff;
    padding: 10px 10px;
    border-radius: 5px
    border: 1px solid orange;
    background-color: orange;
}
.anayazi span:hover{
    background-color: #fff;
    color: orange;
    cursor: pointer;
}
.anafiltre{
    height: 100%;
    width: 100%;
    background-color: #000;
    z-index: 0;
    opacity: 0.35;
}

Bir sonraki aşamada görüşmek üzere…

Githup link: Aptana Studio 3
İndirme Link Sitesi: Aptana Studio 3

Posted on Utopian.io - Rewarding Open Source Contributors

In Aptana Studio 3, Create Web Page With CSS Method 2 – Turkish Tutorial