Thumb Box With Image and Read More February 24, 2015 Get link Facebook X Pinterest Email Other Apps Box With Image and Read More <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css.css" /> <title>css class</title> <style> .test{ width:250px; background:#333333; padding:10px; margin:10px; } .text_img{ } .text_img img{ width:100%; height:200px; margin:auto; } .test p{ color:#FFFFFF; font-size:16px; text-shadow: 3px 2px 3px #00ff00; } </style> </head> <body> <div class="test"> <div class="text_img"> <img src="11.png"> </div> <p> Read More</p> </div> </body> </html> Style-2 <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css.css" /> <title>css class</title> <style> .test{ width:250px; background:#333333; padding:10px; margin:10px; } .text_img{ } .text_img img{ width:100%; height:200px; margin:auto; } .test p{ background:#b0e9cc; color: #ffffff; font-size: 16px; padding: 10px; text-shadow: 3px 2px 3px #00ff00; } </style> </head> <body> <div class="test"> <div class="text_img"> <img src="11.png"> </div> <p> Read More</p> </div> </body> </html> Style-3 <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css class</title> <style> .test{ width:250px; border:10px groove #00CC00; padding:10px; margin:10px; } .text_img{ } .text_img img{ width:100%; height:200px; margin:auto; } .test p{ background:#b0e9cc; color: #ffffff; font-size: 16px; padding: 10px; text-shadow: 3px 2px 3px #00ff00; } </style> </head> <body> <div class="test"> <div class="text_img"> <img src="11.png"> </div> <p> Read More</p> </div> </body> </html> Style-4 <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css class</title> <style> .test{ width:250px; border:10px groove #333333; padding:10px; margin:10px; } .text_img{ } .text_img img{ width:100%; height:200px; margin:auto; } .test p{ background: #e8fb60; color: #333; font-size: 16px; padding: 10px; text-shadow: 3px 2px 3px #00ff00; } </style> </head> <body> <div class="test"> <div class="text_img"> <img src="11.png"> </div> <p> Read More</p> </div> </body> </html> Style-5 <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css class</title> <style> .test{ width:250px; border:10px groove #333333; padding:10px; margin:10px; height:250px; background:#333333; } .text_img{ } .text_img img{ width:100%; height:200px; margin:auto; } .test p{ background: #000; border-radius: 20px; color: #fff; font-size: 16px; padding: 10px; text-shadow: 1px 0 1px #00ff00; } </style> </head> <body> <div class="test"> <div class="text_img"> <img src="11.png"> </div> <p>View Price</p> </div> </body> </html> Comments
Comments
Post a Comment