Altın Konu HTML ve CSS Kullanan Kişisel Portföy Web Sitesi

KERİM ERBAY · 23 Kas 2023

Kaynak Kodlu HTML ve CSS Kullanan Kişisel Portföy Web Sitesi

Merhaba Coder, bugün HTML ve CSS Kullanarak Kaynak Kodla Kişisel Portföy Web Sitesi Oluşturmayı öğreneceğiz. Bir portföy, kullanıcının bir müşteri için becerilerini gösteren dijital bir özgeçmişe benzetilebilir. Bir geliştiricinin portföyü, işverenlerin onları becerilerine göre işe alabilmesi için yeteneklerinin reklamını yapmak için kullandıkları bir web sitesidir.

Bu talimatları izleyerek, bu Kişisel Portföy Duyarlı web sitesini HTML CSS Koduyla kolayca yapabilirsiniz. Aşağıda belirtilen prosedürlere bağlı kalarak bu muhteşem kişisel portföy web sitesini geliştirebileceksiniz.

Bu portföy web sitesinde sağda bir düğme, ortada bazı gezinme bağlantıları ve solda logolu bir gezinme çubuğu bulunur. Bir sonraki adım, bu web sitesinin sol tarafında, yazarın adını ve mesleğini açıklayan metnin yanında, resimde gösterildiği gibi bulunan “CV İndir” butonuna tıklamaktır.

Kişisel Portföy Web Sitesi Kaynak Kodunun Canlı Önizlemesi:-:-

Bu portföyü beğendiyseniz ve kaynak kodunu istiyorsanız, bu programın kaynak dosyalarını hızlı bir şekilde edinebileceğiniz bu programın bağlantısının altına bu programın tüm kodlarını ekledim. Kendi benzersiz dokunuşlarınızı ekleyerek bu portföyü ilerletmek için kullanabilirsiniz.

Kişisel Portföy Web Sitesi Html Kodu: -

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Personal Portfolio Website</title>
    <!----CSS link----->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="hero">
      <nav>
        <img src="./img/logo.png" class="logo" />
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Service</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <a href="#" class="btn">Resume</a>
      </nav>

      <div class="content">
        <span class="title">Freelance Web Developer</span>
        <h1>Hello, I’m <span>emma</span></h1>
        <p>
          I’m working on a professional, visually sophisticated and
          technologically proficient, responsive and multi-functional React
          Components.
        </p>
        <a href="#" class="btn">Download CV</a>
      </div>
    </div>
  </body>
</html>

Bu Site İçin HTML ve CSS Dosyası oluşturmanız gerekmektedir. Bu dosyaları oluşturduktan sonra aşağıdaki kodları dosyanıza yapıştırmanız yeterlidir.

Adım 1- index.html adında bir HTML dosyası oluşturun ve verilen kodları içine yerleştirin. Bu web sitesinde kullanılan görsellerin (GitHub'dan alabilirsiniz) görüntülenmeleri için.html uzantılı bir dosyaya yerleştirilmesi gerektiğini unutmayın.

Adım 2- Gezinti çubuğuna geçmeden önce portföyümüzün başlığıyla başlayacağız. <nav> etiketini kullanarak navbarımızın bölümünü oluşturacağız ve navbar'ımızdaki sırasız listeyi kullanarak çeşitli menü öğeleri ekleyeceğiz.

Adım 3- Şimdi div etiketini kullanarak kullanıcının niteliklerini ve eğitim geçmişini ekleyebileceği bir içerik alanı oluşturacağız. Ayrıca diğer kullanıcıların özgeçmişimize erişebilmesi için portfolyomuzun içinde bir indirme bağlantısı da sunacağız.

Kişisel Portföy İçin Html Kodunun Çıktısı: -

HTML Kodu Önizlemesi

Kişisel Portföy Web Sitesi Css Kodu: -

CSS:

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
a {
  text-decoration: none;
}
.hero {
  width: 100%;
  height: 100vh;
  background: url(img/bg.png);
  background-size: cover;
}
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 100px;
}
.logo {
  max-height: 60px;
}
nav ul li {
  list-style: none;
  display: inline-block;
  padding: 10px 20px;
}
nav ul li a {
  color: #1d1d24;
  position: relative;
  padding: 5px 0;
}
nav ul li a:hover {
  color: #fd4766;
}
nav ul li a:after {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  height: 3px;
  background: #fd4766;
  transition: 0.3s;
  bottom: 0;
}
nav ul li a:hover:after {
  width: 100%;
}
.btn {
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 16px 40px;
  border-radius: 500px;
  display: inline-block;
  font-weight: 500;
  transition: all 0.4s ease-in-out;
  background-size: 152% 100%;
  background: #fd4766;
  border: 2px solid #fd4766;
}
.btn:hover {
  background: transparent;
  border-color: #fd4766;
  color: #fd4766;
}
.content {
  position: absolute;
  top: 35%;
  left: 8%;
}
.content .title {
  color: #0a0a0a;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 4px;
  display: inline-block;
  margin-bottom: 20px;
  background: linear-gradient(
    120deg,
    #1c99fe 20.69%,
    #7644ff 50.19%,
    #fd4766 79.69%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.content h1 {
  color: #1f1f25;
  font-size: 75px;
  font-weight: 900;
  line-height: 90px;
  text-transform: inherit;
  width: 70%;
}
.content h1 span {
  color: #fd4766;
}
.content p {
  width: 55%;
  color: #202020;
  margin-top: 25px;
  margin-bottom: 30px;
}

İkinci Adım olarak style.css adında bir CSS dosyası oluşturup verilen kodları CSS dosyanıza yapıştırmalısınız. .css uzantılı bir dosya oluşturmanız gerektiğini unutmayın.

CSS (Basamaklı Stil Sayfaları), HTML öğelerinin ekranda, kağıtta vb. nasıl görüntülendiğini açıklayan dosyalardır. HTML ile, gömülü stillere sahip olabilirsiniz veya stiller, harici bir stil sayfasında tanımlanabilir. Stilleri gömmek için <style></style> etiketleri kullanılır.

Harici stil sayfaları .css uzantılı dosyalarda saklanır. Harici CSS ile birden fazla HTML sayfasına bu sayfaların stilini güncellemek için ekleyebilirsiniz. Tam bir web sitesine stil vermek için tek bir CSS dosyası bile kullanılabilir.

Bir CSS kuralı, bir seçici ve bir bildirim olmak üzere iki bileşenden oluşur. Seçici, HTML belgesindeki bir öğeye işaret eder. Bir öğe etiketi, sınıf adı, kimlik adı, hiyerarşiyi gösteren birden fazla etiket vb. olabilir.

Bir bildirim, özellik ve değerden oluşan stil tanımını içerir. Özellik, değiştirmek istediğiniz öğenin özelliğini tanımlar ve değer, onun yeni değerini tanımlar. Her CSS kuralının birden fazla bildirimi olabilir. Aşağıda bir CSS kuralı örneği verilmiştir.

Ve başlattığımız E-Kitap yalnızca HTML, CSS, Javascript ve Bootstrap üzerine el yapımı dersler içermiyor, aynı zamanda ön uç web geliştirme üzerine yüzlerce proje ve röportaj soruları da içeriyor . İşte E-Kitabın bağlantısı

Örnek:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Html ve Css Kaynak Kodunu Kullanan Kişisel Web Sitesinin Nihai Çıktısı: -

Kaynak Koduyla HTML ve CSS Kullanan Kişisel Portföy Web Sitesi

Kaynak Koduyla HTML ve CSS Kullanan Kişisel Portföy Web Sitesini öğrenmeyi tamamladınız .