หน้าเว็บ
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="headerandmid">
<h1>HELEN BONMAN</h1>
<div class="two_header">
<div class="text_two_header">
<div class="text_text_two_header">
<p class="hader_text">BNK48</p>
<p class="mid_text">BNK48 บีเอ็นเคโฟร์ตีเอต</p>
<p class="bottom_text">อ่อนแอก็แพ้ไป อุดเลือดกำเดาไหวก็ไปต่อ กับสาวๆ ไอดอล BNK48 ที่มองทีไรก็ตาลายไปหมดเลย
เพราะมีแต่คนน่ารักๆ เลือกไม่ถูกจริงๆ และวัยทีนอย่างเรา คงไม่มีใครไม่รู้จัก เพลงคุกกี้เสี่ยงทาย
(แอบมองเธออยู่นะจ๊ะ แต่เธอไม่รู้บ้างเลย) กันหรอกใช่ม๊า ฮิตทั้งเพลงทั้งท่าเต้นขนาดนี้ หรือถ้าใครอยากรู้เรื่องราว
>> ที่มาและความเชื่อเรื่องคุกกี้เสี่ยงทาย << สามารถคลิ๊กเข้าไปอ่านได้เลย ดังนั้นวันนี้ทีนเอ็มไทยไม่รอช้า นำประวัติของสาวๆ
มาให้ทุกคนได้รู้จักกับพวกเธอมากขึ้น พร้อมส่องภาพสวยๆ ของพวกเธอกัน</p>
<div class="undre_text">
<p>MEER OVER MII</p>
</div>
</div>
</div>
</div>
<div class="portfolil">
<p>------------ PORTfPLLO</p>
</div>
<div class="Content">
<p> <img src="img/2.jpg" alt="kuikainaluk"> </p>
</div>
<div class="content-body">
<div class="columns-img">
<img src="img/c1.jpg" alt="image1">
<img src="img/c2.jpg" alt="image2">
<img src="img/c3.jpg" alt="image3">
</div>
<div class="columns-img">
<img src="img/c4.jpg" alt="image4">
<img src="img/c10.jpg" alt="image5">
<img src="img/c6.jpg" alt="image6">
</div>
<div class="columns-img">
<img src="img/c11.jpg" alt="image4">
<img src="img/c12.jpg" alt="image5">
<img src="img/c9.jpg" alt="image6">
</div>
</div>
<div class="bottom-content">
<div class="bottom-content-text">
<h1>KAIMOOK</h1>
<p>WARATTAYA DEESOMLERT</p>
<p> Date of birth : 27 August 1997 </p>
<p> Height : 153 cm</p>
<div class="bottom_content_province">
<p> Province : Bangkok</P>
<p>Like : แมว </p>
</div>
</div>
<div class="bottom_border">
<p>KAIMOOK</p>
</div>
<i class="fa fa-arrow-circle-o-up icon-center" style="font-size:48px;color:#000" ></i>
</div>
<div class="footer">
<p>00000000000 | dfsdfdfgfdgdfgdfg
| sdfsdfsdfsdfsdfsdfsdf</p>
<div class="footer-icon">
<i class="fa fa-facebook-f" style="font-size:48px;color:#fff"></i>
<i class="fa fa-instagram" style="font-size:48px;color:#fff"></i>
<i class="fa fa-linkedin" style="font-size:48px;color:#fff"></i>
</div>
</div>
</div>
</body>
</html>
โค้ด: เลือกทั้งหมด
body{
background-color: #dfdfdf;
}
.headerandmid {
background-color: #fff;
height: 3145px;
margin: 30px 20px 30px 20px;
color: #000;
}
.headerandmid h1{
text-align: center;
padding-top: 20px;
}
.two_header {
background-image: url('../img/1.jpg');
background-size: cover;
background-position: center;
padding: 24px;
height: 400px;
}
.two_header .text_two_header{
width: 50%;
margin-left: 100px;
text-align: center;
padding-top: 50px;
}
.text_text_two_header .hader_text{
font-size: 48px;
margin: 0px;
}
.text_text_two_header .mid_text{
text-align: left;
font-size: 22px;
margin: 0px;
}
.text_text_two_header .bottom_text{
text-align: left;
}
.text_text_two_header .undre_text{
border: 5px solid #000b11;
text-align: left;
padding-left: 5px ;
margin-right: 420px;
}
.portfolil p{
color: #000;
text-align: center;
}
.Content p {
background-color: #ffe6e1;
padding: 24px;
height: 450px;
margin: 0px 24px;
margin-bottom: 24px;
color: #000;
text-align: center;
}
.Content p img{
width: 300px;
transition: all 0.2s ease-in
}
.Content p img:hover{
transform: scale(1.1);
transition: all 0.2s ease-in
}
.content-body{
margin: 0px 24px;
}
.content-body .columns-img{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
}
.columns-img img{
width: 32.333%;
height: 400px;
transition: all 0.5s ease-in;
}
.columns-img img:hover{
transform: rotate(10deg);
}
.bottom-content {
background-color: #ffe6e1;
height: 500px;
}
.bottom-content .bottom-content-text h1 {
padding-top: 80px;
text-align:center;
}
.bottom-content .bottom-content-text p {
text-align:center;
}
.bottom-content .icon-center {
display: flex;
justify-content: center;
margin-top: 24px;
}
.bottom-content-text .bottom_content_province{
text-align: center;
padding-top: 24px;
}
.bottom-content .bottom_border {
border:5px solid #000b11;
margin: 24px 550px 0px 550px;
text-align: center;
}
.headerandmid .footer {
background-color: #000000;
color: #fff;
height: 200px;
padding-top: 50px;
text-align: center;
}
.footer .footer-icon{
display: flex;
justify-content:space-between;
padding: 24px 550px 0px 550px;
}
ดาวน์โหลด