The Combine Website of all Practicals till 1 to 15 will upload Soon !!!
Practical 6
A Website Using Semantic Tags.
Copied!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zakir Vlogs</title>
<style>
.title {
padding: 15px;
font-size: 25px;
text-align: center;
background: rgb(123, 185, 126);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.articles{
margin: 0;
padding: 5px;
background-color: #016A70;
}
.article-blog > h1, .article-blog {
margin: 10px;
padding: 5px;
}
.article-blog {
background-color: #FFFFDD;
}
.article-blog > h2, p {
margin: 4px;
font-size: 90%;
}
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
border: 1px solid black;
background-color: #D2DE32;
}
footer {
text-align: center;
padding: 3px;
background-color: #A2C579;
color: white;
}
</style>
</head>
<body>
<main>
<div class="title">
<h2>Zakir Vlogs</h2>
</div>
<header>
<article class="articles">
<h1 style="color: aliceblue;">The Places That I Visited</h1>
<article class="article-blog">
<h2>Mumbai</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab voluptates reprehenderit
magnam rerum doloremque inventore saepe ullam, dolore, laboriosam, debitis at amet ea non.
Omnis reiciendis quod excepturi eos minima.</p>
</article>
<aside>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos quos odio
enim, rem voluptatum suscipit dolor maxime. Tempore sint beatae non modi repellat quia omnis id
consequuntur incidunt? Dolore tempora porro laudantium! Commodi, numquam minima doloribus
repudiandae cum deleniti?<br>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat architecto magni
necessitatibus accusantium esse eius voluptates repudiandae non accusamus impedit amet rem,
voluptatibus iste sint, officiis, minus perspiciatis doloribus quidem in saepe beatae asperiores
ducimus? Vero sint, nisi facilis ut esse corrupti magnam ducimus expedita, ipsam id sequi, quo
officia.</p>
</aside>
<article class="article-blog">
<h2>Pune</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi exercitationem esse
reprehenderit cupiditate aut rerum similique obcaecati harum, distinctio autem incidunt suscipit
sapiente ratione, nesciunt eos dolores alias debitis veniam.</p>
<h1>A Fountain in Tamil Nadu</h1>
<figure>
<img
src="https://t3.ftcdn.net/jpg/00/99/82/24/360_F_99822404_SjZn707wcVwunrEkih0Vr2yW9KFn4GJ
N.jpg" alt="Trulli" style="width:400px" height="300px">
<figcaption>Img.1 - Ooty, Nilgiris, Tamil Nadu</figcaption>
</figure>
</article>
<article class="article-blog">
<h2>Tamil Nadu</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat, molestias! In ex fugit
delectus! Aperiam cumque nemo fuga laboriosam, reprehenderit veniam saepe? In consequuntur
reiciendis eligendi repellat, iure obcaecati quos?</p>
<mark>Zakir:</mark> Welcomes you to
<mark style="background-color: green; color: white;">
My Bloging Website
</mark> Copyright Claim @ 2006
</p>
</article>
<details>
<summary style="color: aliceblue;">Social Links</summary>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam aliquid cumque ab
rem, vitae eveniet nesciunt provident, tempora animi similique perspiciatis repellat, inventore non
officia. Modi repellat necessitatibus sunt sapiente!
</p>
</details>
</article>
</header>
<footer>
<p>Author: Zakir Hussain<br>
<a href="mailto:hege@example.com">CodeVerse.com</a></p>
</footer>
</main>
</body>
</html>