DOCTYPE HTML

<!
DOCTYPE html>
<head>
<title>laptopBuyers.com</title>
<meta charset="utf-8">
<link rel="stylesheet" href="cs.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>
<nav>
<div class="logo">Laptop Buyers</div>
<ul>
<li><a class="active" href="Home">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallary</a></li>
<li><a href="#">Info</a></li>
</ul>
</nav>
<div class="main">

<div class="card">
<div class="image">
<img src="Acer1.jpg" alt="photo view here">
</div>
<div class="title">
<h3>Write Laptops Name Here:</h3>
</div>
<div class="discription">
<p>Price:.....</p>
<button>More..</button>
</div>
</div>

<div class="card">
<div class="image">
</div>
<div class="title">
<h3>Write Laptop Name Here...</h3>
</div>
<p>Price:....</p>
</div>
</div>

<div class="card">
<div class="image">
</div>
<div class="title">
<h3>Write Laptop Name Here</h3>
</div>
<p>Price:....</p>
</div>
</div>

<div class="card">
<div class="image">
</div>
<div class="title">
<h1>Write Laptop Name Here </h3>
</div>
<p>Price:....</p>
</div>
</div>

<div class="card">
<div class="image">
</div>
<div class="title">
<h3>Write Laptop name Here</h3>
</div>
<p>Price:....</p>
</div>
</div>

<div class="card">
<div class="image">
</div>
<div class="title">
</div>
<p>Price:.....</p>
</div>
</div>

<div class="card">
<div class="image">
</div>
<div class="title">
</div>
<p>Price:....</p>
</div>
</div>

<div class="card">
<div class="image">
</div>
<div class="title">
</div>
<p>Price:.....</p>
</div>
</div>

<footer id="footer">
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6">

<div class="footer-info">
<h3>laptop buyers</h3>
<p>
A108 Adam Street <br>
NY 535022, USA<br><br>
<strong>Phone:</strong>+91-------<br>
<strong>Email:</strong> laptopbuyers1234@gmail.com<br>
</p>
<div class="social-links mt-3">
<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
<a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
<a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
<a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 footer-links">

<h4>Useful Links</h4>
<ul>
<li><i class="bx bx-chevron-right"></i> <a href="#">Home</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">About us</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Services</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Terms of service</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Privacy policy</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-6 footer-newsletter">

<h4>Our Newsletter</h4>
<p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna</p>
<form action="" method="post">
<input type="email" name="email"><input type="submit" value="Subscribe">
</form>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
css code here.....
@import url('https://fonts.googleapis.com/css?faimly=poppins:400,500,600,700&display=swap');
*{
font-family: 'poppins',sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav{
height: 80px;
background-color:black;
display:flex;
align-items: center;
justify-content: space-between;
padding: 0px 50px 0px 100px;
}
nav div{
font-size: 33px;
color: aliceblue;
}
nav ul{
display: flex;
list-style: none;
nav ul li{
margin: 0 5px;
}
nav ul li a{
color:white;
text-decoration: none;
font-size: 18px;
font-weight: 500;
border-radius: 5px;
letter-spacing: 1px;
padding:8px 10px;
transition: all 0.3s ease;
}
nav ul li a:hover,
nav ul li a.active
{
background:rebeccapurple;
body{
font-family: Arial, Helvetica, sans-serif;
}
.main{
margin: 2px;
}
.card{
width: 20%;
display: inline-block;
box-shadow: 2px 2px 10px gray;
border-radius: 5px;
margin: 2%;
}
.image img{
width: 100%;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.title{
text-align: center;
padding: 10px;
}
h1{
font-size: 20px;
}
.discription{
padding: 3px;
text-align: center;
padding-top: 10px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
button{
margin-top: 40px;
margin-bottom: 10px;
background-color: white;
border: 1px solid black;
border-radius: 5px;
padding:10px;
}
.button:hover{
background-color: black;
color: white;
transition: .5s;
cursor:pointer;
}
# Footer
--------------------------------------------------------------*/
#footer {
background: black;
padding: 0 0 20px 0;
color: #fff;
font-size: 14px;
}
#footer .footer-top {
background: #0c1817;
border-bottom: 1px solid #18302c;
padding: 60px 0 30px 0;
}
#footer .footer-top .footer-info {

}
#footer .footer-top .footer-info h3 {

font-size: 50px;
margin: 0px 0 20px 25px;
padding: 2px 0 10px 0;
line-height: 1;
font-weight: 700;
text-align: center;
}
#footer .footer-top .footer-info p {

font-size: 14px;
line-height: 24px;
margin-bottom: 0;
font-family: "Raleway", sans-serif;
color: #fff;
text-align: center;
}
#footer .footer-top .social-links a {

font-size: 18px;
background: #1c3733;
color: #fff;
line-height: 1;
padding: 8px 0;
margin-right: 4px;
border-radius: 50%;
width: 36px;
height: 36px;
transition: 0.3s;
}
#footer .footer-top .social-links a:hover {

background: #1bac91;
color: #fff;
#footer .footer-top h4 {
font-size: 16px;
font-weight: 600;
color: #fff;
position: relative;
padding-bottom: 12px;
#footer .footer-top .footer-links {

text-align: center;
}
#footer .footer-top .footer-links ul {

list-style: none;
padding: 0;
margin: 0;
#footer .footer-top .footer-links ul i {

padding-right: 2px;
color: #4ae3c6;
font-size: 18px;
line-height: 1;
#footer .footer-top .footer-links ul li {

padding: 10px 0;
display: flex;
align-items: center;
}
#footer .footer-top .footer-links ul li:first-child {

padding-top: 0;
}
#footer .footer-top .footer-links ul a {

color: #fff;
transition: 0.3s;
line-height: 1;
}
#footer .footer-top .footer-links ul a:hover {
color: #34dfbf;
}
#footer .footer-top .footer-newsletter form {

margin-top: 30px;
background: #fff;
padding: 6px 10px;
position: relative;
border-radius: 4px 0 0 4px;
}
#footer .footer-top .footer-newsletter form input[type="email"] {

border: 0;
padding: 4px;
width: calc(100% - 110px);
}
#footer .footer-top .footer-newsletter form input[type="submit"] {

position: absolute;
top: 0;
right: -4px;
bottom: 0;
border: 0;
background: none;
font-size: 16px;
padding: 0 20px;
background: #1bac91;
color: #fff;
transition: 0.3s;
border-radius: 0 4px 4px 0;
}
#footer .footer-top .footer-newsletter form input[type="submit"]:hover {

background: #14806c;
}
footer .copyright {
text-align: center;
padding-top: 30px;
}
footer .credits {
padding-top: 10px;
text-align: center;
font-size: 13px;
color: #fff;
}

DOCTYPE HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

DOCTYPE HTML

Uploaded by

Copyright:

Available Formats

<!

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<img src="Acer1.jpg" alt="photo view here">

<div class="col-lg-3 col-md-6">

<div class="col-lg-2 col-md-6 footer-links">

<div class="col-lg-4 col-md-6 footer-newsletter">

css code here.....

#footer .footer-top .footer-info {

#footer .footer-top .footer-info h3 {

#footer .footer-top .footer-info p {

#footer .footer-top .social-links a {

#footer .footer-top .social-links a:hover {

#footer .footer-top .footer-links {

#footer .footer-top .footer-links ul {

#footer .footer-top .footer-links ul i {

#footer .footer-top .footer-links ul li {

#footer .footer-top .footer-links ul li:first-child {

#footer .footer-top .footer-links ul a {

#footer .footer-top .footer-newsletter form {

#footer .footer-top .footer-newsletter form input[type="email"] {

#footer .footer-top .footer-newsletter form input[type="submit"] {

#footer .footer-top .footer-newsletter form input[type="submit"]:hover {

You might also like