让Bito AI给你写网页 Let Bito AI write web pages for you

[monicfenga]

English

You will need to give Bito a detailed description of the elements that you want to appear on the web page, which can be slightly abbreviated, but it is advisable to be more detailed. The more detailed the description, the better the resulting page will look like you imagine it.

Can you write a simple HTML page for me? It needs to be with CSS styles. For the part that involves images, you can use the images provided by the Placeholder.com website. The "href" attribute of all "a" tags should be the well "#", and the "action " attribute of all forms should be the well "#".

The main colour of the site is pink (#ff709b), the secondary colours are purple (#CE85F8) and yellow (#FFE175), the text is in black and the background is white.

The page is divided into the following sections.

1. Navigation bar
The navigation bar contains the name of the site "John Doe", navigation links (Home, Works, News, About), and a search button.

2. Body of the page
As this page is the home page, it is divided into the following sections.
- The first screen: contains the background image, the main title (John Doe), the subtitle (Freelancer), and a link to the 'Explore' button (to jump to the 'Works' section).
- Artwork: four links to four creative style images in a row. When the mouse is placed over it, the name of the work and a right arrow are displayed. On mobile it appears as two in a row.
- Dynamic: three blog post cards in a row of three. A blog post card contains these elements: title, date of publication, summary of the post (you can write me 50 words, I will replace this myself), "Continue reading" button.
- Subscribe: left and right structure, lefthand side with the title "Subscribe to our emails and be the first to receive new content every time we publish it." On the right hand side there is a form with an email text box and a submit button. 

3. footer: attach the year you think it is, and your own name.

Attention: The output may be very long, possibly so long that Bito may cut the output off.

If this happens, ask Bito to **output less content. **

Using the example of the Prompt just above, you can effectively reduce the number of words in the output HTML by reducing the number of "creative style image links" and "blog post cards" to one.

中文

你需要跟Bito详细说明你希望在网页上出现的元素，可以稍微简略，但建议描述得详细一些。描述越详细，生成的网页就越符合你想象中的那样。

你能为我写一个简单的HTML网页吗？需要带有CSS样式。涉及到图片的部分，可以使用Placeholder.com网站提供的图片。所有的“a”标签的“href”属性都应该为井号“#”，所有表单的“action”属性都应该为井号“#”。

网站主色调为粉色（#ff709b），辅助色为紫色（#CE85F8）、黄色（#FFE175），文字用黑色，背景用白色。

页面分为以下几个部分：

1. 导航栏
包含网站名称“John Doe”、导航链接（主页、作品、动态、关于），和一个搜索按钮。

2. 页面主体
因为这个页面是首页，所以分为以下几个部分：
- 首屏：包含背景图片、大标题（John Doe）、副标题（Freelancer）、“探索”按钮链接（跳转到“作品”部分）。
- 作品：一行四个，共四个创意风格图片链接。在鼠标放上去的时候，显示作品名称和一个右箭头。在移动端显示为一行两个。
- 动态：一行三个，共三个博客文章卡片。一个博客文章卡片里包含这些内容：标题、发布日期、文章摘要（你给我写50字就行，我自己会将这里替换掉），“继续阅读”按钮。
- 订阅：左右结构，左侧为标题“订阅我们的邮件，每次我们发布新内容时都会第一时间推送给您。”，右侧为一个表单，里面有一个电子邮件文本框和一个提交按钮。

3. 页脚：附上你认为今年的年份，和你自己的名字。

**注意：**输出的内容可能很长，可能长到Bito将输出内容截断。

如果发生了截断的情况，请让Bito少输出一些内容。 以刚才的 Prompt为例，可以将创意风格图片链接和博客文章卡片的数量减少到一个，就可以有效减少输出的HTML的字数。

Demo

[amargoel98]

Monic, hi, this is super cool. great idea!

If you make a video about this, we'd love to share with our Chinese speaking users and English users as well (depending on what languages you are comfortable with).

Thanks,
Amar

[monicfenga]

No thanks; but if you want to make a video with the content of this post, I welcome it

[amargoel98]

@monicfenga , see above!