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

Comments

Post a Comment

Popular posts from this blog

Step by step guide to coding a game in Python

-
  How to Code a Simple Game in Python Python is a powerful and versatile programming language that can be used for a wide range of applications, including game development. In this tutorial, we will be creating a simple game using the Pygame library in Python. Pygame is a set of Python modules designed for writing video games. It provides functionality for creating 2D graphics, handling events, and playing sounds and music. By the end of this tutorial, you will have a basic understanding of how to create a game using Pygame and Python. Setting up the Development Environment Before we can start coding our game, we must set up our development environment. To do this, we will need to install Python and the Pygame library. If you already have Python installed on your machine, you can install Pygame by running the following command in your terminal: pip install pygame If you don't have Python installed, you can download the latest version from the official Python website. Once you have ...
Continue Reading

How to write youtube channel description

-
Image
Hey guys how are you all today in this post I am going to tell you that How to write youtube channel description . So if you want to know that how to write youtube channel description  then it is very easy there are simple tips for writing youtube channel description so now without any delay let's begin with this post:- watch the complete video here:-  https://youtu.be/CmZmozRmSFk   so guys if you want to write your channel description then you have to firstly learn that from where you have to edit your YouTube channel description. Firstly you have to open the YouTube Studio  website from there  you have to move to the customization tab. Now you have to go to the basic info option and from here youtube can edit your youtube channel description easily. How to write youtube channel description (Tips) In the first paragraph write a text which welcomes the viewer like the first paragraph of my post. In the second one write about your channel what you cover in that y...
Continue Reading