https://testtep.000webhostapp.com/corlate/
ผมอยากขยับตรงที่วงไว้ให้มันอยู่ตรงกลาง ตอนบนมือถืออะครับ จากcode ควรปรับยังไงต่อดีครับ
(https://www.img.in.th/images/611940a1b60c26009ca9601376c3dede.md.jpg) (https://www.img.in.th/image/NAVH)
<section id="feature" >
<div class="container">
<div class="center wow fadeInDown">
<h2>Features</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div class="row">
<div class="features">
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-bullhorn"></i>
</div>
<h2>Fresh and Clean</h2>
<h3>สร้างความเชื่อมั่นและความไว้วางใจให้กับลูกค้าโดยการผลิต ผลิตภัณฑ์ที่มี คุณค่า ตรงตามความต้องการของลูกค้า ซึ่ง
ประกอบด้วย สินค้าที่มีคุณภาพในราคาที่เหมาะสม จัดส่งสินค้าตรงตามกำหนดและการบริการที่จริงใจเพื่อสร้างความพึง
พอใจให้กับลูกค้า</h3>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-comments"></i>
</div>
<h2>Fresh and Clean</h2>
<h3>การบริหารจัดการองค์กร โดยมุ่งเน้นในการพัฒนาทรัพยากรมนุษย์เพื่อเพิ่มขีดความสามารถของพนักงานให้สามารถสร้าง
องค์กรนวัตกรรม ภายใต้การดูแลขวัญกำลังใจของพนักงาน</h3>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-cloud-download"></i>
</div>
<h2>Fresh and Clean</h2>
<h3>สร้างพันธมิตรทางธุรกิจใน ห่วงโซ่ทางธุรกิจตั้งแต่ต้นน้ำ(ผู้ขาย) จนถึง ปลายน้ำ(ลูกค้า) โดยการแลกเปลี่ยนความรู้
ความสามารถและประสบการณ์ที่เป็นประโยชน์เพื่อหาแนวทางในการแก้ไขปัญหาและพัฒนาองค์กรร่วมกัน รวมถึงการผูก
มิตรกับชุมชนรอบ</h3>
</div><!--/.col-md-4-->
</div><!--/.services-->
</div><!--/.row-->
</div><!--/.container-->
</section><!--/#feature-->
.center {
text-align: center;
padding-bottom: 55px;
}
#feature {
background: #f2f2f2;
padding-bottom: 40px;
}
.features{
padding: 0;
}
.feature-wrap {
margin-bottom: 35px;
overflow: hidden;
}
.feature-wrap h2{
margin-top: 10px;
}
.feature-wrap .pull-left {
margin-right: 25px;
}
.feature-wrap i{
font-size: 48px;
height: 110px;
width: 110px;
margin: 3px;
border-radius: 100%;
line-height: 110px;
text-align:center;
background: #ffffff;
color: #c52d2f;
border: 3px solid #ffffff;
box-shadow: inset 0 0 0 5px #f2f2f2;
-webkit-box-shadow: inset 0 0 0 5px #f2f2f2;
-webkit-transition: 500ms;
-moz-transition: 500ms;
-o-transition: 500ms;
transition: 500ms;
float: left;
margin-right: 25px;
}
.feature-wrap i:hover {
background: #c52d2f;
color: #fff;
box-shadow: inset 0 0 0 5px #c52d2f;
-webkit-box-shadow: inset 0 0 0 5px #c52d2f;
border: 3px solid #c52d2f;
}
สนใจ Host ฟรีไหมครับ
https://www.9arduino.com/b/10
เพิ่ม text-align:center ใน .feature-wrap
ลบ float:left ใน .feature-wrap i แล้วเพิ่ม display:inline-block เข้าไป
ดังนี้
.center {
text-align: center;
padding-bottom: 55px;
}
#feature {
background: #f2f2f2;
padding-bottom: 40px;
}
.features{
padding: 0;
}
.feature-wrap {
margin-bottom: 35px;
overflow: hidden;
text-align:center;
}
.feature-wrap h2{
margin-top: 10px;
}
.feature-wrap .pull-left {
margin-right: 25px;
}
.feature-wrap i{
display:inline-block;
font-size: 48px;
height: 110px;
width: 110px;
margin: 3px;
border-radius: 100%;
line-height: 110px;
text-align:center;
background: #ffffff;
color: #c52d2f;
border: 3px solid #ffffff;
box-shadow: inset 0 0 0 5px #f2f2f2;
-webkit-box-shadow: inset 0 0 0 5px #f2f2f2;
-webkit-transition: 500ms;
-moz-transition: 500ms;
-o-transition: 500ms;
transition: 500ms;
margin-right: 25px;
}
.feature-wrap i:hover {
background: #c52d2f;
color: #fff;
box-shadow: inset 0 0 0 5px #c52d2f;
-webkit-box-shadow: inset 0 0 0 5px #c52d2f;
border: 3px solid #c52d2f;
}
แนะนำให้ทำ center ตั้งแต่ .feature เลยครับจะดูจัดกลางสวยกว่า
.features{padding: 0 10%;text-align:center}
.feature-wrap{margin:15% auto 0}
.feature-wrap i{float:none}
แล้วก็ทำไอคอนให้เล็กลงมาซะครับ
.feature-wrap i{font-size: 28px;height: 60px;width: 60px;line-height: 200%;float: none;margin-right: 0;}
h3 ก็ปรับ line-height ให้เหลือเ็นซํก h3{font-size:0.98em;line-height: 1.3em;}
ประมาณนี้ก็จะได้การแสดงผลที่ดููดีครับ และไม่เปลืองเนื้อที่แนวตั้งมากไป
อ้างถึงจาก: MD.18 ใน 27 กรกฎาคม 2017, 09:49:51
แนะนำให้ทำ center ตั้งแต่ .feature เลยครับจะดูจัดกลางสวยกว่า
.features{padding: 0 10%;text-align:center}
.feature-wrap{margin:15% auto 0}
.feature-wrap i{float:none}
แล้วก็ทำไอคอนให้เล็กลงมาซะครับ
.feature-wrap i{font-size: 28px;height: 60px;width: 60px;line-height: 200%;float: none;margin-right: 0;}
h3 ก็ปรับ line-height ให้เหลือเ็นซํก h3{font-size:0.98em;line-height: 1.3em;}
ประมาณนี้ก็จะได้การแสดงผลที่ดููดีครับ และไม่เปลืองเนื้อที่แนวตั้งมากไป
ถามอีกอย่างครับตรง icon ผมอยากใส่เป็นตัวอักษร A B C D อะครับ แต่มันไม่มีชื่อ icon ต้องทำยังไงอะครับ สามารถสร้างขึ้นมาเองได้มั้ยครับ แล้วถ้าสร้างขึ้นมาเองนี้ จะเรียกใช้ยังไง
อ้างถึงจาก: kunnarakkup ใน 27 กรกฎาคม 2017, 11:35:47
อ้างถึงจาก: MD.18 ใน 27 กรกฎาคม 2017, 09:49:51
แนะนำให้ทำ center ตั้งแต่ .feature เลยครับจะดูจัดกลางสวยกว่า
.features{padding: 0 10%;text-align:center}
.feature-wrap{margin:15% auto 0}
.feature-wrap i{float:none}
แล้วก็ทำไอคอนให้เล็กลงมาซะครับ
.feature-wrap i{font-size: 28px;height: 60px;width: 60px;line-height: 200%;float: none;margin-right: 0;}
h3 ก็ปรับ line-height ให้เหลือเ็นซํก h3{font-size:0.98em;line-height: 1.3em;}
ประมาณนี้ก็จะได้การแสดงผลที่ดููดีครับ และไม่เปลืองเนื้อที่แนวตั้งมากไป
ถามอีกอย่างครับตรง icon ผมอยากใส่เป็นตัวอักษร A B C D อะครับ แต่มันไม่มีชื่อ icon ต้องทำยังไงอะครับ สามารถสร้างขึ้นมาเองได้มั้ยครับ แล้วถ้าสร้างขึ้นมาเองนี้ จะเรียกใช้ยังไง
ให้ดูตรง <i class="fa fa-bullhorn"></i> มันจะไม่มีอักษรก็ใส่ A ไปครับเป็นแบบนี้ <i class="fa fa-bullhorn">A</i>
แล้วก็ไปดูตรง css .fa-bullhorn:before{content: "\f0a1";} ก็ลบเป็น .fa-bullhorn:before{}
ก็จะได้อักษร A ในวงกลม อยากปรับสไตล์อักษรก็แก้ที่คลาส .feature-wrap i
เป็นอันเสร็จ
ถ้าถามเพิ่มอีกผมเก็บตังค์ละนะ :wanwan004:
เยี่ยมมากครับ :wanwan017: