مشخصات مقاله
طراحی صفحه Meet The Team
طراحی صفحه Meet The Team
در این مقاله می آموزید که چطور با استفاده از CSS و Html یک صفحه Meet The Team ایجاد کنید.
صفحات یا بخشهای Meet The Team اغلب برای لیست بندی کارکنان یک سازمان با اطلاعات تماس مشخص شده ، بکار برده میشوند.
چطور صفحات Meet The Team ایجاد کنیم
قدم اول : کد HTML را اضافه کنید.
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | < div class = "row" > < div class = "column" > < div class = "card" > < img alt = "Jane" style = "width:100%" data-src = " http://articles.tahlildadeh.com/image.axd?picture=team1.png" > < div class = "container" > < h2 >Jane Doe</ h2 > < p class = "title" >CEO & Founder</ p > < p >Some text that describes me lorem ipsum ipsum lorem.</ p > < p >example@example.com</ p > < p >< button class = "button" >Contact</ button ></ p > </ div > </ div > </ div > < div class = "column" > < div class = "card" > < img alt = "Mike" style = "width:100%" data-src = " http://articles.tahlildadeh.com/image.axd?picture=team2.jpg" > < div class = "container" > < h2 >Mike Ross</ h2 > < p class = "title" >Art Director</ p > < p >Some text that describes me lorem ipsum ipsum lorem.</ p > < p >example@example.com</ p > < p >< button class = "button" >Contact</ button ></ p > </ div > </ div > </ div > < div class = "column" > < div class = "card" > < img alt = "John" style = "width:100%" data-src = " http://articles.tahlildadeh.com/image.axd?picture=team3.jpg" > < div class = "container" > < h2 >John Doe</ h2 > < p class = "title" >Designer</ p > < p >Some text that describes me lorem ipsum ipsum lorem.</ p > < p >example@example.com</ p > < p >< button class = "button" >Contact</ button ></ p > </ div > </ div > </ div > </ div > < button ></ button > |
قدم دوم : کد CSS را اضافه کنید.
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | /* Three columns side by side */ .column { float : left ; width : 33.3% ; margin-bottom : 16px ; padding : 0 8px ; } /* Display the columns below each other instead of side by side on small screens */ @media screen and ( max-width : 650px ) { .column { width : 100% ; display : block ; } } /* Add some shadows to create a card effect */ .card { box-shadow: 0 4px 8px 0 rgba( 0 , 0 , 0 , 0.2 ); } /* Some left and right padding inside the container */ .container { padding : 0 16px ; } /* Clear floats */ .container::after, .row::after { content : "" ; clear : both ; display : table; } .title { color : grey; } .button { border : none ; outline : 0 ; display : inline- block ; padding : 8px ; color : white ; background-color : #000 ; text-align : center ; cursor : pointer ; width : 100% ; } .button:hover { background-color : #555 ; } <button></button> |
نمونه مثال Meet The Team:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <p><h2>Responsive "Meet The Team" Section</h2><br> <p>اندازه پنجره مرورگر را تغییر دهید تا اثر را ببینید</p> <p></p><br> <br></p> <p><div class = "row" ><br> <div class = "column" ><br> <div class = "card" ><br> <img src= "http://articles.tahlildadeh.com/image.axd?picture=team1.png" alt= "Jane" style= "width:100%" ><br> <div class = "container" ><br> <h2>Jane Doe</h2><br> <p class = "title" >CEO & Founder</p><br> <p>Some text that describes me lorem ipsum ipsum lorem.</p><br> <p>example@example.com</p><br> <p><button class = "button" >Contact</button></p><br> </div><br> </div><br> </div></p> <p> <div class = "column" ><br> <div class = "card" ><br> <img src= "http://articles.tahlildadeh.com/image.axd?picture=team2.jpg" alt= "Mike" style= "width:100%" ><br> <div class = "container" ><br> <h2>Mike Ross</h2><br> <p class = "title" >Art Director</p><br> <p>Some text that describes me lorem ipsum ipsum lorem.</p><br> <p>example@example.com</p><br> <p><button class = "button" >Contact</button></p><br> </div><br> </div><br> </div><br> <br> <div class = "column" ><br> <div class = "card" ><br> <img src= "http://articles.tahlildadeh.com/image.axd?picture=team3.jpg" alt= "John" style= "width:100%" ><br> <div class = "container" ><br> <h2>John Doe</h2><br> <p class = "title" >Designer</p><br> <p>Some text that describes me lorem ipsum ipsum lorem.</p><br> <p>example@example.com</p><br> <p><button class = "button" >Contact</button></p><br> </div><br> </div><br> </div><br> </div><br> </p> <button></button> |
خروجی Meet The Team Page

1400/01/19
1706
437
رمز عبور : tahlildadeh.com یا www.tahlildadeh.com