[/img]
http://picture.in.th/id/42b3ddaae3d61e3cb66afa188e17495d 
[/img]ตามรูปที่ให้ ตัววงกลมสีส้มที่ระบุหมายเลขเเละข้อความที่เขียนตามหลังมาถูกต้องเเล้ว เราจะจัดรุปแแบบยังไง ให้ วงกลมสีส้มเรียงกันเป้น3 เเถว โดยตำเเหน่ง เดียวกับหมายเลข 1 เเนะนำทีครับ ผมมีโค้ด html css ให้
โค้ด html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="
https://fonts.googleapis.com/css?family=Lato " rel="stylesheet">
<title>Omnifood</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="resources/img/logo-white.png" alt="Omnifood Logo" class="logo">
<ul class="main-nav">
<li><a href="#" >Food Delivery</a></li>
<li><a href="#" >How it work</a></li>
<li><a href="#" >Our cities</a></li>
<li><a href="#" >Sign up</a></li>
</ul>
</div>
</nav>
<div class="hero-text-box" >
<h1>Goodbye junk food.<br> hello super healthy meals.</h1>
<a class="bnt bnt-full" href="#">I am hungry</a>
<a class="bnt bnt-ghost" href="#">Show me more</a>
</div>
</header>
<section class="section-features">
<div class="row">
<h2>Get food fast — not food fast</h2>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</p>
</div>
<div class="row">
<div class="col span-1-of-4 box">
<i class="ion-ios-infinite-outline icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-stopwatch-outline icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-nutrition-outline icon-big"></i>
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-cart-outline icon-big"></i>
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
<section class="section-meals">
<ul class="meals-showcase clearfix">
<li>
<figure class="meals-photo">
<img src="resources/img/1.jpg" alt="Korean bibimbap with agg and vegetables">
</figure>
</li>
<li>
<figure class="meals-photo">
<img src="resources/img/2.jpg" alt="KSimple italian pizza with cherry tomatoes">
</figure>
</li>
<li>
<figure class="meals-photo">
<img src="resources/img/3.jpg" alt="Chicken breast steak with vegetables ">
</figure>
</li>
<li>
<figure class="meals-photo">
<img src="resources/img/4.jpg" alt="Autumn pumpkin soup">
</figure>
</li>
</ul>
<ul class="meals-showcase clearfix">
<li>
<figure class="meals-photo">
<img src="resources/img/5.jpg" alt="Paleo beef steak with vegetables">
</figure>
</li>
<li>
<figure class="meals-photo">
<img src="resources/img/6.jpg" alt="Healthy baguette with egg and vegetables">
</figure>
</li>
<li>
<figure class="meals-photo">
<img src="resources/img/7.jpg" alt="Burger with cheddar and bacon">
</figure>
</li>
<li>
<figure class="meals-photo">
<img src="resources/img/8.jpg" alt="Granola with cherries and strawberries">
</figure>
</li>
</ul>
</section>
<section class="section-steps">
<div class="row">
<h2>How it works — simple as 1, 2, 3</h2>
</div>
<div class="row">
<div class="col span-1-of-2" steps-box>
<img src="resources/img/app-iphone.png" alt="Omnifood app on iphone" class="app-screen">
</div>
<div class="col span-1-of-2" steps-box>
<div class="work-step">
<div>1</div>
<p>Choose the subscription plan that best fits your needs and sign up today.</p>
</div>
<div class="work-step">
<div>2</div>
<p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
</div>
<div class="work-step">
<div>3</div>
<p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
</div>
<a href="#" class="btn-app"><img src="resources/img/download-app.svg" alt="App store bottom"></a>
<a href="#" class="btn-app"><img src="resources/img/download-app-android.png" alt="Play store bottom"></a>
</div>
</div>
</section>
<section class="section-cities">
<div class="row">
<h2>We're currently in these cities</h2>
</div>
<div class="row">
<div class="col span-1-of-4 box">
<img src="resources/img/Lisbon-3.jpg" alt="Lisbon">
<h3>Lisbon</h3>
<div class="city-feature">
<i class="ion-person"></i>
1600+ happy eaters
</div>
<div class="city-feature">
<i class="ion-star"></i>
60+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter"></i>
@omnifood_lx
</div>
</div>
<div class="col span-1-of-4 box">
<img src="resources/img/san-francisco.jpg" alt="Lisbon">
<h3>San Francisco</h3>
<div class="city-feature">
<i class="ion-person"></i>
3700+ happy eaters
</div>
<div class="city-feature">
<i class="ion-star"></i>
160+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter"></i>
@omnifood_sf
</div>
</div>
<div class="col span-1-of-4 box">
<img src="resources/img/berlin.jpg" alt="Lisbon">
<h3>Berlin</h3>
<div class="city-feature">
<i class="ion-person"></i>
2300+ happy eaters
</div>
<div class="city-feature">
<i class="ion-star"></i>
110+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter"></i>
@omnifood_berlin
</div>
</div>
<div class="col span-1-of-4 box">
<img src="resources/img/london.jpg" alt="Lisbon">
<h3>London</h3>
<div class="city-feature">
<i class="ion-person"></i>
1200+ happy eaters
</div>
<div class="city-feature">
<i class="ion-star"></i>
50+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter"></i>
@omnifood_london
</div>
</div>
</div>
</section>
</body>
</html>
------------------------------------------------------------------------------------------
โค้ด css
/*basic setup*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #555;
font-family: 'LATO','Arial','sans-serif';
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.clearfix (zoom: 1)
.clearfix {
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* reuseable component*/
.row {
max-width: 1140px;
margin: 0 auto;
}
section {
padding: 80px 0;
}
/* heading*/
h1,h2,h3 {
font-weight: 300;
text-transform: uppercase;
}
h1 {
margin-top: 0;
margin-bottom: 20px;
color: #fff;
font-size: 240%;
word-spacing: 4px;
letter-spacing: 1px;
}
h2 {
font-size: 180%;
word-spacing: 2px;
text-align: center;
margin-bottom: 30px;
letter-spacing: 1px;
}
h3 {
font-size: 110%;
margin-bottom: 15px;
}
h2:after {
display: block;
height: 2px;
background-color: #e67e22;
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 30px;
}
/* paragraphs */
.long-copy {
line-height: 145%;
width: 70%;
margin-left: 15%;
}
.box p {
font-size: 90%;
line-height: 145%;
}
/* icon */
.icon-big {
font-size: 400%;
display: block;
color: #e67e22;
margin-bottom: 10px;
}
/* button*/
.bnt:link,
.bnt:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color: 0.2s, border:0.2s, color:0.2s;
border: 1px solid #e67e22;
color: #fff;
}
.bnt-full:hover,
.bnt-full:active {
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
}
.bnt-ghost:hover,
.bnt-ghost:active {
border: 1px solid #cf6d17;
color: #fff;
}
.bnt:hover,
.bnt:active {
background-color: #cf6d17;
}
/* header*/
header {
background: url("C:/Users/Administrator/Desktop/omnifood/resources/css/img/hero.jpg") repeat 0 0;
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
height: 100px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav {
float: right;
list-style: none;
margin-top: 55px;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding: 8px 0;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #e67e22;
}
/* section div .row */
.span-1-of-4 {
width: 23.8%;
}
/*features*/
.section-features .long-copy {
margin-bottom: 30px;
}
/* meals */
.section-meals {
padding: 0;
}
.meals-showcase {
list-style: none;
width: 100%;
}
.meals-showcase li {
display: block;
float: left;
width: 25%;
}
.meals-photo {
width: 100%;
margin: 0;
overflow: hidden;
background-color: #000;
}
.meals-photo img {
opacity: 0.7;
width: 100%;
height: auto;
transform: scale(1.15);
transition: transform 0.5s;
}
.meals-photo img:hover {
opacity: 1;
transform: scale(1.03);
}
/* How it work */
.section-step {
background-color: #f4f4f4;
}
.steps-box:first-child {
text-align: right;
padding-right: 3%;
margin-top: 30px;
}
.steps-box:last-child {
padding-left: 3%;
margin-top: 70px;
}
.app-screen {
display: block;
margin-left: 350px;
margin-right: auto;
width: 35%;
}
.works-step {
margin-bottom: 50px;
}
.work-step:last-of-type {
margin-bottom: 80px;
}
.work-step div {
color: #e67e22;
border: 2px solid #e67e22;
display: inline-block;
border-radius: 502%;
height: 50px;
width: 50px;
text-align: center;
padding: 5px;
font-size: 150%;
float: left;
word-break: break-all;
}
.btn-app img {
height: 50px;
width: auto;
margin-right: 10px;
margin-top: 130px;
}
/* section div .span-1-of-2 */
.span-1-of-2 {
width: 49.2%;
}
/* section-cities */
.section-cities {
display: block;
}
ชี้เเนะทีครับ ลองทำตาม คอร์ส udemy เเต่ก้มีบางจุดที่ต้องทำเอง
พัฒนาเว็บไซต์
