CODE
<html>
<head>
<title>Navigation</title>
<style>
body{
padding: o;
margin: 0px;
font-family:Georgia, 'Times New Roman', Times, serif
}
.topnav{
background-color: #18222b;
overflow: hidden;
}
.topnav a{
color: aliceblue;
display: block;
padding: 14px 16px;
float: left;
text-decoration: none;
text-align: center;
}
.active{
background-color: #009dce;
}
.topnav a:hover:not(.active){
background-color:#34495e;
}
.right{
float:right !important;
background-color: #009dce;
}
</style>
</head>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
font-family: arial;
}
.main{
margin: 2%;
}
.card{
width: 20%;
display: inline-block;
box-shadow: 2px 2px 20px black;
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;
}
.des{
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;
cursor: pointer;
}
button:hover{
background-color: black;
color: white;
transition: .5s;
cursor: pointer;
}
.more {
display: none; }
.text.show-more .more{
display:inline;
}
</style>
<body>
<div Class= "topnav">
<a class ="active" href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a class="right" href="#">Login</a>
</div>
<div class="main">
<!--cards -->
<div class="card">
<div class="image">
<img src="https://cdn.pixabay.com/photo/2018/01/09/03/49/the-natural-scenery-3070808_1280.jpg">
</div>
<div class="title">
<h1>
WALLPAPER</h1>
</div>
<div class="des">
<p>Wallpaper is a material used in interior decoration to decorate the interior <Span Class="dots">...<span class="more"> morals of domestic and public buildings. ... Wallpaper printing techniques include surface printing, gravure printing, silk screen-printing, rotary printing, and digital printing. Wallpaper is made in long rolls which are hung vertically on a wall.</span></p>
<button> Read More </button>
</div>
</div>
<!--cards -->
<div class="card">
<div class="image">
<img src="https://cdn.pixabay.com/photo/2015/11/07/11/41/lake-1031405_1280.jpg">
</div>
<div class="title">
<h1>
WALLPAPER</h1>
</div>
<div class="des">
<p>Wallpaper is a material used in interior decoration to decorate the interior <Span Class="dots">...<span class="more"> morals of domestic and public buildings. ... Wallpaper printing techniques include surface printing, gravure printing, silk screen-printing, rotary printing, and digital printing. Wallpaper is made in long rolls which are hung vertically on a wall.</span></p></p>
<button>Read More...</button>
</div>
</div>
<!--cards -->
<div class="card">
<div class="image">
<img src="https://cdn.pixabay.com/photo/2018/01/09/03/49/the-natural-scenery-3070808_1280.jpg">
</div>
<div class="title">
<h1>
WALLPAPER</h1>
</div>
<div class="des">
<p>Wallpaper is a material used in interior decoration to decorate the interior <Span Class="dots">...<span class="more"> morals of domestic and public buildings. ... Wallpaper printing techniques include surface printing, gravure printing, silk screen-printing, rotary printing, and digital printing. Wallpaper is made in long rolls which are hung vertically on a wall.</span></p></p>
<button>Read More...</button>
</div>
</div>
<!--cards -->
<div class="card">
<div class="image">
<img src="https://cdn.pixabay.com/photo/2018/01/09/03/49/the-natural-scenery-3070808_1280.jpg">
</div>
<div class="title">
<h1>
WALLPAPER</h1>
</div>
<div class="des">
<p>Wallpaper is a material used in interior decoration to decorate the interior <Span Class="dots">...<span class="more"> morals of domestic and public buildings. ... Wallpaper printing techniques include surface printing, gravure printing, silk screen-printing, rotary printing, and digital printing. Wallpaper is made in long rolls which are hung vertically on a wall.</span></p></p>
<button>Read More...</button>
</div>
</div>
<!--cards -->
<div class="card">
<div class="image">
<img src="https://cdn.pixabay.com/photo/2018/01/09/03/49/the-natural-scenery-3070808_1280.jpg">
</div>
<div class="title">
<h1>
WALLPAPER</h1>
</div>
<div class="des">
<p>Wallpaper is a material used in interior decoration to decorate the interior <Span Class="dots">...<span class="more"> morals of domestic and public buildings. ... Wallpaper printing techniques include surface printing, gravure printing, silk screen-printing, rotary printing, and digital printing. Wallpaper is made in long rolls which are hung vertically on a wall.</span></p></p>
<button>Read More...</button>
</div>
</div>
<!--cards -->
<div class="card">
<div class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Gfp-missouri-st-louis-clubhouse-pond-and-scenery.jpg/1199px-Gfp-missouri-st-louis-clubhouse-pond-and-scenery.jpg">
</div>
<div class="title">
<h1>
WALLPAPER</h1>
</div>
<div class="des">
<p>Wallpaper is a material used in interior decoration to decorate the interior <Span Class="dots">...<span class="more"> morals of domestic and public buildings. ... Wallpaper printing techniques include surface printing, gravure printing, silk screen-printing, rotary printing, and digital printing. Wallpaper is made in long rolls which are hung vertically on a wall.</span></p></p>
<button>Read More...</button>
</div>
</div>
<!--cards -->
<div class="card">
<div class="image">
<img src="https://cdn.pixabay.com/photo/2018/01/09/03/49/the-natural-scenery-3070808_1280.jpg">
</div>
<div class="title">
<h1>
WALLPAPER</h1>
</div>
<div class="des">
<p>You can Add Desccription Here...</p>
<button>Read More...</button>
</div>
</div>
<!--cards -->
<div class="card">
<div class="image">
<img src="https://cdn.pixabay.com/photo/2015/11/07/11/41/lake-1031405_1280.jpg">
</div>
<div class="title">
<h1>
WALLPAPER</h1>
</div>
<div class="des">
<p>Wallpaper is a material used in interior decoration to decorate the interior <Span Class="dots">...<span class="more"> morals of domestic and public buildings. ... Wallpaper printing techniques include surface printing, gravure printing, silk screen-printing, rotary printing, and digital printing. Wallpaper is made in long rolls which are hung vertically on a wall.</span></p></p>
<button>Read More...</button>
</div>
</div>
</div>
</body>
</html>
0 Comments