Skip to main content

How to create a Personal Portfolio website [source code]

 Hey guys how are you all today in this post I am going to give you the source code of my portfolio website’s part 1st video so let’s begin with this post:-



Source code of Index.html file:-

<DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Gautam Sharma</title>

<link rel="stylesheet" href="../CSS-Files/style.css">

<link rel="stylesheet" href="../CSS-Files/utils.css">

</head>

<body>

<header>

<nav>

<li><a href="./index.html">Home</a></li>

<li><a href="./Contact.html">Contact</a></li>

<li><a href="./Haier.html">Haier</a></li>

<li><a href="./About.html">About</a></li>

<li><a href="https://code-and-man.blogspot.com">Blog</a></li>

</nav>

<section class="headersec bg-lg">

<div class="left">

<img src="../Images/Screenshot_2022-01-08_174024-removebg-preview.png" alt="MyImg">

</div>

<div class="right">

<h1>I'm Gautam Sharma</h1>

<p>Programmer || Blogger || Web Developer</p>

<div class="buttons">

<button class="btn">Haier Me</button><button class="btn">Contact Me</button>

</div>

</div>

</section>

</header>

<script src="../index.js"></script>

</body>

</html>

Source code of style.css File:

/* CSS Reset*/
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
li{
    list-style: none;
}
header{
    height: 100vh;
}
a{text-decoration: none;}
/* Pseudo ELEments */
::placeholder{
    font-weight: bold;
    font-family: cursive;
    color:black;
}
/* Styling of the navbar */
nav{
    display: flex;
    justify-content: space-around;
    background-color: blue;
    color:white;
    height: 100%;
    align-items: center;
}
nav a{
    color:white;
}
nav{
    height:10vh;
}
/* Stying of the header section */
.headersec{
    height: 90vh;
    width: 100vw;
    display: flex;
    align-items:center;
    justify-content:center;
    float:left;
}

.left img{
    width: 77vw;
    height: 89vh;
}
.right h1{
    color:white;
}
.right p{
    font-size: smaller;
    color:aqua;
}
.buttons{
    display: flex;
    margin-top:10px;
    justify-content: space-around;
}
.buttons button:hover{
    background-color: white;
    border-color: black;
    color:blue;
}
/* _________________________________________________________________________________*/
/* **************************************Styling of the About Us ********************/
.about h1{
    text-align: center;
    color:white;
    text-transform: capitalize;
    border-bottom: 3px solid purple;
    border-top: 3px solid purple;
    background-color: purple;
}
.about-div{
    margin-top: 2vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about{
    height:90vh;
}
.about_left h2, .about_left p{
    font-weight: 600;
    text-align: center;
    font-family: cursive;
}
.about_left h2{
    background:purple;
    border:3px solid;
    color:white;
    border-radius: 10px;
}
/* _________________________________________________________________________________*/
/* ************************************** Styling of the Haier Me Section ***********/
.haier{
    height:90vh;
    width:100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.haier div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: rgb(56, 56, 252);
    width:100%;
    height:20%;
    color:white;
}
.haier button:hover{
    background: blue;
    font-family: cursive;
    font-weight: 300;
    border:3px solid black;
}
/* Styling of the Contact Us Page */
.contact{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    height:90vh;
    width:100vw;
}
.contact h1{
    text-align:center;
    background-color: brown;
    color:white;
}
.contact form{
    display: flex;
    align-items: center;
    justify-content: center;
    height:75vh;
    flex-direction: column;
}
.contact .btn:hover{
    color:black;
    border-color:black;
}

Source code of utils.css file:

.btn{
    padding:3px;
    font-family:cursive;
    background-color: transparent;
    color:white;
    border:3px solid white;
    border-radius: 3px;
    transition:all 0.6s ease-in;
}
.img{
    width:70vh;
    height:70vh;
}
.img-circle{
    border-radius: 50%;
    border:3px solid black;
}
.bg-lg{
    background-image: linear-gradient(65deg, aqua 65%, blue 45%);
}
.input{
    background:transparent;
    border:none;
    outline:none;
    border-bottom:3px solid purple;
    margin: 1vh 0;
}
.b-purple{
    border:3px solid purple;
}

Source code of contact.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us || Gautam Sharma</title>
    <link rel="stylesheet" href="../CSS-Files/style.css">
    <link rel="stylesheet" href="../CSS-Files/utils.css">
</head>
<body>
    <nav>
        <li><a href="./index.html">Home</a></li>
        <li><a href="./Contact.html">Contact</a></li>
        <li><a href="./Haier.html">Haier</a></li>
        <li><a href="./About.html">About</a></li>
        <li><a href="https://code-and-man.blogspot.com">Blog</a></li>
    </nav>
    <section class="contact bg-lg">
        <h1>Contact Me</h1>
        <form>
            <input type="text" class="input" placeholder="Enter Your Name">
            <input type="number" class="input" placeholder="Enter Your Phone Number">
            <input type="email" class="input" placeholder="Enter Your Email">
            <textarea cols="30" rows="10" placeholder="Message" class="input b-purple" ></textarea>
            <input type="submit" value="Send" class="btn">
        </form>
    </section>
</body>
</html>

Source code of Haier.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Haier Me || Gautam Sharma</title>
    <link rel="stylesheet" href="../CSS-Files/style.css">
    <link rel="stylesheet" href="../CSS-Files/utils.css">
</head>
<body>
    <nav>
        <li><a href="./index.html">Home</a></li>
        <li><a href="./Contact.html">Contact</a></li>
        <li><a href="./Haier.html">Haier</a></li>
        <li><a href="./About.html">About</a></li>
        <li><a href="https://code-and-man.blogspot.com">Blog</a></li>
    </nav>
    <section class="haier bg-lg">
        <img src="../Images/Screenshot_2022-01-08_174024-removebg-preview.png" alt="My Image" class="img">
        <div>
        <h2>Call Me Now</h2>
        <p>8328323233</p>
        <a href="callto:8322833233"><button class="btn">Call Now</button></a>
    </div>
    <div>
        <h2>Mail Me Now</h2>
        <p>codandman@gmail.com</p>
        <a href="mailto:codeandman@gmail.com"><button class="btn">Call Now</button></a>
    </div>
    </section>
</body>
</html>

Source code of About.html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us || Gautam Sharma</title>
    <link rel="stylesheet" href="../CSS-Files/style.css">
    <link rel="stylesheet" href="../CSS-Files/utils.css">
</head>

<body>
    <nav>
        <li><a href="./index.html">Home</a></li>
        <li><a href="./Contact.html">Contact</a></li>
        <li><a href="./Haier.html">Haier</a></li>
        <li><a href="./About.html">About</a></li>
        <li><a href="https://code-and-man.blogspot.com">Blog</a></li>
    </nav>
<section class="about bg-lg">
    <h1>About Us</h1>
    <div class="about-div">
        <div class="about_left">
            <h2>Who am I?</h2>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam autem quisquam asperiores aut ex odio debitis ducimus id impedit fugit! Dolorem iste, quas illo iusto facilis ipsum vero tenetur nulla minima maiores, laborum unde.</p>
        </div>
        <div class="about_right">
            <img src="../Images/Yellow, Blue and Pink Fitness Collection YouTube Thumbnail (1).png" class="img img-circle" alt="">
        </div>
    </div>
</section>
</body>

</html>

Paste this in your vs code and see magic happens 🔥🔥🔥

I hope that you got what I called the "Magic".

I hope that you liked this post

Thank You

Labels:

Comments

Post a Comment

Popular posts from this blog

The Professional HTML Cheatsheet For beginners in 2024 for free

The Professional HTML Cheatsheet For beginners in 2024 for free Hello guys,  You will be glad to know that I am going to start a cheatsheet series for you all. In this series I am going to give you cheat sheets of all the programming languages. If you want to get all of these cheat sheets for free then you can follow this blog and visit my youtube channel if you like the video content. This is the link to my youtube channel :- https://www.youtube.com/channel/UCmbrOCauavTcwIJeXYo4pjQ This is the link to my instagram :- https://instagram.com/gautam9465580 Father of all the links (Link to all of my social media platforms) :- https://code-and-man.blogspot.com/p/my-link-tree.html Now got all the information which I want to give you before the post so now let’s get started with the post:- In today’s post I am going to give you the first cheatsheet which is of HTML so let’s begin:- Boilerplate of HTML The Boilerplate code is the common code which is used in almost all of the web pages c...
Post a Comment
Continue Reading

Arrays and conversion in Javascript || javascript complete course || #7 (sourcecode)

hey guys how are you all today in this post I am going to give you the source code of my video called arrays and  conversion in JavaScript so let's begin:- // ARRAYS in javascript console . log (" This is arrays in js ") var arr1 = [ 32 , 34 , 23 , 23 , 234 ," this ", {     name:" Gautam ",     class : " 8th ",     rollno: 6 } ] console . log ( arr1 ) console . log ( arr1 [ 5 ]) console . log ( arr1 .length) console . log ( arr1 . concat (' main ')); console . log ( arr1 ); // // ---------------------------------------------------- // CONVERSION IN JAVASCRIPT // Converting in to strings var num1 = 45 ; console . log ( num1 ); var str1 = String ( num1 ); console . log ( str1 ); console . log ( typeof str1 ); console . log ( typeof num1 ); var number1 = 33453434 ; console . log ( number1 , typeof number1 ); var string1 = number1 . toString (); console . log ( string1 , typeof string1 ); // ----------------------------...
Post a Comment
Continue Reading

types of operators in javascript || javascript course || codeandman (sourcecode)

hey guys how are you all today in this post I am going to give you the source code of my video called types of operators in javascript. so let's begin : here's the complete source code and the video:- // ------------------------------------------------------------------------------------ // COMPARISON OPERATORS IN JAVASCRIPT console . log (" COMPARISON OPERATORS IN JAVASCRIPT ") console . log ( 32 == 32 ) // checking if 32 is equal to 32 console . log ( 32 != 32 ) // checking if 32 is not equal to 32 console . log ( 32 >= 31 ) // checking if 32 is greater or equal to 31 console . log ( 32 < 33 ) console . log ( 32 > 30 ) console . log ( 32 <= 09 ) // ASSIGNMENT OPERATORS console . log (" --------------------------------------- ") console . log (" Assignment operators in javascript ") var d = 34 ; var e = 3 ; var a = 10 ; console . log ( d ) console . log ( d += 1 ) console . log ( d -= 3 ) console . log ( e *= 2 ) console . log...
Post a Comment
Continue Reading