Building a beautiful landing page with chart GPT
Debasish Lenka
We have seen multiple use cases of chart GPT and people are using it in a lot of creative ways, today let's see if we can make a beautiful landing page. I'm trying to test the CSS code quality of chart GPT.
Here I'm Giving the first prompt :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Developer Portfolio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700">
<style>
/* Add some styles for the page */
body {
font-family: 'Open Sans', sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
.container {
max-width: 960px;
margin: 50px auto;
text-align: center;
}
h1 {
font-size: 42px;
margin-bottom: 20px;
}
p {
font-size: 18px;
margin-bottom: 40px;
line-height: 1.6;
}
.btn {
background-color: #3498db;
color: #ffffff;
padding: 12px 30px;
border-radius: 4px;
text-decoration: none;
font-size: 18px;
margin-top: 20px;
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<h1>Developer Portfolio</h1>
<p>Welcome to my portfolio website, where you can find my latest projects and learn more about my skills and experience as a developer.</p>
<a href="#projects" class="btn">View Projects</a>
</div>
</body>
</html>
Well, I'm surprised that it generated the basic CSS by itself. 👌Now let's ask it to add more CSS.
Meanwhile let's create a style sheet and link it to our HTML file, for better understanding and clean code.
Prompt :
Response by Chart GPT :
body {
font-family: 'Open Sans', sans-serif;
background: linear-gradient(to right, #000428, #004e92);
background-size: 400% 400%;
animation: gradient 10s ease infinite;
color: #ffffff;
margin: 0;
padding: 0;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.container {
max-width: 960px;
margin: 50px auto;
text-align: center;
}
h1 {
font-size: 42px;
margin-bottom: 20px;
}
p {
font-size: 18px;
margin-bottom: 40px;
line-height: 1.6;
}
.btn {
background-color: #3498db;
color: #ffffff;
padding: 12px 30px;
border-radius: 4px;
text-decoration: none;
font-size: 18px;
margin-top: 20px;
display: inline-block;
box-shadow: 1px 1px #333;
transition: all 0.2s ease-in-out;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 2px 2px #333;
}
I want to add some more content to the page so I asked it to add photos. so it added it as project with in a DIV
Prompt :
Response by Chart GPT :
<div class="project">
<img src="https://source.unsplash.com/random/400x400" alt="Project Image">
<h3>Project Name</h3>
<p>Description of the project and what it does.</p>
<a href="#">View Project</a>
</div>
So it added some styles to it also,
.project img {
width: 20%;
height: auto;
display: block;
margin: 0 auto;
}
.project h3 {
font-size: 24px;
margin-top: 20px;
margin-bottom: 10px;
text-align: center;
}
.project p {
font-size: 14px;
margin-bottom: 20px;
line-height: 1.4;
text-align: center;
}
.project a {
display: block;
margin: 20px auto 0;
background-color: #3498db;
color: #ffffff;
padding: 10px 20px;
border-radius: 4px;
text-decoration: none;
font-size: 14px;
box-shadow: 1px 1px #333;
transition: all 0.2s ease-in-out;
text-align: center;
}
.project a:hover {
transform: translateY(-3px);
box-shadow: 2px 2px #333;
}
Here is how our website looks now.
let's add some more divs to it ,
<div class="all-projects">
<div class="project">
<img src="https://source.unsplash.com/random/400x400" alt="Project Image">
<h3>Project Name</h3>
<p>Description of the project and what it does.</p>
<a href="#">View Project</a>
</div>
<div class="project">
<img src="https://source.unsplash.com/random/400x400" alt="Project Image">
<h3>Project Name</h3>
<p>Description of the project and what it does.</p>
<a href="#">View Project</a>
</div>
<div class="project">
<img src="https://source.unsplash.com/random/400x400" alt="Project Image">
<h3>Project Name</h3>
<p>Description of the project and what it does.</p>
<a href="#">View Project</a>
</div>
</div>
Then I asked Chat GPT to make it more beautiful.
Prompt:
Response from chat GPT:
.all-projects{
display:flex
}
.project {
width: calc(33.33% - 40px);
background-color: rgba(255, 255, 255, 0.1);
padding: 40px;
box-sizing: border-box;
margin: 40px 20px;
text-align: center;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
border-radius: 10px;
transition: all 0.2s ease-in-out;
}
.project:hover {
transform: translateY(-10px);
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.3);
}
.project h3 {
font-size: 24px;
margin-top: 20px;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
color: #ffffff;
}
.project p {
font-size: 14px;
margin-bottom: 20px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.7);
}
.project a {
display: block;
margin: 20px auto 0;
background-color: #3498db;
color: #ffffff;
padding: 10px 20px;
border-radius: 4px;
text-decoration: none;
font-size: 14px;
box-shadow: 1px 1px #333;
transition: all 0.2s ease-in-out;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
}
.project a:hover {
transform: translateY(-3px);
box-shadow: 2px 2px #333;
}
Now our Website Looks more beautiful.
Try your version of the chat GPT website and let me know how it goes.
If you have any issues or questions about it, feel free to contact me. Thank you 🌟 for reading! like, share and subscribe to my newsletter for more!
Subscribe to my newsletter
Read articles from Debasish Lenka directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Debasish Lenka
Debasish Lenka
Hey 👋 My name is Debasish, I'm a System Engineer and a passionate Web Developer who loves to experiment with new technologies and build projects. I like to share and showcase my tips and knowledge on this blog. Since you are here feel free to browse through some of my posts, I'm sure you will find something useful and interesting. Hope you are feeling excited!