Cards

<ImageCard href="http://google.com" title="Seoul" src="https://images.unsplash.com/photo-1499856871958-5b9627545d1a">
대한민국의 수도인 서울은 현대적인 고층 빌딩, 첨단 기술의 지하철, 대중문화와 사찰, 고궁, 노점상이 공존하는 대도시입니다. 주목할 만한 명소로는 곡선으로 이루어진 외관과 옥상 공원을 특징으로 하는 초현대적 디자인의 컨벤션 홀인 동대문디자인플라자, 한때 7,000여 칸의 방이 자리하던 경복궁, 회화나무와 소나무 고목이 있는 조계사가 있습니다.
</ImageCard>

Seoul

대한민국의 수도인 서울은 현대적인 고층 빌딩, 첨단 기술의 지하철, 대중문화와 사찰, 고궁, 노점상이 공존하는 대도시입니다. 주목할 만한 명소로는 곡선으로 이루어진 외관과 옥상 공원을 특징으로 하는 초현대적 디자인의 컨벤션 홀인 동대문디자인플라자, 한때 7,000여 칸의 방이 자리하던 경복궁, 회화나무와 소나무 고목이 있는 조계사가 있습니다.

Features

<Features title="Pro & Cons">
  <Item title="Free to Get Started">FormBold is free to use, we are offering a decent free plan for experiments, personal projects and projects.</Item>
  <Item title="Link Multiple Emails">Link multiple email address under your parent account, use any of them for your forms to recieve submissions.</Item>
  <Item title="Easy to Use Form #1">Simple and easy-to use form API all you need to paste your end-point URL on your form, rest assured by FormBold.</Item>
  <Item title="Easy to Use Form #2">Simple and easy-to use form API all you need to paste your end-point URL on your form, rest assured by FormBold.</Item>
  <Item title="Easy to Use Form #3">Simple and easy-to use form API all you need to paste your end-point URL on your form, rest assured by FormBold.</Item>
</Features>

Timeline

<Timeline>
  <Event title="Event1" date="Date1">Description of the 1st event.</Event>
  <Event title="Event2" date="Date2">Description of the 2nd event.</Event>
  <Event title="Event3" date="Date3">Description of the 3rd event.</Event>
  History of Violence
</Timeline>

MetaLink

<MetaLink href="https://blog.tinstack.net/posts/16">Link Name</MetaLink>

Divider

<Divider text="More"/>

blockqote

> 한글 로렘 입숨 생성기로 디자인 작업에 필요한 한글 더미 텍스트를 손쉽게 생성하세요. 귀찮은 텍스트 작성 없이 원하는 길이의 한글 더미 텍스트를 클릭 한 번으로 생성 ... 
- Benjamin

HR

Centerd Image

![이미지설명](https://tinstack.net/assets/5e9e3766-7977-43da-b3b2-df7f580a60e5)

Link

Cta & Link

<CtaLink href="https://naver.com">Register Now</CtaLink>

<Link href="https://naver.com">Children</Link>

<CardLink href="https://naver.com" title="Naver">
 서울은 대한민국의 수도이다.
</CardLink>

Callout

<Callout title="한글">
한글 로렘 입숨 생성기로 디자인 작업에 필요한 한글 더미 텍스트를 손쉽게 생성하세요. 귀찮은 텍스트 작성 없이 원하는 길이의 한글 더미 텍스트를 클릭 한 번으로 생성. 
  [Google](https://google.com)
</Callout>

<Alert type="info">Change a few things up and try again...</Alert>

Quote

<Quote type="avatar" cite="Benjamin" from="unknwon" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80">
한글 로렘 입숨 생성기로 디자인 작업에 필요한 한글 더미 텍스트를 손쉽게 생성하세요. 귀찮은 텍스트 작성 없이 원하는 길이의 한글 더미 텍스트를 클릭 한 번으로 생성.   [google](https://google.com)

<Quote type="centered" cite="Benjamin" from="unknwon" >
한글 로렘 입숨 생성기로 디자인 작업에 필요한 한글 더미 텍스트를 손쉽게 생성하세요. 귀찮은 텍스트 작성 없이 원하는 길이의 한글 더미 텍스트를 클릭 한 번으로 생성.   [google](https://google.com)
</Quote>

Image Gallery

<Slider title="Shoes">
  <Item src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg" title="Item1"/>
  <Item src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg" title="Item2"/>
  <Item src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg" title="Item3"/>
  <Item src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg" title="Item4"/>
  <Item src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-5.jpg" title="Item5"/>
</Slider>

Image Compare

<Compare 
  first="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg"
  second="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg" />

Video

<Video id="ogfYd705cRs" title="some..."/>

Map

<MapView width="320" height="240" url="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3162.9896312594433!2d126.96914672579636!3d37.55530807477192!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1z7ISc7Jq47Jet!5e0!3m2!1sko!2skr!4v1742004822581!5m2!1sko!2skr"/>

Code

print('hello world')

<Hero src="https://www.svgrepo.com/show/493509/person-who-invests.svg"> 
Welcome to My Portfolio, I am Web Developer.
</Hero>

Welcome to My Portfolio, I am Web Developer.

<Hero type="card" href="https://rembg.tinstack.net" src="https://tinstack.net/assets/fb384415-c5ff-4c45-b57f-177a3f1e0c98"> 
rembg.tinstack.net
</Hero>

rembg.tinstack.net

Visit Website

Richtext

Building even a simple HTML website can feel overwhelming if you haven’t done it before. In my experience, diving into examples can help make it feel less daunting.

A successful HTML page example provides inspiration as you craft your own site and an example of what a successful site looks like in practice. That’s why it’s worthwhile to take a look. 

Build your website with HubSpot's Free CMS Software

 

One of the cool things about learning HTML is that you can take inspiration from any of the millions of public websites up and running right now. And not just that — you can also peek at the underlying HTML of these websites to find out how they’re built, then use those same techniques to build your own projects.

In this post, I‘ll share some stunning website examples that leverage HTML to its fullest potential. Beyond that, you’ll also learn about the basics of HTML websites, how to build your own simple HTML website, and some ideas for different types of websites you might want to create. By the end of this post, you’ll have a robust understanding of the best HTML page examples as you embark on your journey to craft your own. 

HubSpot's Free Website Builder

Create and customize your own business website with an easy drag-and-drop website builder.

• Build a website without any coding skills.
• Pre-built themes and templates.
• Built-in marketing tools and features.
• And more!

Get Started for Free

• Understanding the Basics of HTML Websites

• Ideas for Different Types of Websites You Can Build

• 15+ Advanced and Simple HTML Website Examples

• How to Make Your Own HTML Website

• HTML Page Example