Wednesday, July 1, 2020

DEVELOP A BEAUTIFUL BAKERY SITE WITH HTML AND CSS

CREATE A BEAUTIFUL BAKERY SITE WITH HTML AND CSS





HTML

<!DOCTYPE html>

 <html>

 <head>

    <link rel="stylesheet" type="text/css" href="pics.css">

    <title>BAKERY TIMES</title>

 </head>
<body>
    <h1><a href="https://guidingpoint.blogspot.com/">BAKERY TIMES .......</a></h1>
<!-- Load icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

 <!-- The form -->
<form class="example" action="action_page.php">
  <input type="text" placeholder="Search.." name="search">
  <button type="submit"><i class="fa fa-search"></i></button>
</form>

    
<div class="row">
  <div class="column">
    <img src="pics/donut.jpg" >
      <img src="pics/m1.jfif" >
      <img src="pics/c2.jfif" >
  </div>
  <div class="column">
    <img src="pics/d1.jfif" >
      <img src="pics/c1.jfif" >
      <img src="pics/d6.jfif" >
  </div>
  <div class="column">
    <img src="pics/d2.jfif" >
      <img src="pics/m2.jfif" >
      <img src="pics/m3.jfif" >
     
  </div>
</div>
    
 </body>

 </html>
CSS CODE
}

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

 /* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}

 .row {
  display: flex;
}

 .column {
  flex: 33.33%;
  padding: 5px;
}
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

  body {

         background: white;

     }

    h1 {

         position: static;

         top: 40%;

         left: 40%;

        font-size: 40px;

         font-family: Arial, 

             Helvetica, sans-serif;

         text-align: center;

         background: linear-gradient(

             to right,yellow, blue,#f32170,

              #cf23cf, #eedd44);

         -webkit-text-fill-color: transparent;

         -webkit-background-clip: text;

     }
img {
    width: 95%;
}

 * {
  box-sizing: border-box;
}

 /* Style the search field */
form.example input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
}

 /* Style the submit button */
form.example button {
  float: left;
  width: 20%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none; /* Prevent double borders */
  cursor: pointer;
}

 form.example button:hover {
  background: #0b7dda;
}

 /* Clear floats */
form.example::after {
  content: "";
  clear: both;
  display: table;

}

posted by Vikas Singh @ July 01, 2020   0 Comments

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home