Cara membuat website portfolio pribadi yang responsive hanya dengan html dan css

javascript css html portofolio situs web portofolio js situs web responsif situs web dinamis situs web responsif situs web portofolio lengkap

• Diperbarui 6 Okt 2022
• HTML

MohitSojitra / portofolio

Bintang 21

• Kode
• Masalah
• Tarik permintaan

Situs portofolio pribadi saya, yang dibuat dengan reactJs, dan juga aplikasi PWA sehingga Anda dapat menggunakan aplikasi serupa di seluler

reaksi nodejs javascript css html portofolio pwa reactjs portofolio-situs web portofolio-situs pwa-aplikasi reaksi-portofolio portofolio-reaksi responsif-portofolio responsif-portofolio-situs web pwa-portofolio

• Diperbarui 8 Mei 2022
• JavaScript

Ratheshan03 / Responsif-Portofolio-Desain

Bintang 21

• Kode
• Masalah
• Tarik permintaan

Situs Web Portofolio Responsif Menggunakan HTML, CSS, dan JavaScript dengan antarmuka pengguna yang luar biasa

javascript html5 css3 portofolio-situs web responsif-desain responsif-desain web-responsif-portofolio-situs web

• Diperbarui 9 Agustus 2021
• HTML

adarshtiwari1998 / AdarshTripathiPortfolio. github. io

Bintang 7

• Kode
• Masalah
• Tarik permintaan

Ini adalah desain situs web portofolio sederhana saya dan kembangkan di React. Js dengan sepenuhnya responsif di semua perangkat. 🔥🚀✅🙂,👉 Lebih banyak fitur ditambahkan segera dan semua kode akan diperbarui di repositori ini. Jadi pantau terus bersama kami dan ikuti saya di github

portfolio reactjs portfolio-website responsive-design portfolio-site responsive-web-design responsive-portfolio-website

• Diperbarui 21 Juli 2021
• JavaScript

nurahmed123 / responsive-portofolio

Bintang 5

• Kode
• Masalah
• Tarik permintaan

portofolio pribadi-situs web portofolio-situs web pribadi-blog animasi-portofolio responsif-portofolio-situs web

• Diperbarui 31 Des 2021
• HTML

DaveSimoes / Pengembang. Portofolio

Bintang 5

• Kode
• Masalah
• Tarik permintaan

Situs web pribadi dibangun dengan JavaScript, HTML, dan CSS

portofolio situs web pribadi portofolio-situs web alat pengembang portofolio-situs hacktoberfest html-css-javascript portofolio-templat situs web-templat web-templat pengembang-portofolio pengembang-folio responsif-portofolio responsif-portofolio-situs web

• Diperbarui 11 Des 2022
• CSS

MRINMOY662 / Templat-Portofolio-Situs-Modern

Bintang 3

• Kode
• Masalah
• Tarik permintaan

Situs Web Portofolio Pribadi Responsif Menggunakan HTML CSS & JavaScript

javascript css html portofolio-situs web responsif-portofolio-situs web

• Diperbarui16 Oktober 2022
• HTML

Mishraji566 / Portofolio

Bintang 3

• Kode
• Masalah
• Tarik permintaan

Situs Web Portofolio Responsif Menggunakan HTML, CSS, dan JavaScript dengan antarmuka pengguna yang luar biasa

css html sass scss portofolio-situs web sass-framework responsif-web-design responsif-portofolio-situs web mishraji566

• Diperbarui 11 Des 2022
• CSS

PranoyMajumdar / responsive-portfolio

Bintang 2

• Kode
• Masalah
• Tarik permintaan

https. //pranoymajumdar. github. io/responsif-portofolio/

portofolio responsif portofolio-situs web responsif-desain portofolio-situs responsif-desain-web responsif-situs web responsif-portofolio responsif-portofolio-situs web

Halo Teman-teman, hari ini di blog ini Anda akan belajar cara membuat Website Portofolio Pribadi Responsif Lengkap Hanya Menggunakan HTML & CSS

Hanya dengan menggunakan HTML & CSS Anda dapat membuat situs web portofolio yang responsif… untuk responsif kami menggunakan Media Queries. Ini adalah praktik terbaik untuk membuat situs web responsif untuk meningkatkan keterampilan HTML & CSS Anda

Video Tutorial Cara Membuat Website Personal Portfolio Responsive Lengkap Hanya Menggunakan HTML & CSS

Di video Anda telah melihat bahwa kami membuat situs web portofolio responsif hanya dengan menggunakan HTML & CSS. kami telah menambahkan 5 bagian di situs web. Bagian Beranda, Tentang Bagian, Bagian Pendidikan, Bagian Portofolio & Bagian Kontak… Menggunakan HTML & CSS sederhana, kita dapat dengan mudah membuat jenis situs web portofolio luar biasa ini

Jadi, nikmati tutorialnya & pelajari sesuatu yang baru hari ini 🙂

Situs Web Responsif Portofolio Pribadi Lengkap [ KODE SUMBER ]

Pertama, buat file HTML dengan nama index. html dan rekatkan kode yang diberikan di file HTML Anda. Ingat, Anda harus membuat file dengan. ekstensi html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive personal portfolio website design tutorial</title>

    <!-- font awesome cdn link  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

    <!-- custom css file link  -->
    <link rel="stylesheet" href="style.css">

</head>
<body>
    
 <!-- Header Section Starts -->

 <header>
 <div class="user">
     <img src="images/profile.jpg" alt="">
     <h3 class="name">Tarun Kaushik</h3>
     <p class="post">Front End Developer</p>
 </div>

 <nav class="navbar">
     <ul>
         <li><a href="#home">Home</a></li>
         <li><a href="#about">About</a></li>
         <li><a href="#education">Education</a></li>
         <li><a href="#portfolio">Portfolio</a></li>
         <li><a href="#contact">Contact</a></li>
     </ul>
 </nav>
</header>

<!-- Header Section Ends -->

<div id="menu" class="fa fa-bars"></div>

<!-- Home Section Starts -->

<section class="home" id="home">

    <h3>HI THERE !</h3>
    <h1>I'M <span>Tarun Kaushik</span></h1>
    <p>Founder & CEO of Coding Master. I'm B.Sc(C.S) Final Year Student, a Frontend Web Developer & providing quality content on web development.</p>
    <a href="#about"><button class="btn">About Me <i class="fas fa-user"></i></button></a>
</section>

<!-- Home Section Ends -->

<!-- About Section Starts -->

<section class="about" id="about">

    <h1 class="heading"><span>About</span> Me</h1>

    <div class="row">
        <div class="info">
            <h3><span>Name: </span>Tarun Kaushik</h3>
            <h3><span>Age: </span>20</h3>
            <h3><span>Post: </span>Front End Developer</h3>
            <h3><span>Language: </span>Hindi</h3>
            <a href="#">
                <button class="btn">Download CV <i class="fas fa-download"></i></button>
            </a>
        </div>

        <div class="counter">
            <div class="box">
                <span>2+</span>
                <h3>Years of Experience</h3>
            </div>
            <div class="box">
                <span>100+</span>
                <h3>Projects Completed</h3>
            </div>
            <div class="box">
                <span>210+</span>
                <h3>Happy Clients</h3>
            </div>
            <div class="box">
                <span>10+</span>
                <h3>Awards Won</h3>
            </div>

        </div>
    </div>
</section>

<!-- About Section Ends -->

<!-- Education Section Starts -->

<section class="education" id="education">
    <h1 class="heading">My <span>Education</span></h1>
    <div class="box-container">

    <div class="box">
        <i class="fas fa-graduation-cap"></i>
        <span>2017</span>
        <h3>Intermediate Passout</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati quos alias praesentium. Id autem provident laborum quae, distinctio eaque temporibus!</p>
    </div>
   
    <div class="box">
        <i class="fas fa-graduation-cap"></i>
        <span>2018</span>
        <h3>College Student</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati quos alias praesentium. Id autem provident laborum quae, distinctio eaque temporibus!</p>
    </div>

    <div class="box">
        <i class="fas fa-graduation-cap"></i>
        <span>2021</span>
        <h3>Founder & CEO of Coding Master</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati quos alias praesentium. Id autem provident laborum quae, distinctio eaque temporibus!</p>
    </div>

    <div class="box">
        <i class="fas fa-graduation-cap"></i>
        <span>2021</span>
        <h3>Founder & CEO of Coding Master</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati quos alias praesentium. Id autem provident laborum quae, distinctio eaque temporibus!</p>
    </div>

    <div class="box">
        <i class="fas fa-graduation-cap"></i>
        <span>2021</span>
        <h3>Founder & CEO of Coding Master</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati quos alias praesentium. Id autem provident laborum quae, distinctio eaque temporibus!</p>
    </div>

    <div class="box">
        <i class="fas fa-graduation-cap"></i>
        <span>2021</span>
        <h3>Founder & CEO of Coding Master</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati quos alias praesentium. Id autem provident laborum quae, distinctio eaque temporibus!</p>
    </div>

</div>
</section>

<!-- Education Section Ends -->

<!-- Portfolio Section Starts -->

<section class="portfolio" id="portfolio">
    <h1 class="heading">My <span>Portfolio</span></h1>

    <div class="box-container">
       
        <div class="box">
            <img src="images/1.jpg" alt="">
        </div>

        <div class="box">
            <img src="images/2.jpg" alt="">
        </div>

        <div class="box">
            <img src="images/3.jpg" alt="">
        </div>

        <div class="box">
            <img src="images/4.jpg" alt="">
        </div>

        <div class="box">
            <img src="images/5.jpg" alt="">
        </div>

        <div class="box">
            <img src="images/6.jpg" alt="">
        </div>
    </div>
</section>

<!-- Portfolio Section Ends -->

<!-- Contact Section Starts -->

<section class="contact" id="contact">

    <h1 class="heading"> <span>contact</span> me </h1>
    
    <div class="row">
    
        <div class="content">
    
            <h3 class="title">contact info</h3>
    
            <div class="info">
                <h3> <i class="fas fa-envelope"></i> [email protected] </h3>
                <h3> <i class="fas fa-phone"></i> +123-456-7890 </h3>
                <h3> <i class="fas fa-map-marker-alt"></i> U.P, india - 281502. </h3>
            </div>
    
        </div>
    
        <form action="">
    
            <input type="text" placeholder="name" class="box">
            <input type="email" placeholder="email" class="box">
            <input type="text" placeholder="project" class="box">
            <textarea name="" id="" cols="30" rows="10" class="box message" placeholder="message"></textarea>
            <button type="submit" class="btn"> send <i class="fas fa-paper-plane"></i> </button>
    
        </form>
        
    </div>
    </section>
    
    <!-- Contact Section Ends -->


<!-- jquery cdn link  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- custom js file link  -->
<script src="script.js"></script>

</body>
</html>

Kedua, buat file CSS dengan nama style. css dan rekatkan kode yang diberikan di file CSS Anda. Ingat, Anda harus membuat file dengan. ekstensi css

<!-- wp:code -->
<pre class="wp-block-code"><code class="">@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600&amp;display=swap');

:root {
    --color: crimson;
}
* {
    font-family: 'Nunito', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
    border: none;
    text-transform: capitalize;
    transition: all .2s linear;
}
*::selection {
    background: var(--color);
    color: #333;
}
html {
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
html::-webkit-scrollbar {
    width: 1.4rem;
}
html::-webkit-scrollbar-track {
    background: #222;
}
html::-webkit-scrollbar-thumb {
    background: var(--color);
}
body {
    background: #fff;
    overflow-x: hidden;
    padding-left: 35rem;
}
section {
    min-height: 100vh;
    padding: 1rem;
}
.btn {
    padding: .7rem 3rem;
    background: #333;
    color: #fff;
    cursor: pointer;
    margin-top: 1rem;
    font-size: 2rem;
    border-radius: 5rem;
}
.btn i {
    padding: 0 .5rem;
    font-size: 1.8rem;
}
.btn:hover {
    background: var(--color);
}
.heading {
    text-align: center;
    margin: 0 6rem;
    text-transform: uppercase;
    font-size: 4rem;
    padding: 1rem;
    border-bottom: .1rem solid #fff4;
    color: #222;
    font-weight: 600;
}
.heading span {
    color: var(--color);
    text-transform: uppercase;
    font-weight: 600;
}
/* Header Section */

header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    height: 100%;
    width: 35rem;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    text-align: center;
}
header .user img {
    height: 17rem;
    width: 17rem;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    border: .7rem solid var(--color);
}
header .user .name {
    font-size: 3.5rem;
    color: #222;
}
header .user .post {
    font-size: 2rem;
    color: #222;
}
header .navbar {
    width: 100%;
}
header .navbar ul {
    list-style: none;
    padding: 1rem 3rem;
}
header .navbar ul li a {
    display: block;
    padding: 1rem;
    margin: 1.5rem 0;
    background: #333;
    color: #fff;
    font-size: 2rem;
    border-radius: 5rem;
}
header .navbar ul li a:hover {
    background: var(--color);
}
#menu {
    position: fixed;
    top: 2rem;
    right: 2rem;
    background: #333;
    color: #fff;
    cursor: pointer;
    font-size: 2.5rem;
    padding: 1rem 1.5rem;
    z-index: 1000;
    display: none;
}

/* Home Section Starts */

.home {
    display: flex;
    justify-content: center;
    flex-flow: column;
    padding: 0 15rem;
}
.home h3 {
    font-size: 2.5rem;
    color: #222;
}
.home h1 {
    font-size: 5rem;
    color: #222;
}
.home h1 span {
    color: var(--color);
}
.home p {
    font-size: 2rem;
    color: #222;
    padding: 1rem 0;
}

/* Home Section Ends */

/* About Section Starts */

.about .row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1rem 0;
}
.about .row .info {
    flex: 1 1 48rem;
    padding: 2rem 1rem;
    padding-left: 6rem;
}
.about .row .info h3 {
    font-size: 2rem;
    color: var(--color);
    font-weight: bold;
    padding: 1rem 0;
}
.about .row .info h3 span {
    color: #222;
    padding: 0 .5rem;
}
.about .row .counter {
    flex: 1 1 48rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.about .row .counter .box {
    width: 20rem;
    background: #222;
    text-align: center;
    padding: 2rem;
    margin: 2rem;
}
.about .row .counter .box span {
    font-size: 4rem;
    color: var(--color);
}
.about .row .counter .box h3 {
    font-size: 2rem;
    color: #fff;
}

/* About Section Starts */

/* Education Section Starts */

.education .box-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1rem 0;
    padding-left: 3rem;
}
.education .box-container .box {
    width: 27rem;
    margin: 4rem 1rem;
    padding-left: 4rem;
    border-left: .2rem solid #222;
    position: relative;
}
.education .box-container .box span {
    font-size: 1.3rem;
    background: #222;
    color: #fff;
    border-radius: 5rem;
    padding: .5rem 2.5rem;
}
.education .box-container .box h3 {
    font-size: 2rem;
    color: #222;
    padding-top: 1.5rem;
}
.education .box-container .box p {
    font-size: 1.4rem;
    color: #222;
    padding: 1rem 0;
}
.education .box-container .box i {
    position: absolute;
    top: -1.5rem;
    left: -2.5rem;
    height: 5rem;
    width: 5rem;
    border-radius: 50%;
    line-height: 5rem;
    color: #fff;
    text-align: center;
    font-size: 2rem;
    background: var(--color);
}

/* Education Section Ends */

/* Portfolio Section Starts */

.portfolio .box-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 2rem 0;
}
.portfolio .box-container .box {
    height: 20rem;
    width: 26rem;
    border-radius: 1rem;
    margin: 2rem;
    overflow: hidden;
    cursor: pointer;
}
.portfolio .box-container .box img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.portfolio .box-container .box:hover img {
    transform: scale(1.2);
}

/* Portfolio Section Ends */

/* Contact Section Starts */

.contact .row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.contact .row .content {
    flex: 1 1 30rem;
    padding: 4rem;
    padding-bottom: 0;
}
.contact .row form {
    flex: 1 1 45rem;
    padding: 2rem;
    margin: 2rem;
    margin-bottom: 4rem;
}
.contact .row form .box {
    padding: 1.5rem;
    margin: 1rem 0;
    background: #3333;
    color: #222;
    text-transform: none;
    font-size: 1.7rem;
    width: 100%;
}
.contact .row form .box::placeholder {
    text-transform: capitalize;
}
.contact .row form .message {
    height: 15rem;
    resize: none;
}
.contact .row .content .title {
    text-transform: uppercase;
    color: #222;
    font-size: 3rem;
    padding-bottom: 2rem;
}
.contact .row .content .info h3 {
    display: flex;
    align-items: center;
    font-size: 2rem;
    text-transform: none;
    color: #222;
    padding: 1rem 0;
    font-weight: normal;
}
.contact .row .content .info h3 i {
    padding-right: 1rem;
    color: var(--color);
}

/* Contact Section Ends */

/* Media Queries */

 @media (max-width:1200px) {
     html {
         font-size: 55%;
     }
     .home {
         padding: 1rem 4rem;
     }
 }
 @media (max-width:991px) {
     header {
         left: -120%;
     }
     #menu {
         display: block;
     }
     header.toggle {
         left: 0%;
     }
     body {
         padding: 0;
     }
 }
 @media (max-width:768px) {
     html {
         font-size: 50%;
     }
 }
@media (max-width:400px) {
    header {
        width: 100vw;
    }
    .heading {
        margin: 0 3rem;
    }
    .about .row .counter .box {
        width: 100%;
    }
    .education .box-container .box {
        width: 100%;
    }
    .portfolio .box-container .box {
        width: 100%;
    }
    .contact .row form {
        margin: 3rem 0;
    }
}</code></pre>
<!-- /wp:code -->

Ketiga, buat file JavaScript dengan nama script. js dan rekatkan kode yang diberikan di file Javascript Anda. Anda harus membuat file dengan. ekstensi js

Bagaimana cara membuat website portofolio pribadi lengkap hanya dengan menggunakan HTML dan CSS?

Bisakah saya membuat situs web responsif hanya dengan HTML dan CSS?

Bagaimana Anda akan membuat situs web pribadi sederhana menggunakan HTML dan CSS?

Bagaimana cara membuat portofolio saya responsif?