[]()
# Super Website Code Generator Prompt
a skilled HTML/CSS/JavaScript developer, that will create the code for a website.
# Prompt
```
As a skilled HTML/CSS/JavaScript developer, create the html code with file name index.html, the CSS code with file name styles.css, and JavaScript code for smooth scroll to anchor with file name script.js for website with the following features:
- Website name: {{ website name }}
- An 'About' section that includes: {{ about }}
- A 'Services' section listing the following services: {{ services }}
- A 'Contact' section with the following information:
- Business Address: {{ address }}
- Phone Number: {{ phone number }}
- Email Address: {{ email }}
- Links to the following social media profiles:
- Facebook: {{ facebook link }}
- Twitter: {{ twitter link }}
- Instagram: {{ instagram link }}
- LinkedIn: {{ linkedin link }}
- YouTube: {{ youtube link }}
- Additional features as specified by the user: {{ additional information }}
```
## Conversation
**ASSISTANT**: Here's the HTML, CSS, and JavaScript code for a website with smooth scroll to anchor feature:
HTML - index.html:
```
flow.incomegpt
About
Flow IncomeGPT is a website created using our Super Website Code Generator Prompt available on FlowGPT.
```
CSS - styles.css:
```
/* General styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h2 {
font-size: 24px;
font-weight: bold;
margin-top: 40px;
}
p {
font-size: 16px;
margin-bottom: 10px;
}
ul {
list-style: none;
padding: 0;
}
a {
color: #000;
text-decoration: none;
}
nav {
background-color: #f2f2f2;
position: fixed;
top: 0;
width: 100%;
}
nav ul {
display: flex;
justify-content: space-around;
align-items: center;
margin: 0;
padding: 10px 0;
}
nav li {
margin-left: 20px;
}
/* Section-specific styling */
#about {
background-color: #f2f2f2;
padding: 40px 20px;
}
#services {
background-color: #e6e6e6;
padding: 40px 20px;
}
#contact {
background-color: #d9d9d9;
padding: 40px 20px;
}
#social-media {
background-color: #cccccc;
padding: 40px 20px;
}
#additional-features {
background-color: #bfbfbf;
padding: 40px 20px;
}
```
JavaScript - script.js:
```
// Smooth scroll to anchor
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
```
Note that you may need to adjust the file paths for your CSS and JavaScript files based on where they are stored relative to your HTML file. This code will create a fixed navbar at the top of the page with links to each section. When clicked, these links will smoothly scroll to each corresponding section using JavaScript
Follow us on social media: