Creative Portfolio Landing Page Design in HTML and CSS

Hello friends, Today in this blog I will show you how to create a Responsive portfolio landing page with awesome UI just using HTML and CSS. Earlier, you learned to Create a scroll indicator using Javascript.

The landing page is a single-page website containing important details of the company, organization, or personal portfolio. Today I’m going to create a landing page for a personal portfolio.

Things Included in portfolio Landing Pages

Name
Your Image
Address
Social Media Profile
Phone Number
Email Address
Your profession
And many more

3 Tips to make portfolio landing page better

Don’t add unnecessary navigations.
Add a short and sweet description that describes your profession/work.
Include at least one photo of yours.

After going through this blog, you can easily create a landing page for your portfolio with awesome UI. As you can see in the above image, the background is divided into two parts (i.e. black & orange). On the black background side, there is a name, some description & one message button and the image lies half to the black side and a half to the orange side. At the top of the page, there is a nav bar containing a logo and some links. To create the background I have used a linear gradient as shown below.

background: -webkit-gradient(linear, left top, right top,

color-stop(65%, #202020), color-stop(60%, #e36303));

background: linear-gradient(90deg, #202020 65%, #e36303 60%);

If you’re feeling difficult to understand what I am saying. You can watch a video preview of this program (Portfolio Landing Page in HTML and CSS).

Video Preview of Portfolio Landing Page

All this landing page design is based on CSS only. If you’re a beginner you can also create this type of landing page. If you like this program (Portfolio Landing Page in HTML and CSS) and want to get source code. You can easily get the source code of this program. To get the source codes you just need to scroll down.

Portfolio Landing Page in HTML and CSS [Source Codes]

To create this portfolio landing page. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following code into your file. First, create an HTML file with the name index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with a .html extension.

HTML

    <!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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
    <link rel="stylesheet" href="style.css">
    <title>Landing Page</title>
</head>

<body>
    <div class="container">
        <nav>
            <div class="logo">
                <img src="logo.png" alt="">
            </div>
            <input type="checkbox" id="check">
            <label for="check" class="hamburger">
                <div class="line line1"></div>
                <div class="line line2"></div>
                <div class="line line3"></div>
            </label>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
                <li><a href="">My Works</a></li>
                <li><a href="">Latest Projects</a></li>
            </ul>
        </nav>
        <div class="hero">
            <div class="description">
                <h3>John Doe.</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, culpa!</p>
                <a href="mailto:dummymail@gmail.com" class="message">Message Me</a>
            </div>
            <div class="image">
                <img src="https://images.pexels.com/photos/2010877/pexels-photo-2010877.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
                    alt="">
            </div>
        </div>
    </div>
</body>

</html>

Second, create a CSS file with the name style.css and paste the given code into your CSS file. Remember, you’ve to create a file with a .css extension.

CSS

    * {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: sans-serif;
}

.container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: -webkit-gradient(linear, left top, right top, 
              color-stop(65%, #202020), color-stop(60%, #e36303));
  background: linear-gradient(90deg, #202020 65%, #e36303 60%);
}

.container nav {
  height: 80px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.container nav .logo {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-left: 100px;
}

.container nav .logo img {
  width: 30px;
  -webkit-transform: rotate(340deg);
          transform: rotate(340deg);
}

.container nav #check {
  display: none;
}

.container nav #check:checked ~ ul {
  left: 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.container nav .hamburger {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  margin-right: 60px;
  display: none;
}

.container nav .hamburger .line {
  width: 40px;
  height: 5px;
  background-color: #fff;
}

.container nav .hamburger .line2 {
  margin-top: 3px;
  width: 30px;
}

.container nav .hamburger .line3 {
  margin-top: 3px;
  width: 20px;
}

.container nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.container nav ul li {
  list-style: none;
  margin-left: 20px;
}

.container nav ul li a {
  text-decoration: none;
  color: #fff;
}

.container .hero {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.container .hero .description {
  width: 50%;
  padding: 100px 0px 0px 100px;
}

.container .hero .description h3 {
  color: #fff;
  font-size: 50px;
  font-family: cursive;
  letter-spacing: 5px;
}

.container .hero .description p {
  color: #999;
  width: 40%;
  font-family: monospace;
  margin: 5px 0px 40px 0px;
}

.container .hero .description .message {
  text-decoration: none;
  background-color: #e36303;
  padding: 10px 15px;
  color: #fff;
}

.container .hero .description .message:hover {
  background-color: #bd5505;
}

.container .hero .image img {
  width: 400px;
  height: 400px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}

@media (max-width: 890px) {
  .container {
    overflow: auto;
    background: -webkit-gradient(linear, left top, left bottom,
                color-stop(80%, #202020), color-stop(80%, #e36303));
    background: linear-gradient(180deg, #202020 80%, #e36303 80%);
  }
  .container nav .hamburger {
    display: block;
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
  }
  .container nav ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: fixed;
    top: 80px;
    padding-top: 20px;
    background-color: #363636;
    padding: 20px 20px 0px 0px;
    height: 100vh;
    left: -100%;
  }
  .container nav ul li {
    margin-bottom: 15px;
  }
  .container .hero {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .container .hero .description {
    width: 100%;
    padding: 10px 0px 10px 10px;
  }
  .container .hero .image {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 30px;
  }
  .container .hero .image img {
    width: 400px;
    height: 400px;
  }
}

@media (max-width: 890px) and (min-width: 600px) {
  .container .hero .description {
    padding-left: 100px;
  }
}

@media (max-width: 600px) {
  .container {
    background: -webkit-gradient(linear, left top, left bottom,
                color-stop(75%, #202020), color-stop(75%, #e36303));
    background: linear-gradient(180deg, #202020 75%, #e36303 75%);
  }
  .container nav .logo {
    margin-left: 30px;
  }
  .container .hero .image img {
    width: 200px;
    height: 200px;
  }
}

That’s all, now you’ve successfully created your own portfolio landing page using HTML & CSS. If your code does not work or you’ve faced any errors/problems then please comment down your queries. If you feel this article had helped you, please share it with your friends. If you have any suggestions for me please mention them in the comment below.

Things Included in portfolio Landing Pages

3 Tips to make portfolio landing page better

You Might Also Like

Video Preview of Portfolio Landing Page

Portfolio Landing Page in HTML and CSS [Source Codes]

HTML

CSS

Thank You :)

Post a Comment

Post a Comment

About Us

Contact Form