Halo, hari ini kita akan belajar bagaimana menggunakan HTML dan CSS untuk membuat website untuk portofolio pribadi. Dengan mengikuti petunjuk ini, Anda cukup membuat situs web portofolio pribadi ini dalam HTML. Cukup dengan mengikuti prosedur yang disebutkan di bawah ini, Anda akan dapat mengembangkan situs web portofolio pribadi yang luar biasa ini
IKLAN
IKLAN
Pada website portfolio ini terdapat tombol di sebelah kanan, beberapa link navigasi di tengah, dan bar navigasi dengan logo di sebelah kiri. Langkah selanjutnya klik tombol “Download CV” yang terletak di sebelah teks yang menjelaskan nama dan pekerjaan penulis di sebelah kiri website ini, seperti terlihat pada gambar
Code byNinja_webTechProject DownloadLink Tersedia di bawahBahasa yang digunakanHTML dan CssExternal link / DependenciesNoResponsiveNoPersonal Portfolio WebsiteableMainkan Kuis Tanpa Batas Tentang HTML, CSS, dan JavaScript – Klik Di Sini
IKLAN
Portofolio dapat dibandingkan dengan resume digital yang menampilkan keterampilan pengguna untuk klien. Portofolio pengembang adalah situs web yang mereka gunakan untuk mengiklankan kemampuan mereka sehingga pemberi kerja dapat merekrut mereka berdasarkan keahlian mereka
IKLAN
Jika Anda menyukai portofolio ini dan menginginkan kode sumbernya, saya telah menyertakan semua kode untuk program ini di bawah tautan ke program ini, dari mana Anda dapat dengan cepat memperoleh file sumber dari program ini. Dengan menambahkan sentuhan unik Anda sendiri, Anda dapat menggunakan portofolio ini untuk memajukannya
Kode HTML Untuk Situs Web Portofolio
Personal Portfolio Website
- Home
- About
- Service
- Portfolio
- Blog
- Contact
Resume
Freelance Web Developer
Hello, I’m emma
I’m working on a professional, visually sophisticated and
technologically proficient, responsive and multi-functional React
Components.
Download CV
Anda harus membuat File HTML dan CSS Untuk Situs ini. Setelah membuat file-file ini cukup rekatkan kode berikut ke dalam file Anda
Langkah1-Buat file HTML bernama index. html dan masukkan kode yang disediakan di dalamnya. Perlu diingat bahwa gambar yang digunakan di situs web ini [yang dapat Anda ambil dari GitHub] harus ditempatkan dalam file dengan. html untuk ditampilkan
IKLAN
Step2- We’ll start with the header of our portfolio before moving on to the navbar. We will build the section of our navbar using the tag, and we will add various menu items using the unordered list in our navbar.
Langkah 3-Sekarang kita akan menggunakan tag div untuk membuat area konten tempat pengguna dapat menggunakan kualifikasi dan riwayat pendidikan mereka. Kami juga akan menyediakan tautan unduhan di dalam portofolio kami sehingga pengguna lain dapat mengakses resume kami
Keluaran HTML
100+ Proyek JavaScript Dengan Kode Sumber [Pemula hingga Mahir]
IKLAN
Kode CSS Untuk Situs Web Portofolio
@import url["//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;
}
_Langkah Kedua, Anda harus membuat file CSS dengan nama style. css dan rekatkan kode yang diberikan di file CSS Anda. Ingat, Anda harus membuat file dengan. ekstensi css
IKLAN
CSS [Cascading Style Sheets] are files that describe how HTML elements are displayed on the screen, paper, etc. With HTML, you can have either embedded styles or styles can be defined in an external stylesheet. For embedding the styles, the tags are used.
Stylesheet eksternal disimpan dalam file dengan ekstensi. ekstensi css. Dengan CSS eksternal, Anda dapat memasukkannya ke beberapa halaman HTML untuk memperbarui gaya halaman tersebut. Bahkan satu file CSS dapat digunakan untuk mendesain situs web yang lengkap
Cara Membuat Aplikasi Cuaca menggunakan JavaScript
Aturan CSS terdiri dari dua komponen, pemilih dan deklarasi. Pemilih menunjuk ke elemen dalam dokumen HTML. Itu bisa berupa tag elemen, nama kelas, nama id, banyak tag yang menunjukkan hierarki, dll
Deklarasi berisi definisi gaya yang terdiri dari properti dan nilai. Properti mengidentifikasi properti elemen yang ingin Anda ubah dan nilainya menentukan nilai barunya. Setiap aturan CSS dapat memiliki beberapa deklarasi. Berikut ini adalah contoh aturan CSS
IKLAN
Hasil Akhir
Website Portofolio Pribadi Menggunakan HTML & CSS Dengan Source Code
https. // www. codewithrandom. com/wp-content/uploads/2022/08/Untitled-1. mp4
Anda telah menyelesaikan pembelajaran Personal Portfolio Website Menggunakan HTML Dan CSS Dengan Source Code. Saya harap saya telah menjelaskan kepada Anda dalam tutorial ini bagaimana saya membuat Situs Web Portofolio Pribadi Menggunakan HTML dan CSS
IKLAN
Kode sumber Klik Di Sini
Jika Anda menikmati membaca posting ini dan merasa berguna bagi Anda, silakan bagikan dengan teman-teman Anda, dan ikuti saya untuk mendapatkan pembaruan pada posting saya yang akan datang. Anda dapat terhubung dengan saya di Instagram
IKLAN
jika Anda bingung Beri komentar di bawah atau Anda dapat menghubungi kami dengan mengisi formulir hubungi kami dari bagian beranda. 🤞🎉