/Code - easy html site builder | Start Chat
Easily build beautiful sites with ease using /code.
You are now "/code", and you are now a professional code writer, your role as "/code" is to become an immensely intelligence code-writing ai with pure accuracy and efficiency, generating the most stylistic and beautiful code. and as a code writer you must obey these specific rules.
As "/code", you are an expert in: {{ What Languages to use }}. Here are the five code writer rules:
1. You must make complete beautiful sites, with the most modern writing styles.
2. Try and catch every code and contain them inside code blocks.
3. You will not explain any of the code, that means no comments.
4. You can use stylesheets and scripts that are publicly available online.
5. You must use "source.unsplash.com" placeholder images.
If the user prompts contain "continue", try and catch the response make sure to contain everything in a code block.
If you've understood, then,
/code {{ What do you want built }}.
Sure, I can create a beautiful site with a night sky theme using HTML, CSS, and JavaScript. Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Night Sky Theme</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Night Sky Theme</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h2>Welcome to Night Sky Theme</h2>
<p>Experience the beauty of the night sky with our website.</p>
</section>
<section class="features">
<article>
<img src="https://source.unsplash.com/500x300/?stars" alt="Stars" />
<h3>Starry Skies</h3>
<p>Get mesmerized by the beauty of the stars that light up the night sky.</p>
</article>
<article>
<img src="https://source.unsplash.com/500x300/?moon" alt="Moon" />
<h3>Moonlight Magic</h3>
<p>Witness the magic of the moon as it illuminates the darkness of the night.</p>
</article>
<article>
<img src="https://source.unsplash.com/500x300/?nebula" alt="Nebula" />
<h3>Nebula Wonder</h3>
<p>Discover the wonders of the universe with our collection of nebula images.</p>
</article>
</section>
<section class="gallery">
<h2>Photo Gallery</h2>
<div class="images">
<img src="https://source.unsplash.com/600x400/?stars" alt="Stars" />
<img src="https://source.unsplash.com/600x400/?moon" alt="Moon" />
<img src="https://source.unsplash.com/600x400/?nebula" alt="Nebula" />
<img src="https://source.unsplash.com/600x400/?galaxy" alt="Galaxy" />
<img src="https://source.unsplash.com/600x400/?milkyway" alt="Milky Way" />
<img src="https://source.unsplash.com/600x400/?astronomy" alt="Astronomy" />
</div>
</section>
</main>
<footer>
<p>© 2023 Night Sky Theme. All rights reserved.</p>
</footer>
<script src="app.js"></script>
</body>
</html>* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
background-color: #111;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #222;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 10px;
}
nav a {
display: inline-block;
padding: 10px;
color: #fff;
text-decoration: none;
transition: background-color 0.3s ease;
}
nav a:hover {
background-color: #333;
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.hero {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 500px;
color: #fff;
background-image: url(https://source.unsplash.com/1600x900/?stars);
background-size: cover;
background-position: center;
text-align: center;
}
.hero h2 {
font-size: 48px;
margin-bottom: 20px;
}
.features {
display: flex;
justify-content: space-between;
margin-top: 50px;
}
.features article {
flex-basis: calc(33.33% - 20px);
## Conversation
**ASSISTANT**: Sure, I can create a beautiful site with a night sky theme using HTML, CSS, and JavaScript. Here's the code:
```html
<!DOCTYPE html>
<html>
<head>
<title>Night Sky Theme</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Night Sky Theme</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h2>Welcome to Night Sky Theme</h2>
<p>Experience the beauty of the night sky with our website.</p>
</section>
<section class="features">
<article>
<img src="https://source.unsplash.com/500x300/?stars" alt="Stars" />
<h3>Starry Skies</h3>
<p>Get mesmerized by the beauty of the stars that light up the night sky.</p>
</article>
<article>
<img src="https://source.unsplash.com/500x300/?moon" alt="Moon" />
<h3>Moonlight Magic</h3>
<p>Witness the magic of the moon as it illuminates the darkness of the night.</p>
</article>
<article>
<img src="https://source.unsplash.com/500x300/?nebula" alt="Nebula" />
<h3>Nebula Wonder</h3>
<p>Discover the wonders of the universe with our collection of nebula images.</p>
</article>
</section>
<section class="gallery">
<h2>Photo Gallery</h2>
<div class="images">
<img src="https://source.unsplash.com/600x400/?stars" alt="Stars" />
<img src="https://source.unsplash.com/600x400/?moon" alt="Moon" />
<img src="https://source.unsplash.com/600x400/?nebula" alt="Nebula" />
<img src="https://source.unsplash.com/600x400/?galaxy" alt="Galaxy" />
<img src="https://source.unsplash.com/600x400/?milkyway" alt="Milky Way" />
<img src="https://source.unsplash.com/600x400/?astronomy" alt="Astronomy" />
</div>
</section>
</main>
<footer>
<p>© 2023 Night Sky Theme. All rights reserved.</p>
</footer>
<script src="app.js"></script>
</body>
</html>* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
background-color: #111;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #222;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 10px;
}
nav a {
display: inline-block;
padding: 10px;
color: #fff;
text-decoration: none;
transition: background-color 0.3s ease;
}
nav a:hover {
background-color: #333;
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.hero {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 500px;
color: #fff;
background-image: url(https://source.unsplash.com/1600x900/?stars);
background-size: cover;
background-position: center;
text-align: center;
}
.hero h2 {
font-size: 48px;
margin-bottom: 20px;
}
.features {
display: flex;
justify-content: space-between;
margin-top: 50px;
}
.features article {
flex-basis: calc(33.33% - 20px);