Portfolio landing page

Create personal portfolio landing page in html CSS and for beginner. this is animated landing page the animation should appear on reloading the page.

Following are the main steps of making this landing page 1 showing footage of landing page 2 Demo to landing page 3 overview to code 4 checking the responsiveness of landing page however this not fully responsive landing page if you would like to make it fully responsive then say in comment I would be make responsive for you.

HTML code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- ================ Font awesome CDN ================ -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
    <title>Portfolio landing page</title>
    <!-- =================== Stylesheet ================= -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="hero">
        <nav>
            <a class="anim" href="index.html"><img src="images/logo.png" alt="logo" width="50"></a>
            <ul class="anim">
                <li><a href="#" class="active">Home</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="pricing.html">Pricing</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">portfolio</a></li>
            </ul>
            <div class="anim">
                <a href="#" class="btn">Hire Now</a>
                <a href="#" class="btn2">SignUp</a>
            </div>
        </nav>
        <div class="content">
            <div class="description">
                <h1 class="anim">Hi,<br> I'm Elena Angela </h1>
                <h3 class="anim">UI Designer / Front End Developer</h3>
                <p class="anim">A creative and professional front end developer. designing and developing user freindly
                    on a creative
                    professional visully, sopisticated and technologically proficient.
                    developed responsive and user friendly web pages.<br>
                    Creating animation effects AI motion graphics and video editior.</p>
            </div>
            <div class="data">
                <div class="cv">
                    <a href="#" class="btn anim">Download</a>
                </div>
                <div class="btn2 anim">
                    <i class="fa-brands fa-whatsapp"></i>
                    <i class="fa-solid fa-xmark"></i>
                    <i class="fa-brands fa-facebook"></i>
                    <i class="fa-brands fa-instagram"></i>
                    <i class="fa-brands fa-tiktok"></i>
                </div>
            </div>
            <div class="pic">
                <img src="images/pic.png" class="feature-img anim">
            </div>
        </div>
    </div>
    </div>
</body>
</html>


CSS Code

*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}

body {
    font-family: 'poppins', sans-serif;
    color: #fff;
}

.hero{
    width: 100%;
    min-width: 100vh;
    height: 100vh;
    background-image: url(images/bg1.jpg);
    background-position: center;
    background-size: cover;
    padding: 5px 5%;
    overflow: hidden;
}
nav{
    padding: 1px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav ul {
    box-shadow: 0 0 10px 0;
    background-image: linear-gradient(45deg, #203592, #46ecd9);
    padding: 14px;
    border-radius: 20px;
    animation-delay: 0.2s;
    display: flex;
    flex-wrap: wrap;
}

nav ul li{
    display: inline-block;
    list-style: none;
    margin: 0px 15px;
}
nav ul li a{
    text-decoration: none;
    font-weight: 400;
    position: relative;
    padding: 2px 0;
    color: #000;
    font-weight: bold;
}
nav ul li a:hover {
    color: rgb(0, 0, 0);
}

nav ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    height: 3px;
    background-color: rgb(255, 255, 255);
    transition: .3s;
    bottom: 0;
}

nav ul li a:hover:after {
    width: 100%;
}

.active {
    color: rgb(255, 255, 255);
    padding: 2px;
}
.login-btn{
    text-decoration: none;
    margin-right: 15px;
    font-weight: 400;
}
.btn{
    display: inline-block;
    text-decoration: none;
    padding: 12px 20px;
    margin-right: 6px;
    animation-delay: .5s;
    color: #000;
    font-weight: bold;
    background-image: linear-gradient(45deg, #2743c0, #46ecd9);
    font-size: 13px;
    border-radius: 15px 0 15px 0;
    box-shadow: 0 0 10px 0 #7785f1;
    transition: 0.8s;
}
.btn2{
    display: inline-block;
    text-decoration: none;
    padding: 12px 20px;
    background-image: linear-gradient(45deg, #f8f8f8, #ffffff);
    margin-right: 6px;
    animation-delay: .5s;
    color: #000;
    font-weight: bold;
    font-size: 13px;
    border-radius: 15px 0 15px 0;
    box-shadow: 0 0 10px 0 #7785f1;
    transition: 0.8s;
}
.content{
    margin-top: 10%;
    max-width: 600px;
}
.content h1{
    font-size: 50px;
    animation-delay: 0.8s;
    color: rgb(106, 173, 185);
}
.content h3{
    font-size: 20px;
    animation-delay: 1s;
}
.content p{
    margin: 10px 0 30px;
    animation-delay: 1.3s;
}
.content .btn{
    padding: 12px 50px;
    font-size: 16px;
    cursor: pointer;
    animation-delay: 1.5s;
    box-shadow: 0 0 10px 0 #7785f1;
}
.content .btn2{
    padding: 12px 50px;
    font-size: 16px;
    cursor: pointer;
    animation-delay: 1.5s;
    box-shadow: 0 0 10px 0 #7785f1;
}
.content .data {
    display: flex;
    flex-wrap: wrap;
}
.btn:hover{
    box-shadow: 0 0 30px 0;
    background-image: linear-gradient(45deg, #f8f8f8, #ffffff);
    border-radius: 20px;
    transition: 1.3s;
}
.btn2:hover{
    box-shadow: 0 0 30px 0;
    background-image: linear-gradient(45deg, #2743c0, #46ecd9);
    border-radius: 20px;
    transition: 1.3s;
}
.feature-img{
    position: absolute;
    bottom: 0;
    right: 1%;
}
.feature-img-anim{
    animation-delay: 1.9s;
}

.btn i {
    padding: 0 2px;
}
.anim{
    opacity: 0;
    transform: translateY(100px);
    animation: moveup 0.9s linear forwards;
}

/* =================== Animation frame =============== */
@keyframes moveup{
    100%{
        opacity: 1;
        transform: translateY(5px);
    }
}
@media (min-width: 600px){
    .hero {
        flex-direction: row;
    }
    .content {
        border-bottom: none;
        border-right: 1px solid wheat;
        padding: 25px 50px;
    }
    .content:last-child{
        border-right: none;
    }
}



Watch video for more details



Comments

Post a Comment

Master Template

Login and Signup form/page

Image
Create an amazing over sliding login and signup page in html CSS for beginner and advance HTML CSS Login and Signup page / HTML CSS tutorial for beginner After completing watching this video you will be able to make a login and signup page in HTML CSS. To create Login and Signup page / form in HTML CSS just follow the following steps in this video I Demo to Login and sign up page II check the over sliding of login and sign up page III open VS code to build login and sign up page in HTML CSS IV Create index.html and style.css file in VS code V open index.html file to create login and signup page VI Open style.css file to design and style the Login and signup page VII check the output at the end of this video VIII So we have create our Login and Signup page in HTML CSS only Following are the link for source code Download Source Code Previous video links 1 Responsive web design template / html responsive web design https://youtube.com/shorts/rvq2lCy8Hrk 2 How to create re
Read more

Make Login and Signup form in bootstrap

Image
Create and make login and signup redirecting form in bootstrap. two button were place in the front of of form one button is login and one button is signup form with user profile. login and signup form were redirectable to each other by creating new account and login here when the user click on login here the form will call login form when the user click on create account the form will be signup form. Tutorials Of Login and signup form Download Source code
Read more

Multi Steps form

Image
Creating multi step form in html CSS and JavaScript. this multi step form is include five basic steps at the bottom of form form no represented by number which is clearly mention in details whenever a user click on next button the form will be move to one step forward. Structure of Multi Step form 1 five step form which include personal data, address, contact password 2 next and previous button were added for moving the form 3 save button are added at the center between next and previous button to save the current data of the user 4. form number were showing at the bottom of page Watch video for more details HTML Structure of Multi steps form < form id = "regForm" action = "/" >   < div class = "boundary" >     < h1 > Multi Steps Form </ h1 >   <!-- One "tab" for each step in the form: -->   < div class = "tab" > < h2 > Name </ h2 >     < p >< input placeholder = &qu
Read more