Navbar with ai

# Web Site Writing Basics

# google # appscript

< html lang = "th" >

< head >

< meta charset = "UTF-8" >

< meta name = "viewport" content = "width = device-width, initial-scale = 1.0" >

< title > Navbar < / title >

< style >

Body {

Margins: 0;

Font-family: sans-serve;

}

.navbar {

width: 100%;

Height: 50px;

Background: linear-gradient (to right,# 2ecc71,# 27 ae 60); / * Green * /

Display: flex;

Justify-content: space-between;

align-items: center;

padding: 0 20px;

Box-sizing: border-box;

Color: white;

}

.navbar-left,

.navbar-center,

.navbar-right {

Display: flex;

align-items: center;

}

.navbar-left a,

.navbar-center h1,

.navbar-right .logo {

Text-decoration: none;

Color: white;

font-size: 16px;

Margins: 0 10px;

}

.navbar-center h1 {

font-size: 24px;

Margins: 0;

}

.navbar-right .logo {

Font-weight: Bolt;

font-size: 20px;

}

< / style >

< / head >

< body >

< nav class = "navbar" >

< div class = "navbar-left" >

< a href = "#" > 📞 081-234-5678

< a href = "#" > 📱 LINE

< a href = "#" > 🎵 Tikis

< / div >

< div class = "navbar-center" >

< h1 > Store name < / h1 >

< / div >

< div class = "navbar-right" >

< div class = "logo" > LOGO < / div >

< / div >

< / naval >

< / body >

< / html >

Prom

Code navbar with css html is 100% wide and 50px high. The background is llinear-gradient green with 3 parts. The right-most side is the logo. The middle is the store name. The left-most is the phone line tiktok.