Responsive Portfolio Card using HTML & CSS

Responsive Portfolio Card using HTML & CSS

Hello developers, today in this blog, you will learn how to create a Responsive Portfolio Card using HTML & CSS.

A portfolio site is important for every individual that is to be taken care of throughout their work. Clients can view your work while also letting you expand on your skills. The profile card contains the profile photo, the name, content about the person, and some social media icons to contact the person.

In this blog (Responsive Portfolio Card) on the webpage, there is a card at the center of the webpage with a profile photo at the top and the name of the person. There is some content and some social media icons like Instagram, Telgram, Mail, Twitter and Facebook which are used to contact the person. To make the page responsive the CSS media query property has been used.

On PC, the photo or profile icon and name are aligned at the left side of the card and the about me content is aligned at the right side of the card and the social media icons are at the bottom of the card. But on the smaller screen, they are aligned vertically or one by one.

The source code of this Responsive Portfolio Card using HTML & CSS is given below if you want the source code of this program, you can copy it. You can use this code of Responsive Portfolio Card with your creativity and, can take this project to the next level.

Responsive Portfolio Card [Source Code]

To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html, and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Portfolio card || learningrobo</title> </head> <body> <div class="viewport">Please increase the size of viewport.</div> <div class="container"> <div class="portfolio-card"> <div class="portfolio-card-1"> <div class="portfolio-card-1-col"> <img src="https://cdn.pixabay.com/photo/2018/11/13/21/43/instagram-3814049__480.png" alt=""> <h1>LearningRobo</h1> </div> <div class="portfolio-card-1-col-2"> <h2>About me</h2> <p>I am learningrobo Doe.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id magna aliquet, efficitur elit non, malesuada velit. </p> </div> </div> <div class="portfolio-card-2"> <span id="contanct-me">contanct me on</span> <div class="portfolio-card-2-icons"> <i class="fa fa-instagram"></i> <i class="fa fa-telegram"></i> <i class="fa fa-envelope"></i> <i class="fa fa-linkedin"></i> <i class="fa fa-twitter"></i> </div> </div> </div> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </body> </html>
CSS provides style to an HTML page. To make the page attractive and responsive, create a CSS file with the name style.css and, remember that you have to make a file with a .css extension.


@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  font-family: Montserrat;
}
.container {
  width: 100%;
  height: 100%;
  background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
  background-size: 200%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: cont 10000ms ease-in-out infinite alternate;
}
@keyframes cont {
  from {
    background-position: top left;
  }
  to {
    background-position: bottom right;
  }
}
.portfolio-card {
  width: 70%;
  max-height: 50%;
  background-color: #02e46a;
background-image: linear-gradient(45deg, #02e46a 0%, #e2db1a 100%);

  border-radius: 0.5em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 1em;
  border: 2px solid #02e46a;
  color: #000;
}
.portfolio-card-1 {
  display: flex;
  align-items: center;
  padding-bottom: 1em;
  border-bottom: 1px solid #fff3;
}
.portfolio-card-1-col {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.portfolio-card-1-col img {
  width: 6em;
  height: 6em;
  border-radius: 50%;
  background: #f1f1f1;
  border: 6px solid #02e46a;
  box-shadow: 0.125em 0.125em 0.5em rgba(0, 0, 0, 0.45);
}
.portfolio-card-1-col-2 {
  width: 50%;
}
.portfolio-card-1-col-2 h2 {
  font-size: medium;
}
.portfolio-card-1-col-2 p {
  text-align: justify;
}
.portfolio-card-2 {
  padding-top: 1em;
  display: flex;
  align-items: center;
}
.portfolio-card-2 span {
  text-transform: uppercase;
  width: 50%;
  text-align: center;
}
.portfolio-card-2-icons {
  display: flex;
  width: 50%;
  justify-content: space-around;
  /*   grid-template-columns: repeat(5, 1fr); */
  /*   grid-gap: 1em; */
  /*   place-items: center; */
}
.portfolio-card-2-icons i {
  height: 2em;
  width: 2em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #f1f1f1;
  color: #f1f1f1;
  box-shadow: 0.025em 0.025em 0.15em rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.portfolio-card-2-icons [class*="fa-instagram"] {
  background: linear-gradient(45deg, #fcb045, #fd1d1d, #833ab4);
}
.portfolio-card-2-icons [class*="fa-telegram"] {
  background: linear-gradient(215deg, #1c92d2, #f2fcfe);
}
.portfolio-card-2-icons [class*="fa-envelope"] {
  background: linear-gradient(to right, #11998e, #38ef7d);
}
.portfolio-card-2-icons [class*="fa-linkedin"] {
  background: linear-gradient(to right, #457fca, #5691c8);
}
.portfolio-card-2-icons [class*="fa-twitter"] {
  background: linear-gradient(to right, #50c9c3, #96deda);
}
.portfolio-contact-part {
  display: none;
}
.viewport {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: larger;
}
/*======Media  Queries======*/
@media screen and (max-width: 768px) {
  .portfolio-card-1 {
    flex-direction: column;
  }
  .portfolio-card-1-col,
  .portfolio-card-1-col-2 {
    width: 100% !important;
  }
  .portfolio-card {
    padding: 0.25em;
    max-height: 90%;
  }
  .portfolio-card-1-col-2 h2 {
    text-align: center;
  }
  .portfolio-card-2 {
    flex-direction: column;
  }
  .portfolio-card-2-icons,
  .portfolio-card-2 span {
    width: 70% !important;
    margin: 0.5em 0;
  }
}
@media screen and (max-width: 360px) {
  body :not(.viewport) {
    display: none;
  }
  .viewport {
    display: block !important;
  }
}
.credit a{
    text-decoration: none;
    color: #000;
    font-weight: 900;
  }

  .credit {
      margin-top: 20px;
      text-align: center;
  }
We hope you would like this Responsive Portfolio Card using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating this Responsive Portfolio Card using HTML & CSS then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome