Best OUR teams responsive cardsHTML code of this responsive our teams card :<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Out-teams-designs</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head><body> <section> <div class="container slider"> <div class="card"> <div class="content"> <div class="imgBx"><img src="Images/tmemb1.jpg" alt=""></div> <div class="contentBx"> <h3>Someone Famous <br> <span>creative designer</span></h3> </div> </div> <ul class="sci"> <li style="--i:1"> <a href="#"><i class="fa fa-facebook"></i></a> </li> <li style="--i:2"> <a href="#"><i class="fa fa-instagram"></i></a> </li> <li style="--i:3"> <a href="#"><i class="fa fa-twitter"></i></a> </li> </ul> </div> <div class="card"> <div class="content"> <div class="imgBx"><img src="Images/tmemb2.jpg" alt=""></div> <div class="contentBx"> <h3>Someone Famous <br> <span>creative designer</span></h3> </div> </div> <ul class="sci"> <li style="--i:1"> <a href="#"><i class="fa fa-facebook"></i></a> </li> <li style="--i:2"> <a href="#"><i class="fa fa-instagram"></i></a> </li> <li style="--i:3"> <a href="#"><i class="fa fa-twitter"></i></a> </li> </ul> </div> <div class="card"> <div class="content"> <div class="imgBx"><img src="Images/tmemb3.jpg" alt=""></div> <div class="contentBx"> <h3>Someone Famous <br> <span>creative designer</span></h3> </div> </div> <ul class="sci"> <li style="--i:1"> <a href="#"><i class="fa fa-facebook"></i></a> </li> <li style="--i:2"> <a href="#"><i class="fa fa-instagram"></i></a> </li> <li style="--i:3"> <a href="#"><i class="fa fa-twitter"></i></a> </li> </ul> </div> </div> </section></body></html>CSS...
Showing posts with label websites. Show all posts
Showing posts with label websites. Show all posts
Sunday, December 20, 2020
RESPONSIVE CARDS These are awesome and responsive cards .HTML code:<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="style.css"></head><body><div class="row"> <div class="column"> <div class="card"> <img src="1.jpg" style="width:150px;height:auto;padding-top:10px"> <h1>Json watson</h1> <p class="title">CEO & Founder</p> <p>Oxford university</p> <a href="#"><i class="fa fa-instagram"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-dribbble"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> <p><button>Contact</button></p> </div> </div> <div class="column"> <div class="card"> <img src="3.jpg" style="width:150px;height:auto;padding-top:10px"> <h1>Jon watson</h1> <p class="title">CEO & Founder</p> <p>Oxford university</p> <a href="#"><i class="fa fa-instagram"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-dribbble"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> <p><button>Contact</button></p> </div> </div> <div class="column"> <div class="card"> <img src="2.png" style="width:150px;height:auto;padding-top:10px"> <h1>Nick watson</h1> <p class="title">CEO & Founder</p> <p>Oxford university</p> <a href="#"><i class="fa fa-instagram"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-dribbble"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> <p><button>Contact</button></p> </div> </div> <div class="column"> <div class="card"> <img src="4.png" style="width:150px;height:auto;padding-top:10px"> <h1>Joy watson</h1> <p class="title">CEO & Founder</p> <p>Oxford university</p> <a href="#"><i class="fa fa-instagram"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-dribbble"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> <p><button>Contact</button></p> </div> </div></div></body></html>And...