content หน้าเว็บไซต์

#พื้นฐานการเขียนเว็ปไซต์

#appscript #google

<!DOCTYPE html>

<html lang="th">

<head>

<meta charset="UTF-8">

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

<title>Navbar</title>

<style>

body {

margin: 0;

font-family: sans-serif;

}

.navbar {

width: 100%;

height: 60px;

background: linear-gradient(to right, red, yellow);

/* ตัวอย่าง linear-gradient สีเขียว red, yellow */

display: flex;

justify-content: space-between;

align-items: center;

color: white;

padding: 0 20px;

box-sizing: border-box; /* เพื่อให้ padding ไม่ดัน navbar กว้างเกิน 100% */

}

.left-section,

.center-section{

display: flex;

align-items: center;

color:blueyellow;

}

.right-section {

display: flex;

align-items: center;

padding:0px;

border-redius:50%;

}

.left-section {

gap: 15px;

}

.right-section img {

height: 90px; /* ปรับขนาดโลโก้ตามต้องการ */

}

.slideshow-container {

position: relative;

max-width: 95%;

margin-top:20px;

margin-left:20px;

overflow: hidden;

}

.slideshow .slide {

display: flex;

justify-content:spece-between;

</style>

</head>

<body>

<div class="navbar">

<div class="left-section">

<span>📞 0946702121</span>

<span>📱 Line: @yourshop</span>

<span>🎵 TikTok: @yourshop</span>

</div>

<div class="center-section">

<h1>peemon shop</h1>

</div>

<div class="right-section">

<img src="https://lh5.googleusercontent.com/d/1HGT09dXtaPF0nOLL4I6_vv0YzzZZJZVZ"

alt="โลโก้ร้านค้า" width="90px" height="100%" >

</div>

</div>

<div class="slideshow-container">

<div class="slideshow">

<div class="slide slide">

<img src="https://lh5.googleusercontent.com/d/1Yk3vcuMLAE_z4PvjWG-RCEU43yQjb646"

width="300px"height="450px" alt="Image 1">

<div class="detail">

<h1 style="color:violet;"> กางเกงสแล็คทรงกระบอก: เรียบง่ายแต่มีสไตล์เหนือกาลเวลา</h1>

<h2 style="margin-top:0; color:green;" >ราคา 299 บาท ไม่รวมค่าขนส่ง<h2>

<h4>ในโลกของแฟชั่นที่หมุนไปอย่างรวดเร็ว มีเสื้อผ้าไม่กี่ชิ้นที่สามารถยืนหยัดอยู่ได้ทุกยุคทุกสมัย และกางเกงสแล็คคือหนึ่งในนั้น โดยเฉพาะ กางเกงสแล็คทรงกระบอกเล็ก ที่นอกจากจะสวมใส่ง่ายแล้ว ยังสามารถหยิบมาใส่ได้ทุกโอกาส ไม่ว่าจะไปทำงาน ไปเที่ยว หรือไปงานสำคัญ กางเกงทรงนี้ยังช่วยเสริมบุคลิกให้ดูดีและมีความเป็นมืออาชีพมากขึ้นอีกด้วย....</h4>

<p style="font-size:20px; color:red; margin-bottom:10px;"> แต่ทำไมกางเกงสแล็คทรงกระบอกเล็กถึงได้รับความนิยมตลอดมา?</p>

</div>

</div>

</div>

</div>

</body>

</html>