HTML pug to HTML5 Code: script(src="https://kit.fontawesome.com/0eda088bae.js", crossorigin="anonymous") .html .container#app .header-container .header .logo
Convert HTML pug to HTML5
Code:
script(src="https://kit.fontawesome.com/0eda088bae.js", crossorigin="anonymous")
.html
.container#app
.header-container
.header
.logo
h1 FORUM
.links
a(href="/") Home
a(href="/") Forum
a(href="/#") Events
a(href="/#") Store
a(href="") Contanct
.search
input
button Search
.body
.main
.hero
img(
src="https://images.unsplash.com/photo-1605988507762-4fb84766590e?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MzJ8fHBhcmt8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
)
.new-topics
h2 New Conversations
.topic
img(
src="https://images.unsplash.com/photo-1557862921-37829c790f19?ixid=MXwxMjA3fDB8MHxzZWFyY2h8M3x8bWFufGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
)
.info
h3 My Chocholate cake looks dry
p.author John K.
p.category in category Baking
p.date 12.35 today
.stats
p <i class="far fa-comment"></i> 4 <i class="far fa-thumbs-up"></i> 3
.topic
img(
src="https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixid=MXwxMjA3fDB8MHxzZWFyY2h8N3x8d29tYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
)
.info
h3 How to make my tomatos grow faster?
p.author Cecilia S.
p.category in category Houseplants
p.date 12.03 today
.stats
p <i class="far fa-comment"></i> 4 <i class="far fa-thumbs-up"></i> 12
.topic
img(
src="https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixid=MXwxMjA3fDB8MHxzZWFyY2h8N3x8ZG9nfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
)
.info
h3 Best dog parks near by
p.author Goofy W.
p.category in category Pets and animals
p.date 11.57 today
.stats
p <i class="far fa-comment"></i> 24 <i class="far fa-thumbs-up"></i> 32
.events
h2 Events
.events-container
.event
img(
src="https://images.unsplash.com/photo-1527529482837-4698179dc6ce?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Nnx8cGFydHl8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
)
h3 Webinar: How to plan a party
p.date 11.11. 20.00
button Add to Calendar <i class="far fa-calendar-alt"></i>
.event
img(
src="https://images.unsplash.com/photo-1552196563-55cd4e45efb3?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Nnx8eW9nYXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
)
h3 Afternoon Yoga
p.date 12.11. 16.00
button Add to Calendar <i class="far fa-calendar-alt"></i>
.event
img(
src="https://images.unsplash.com/photo-1509203847636-3013b8ae5cb4?ixid=MXwxMjA3fDB8MHxzZWFyY2h8N3x8bXVmZmluc3xlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
)
h3 Baking 101 with Amy R.!
p.date 12.11. 18.00
button Add to Calendar <i class="far fa-calendar-alt"></i>
.icons
h2 Explore Categories
.icons-container
.icon
p <i class="fas fa-music"></i>
p Music
.icon
p <i class="fas fa-cookie-bite"></i>
p Baking
.icon
p <i class="fas fa-camera"></i>
p Photography
.icon
p <i class="fas fa-paw"></i>
p Pets
.icon
p <i class="fas fa-cloud-sun"></i>
p Weather
.sidebar
.palette
h2 Color Palette
.color-container
.dark
.medium
.light
.fair
.white
.links
h2 Useful links
a(href="") How to create own page
a(href="") Start sharing content
a(href="") Read more about Events
.users
h2 Top users
.users-container
.user
img(
src="https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NDJ8fG1hbnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
)
.info
p Kimmo A.
p <i class="far fa-comment"></i> 22 <i class="far fa-thumbs-up"></i> 281
.user
img(
src="https://images.unsplash.com/photo-1510832198440-a52376950479?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8Z2lybHxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
)
.info
p Olivia B.
p <i class="far fa-comment"></i> 19 <i class="far fa-thumbs-up"></i> 242
.user
img(
src="https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixid=MXwxMjA3fDB8MHxzZWFyY2h8N3x8ZG9nfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
)
.info
p Goofy W.
p <i class="far fa-comment"></i> 19 <i class="far fa-thumbs-up"></i> 211
.about
h2 Info
p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
button Read More
.new-in-store
h2 New in Store
.item
img(
src="https://images.unsplash.com/photo-1612969308146-066d55f37ccb?ixid=MXwxMjA3fDB8MHxzZWFyY2h8ODh8fGJvb2slMjBjb3ZlcnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
)
h3 A Storytelling Workbook
button Go to Store <i class="fas fa-shopping-cart"></i>
Step by step
Solved in 2 steps
