ต่อไป »

[kunnarakkup]

https://testtep.000webhostapp.com/corlate/


ผมอยากขยับตรงที่วงไว้ให้มันอยู่ตรงกลาง ตอนบนมือถืออะครับ จากcode ควรปรับยังไงต่อดีครับ

โค๊ด:

    <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;
}

[9arduino]

สนใจ Host ฟรีไหมครับ

https://www.9arduino.com/b/10

[BOS]

เพิ่ม 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;
}

[MD.18]

แนะนำให้ทำ 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;}

ประมาณนี้ก็จะได้การแสดงผลที่ดููดีครับ และไม่เปลืองเนื้อที่แนวตั้งมากไป

[kunnarakkup]

แนะนำให้ทำ 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 ต้องทำยังไงอะครับ สามารถสร้างขึ้นมาเองได้มั้ยครับ แล้วถ้าสร้างขึ้นมาเองนี้ จะเรียกใช้ยังไง

[MD.18]

แนะนำให้ทำ 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

เป็นอันเสร็จ

ถ้าถามเพิ่มอีกผมเก็บตังค์ละนะ 

[Okay168]

เยี่ยมมากครับ