Using ChatGPT for creating a website and adding CSS…
RK: can you create a website in html having home page, contact us page, about us page
AI: Sure! Here is a simple HTML code for a website with a home page, a contact us page, and an about us page:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>Welcome to my website!</h1>
<p>This is the home page.</p>
</section>
<section id="about">
<h1>About Us</h1>
<p>Learn more about us and what we do.</p>
</section>
<section id="contact">
<h1>Contact Us</h1>
<p>Get in touch with us.</p>
</section>
</main>
<footer>
<p>Copyright © 2023 My Website</p>
</footer>
</body>
</html>
This is just a simple example, you can further style and customize it according to your needs and preferences.
RK: add some css to this
AI: Sure! Here’s an example of how you could add some basic CSS styles to the previous HTML code:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
display: flex;
justify-content: center;
padding: 1em 0;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
nav li {
margin: 0 1em;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 1em;
}
section {
background-color: #f2f2f2;
border: 1px solid #333;
box-sizing: border-box;
padding: 1em;
width: 30%;
}
footer {
background-color: #333;
color: #fff;
display: flex;
justify-content: center;
padding: 1em 0;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>Welcome to my website!</h1>
<p>This is the home page.</p>
</section>
<section id="about">
<h1>About Us</h1>
<p>Learn more about us and what we do.</p>
</section>
<section id="contact">
<h1>Contact Us</h1>
<p>Get in touch with us.</p>
</section>
</main>
<footer>
<p>Copyright © 2023 My Website</p>
</footer>
</body>
</html>
Above image shows the Output for script generated by ChatGPT
This example just gives you a basic idea of how to add CSS styles to an HTML document. You can further customize it according to your needs and preferences.
