html card design source code

preview

source code html

  
  
<!DOCTYPE html>
<html>
    <head>
        <title>Hello css</title>
        <link rel="stylesheet" href="style.css"> 
    <body>

        <div class="flex_container">

          <div class="flex-item-left">Home</div>
          <div class="flex-item-left">About us</div>
          <div class="flex-item-left">Help</div>
          <div class="flex-item-left">Login</div>
          <div class="flex-item-left">Profile</div>

        </div>

        <div class="row">

            <div class="column">
                <img src="img/1.jpg" alt="1.jpg" width="100%">
            </div>
            <div class="column">
                <img src="img/2.jpg" alt="1.jpg" width="100%">
            </div>
            <div class="column">
                <img src="img/3.jpg" alt="1.jpg" width="100%">
            </div>

        </div>

       
  
       <section class="container">
        <div class="card">
            <div class="card-image img-1"></div>
            <h2>Title</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                
            <a href="">read more</a>
        </div>
        <div class="card">
            <div class="card-image img-2"></div>
            <h2>Title</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                
            <a href="">read more</a>
        </div>
        <div class="card">
            <div class="card-image img-3"></div>
            <h2>Title</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                
            <a href="">read more</a>
        </div>
        <div class="card">
            <div class="card-image img-4"></div>
            <h2>Title</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
             and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
             
             <a href="">read more</a>

        </div>
       
    </section>



          

<!-- 
        <div class="header"><h1>Hello world</h1></div>
        <div class="twitter">
            <img src="web.jpg" alt="Trulli" class="img"><br>
            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p class="parab">Pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Adipiscing enim eu turpis egestas pretium. At auctor urna nunc id cursus metus. Fermentum dui faucibus in ornare quam viverra. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Diam maecenas sed enim ut sem viverra aliquet. Dui ut ornare lectus sit amet est. Viverra adipiscing at in tellus. Est placerat in egestas erat imperdiet sed euismod nisi porta. Non tellus orci ac auctor augue mauris augue.</p>
        </div>
        
        <div class="button"><button>submit</button></div> --> 

    </body>
</html>

source code css

  
  .header{
    margin-top: 34px;
    margin-left: 498px;
    margin-bottom: 34px;

}
body{
    background-image: url(img/nature.jpeg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/* .twitter{
    background-color: bisque;
     color: rgb(184, 235, 151);
     text-align: center;
     width: 749px;
     height: 568px;
     margin-top: 55px;
     margin-left: 250px;
     border: 3px solid #af8631;
 } */
/* 
 .img{
    width:532px;
    height:301px;
    margin-top:1px;
    margin-left:-219px;
    
 } */

 /* .para{
    font-size: medium;
    background-color:#212426;
    text-align: justify;
 }
 .parab{
    font-size: medium;
    background-color:#18201e;
    text-align: justify;
 } */

 /* .button{
    margin-left:1055px;
    margin-top:-156px;
 } */
 .flex_container{

    display: flex;
    justify-content: center;
    font-size: 20px;
    font-family: monospace;
    width: 100%;
    height: 40px;
    color: aliceblue;
     background-color: #2c2e3044;
     border-radius: 20px;
     

    /* left: 20px; */


 }
 .flex-item-left{
    padding: 15px 11px 22px 2px;
    margin-left: 5%;
    width: 102px;
    height: 10px;
    font-weight: 50;
    


 }
 .flex-item-left:hover{

    /* background-color:rgb(236, 209, 209); */
    padding: 10px 15px 21px 24px;
    cursor: pointer;
    border-radius: 2px;
    color:aqua;
    font-style: italic;
    font-weight: 100;
    
    
 }
 .row{

    display: table;


 }
 .column{
    width: 32%;
    /* top: 20px; */
    float: left;
    padding-top: 17px;
    padding-left: 20px;
    
   
}
.column:hover{
    cursor: pointer;
    width:31%;
   
}
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
.container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    
}
.card{
    background: #fff;
    width: 270px;
    height: 520px;
    margin-left: 15px;
    margin-top: 20px;
    margin-right: 15px;
   /* overflow: scroll; */
    
}
.card:hover{
    background-color: #1d1e1f91;
    color: #fff;
    cursor: pointer;
}
.card-image{
    height: 150px;
    background-color: aqua;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* background-attachment: fixed; */
    
}
.img-1{

    background-image: url(img/1.jpg);

}
.img-2{
    background-image: url(img/2.jpg);
}
.img-3{
    background-image: url(img/3.jpg);
}
.img-4{
    background-image: url(img/1.jpg);
}
.card a{

    background-color: black;
    padding:15px 20px;
    color: #fff;
    display: block;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    margin: 20px 50px;

}
.card h2{

    padding: 20px;
    font-family:"Amatic SC", sans-serif;;

}
.card p{

    font-family: "Amatic SC", sans-serif;
    padding: 10px;

}

html card design source code

Posted by Chathuranga Ranasinghe

Post a Comment

0 Comments

Our E-books

C programming for beginner

Contact Us

Most Popular

Subscribe Us

Facebook

Tags

Categories

Search This Blog

Report Abuse

Followers

Labels

Popular Posts

Footer Menu Widget

Contact form

html card design source code

Posted by Chathuranga Ranasinghe

You may like these posts

Post a Comment

0 Comments

Our E-books

C programming for beginner

Contact Us

Most Popular

Subscribe Us

Facebook

Tags

Categories

Search This Blog

Report Abuse

Followers

Labels

Popular Posts

Footer Menu Widget

Contact form