Creating a Beautiful EGG Shape Portfolio Card Design with HTML and CSS.

0


Hello developers, This code showcases a beautifully designed portfolio card layout with a responsive grid system. The portfolio card design is simple yet elegant, featuring a circular shape with a gradient background color and a shadow effect that gives the cards a 3D-like appearance. Each card contains an image, a title, and a brief description of a project, with font sizes and colors that blend well with the overall layout. The images are centered and have a circular shape with a border and a shadow effect that enhances their visual appeal. The code uses CSS grid to create a responsive layout that adapts to different screen sizes, ensuring that the cards are always neatly arranged, with consistent spacing between them. The background color also has a gradient effect that adds a touch of creativity to the overall design. Overall, this code can serve as a good starting point for anyone looking to create a simple and elegant portfolio card layout for their website. With a little customization, it can be adapted to fit any design style or branding.

How to create a Beautiful EGG Shape Portfolio Card Design with HTML and CSS.[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> <head> <title>Portfolio Card Design</title> <link rel="stylesheet" type="text/css" href="Style.css"> </head> <body> <h1>My Portfolio</h1> <div class="portfolio-container"> <div class="portfolio-card"> <img src="https://cdn.pixabay.com/photo/2023/02/23/17/56/turtle-7809341_640.jpg"> <h2>Project 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor tellus at tellus tristique dapibus.</p> </div> <div class="portfolio-card"> <img src="https://cdn.pixabay.com/photo/2017/08/12/17/11/roe-deer-2634729__480.jpg"> <h2>Project 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor tellus at tellus tristique dapibus.</p> </div> <div class="portfolio-card"> <img src="https://cdn.pixabay.com/photo/2015/02/13/11/57/wolf-635063__480.jpg"> <h2>Project 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor tellus at tellus tristique dapibus.</p> </div> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by<a href="https://www.learningrobo.com/"> Learning Robo</a></div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension. 


body {
	font-family: Arial, sans-serif;
	background: #12c2e9;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);	
}

h1 {
	text-align: center;
}

.portfolio-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-gap: 20px;
	margin: 50px;
}

.portfolio-card {
	background-color: #030128;
	padding: 20px;
	text-align: center;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	margin:20px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 5px, rgba(0, 0, 0, 0.3) 0px 10px, rgba(0, 0, 0, 0.2) 0px 15px, rgba(0, 0, 0, 0.1) 0px 20px, rgba(0, 0, 0, 0.05) 0px 25px;
}
.portfolio-card img {
	max-width: 95%;
	height: 250px;
	width: 250px;
	border-radius:50%;
	margin-bottom: 20px;
	box-shadow: #f64f59 0px 0px 0px 3px, #c471ed 0px 0px 0px 6px, #c471ed 0px 0px 0px 9px;
}

.portfolio-card h2 {
	font-size: 24px;
	margin-bottom: 10px;
	color:aliceblue;
}

.portfolio-card p {
	font-size: 11px;
	margin-bottom: 20px;
	color:aliceblue;
	padding: 30px;
}
.egg {
	/* Modify size here: */
	--size: 50px;
  
	display: block;
	width: var(--size);
	height: calc(var(--size) * 1.44);
	background-color: #333;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  }
  .credit a {
	text-decoration: none;
	color: #fff;
	font-weight: 800;
  }
  
  .credit {
	  color: #fff;
	text-align: center;
	margin-top: 10px;
	font-family: Verdana,Geneva,Tahoma,sans-serif;
  }
We hope you would like this Beautiful EGG Shape Portfolio Card Design with HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Beautiful EGG Shape Portfolio Card Design with HTML and CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome