An advertisement for a food blog page made in HTML and CSS can be an effective way to attract new visitors and promote the content of the blog.
To create such an advertisement, you first need to plan the design and layout of the page. This can involve deciding on the size and placement of images and text, as well as the color scheme and font choices.
Once you have a design plan in place, you can create an HTML document to structure the content of the page. This might include headings, paragraphs, and images, as well as links to the food blog page and social media accounts associated with the blog.
Next, you can use CSS to style the page and make it visually appealing. This can include adding background images or colors, setting font sizes and colors, and adding borders or other decorative elements.
To make the advertisement more engaging and interactive, you can use CSS animations or transitions to add movement to certain elements of the page. For example, you might add a hover effect that enlarges the size of an image or changes its color when the user hovers over it with the cursor.
Finally, you can add any additional functionality to the advertisement using JavaScript, such as a form for users to sign up for a newsletter or a button to download a free recipe book.
Overall, creating an advertisement for a food blog page using HTML and CSS involves planning the design, structuring the content, styling the page, and adding interactive elements to engage the user and promote the content of the blog.
HTML CODE
<section>
<div class="cart animate__animated animate__lightSpeedInLeft">
<div class="icon icon1">
<ion-icon name="pizza-outline"></ion-icon>
<ion-icon name="share-social-outline"></ion-icon>
</div>
<div class="heading">
<h1>Types of Samosa</h1>
<p>Select your favrountie samosa dish</p>
<hr class="line1">
<hr class="line2">
<hr class="line3">
</div>
<div class="content">
<img src="oo.png">
<h2>Chinesr Samosa</h2>
<p>Chinesee samose a deep-fried snack prepared with homemade pastry sheets
and tasty noodles stuffing
</p>
<center><button>Abb to Dish <ion-icon name="pizza-outline"
style="transform: rotate(180deg);"></ion-icon></button></center>
</div>
<div class="icons">
<ion-icon name="home-outline"></ion-icon>
<ion-icon name="search-outline"></ion-icon>
<ion-icon name="person-outline"></ion-icon>
</div>
</div>
<div class="cart animate__animated animate__lightSpeedInRight">
<div class="icon">
<ion-icon name="chevron-back-outline" style="transform: rotate(0deg);"></ion-icon>
<ion-icon name="share-social-outline"></ion-icon>
</div>
<div class="img">
<img src="oo.png" alt="">
</div>
<div class="text">
<h4>Spicy</h4>
<h2>Chinese Samosa</h2>
<p>Chinesee samose a deep-fried snack prepared with
homemade pastry sheets and tasty noodles stuffing</p>
<h3>$180/-</h3>
<center> <button>Abb to Dish <ion-icon name="pizza-outline"
style="transform: rotate(180deg);"></ion-icon></button></center>
</div>
</div>
</section>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
CSS CODE
* {
margin: 0;
padding: 0;
font-family: arial;
text-decoration: none;
border: none;
transition: .6s;
}
Section {
width: 100%;
height: 100vh;
background-image: url(backuu.png);
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.cart {
width: 300px;
height: 600px;
backdrop-filter: blur(10px);
border-radius: 40px;
background: rgb(0, 0, 0, 0.2);
margin: 50px;
}
.cart:nth-child(1) {
position: relative;
top: -20px;
z-index: 99999;
}
.cart:nth-child(2) {
position: relative;
top: 20px;
cursor: pointer;
}
.icon {
width: 100%;
height: 50px;
/* background-color: rgba(192, 129, 46, 0.432); */
border-radius: 40px;
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 10px;
}
.icon ion-icon {
font-size: 20px;
color: white;
opacity: .5;
text-decoration-style: bold;
cursor: pointer;
}
.icon ion-icon:nth-child(1) {
transform: rotate(180deg);
margin-left: -30px;
}
.icon ion-icon:nth-child(2) {
transform: rotate(180deg);
margin-left: 90px;
margin-right: -20px;
}
.icon ion-icon:hover {
opacity: 1;
}
.icon1 ion-icon {
opacity: 1;
z-index: 9999999;
}
.heading {
width: 100%;
height: 100px;
/* background-color: rgba(0, 255, 255, 0.432); */
color: white;
}
.heading h1 {
opacity: .8;
padding: 10px 0 0 20px;
}
.heading p {
opacity: .3;
padding: 5px 0 0 20px;
}
hr {
width: 10%;
/* height: 5px; */
border: 3px solid #b16e37;
float: left;
margin-left: 3px;
margin-top: 10px;
border-radius: 10px;
opacity: .4;
}
.line1 {
width: 20%;
margin-left: 25px;
}
.line2,
.line3 {
border: 3px solid white;
}
.content {
width: 80%;
height: 350px;
/* background-color: #b16e37; */
backdrop-filter: blur(20px);
position: relative;
left: 30px;
border-radius: 20px;
}
.content img {
width: 300px;
height: 300px;
position: relative;
left: -40px;
top: -60px;
}
.content h2 {
color: white;
position: absolute;
top: 170px;
opacity: .8;
padding-left: 10px;
}
.content p {
font-size: 15px;
text-align: left;
color: white;
position: relative;
top: -100px;
opacity: .3;
padding-left: 10px;
}
.content button {
width: 90%;
height: 50px;
position: relative;
top: -90px;
border-radius: 50px;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 18px;
color: white;
background: #b16e37;
opacity: .5;
cursor: pointer;
}
.content button ion-icon {
font-size: 20px;
}
.content button:hover {
opacity: 1;
}
.icons {
width: 90%;
height: 70px;
backdrop-filter: blur(20px);
border-radius: 40px;
position: relative;
left: 15px;
top: 10px;
display: flex;
justify-content: space-around;
align-items: center;
}
.icons ion-icon {
font-size: 30px;
color: white;
cursor: pointer;
opacity: .3;
cursor: pointer;
}
.icons ion-icon:hover {
opacity: 1;
}
.img {
width: 100%;
height: 400px;
/* background-color: rgba(0, 0, 255, 0.164); */
}
.img img {
width: 1000px;
height: 200%;
position: relative;
top: -180px;
left: -370px;
}
.text {
width: 90%;
height: 350px;
backdrop-filter: blur(20px);
border-radius: 40px;
position: relative;
top: -220px;
left: 15px;
color: white;
}
.text h4 {
font-size: 20px;
font-weight: 200;
opacity: .5;
padding: 10px 0 0 20px;
}
.text h2 {
font-size: 35px;
padding: 10px 0 0 20px;
opacity: .8;
}
.text p {
font-size: 20px;
opacity: .3;
padding: 10px 0 0 20px;
}
.text h3 {
padding: 10px 0 0 20px;
font-size: 20px;
opacity: .8;
}
.text button {
width: 90%;
height: 60px;
position: relative;
top: 20px;
border-radius: 50px;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 18px;
color: white;
background: #b16e37;
opacity: .5;
cursor: pointer;
}
.text button:hover {
opacity: 1;
}
Comments
Post a Comment