card making using of HTML and CSS

 HTML CODE 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>card </title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div >

        <img src="https://thumbs.dreamstime.com/b/little-boy-old-boat-calm-lake-

         surface-57609073.jpg" alt="image" >

        <pre>Nature     Lake</pre>

        <h1>Lago di Braies</h1>

        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa, 

         accusantium quas perferendis reprehenderit illo dicta 

         eveniet id qui debitis quis facere iste dolorem.</p>

        <button ><a href="#read more">Read More</a></button>

    </div>

</body>

</html>


CSS CODE

*{

    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 

'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}

div{

    height: 500px;

    width: 350px;

    border: 2px solid black;

    border-radius: 10px;

    margin: auto;

}

img{

    width: 330px;

    align-self: auto;

    text-align: center;

    margin-top: 8px;

    border-radius: 10px;

    margin-left: 10px;


}

pre{

    padding-left: 15px;

    color:rgb(66, 60, 60);

    font-size: 14;

}

p{

    font-size: 16px;

    padding-left: 10px;

}

h1{

    padding-left: 10px;

    margin-top: 2px;

    font-size: 30px;

}

button{

   margin-left: 120px;

   background-color: rgb(164, 164, 241);

   border-radius: 10px;

   color: blue;

   border:none;

   text-decoration: none;

}

OUTPUT:



Comments

Post a Comment

Popular posts from this blog

Machine Learning

Machine Learning What is machine learning ?     Machine learning is a subset of Artificial intellegent, we make a algorithms or models that can make predection or decision  on dataset.   There are mainly three types of machine learning  *Supervised learning *Unsupervised learning *Reinforcement learning Life cycle of building model *Problem Definition *Data collection *Data Preprocessing *Model selection *Model traning    *Model evaluation *Model Tuning *Model deployment *Monitoring and Maintenance *Feedback and Iteration
Read more

html and css

  <! DOCTYPE html > < html lang = "en" > < head >     < title > practice set 1 </ title > < link rel = "stylesheet" href = "style.css" > </ head > < body >     <!-- <div id="box"> my name is ibrahim kahell and i am in the college of dacg poletechenic and i am good student and toper of the class -->     <!-- </div> -->     < h1 class = "heading" > heading a </ h1 >     < h2 class = "heading" > heading b </ h2 >     < h3 class = "heading" > heading c </ h3 > < button style = "background-color:blue;" > click </ button >     </ body > </ html > css script button {     background-color : green ; <! DOCTYPE html > < html lang = "eng" >     < head >         < title > portfilo </ title >       ...
Read more