HTML BASIC ASSIGNMENT
HTML ASSIGNMENT
HTML BASIC ASSIGNMENT THEORY
<!DOCTYPE html>
<html>
<head>
<title>HTML Basic Assignment Theory</title>
<style type="text/css">
.abc{
width: 850px;
margin-top: 10px;
margin-left: 100px;
}
li{
color: darkblue;
font-size: 24px;
margin-left: 40px;
}
.a{
color: green;
list-style-type: none;
font-size: 20px;
margin-left: 20px;
}
table,tr,td{
border: 1px solid gray;
border-collapse: collapse;
width: 600px;
height: 40px;
margin-left: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="abc">
<h1>1. HTML BASIC ASSIGNMENT THEORY</h1>
<h2>SHORT QUESTION:</h2>
<ol>
<!-- Question 1 -->
<li>What is the root element (ie. the first tag) of every html page? Doctype</li>
<dl class="a">
<dt>Ans:</dt>
<dd style="color: black;">All HTML documents must start with a document type declaration: <!DOCTYPE html>.<br>
The HTML document itself begins with <html> and ends with </html>.<br>
The visible part of the HTML document is between <body> and </body>.
<br><br>
<!DOCTYPE html><br>
<html><br>
<head><br>
<title></title><br>
</head><br>
<body>
<br>
</body>
</html>
<br>
</dd>
</dl>
<!-- Question 2 -->
<li>Where does the text inside the <title> element appear in a browser? The text will be displayed in the main web browser window, just on the
top bar</li>
<dl class="a">
<dt>Ans:</dt>
<dd style="color: black;">The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab. The <title> tag is required in HTML documents!. The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.<br>
The <title> element:
<ul>
<li style="color: black;">defines a title in the browser toolbar</li>
<li style="color: black;">provides a title for the page when it is added to favorites</li>
<li style="color: black;">displays a title for the page in search-engine results</li>
</ul>
<table style="margin-top: 10px;">
<h3>Browser Support</h3>
<tr>
<td>Element</td>
<td><img src="https://www.w3schools.com/images/compatible_chrome.gif"></td>
<td><img src="https://www.w3schools.com/images/compatible_edge.gif"></td>
<td><img src="https://www.w3schools.com/images/compatible_firefox.png"></td>
<td><img src="https://www.w3schools.com/images/compatible_safari.gif"></td>
<td><img src="https://www.w3schools.com/images/compatible_opera.gif"></td>
</tr>
<tr>
<td><title></td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</table>
</dd>
</dl>
<!-- Question 3 -->
<li>Describe one benefit of separating your content (the information of your
page) and your presentation (the way your page is displayed in the
browser).</li>
<dl class="a">
<dt>Ans:</dt>
<dd style="color: black;">Separation of content and presentation (or separation of content and style) is the separation of concerns design principle as applied to the authoring and presentation of content. Under this principle, visual and design aspects (presentation and style) are separated from the core material and structure (content) of a document.
<br>
Similar to the case with HTML and CSS, the separation between content and style also allows a document to be quickly reformatted for different purposes, or a style to be re-purposed across multiple documents as well.
<br>
It is also possible to use HTML content in very different contexts. For example, the EPUB format for ebooks is basically HTML+CSS wrapped up in a ZIP file. Having content and not styling information in HTML makes it easy to convert content to an ebook format, even though the way the reader interacts with it is very different (turning pages instead of scrolling, different shaped screen, maybe no colour, etc.).
</dd>
</dl>
<!-- Question 4 -->
<li>Identify two attributes of the <img> element and explain what they are used for. Width and height</li>
<dl class="a">
<dt>Ans:</dt>
<dd style="color: black;">
1. The width attribute specifies the width of an image, in pixels.
<br><br>
2. The height attribute specifies the height of an image, in pixels.
<br><br>
<img src=" image-name.jpg " width="500" height="600"><br><br>
<b>Tip:</b> Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).
</dd>
</dl>
<!-- Question 5 -->
<li>Identify the html element that contains everything that is displayed in your actual browser window. Html</li>
<dl class="a">
<dt>Ans:</dt>
<dd style="color: black;">1. The <body> tag defines the document's body.
<br><br>
2. The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
<br><br>
<b>Note:</b> There can only be one <body> element in an HTML document.
</dd>
</dl>
<!-- Question 6 -->
<li>Write the HTML to create a paragraph with the following text: Price - €8.95 (you might need to reference the HTML Cheat Sheet)</li>
<dl class="a">
<dt>Ans:</dt>
<dd style="color: black;"><br>
<!DOCTYPE html><br>
<html><br>
<head><br>
<title>Paragraph</title><br>
</head><br>
<body><br>
<p><b>Price</b>- €8.95</p><br>
</body><br>
</html><br><br>
</dd>
</dl>
<!-- Question 7 -->
<li>Write the anchor tag required to link from the page links.html to the page contact.html when the files are organised as follows:
<ol type="a">
<!-- Question 7a -->
<li>Both in the same folder</li>
<dl class="a">
<dt>Ans:</dt>
<dd style="color: black;"><br>
<a href="file:///D:/new/contact.html"></a><br></dd>
</dl>
<!-- Question 7b -->
<li>the contact.html page is located in a subfolder called "contactfiles"</li>
<dl class="a">
<dt>Ans:</dt>
<dd style="color: black;"><br>
<a href="file:///D:/new/contactfiles/contact.html"></a><br></dd>
</dl>
<!-- Question 7c -->
<li>the links.html page is located in a subfolder called "otherfiles"</li>
<dl class="a">
<dt>Ans:</dt>
<dd style="color: black;"><br>
<a href="file:///D:/new/otherfiles/links.html"></a><br></dd>
</dl>
</ol>
</li>
<!-- Question 8 -->
<li>If you have a div on your page such as <div id="contactus">, write the anchor link required to scroll your page directly to the Contact Us information.</li>
<dl class="a">
<dt>Ans:</dt>
<dd style="color: black;">
<div id="contactus"><a href="file:///D:/new/contactus.html">Contact Us Information</a></div>
</dd>
</dl>
<!-- Question 9 -->
<li>What does HTML stand for?</li>
<dl class="a">
<dt>Ans:</dt>
<dd style="color: black;">HTML stands for <b>Hyper Text Markup Language</b>. HTML is the standard markup language for creating Web pages.</dd>
</dl>
<!-- Question 10 -->
<li>Identify two HTML elements that you can use inside the <head> element and describe what they're used for.</li>
<dl class="a">
<dt>Ans:</dt>
<dd style="color: black;"><br>
The HTML <head> element is a container for the following elements: <br>
<title>, <style>, <meta>, <link>, <script>, and <base>.<br><br>
The <title< element defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.<br><br>
The <style< tag is used to define style information (CSS) for a document.
</dd>
</dl>
<!-- Question 11 -->
<li>Every element has an opening and closing tag. For example, <p>...</p>. Identify two HTML elements that combine the opening and closing tag into one single tag.</li>
<dl class="a">
<dt>Ans:</dt>
<dd style="color: black;"><br>
The <br> tag inserts a single line break.<br><br>
The <img> tag is used to embed an image in an HTML page.<br><br>
The <input> tag specifies an input field where the user can enter data.<br><br>
</dd>
</dl>
<!-- Question 12 -->
<li>Identify the HTML element that is used to create divisions or sections within your page.</li>
<dl class="a">
<dt>Ans:</dt>
<dd style="color: black;">
HTML has several semantic elements that define the different parts of a web page:<br><br>
<header> - Defines a header for a document or a section <br>
<nav> - Defines a set of navigation links <br>
<section> - Defines a section in a document <br>
<article> - Defines an independent, self-contained content <br>
<aside> - Defines content aside from the content (like a sidebar) <br>
<footer> - Defines a footer for a document or a section <br>
<details> - Defines additional details that the user can open and close on demand <br>
<summary> - Defines a heading for the <details> element <br>
</dd>
</dl>
<!-- Question 13 -->
<li>Explain 3 reasons why HTML tables should be used for tabular data and not for laying out a page.</li>
<dl class="a">
<dt>Ans:</dt>
<dd style="color: black;">
A. Tables shouldn't be used for page layouts because they are:<br><br>
1. Slow to render as the browser needs to download most - if not all - of the table to render it properly. <br>
2. They require more HTML than non-table layouts which means slower loading and rendering, as well as an increased bandwidth usage. <br>
3. They can be a nightmare to maintain as they can quickly get complex. <br>
4. They can break text copying. <br>
5. They negatively affect screen readers and may make your content inaccessible to some users. <br>
6. They are not as flexible as using proper semantic markup. <br>
7. They were never intended to be used for page layouts. <br>
8. Making tables into a responsive layout is very difficult to control.
</dd>
</dl>
<!-- Question 14 -->
<li>List the HTML elements that you need to create a table and explain how each element is used.</li>
<dl class="a">
<dt>Ans:</dt>
<dd style="color: black;">
The <table> tag defines an HTML table. <br><br>
Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag.<br>
Each table data/cell is defined with a <td> tag. <br>
By default, the text in <th> elements are bold and centered. <br>
By default, the text in <td> elements are regular and left-aligned.
</dd>
</dl>
<!-- Question 15 -->
<li>Explain why a DOC TYPE is a useful thing to include in a web page.</li>
<dl class="a">
<dt>Ans:</dt>
<dd style="color: black;">The very first line in every web document should contain a <!DOCTYPE html> declaration. Even though it's wrapped in angle brackets, it is not a tag but a statement. <br>
Doctype stands for <b>Document Type Declaration</b>. It informs the web browser about the type and version of HTML used in building the web document. This helps the browser to handle and load it properly. <br><br>
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly. <br>
The <!DOCTYPE> declaration is not case sensitive. <br>
The <!DOCTYPE> declaration for HTML5 is: <br><br>
<!DOCTYPE html>
</dd>
</dl>
<!-- Question 16 -->
<li>Identify two different DOC TYPE and explain why you would use one over the other.</li>
<dl class="a">
<dt>Ans:</dt>
<dd style="color: black;">
The doctype is used for two things, by different kinds of software: <br><br>
1. Web browsers use it to determine which rendering mode they should use (more on rendering modes later). <br>
2. Markup validators look at the doctype to determine which rules they should check the document against (more on that later as well).
</dd>
</dl>
<!-- Question 17 -->
<li>Explain the difference between the alt attribute and the title attribute?</li>
<dl class="a">
<dt>Ans:</dt>
<dd style="color: black;">
When to use ALT text? <br><br>
It is good practice to use it all the time for each image on your website. In case the image is also the link, the ALT text is even more important, because it represents anchor text. <br>
<b>Note:</b> You don’t have to use it in case of images that are for decoration (for example, the background image), which should be in CSS. <br><br>
When to use Title text? <br><br>
This text doesn’t serve search engines as much as it serves your users. If they see an image or a photo on your website that needs further explanation, they can easily hover over it, and they will see the description right away. <br>
The title text is usually more descriptive than the ALT text, and it describes mostly what is unclear at first glance. Users, unlike search engines, can understand the image. So don’t use Title text unless it is essential.
</dd>
</dl>
</ol>
</div>
</body>
</html>
HTML BASIC ASSIGNMENT PRACTICAL
1 HOME:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<style type="text/css">
body{
width: 1330px;
height: 1600px;
background-color: none;
}
.ab1{
width: 1330spx;
height: 40px;
background-color: white;
margin-top: -8px;
margin-left: 0px;
}
.ab2{
width: 500px;
height: 20px;
background-color: none;
margin-top: -50px;
margin-left: 730px;
}
.link1{
list-style-type: none;
padding: 3px;
overflow: hidden;
}
.link2{
float: left;
}
.link2 a{
display: inline-block;
color: gray;
font-size: 14px;
text-align: left;
padding: 0px 14px;
text-decoration: none;
}
.link3 a{
border-right: 1px solid black;
}
.link2:hover{
background-color: none;
text-decoration: none;
}
.link2:hover > a{
color: black;
}
a{
text-decoration: none;
}
.ab3{
width: 1330px;
height: 300px;
background-color: rgb(226,226,226);
margin-top: 14px;
}
.ab4{
width: 320px;
height: 60px;
background-color: none;
font-size: 75px;
margin-top: -265px;
margin-left: 170px;
}
.ab5{
margin-left: 165px;
margin-top: 15px;
}
.img1{
margin-left: 700px;
margin-top: -65px;
}
.ab6{
background-color: rgb(51,51,51);
width: 985px;
height: 65px;
margin-left: 170px;
margin-top: 20px;
}
.ab7{
width: 985px;
height: 65px;
background-color: none;
margin-left: 150px;
padding-top: 3px;
}
.link4{
list-style-type: none;
padding: 3px;
overflow: hidden;
}
.link5{
float: left;
}
.link5 a{
display: inline-block;
color: white;
font-size: 20px;
text-align: left;
padding: 0px 10px;
text-decoration: none;
}
.link6 a{
border-right: 1px solid black;
}
.link5:hover{
background-color: none;
text-decoration: none;
}
.link5:hover > a{
color: none;
}
a{
text-decoration: none;
}
.ab8{
background-color: white;
width: 985px;
height: 1400px;
margin-left: 170px;
}
.ab9{
background-color: none;
width: 945px;
height: 125px;
margin-left: 187px;
margin-top: -1370px;
}
.ab10{
background-color: none;
width: 305px;
height: 18px;
margin-left: 170px;
margin-top: 30px;
font-size: 18px;
}
.ab11{
background-color: lightgray;
width: 350px;
height: 18px;
margin-left: 475px;
margin-top: -18px;
}
.ab12{
background-color: none;
width: 135px;
height: 18px;
margin-left: 850px;
margin-top: -18px;
}
.ab13{
background-color: lightgray;
width: 155px;
height: 18px;
margin-left: 1000px;
margin-top: -18px;
}
.ab14{
width: 80px;
height: 18px;
margin-left: 180px;
margin-top: 30px;
}
.ab15{
width: 500px;
height: 20px;
background-color: none;
margin-top: -35px;
margin-left: 370px;
}
.link7{
list-style-type: none;
padding: 1px;
overflow: hidden;
}
.link8{
float: left;
}
.link8 a{
display: inline-block;
font-size: 16px;
text-align: left;
padding: 0px 6px;
text-decoration: none;
}
.link9 a{
border-right: 1px solid black;
}
.link9a a{
border-left: 1px solid black;
}
.link8:hover{
background-color: none;
text-decoration: none;
}
.link8:hover > a{
}
a{
text-decoration: none;
}
.ab16{
width: 80px;
height: 18px;
margin-left: 768px;
margin-top: -18px;
}
.ab17{
margin-left: 855px;
margin-top: -18px;
}
/* image-1 hover*/
.ab18{
margin-left: 180px;
margin-top: -200px;
}
.ab18:hover .image1{
opacity: 0.3;
}
.ab18:hover .middle{
opacity: 1;
}
.image1{
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle{
transition: .5s ease;
opacity: 0;
position: absolute;
margin-left: 105px;
margin-top: -79px;
transform: translate(-50%, -50%);
-ms-tranform: translate(-50%, -50%);
text-align: center;
}
.text1{
background-color: none;
width: 210px;
height: 159px;
border: 1px solid rgb(0,192,239);
color: rgb(0,192,239);
font-size: 16px;
}
/* image-2 hover*/
.ab19{
margin-left: 400px;
margin-top: -160px;
}
.ab19:hover .image1{
opacity: 0.3;
}
.ab19:hover .middle{
opacity: 1;
}
/* image-3 hover*/
.ab20{
margin-left: 620px;
margin-top: -159px;
}
.ab20:hover .image1{
opacity: 0.3;
}
.ab20:hover .middle{
opacity: 1;
}
/* image-4 hover*/
.ab21{
margin-left: 180px;
margin-top: 10px;
}
.ab21:hover .image1{
opacity: 0.3;
}
.ab21:hover .middle{
opacity: 1;
}
/* image-5 hover*/
.ab22{
margin-left: 400px;
margin-top: -159px;
}
.ab22:hover .image1{
opacity: 0.3;
}
.ab22:hover .middle{
opacity: 1;
}
/* image-6 hover*/
.ab23{
margin-left: 620px;
margin-top: -159px;
}
.ab23:hover .image1{
opacity: 0.3;
}
.ab23:hover .middle{
opacity: 1;
}
.ab24{
margin-left: 855px;
margin-top: -108px;
}
.ab25{
margin-left: 1030px;
margin-top: -125px;
}
/* image-7 hover*/
.ab26{
margin-left: 180px;
margin-top: -8px;
}
.ab26:hover .image1{
opacity: 0.3;
}
.ab26:hover .middle{
opacity: 1;
}
/* image-8 hover*/
.ab27{
margin-left: 400px;
margin-top: -159px;
}
.ab27:hover .image1{
opacity: 0.3;
}
.ab27:hover .middle{
opacity: 1;
}
/* image-9 hover*/
.ab28{
margin-left: 620px;
margin-top: -159px;
}
.ab28:hover .image1{
opacity: 0.3;
}
.ab28:hover .middle{
opacity: 1;
}
/* image-10 hover*/
.ab29{
margin-left: 180px;
margin-top: 10px;
}
.ab29:hover .image1{
opacity: 0.3;
}
.ab29:hover .middle{
opacity: 1;
}
/* image-11 hover*/
.ab30{
margin-left: 400px;
margin-top: -159px;
}
.ab30:hover .image1{
opacity: 0.3;
}
.ab30:hover .middle{
opacity: 1;
}
/* image-12 hover*/
.ab31{
margin-left: 620px;
margin-top: -159px;
}
.ab31:hover .image1{
opacity: 0.3;
}
.ab31:hover .middle{
opacity: 1;
}
.ab32{
width: 80px;
height: 18px;
margin-left: 180px;
margin-top: 30px;
}
.ab33{
width: 500px;
height: 20px;
background-color: none;
margin-top: -35px;
margin-left: 370px;
}
.link10{
list-style-type: none;
padding: 1px;
overflow: hidden;
}
.link11{
float: left;
}
.link11 a{
display: inline-block;
color: gray;
font-size: 16px;
text-align: left;
padding: 0px 6px;
text-decoration: none;
}
.link12 a{
border-right: 1px solid black;
}
.link12a a{
border-left: 1px solid black;
}
.link11:hover{
background-color: none;
text-decoration: none;
}
.link11:hover > a{
color: black;
}
a{
text-decoration: none;
}
.ab34{
width: 80px;
height: 18px;
margin-left: 768px;
margin-top: -18px;
}
.ab35{
margin-left: 265px;
margin-top: 30px;
}
.ab36{
width: 655px;
height: 65px;
color: rgb(153,150,183);
font-size: 18px;
margin-left: 180px;
margin-top: 30px;
}
.ab37{
color: rgb(0,192,239);
margin-top: -21px;
margin-left: 170px;
}
.ab38{
margin-top: -21px;
margin-left: 250px;
}
.ab40{
width: 1330px;
height: 100px;
background-color: lightgray;
margin-top: 120px;
}
.ab41{
margin-left: 180px;
margin-top: -57px;
color: gray;
}
.ab42{
margin-left: 1000px;
margin-top: -37px;
}
</style>
</head>
<body>
<div class="ab1">
</div>
<div class="ab2">
<span>
<ul class="link1">
<li class="link2 link3"><a href="">Home</a></li>
<li class="link2 link3"><a href="">Submit a Template</a></li>
<li class="link2 link3"><a href="">Contact Us</a></li>
<li class="link2 link3"><a href="">Search</a></li>
<li class="link2"><a href="">Advertise</a></li>
</ul>
</div>
</div>
<div class="ab3"></div>
<div class="ab4"><a style="color: rgb(51,51,51);" href="">Free CSS</a></div>
<div class="ab5">Free CSS Templates, CSS Layouts & More!</div>
<div class="img1"><a href=""><img src="https://s3.buysellads.com/creatives/ae9ecf6e605a5fa20cc834e15c549c48-1519045481.jpeg"></a></div>
<div class="ab6">
<div class="ab7">
<span>
<ul class="link4">
<li class="link5 link6"><a href="">Free CSS Templates</a></li>
<li class="link5 link6"><a href="">Premium CSS Templates</a></li>
<li class="link5 link6"><a href="">Free CSS Layouts</a></li>
<li class="link5"><a href="">Free CSS Menus</a></li>
</ul>
</div>
</div>
</div>
<div class="ab8"></div>
<div class="ab9"><a href=""><img style="width: 950px; height: 126px;" src="https://www.free-css.com/assets/images/advertise-here-900x120.jpg"></a></div>
<div class="ab10"><b>3142 FREE WEBSITE TEMPLATES</b></div>
<div class="ab11"></div>
<div class="ab12"><b>OUR SPONSORS</b></div>
<div class="ab13"></div>
<div class="ab14"><a style="color: rgb(135,150,183);" href="">« Latest</a></div>
<div class="ab15">
<span>
<ul class="link7">
<li class="link8 link9 link9a"><a style="color: rgb(135,150,183);" href="">1</a></li>
<li class="link8 link9"><a style="color: rgb(0,192,239);" href="">2</a></li>
<li class="link8 link9"><a style="color: rgb(0,192,239);" href="">3</a></li>
<li class="link8 link9"><a style="color: rgb(0,192,239);" href="">4</a></li>
<li class="link8 link9"><a style="color: rgb(0,192,239);" href="">5</a></li>
<li class="link8 link9"><a style="color: rgb(0,192,239);" href="">6</a></li>
<li class="link8 link9"><a style="color: rgb(0,192,239);" href="">7</a></li>
<li class="link8 link9"><a style="color: rgb(135,150,183);" href="">...</a></li>
<li class="link8 link9"><a style="color: rgb(0,192,239);" href="">261</a></li>
<li class="link8 link9"><a style="color: rgb(0,192,239);" href="">262</a></li>
</ul>
</div>
<div class="ab16"><a style="color: rgb(0,192,239);" href="">Older »</a></div>
<div class="ab17"><a href=""><img src="https://cdn4.buysellads.net/uu/5/78072/1607733101-824291_Custom_Size_03_2_090820.png"></a></div>
<!-- images 1 section -->
<div class="ab18"><a href=""><img class="image1" style="width: 200px; height: 149px; border: 5px solid lightgray;" src="https://www.free-css.com/assets/images/free-css-templates/page262/art-factory.jpg"></a>
<div class="middle">
<div class="text1"><p style="margin-top: 8px;">Art Factory</p>
<p style="margin-top: 110px; font-size: 12px;">View This Free Template »</p>
</div>
</div>
</div>
<!-- images 2 section -->
<div class="ab19"><a href=""><img class="image1" style="width: 200px; height: 149px; border: 5px solid lightgray;" src="https://www.free-css.com/assets/images/free-css-templates/page262/focus.jpg"></a>
<div class="middle">
<div class="text1"><p style="margin-top: 8px;">Focus</p>
<p style="margin-top: 110px; font-size: 12px;">View This Free Template »</p>
</div>
</div>
</div>
<!-- images 3 section -->
<div class="ab20"><a href=""><img class="image1" style="width: 200px; height: 149px; border: 5px solid lightgray;" src="https://www.free-css.com/assets/images/free-css-templates/page262/the-factory.jpg"></a>
<div class="middle">
<div class="text1"><p style="margin-top: 8px;">The Factory</p>
<p style="margin-top: 110px; font-size: 12px;">View This Free Template »</p>
</div>
</div>
</div>
<!-- images 4 section -->
<div class="ab21"><a href=""><img class="image1" style="width: 200px; height: 149px; border: 5px solid lightgray;" src="https://www.free-css.com/assets/images/free-css-templates/page262/dream-pulse.jpg"></a>
<div class="middle">
<div class="text1"><p style="margin-top: 8px;">Dream Pulse</p>
<p style="margin-top: 110px; font-size: 12px;">View This Free Template »</p>
</div>
</div>
</div>
<!-- images 5 section -->
<div class="ab22"><a href=""><img class="image1" style="width: 200px; height: 149px; border: 5px solid lightgray;" src="https://www.free-css.com/assets/images/free-css-templates/page262/cron.jpg"></a>
<div class="middle">
<div class="text1"><p style="margin-top: 8px;">Cron</p>
<p style="margin-top: 110px; font-size: 12px;">View This Free Template »</p>
</div>
</div>
</div>
<!-- images 6 section -->
<div class="ab23"><a href=""><img class="image1" style="width: 200px; height: 149px; border: 5px solid lightgray;" src="https://www.free-css.com/assets/images/free-css-templates/page262/shicso.jpg"></a>
<div class="middle">
<div class="text1"><p style="margin-top: 8px;">Shicso</p>
<p style="margin-top: 110px; font-size: 12px;">View This Free Template »</p>
</div>
</div>
</div>
<div class="ab24"><a href=""><img class="image1" src="https://cdn4.buysellads.net/uu/5/78062/1606164309-CSS-Stateful.png"></a></div>
<div class="ab25"><a href=""><img class="image1" src="https://s3.buysellads.com/creatives/87c07aea9852e35b8873dff53f4da16b-1525091891.jpeg"></a></div>
<!-- images 7 section -->
<div class="ab26"><a href=""><img class="image1" style="width: 200px; height: 149px; border: 5px solid lightgray;" src="https://www.free-css.com/assets/images/free-css-templates/page262/softy-pinko.jpg"></a>
<div class="middle">
<div class="text1"><p style="margin-top: 8px;">Softy Pinko</p>
<p style="margin-top: 110px; font-size: 12px;">View This Free Template »</p>
</div>
</div>
</div>
<!-- images 8 section -->
<div class="ab27"><a href=""><img class="image1" style="width: 200px; height: 149px; border: 5px solid lightgray;" src="https://www.free-css.com/assets/images/free-css-templates/page262/dsports.jpg"></a>
<div class="middle">
<div class="text1"><p style="margin-top: 8px;">DSport</p>
<p style="margin-top: 110px; font-size: 12px;">View This Free Template »</p>
</div>
</div>
</div>
<!-- images 9 section -->
<div class="ab28"><a href=""><img class="image1" style="width: 200px; height: 149px; border: 5px solid lightgray;" src="https://www.free-css.com/assets/images/free-css-templates/page262/cleanme.jpg"></a>
<div class="middle">
<div class="text1"><p style="margin-top: 8px;">CleanMe</p>
<p style="margin-top: 110px; font-size: 12px;">View This Free Template »</p>
</div>
</div>
</div>
<!-- images 10 section -->
<div class="ab29"><a href=""><img class="image1" style="width: 200px; height: 149px; border: 5px solid lightgray;" src="https://www.free-css.com/assets/images/free-css-templates/page262/pomato.jpg"></a>
<div class="middle">
<div class="text1"><p style="margin-top: 8px;">Pomato</p>
<p style="margin-top: 110px; font-size: 12px;">View This Free Template »</p>
</div>
</div>
</div>
<!-- images 11 section -->
<div class="ab30"><a href=""><img class="image1" style="width: 200px; height: 149px; border: 5px solid lightgray;" src="https://www.free-css.com/assets/images/free-css-templates/page261/sock.jpg"></a>
<div class="middle">
<div class="text1"><p style="margin-top: 8px;">Sock</p>
<p style="margin-top: 110px; font-size: 12px;">View This Free Template »</p>
</div>
</div>
</div>
<!-- images 12 section -->
<div class="ab31"><a href=""><img class="image1" style="width: 200px; height: 149px; border: 5px solid lightgray;" src="https://www.free-css.com/assets/images/free-css-templates/page261/parallo.jpg"></a>
<div class="middle">
<div class="text1"><p style="margin-top: 8px;">Parallo</p>
<p style="margin-top: 110px; font-size: 12px;">View This Free Template »</p>
</div>
</div>
</div>
<div class="ab32"><a style="color: rgb(135,150,183);" href="">« Latest</a></div>
<div class="ab33">
<ul class="link10">
<li class="link11 link12 link12a"><a style="color: rgb(135,150,183);" href="">1</a></li>
<li class="link11 link12"><a style="color: rgb(0,192,239);" href="">2</a></li>
<li class="link11 link12"><a style="color: rgb(0,192,239);" href="">3</a></li>
<li class="link11 link12"><a style="color: rgb(0,192,239);" href="">4</a></li>
<li class="link11 link12"><a style="color: rgb(0,192,239);" href="">5</a></li>
<li class="link11 link12"><a style="color: rgb(0,192,239);" href="">6</a></li>
<li class="link11 link12"><a style="color: rgb(0,192,239);" href="">7</a></li>
<li class="link11 link12"><a style="color: rgb(0,192,239);" href="">...</a></li>
<li class="link11 link12"><a style="color: rgb(0,192,239);" href="">261</a></li>
<li class="link11 link12"><a style="color: rgb(0,192,239);" href="">262</a></li>
</ul>
</div>
<div class="ab34"><a style="color: rgb(0,192,239);" href="">Older »</a></div>
<div class="ab35"><a href=""><img src="https://s3.buysellads.com/creatives/9652e35684654dc07121f21ccc911059-1519045549.jpeg"></a></div>
<div class="ab36">We were asked if we could build an overview of all the free website templates that are featured in the Free CSS website, with the latest templates shown first, here it is.<br><br>
Please note: once inside the main template section the system hasn't changed, so if any confusion arises please <div class="ab37">let us know</div>
<div class="ab38">, this is an experimental function and will only stay if</div>
<div class="ab39"> feedback is good.</div>
</div>
<div class="ab40"></div>
<div class="ab41">Copyright © 2007 - 2021 - Free CSS. All Rights Reserved</div>
<div class="ab42">
<ul class="link10">
<li class="link11 link12"><a href="">XML Sitemap</a></li>
<li class="link11"><a href="">Privacy</a></li>
</ul>
</div>
<div style="margin-top: -1625px;"><button><a href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/about.html">About</a></button></div>
</body>o
</html>
2 ABOUT
<!DOCTYPE html>
<html>
<head>
<title>about</title>
<style type="text/css">
body{
background-color: black;
}
.body1{
width: 1000px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoNg7oFsPVtX47XmNfO2iuQSMyowcUkSFgsYrG4J7Ht9vv7hJ1CltA2eNl1IbMNCiHvcjamrFxNG0hcBtAYVr1NCHShT_673MFUIjBJSrAB-e4OAxTq9TxmmATZN8nlJvIbL2LcUa1gb4/s16000/header.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqB8N632HcubpQaZU6vVzqyYNTGO13KX3eINDX_1yIrR2Kbk-A0-1QXT_AtPZABgJ62CJ3nUMN16ZQYJ3J9TQZfpNU2OoLkpwUZYB0KSzC3dgr-2Iy658mmxA2tcOCgRpg9JewfYKD7Go/s16000/bg.jpg);
background-position: bottom, bottom;
background-repeat: no-repeat, repeat;
background-position-x: 475px, center;
background-position-y: 0px, 0px;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-origin: initial;
background-color: none;
background-size: initial, cover;
background-clip: initial;
}
.abc{
margin-left: 250px;
margin-top: 30px;
}
/*Section 2*/
.abc1{
margin-left: 200px;
}
.m4{
margin-top: -530px;
margin-left: 240px;
}
.s2 .s3 {display: block;
margin-top: 25px;
}
.s4 .s1{
max-width: 1030px;
position: relative;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 65%;
width: 40px;
height: 60px;
padding: 8px;
margin-top: 50px;
color: transparent;
transition: 0.9s ease;
border-radius: 0px 0px 0px 0px;
user-select: none;
}
.prev{
margin-left: 260px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0AxC9I-b1IXR2TcI_lahXL6-Zqt5eCYKPMEjak1hozOfyZKUzpR2I9ILhU4X5cGG0xJaCUWDth-gtgAZ4FeUMq1cHlA05fVyhuzF0Ssg6ECiBD3VW8muMS3T64OfTI1c0gP9IDU4iCdM/s16000/left-hand1.png) no-repeat;
background-color: transparent;
mix-blend-mode: multiply;
}
.prev:hover{
margin-left: 260px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhDRfWUIQJxLtBXBryiYnH9o0ALhGIIe7IiYq4CzNdVRn7HAne6cvisIwiLwaidEAADpd0nrDksGkU1vRUk8QrYvXZ4rTdcW7ZUNjZxAh8_0wVYSkYuCQw_nHizFEitW7L7FmPsiQRa_8/s0/left-hand2.png) no-repeat;
background-color: transparent;
mix-blend-mode: multiply;
}
.next {
right: 190px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpnnMJ53lcgLSZw77lgiCaFmKV2X4TrraTxnpMJ0OTl2qT-5DGRRSG1kv_jCALMRKTTuFvwsCLIBUOdIRKo3YoG9IMeFGGfXRmFI4-0-w25OI8hOxl1O_c0lJdGWvd6iFQRiAbZY-fOtg/w187-h200/right-hand1.png) no-repeat;
border-radius: 3px 0 0 3px;
background-color: transparent;
mix-blend-mode: multiply;
}
.next:hover{
right: 190px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeCjdoBsOrJJvnDhq6QUR2G3lQEeUrSIiLCwRH7u0vz2sD8QpolbGQgDHwHIMdvbquHVTud2wfizOw8nm0A58XxhXrfJMgRJ4SExgdfSGGIOFkUQZTqsp8zSYrn2PLOJn92Zyjip2FEXA/s0/right-hand2.png) no-repeat;
border-radius: 3px 0 0 3px;
background-color: transparent;
mix-blend-mode: multiply;
}
.prev:hover, .next:hover {
background-color: transparent;
}
.abc2{
width: 1010px;
margin-left: 150px;
margin-top: -26px;
position: relative;
}
.menu1{
list-style-type: none;
background-color: none;
margin-left: 90px;
padding-left: 30px;
overflow: hidden;
position: relative;
}
.menu2,.menu3,.menu4,.menu5,.menu6{
float: left;
letter-spacing: -5px;
padding-right: 28px;
}
.menu2 a{
width: 100%px;
display: inline-block;
font-size: 40px;
font-family: 'Cabin Sketch', 'cursive';
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: blue;
position: relative;
}
.menu3 a{
width: 100%px;
display: inline-block;
font-size: 40px;
font-family: 'Cabin Sketch', 'cursive';
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: black;
position: relative;
}
.menu4 a{
width: 100%px;
display: inline-block;
font-size: 40px;
font-family: 'Cabin Sketch', 'cursive';
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: orange;
position: relative;
}
.menu5 a{
width: 100%px;
display: inline-block;
font-size: 40px;
font-family: 'Cabin Sketch', 'cursive';
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: red;
position: relative;
}
.menu6 a{
width: 100%px;
display: inline-block;
font-size: 40px;
font-family: 'Cabin Sketch', 'cursive';
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: purple;
position: relative;
}
.menu2.menu3,.menu4,.menu5,.menu6:hover{
text-decoration: none;
display: block;
}
.menu2,.menu3,.menu4,.menu5,.menu6:hover > a{
position: relative;
color: black;
}
.menu2:hover > a{
position: relative;
color: black;
}
.menu3:hover > a{
position: relative;
color: black;
}
.menu4:hover > a{
position: relative;
color: black;
}
.menu5:hover > a{
position: relative;
color: black;
}
.menu6:hover > a{
position: relative;
color: black;
}
.abc3{
width: 350px;
margin-left: 230px;
margin-top: 70px;
}
/*Second Portion*/
.abc4{
width: 620px;
height: 650px;
background-color: rgb(248,248,248);
margin-left: 550px;
margin-top: -780px;
}
h1{
color: gray;
margin-left: 20px;
margin-top: 20px;
padding-top: 15px;
padding-left: 5px;
padding-bottom: 10px;
text-shadow: 2px 2px 4px gray;
}
p{
color: black;
font-size: 17px;
padding-left: 5px;
margin-left: 20px;
margin-top: -20px;
margin-right: 20px;
}
.pic1{
color: black;
}
.pic1:hover{
color: blue;
}
.pic2{
text-decoration: none;
color: blue;
}
.pic2:hover{
color: red;
}
div{
margin-left: 20px;
margin-right: 20px;
}
span{
text-align: justify-all;
color: black;
font-size: 17px;
}
img{
margin-right: 5px;
}
table{
margin-left: 20px;
margin-right: 20px;
}
tr,td{
font-size: 17px;
color: green;
}
.op1{
color: red;
text-decoration-style: none;
text-decoration-line: none;
}
.op1:hover{
text-decoration: underline;
}
.sd1{
color: gray;
font-size: 15px;
margin-top: 40px;
margin-left: 830px;
}
.sd2{
color: blue;
font-size: 15px;
margin-top: 2px;
margin-left: 765px;
}
.sd3{
color: gray;
font-size: 15px;
margin-top: -16px;
margin-left: 887px;
}
.sd4{
color: red;
font-size: 15px;
margin-top: -18px;
margin-left: 904px;
}
.ssd1{
text-decoration: none;
}
.ssd1:hover{
text-decoration: underline;
}
</style>
</head>
<body class="body1 body2">
<div class="abc"><a href=""><img style="width: 288px; height: 151px;" src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/logo.png"></a></div>
<!-- section 2 -->
<div class="abc1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVoBeAm_gCOuLkkWsbQLKX7UJh7wNB0EeeTDku6OOTchVWrh1wBpTrq-tpbDSUoQ9bCsNktG0Ts5NQyYsVDQrACRlvCX8HXZJj8vIjrob_6x2oYMQvLWXtyNRjaoDhhtXvozgvaEiWzpQ/s16000/slider-bg.png"></div>
<div class="s1 s4 m4">
<div class="s2 s3 fade">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjQNDQv4C0SJ-SIQEjV8eDNGylyZA7qxSWHJdhoU1UqhvAyMl0OBQND2wgeYyqkO6ykX6-JzR7T83nuXvQcgQ4xc4cYzPJVd7NqszzlM87q9vgNdQvujMSbhByItAGAw5l3iuhQsDtpB8/s16000/slider-1.jpg"></div>
<div class="s2 s3 fade">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2tWRCcxpYtLRt3VXQ-THYyUS8p8By07MPHxdNXrfBfNFBaFmSDLQvAVdyTYBK72967IPeoQpVC_B3bYrZcldd9gQVGFGnLWwyzYEZfOaTBr-GGtgtt6wgMrx3qFtjEvk11_5-wSOZiE/s16000/slider-2.jpg"></div>
<div class="s2 s3 fade">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5MH5P8hl9Shr3Ti_lA5SAVlVnUNcdg4yxoILORoVuM02EcJQSbl5V9S8GZ5_OGPKXLa_IgI_hThl7iMPMpDpG-GrClV8fGIieW7-Lwz3tTE6_tySJrt0-NPVYJvfVc35mShHeTFxXdZ8/s16000/slider-3.jpg"></div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("s3");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("s2");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
<!-- Menu list -->
<div class="abc2">
<ul class="menu1">
<li class="menu2"><a style="font-family: 'Cabin Sketch', 'cursive'" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/home.html">HOME</a></li>
<li class="menu3"><a href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/about.html">ABOUT</a></li>
<li class="menu4"><a href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/schedule.html">SCHEDULE</a></li>
<li class="menu5"><a href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/gallery.html">GALLERY</a></li>
<li class="menu6"><a href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/contact.html">CONTACTS</a></li>
</ul>
</div>
<!-- Left side portion -->
<div class="abc3">
<div style="font-size: 40px; color: white;"><b>Teachers</b></div>
<div style="font-size: 20px; margin-top: 8px; color: white;"><i>Peter Stanton</i></div>
<div>
<p style="font-size: 16px; margin-top: 10px;margin-left: -8px; color: gray;">Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</p>
<div style="font-size: 16px; margin-top: -33px; margin-left: 135px;"><a class="op1" href="">More...</a></div>
</div>
<div style="font-size: 20px; margin-top: 10px; color: white;"><i>Helen Perton</i></div>
<div>
<p style="font-size: 16px; margin-top: 10px;margin-left: -8px; color: gray;">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est</p>
<div style="font-size: 16px; margin-top: -33px; margin-left: 130px;"><a class="op1" href="">More...</a></div>
</div>
<div style="font-size: 20px; margin-top: 10px; color: white;"><i>Jesica Murray</i></div>
<div>
<p style="font-size: 16px; margin-top: 10px;margin-left: -8px; color: gray;">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam</p>
<div style="font-size: 16px; margin-top: -33px; margin-left: 34px;"><a class="op1" href="">More...</a></div>
</div>
<!-- Background 3 use table tag-->
<table style="width: 400px; height: 400px; margin-left: -25px; margin-top: 20px;" background="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/content-img.png">ABC</table>
</div>
<div class="abc4">
<h1 style="font-family:'Comic Sans MS'">A Few Words About Us</h1>
<p><b>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor</b><br>
Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et acam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.</p>
<div>
<span>
<img style="padding-right: 10px; border: 5px solid white;" src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/page2-img1.jpg" align="left" alt="left" width="195px" height="133px">
</span>
<span>
<b>Lorem ipsum dolor sit amet, consetetur</b><br>sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</span>
</div>
<h1 style="margin-top: 10px; font-family:'Comic Sans MS'">What We Offer</h1>
<h2 style="margin-top: -20px; font-size: 18px; margin-left: 25px;">Nam liber tempor cum soluta nobis eleifend option</h2><p style="margin-top: -10px;">Congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit:</p>
<div style="margin-top: -1px;">
<span style="margin-left: 9px;"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/marker-2.gif"><a class="pic1" style="text-decoration: none;" href="">Sed diam nonummy nibh euismod</a></span>
<span style="margin-left: 20px;"> <img style="margin-left: 35px;" src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/marker-2.gif" style="width: 12px; height: 12px; padding-left: -50px;"><a class="pic1" style="text-decoration: none;" href="">Duis autem vel eum iriure dolor</a></span>
</div>
<div style="margin-top: 5px;">
<span><img style="margin-left: 10px;" src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/marker-2.gif" style="width: 12px; height: 12px; padding-left: -50px;"><a class="pic1" style="text-decoration: none;" href="">Tincidunt ut laoreet dolore</a></span>
<span style="margin-left: 30px;"><img style="margin-left: 77px;" src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/marker-2.gif" style="width: 12px; height: 12px; padding-left: -50px;"><a class="pic1" style="text-decoration: none;" href="">Hendrerit in vulputate velit molestie</a></span>
</div>
<div style="margin-top: 5px;">
<span><img style="margin-left: 10px;" src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/marker-2.gif" style="width: 12px; height: 12px; padding-left: -50px;"><a class="pic1" style="text-decoration: none;" href="">Magna aliquam erat volutpat wisi enim</a></span>
<span style="margin-left: 12px;"> <img style="margin-left: 10px;" src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/marker-2.gif" style="width: 12px; height: 12px; padding-left: -50px;"><a class="pic1" style="text-decoration: none;" href="">Consequat vel illum dolore</a></span>
</div>
<div style="margin-top: 5px;">
<span><img style="margin-left: 10px;" src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/marker-2.gif" style="width: 12px; height: 12px; padding-left: -50px;"><a class="pic1" style="text-decoration: none;" href="">Minim veniam, quis nostrud exercise</a></span>
<span style="margin-left: 72px;"><img style="margin-left: -35px;" src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/marker-2.gif" style="width: 12px; height: 12px; padding-left: -50px;"><a class="pic1" style="text-decoration: none;" href="">Feugiat nulla facilisis at vero eros</a></span>
</div>
<h1 style="margin-top: 5px;" style="font-family:'Comic Sans MS'"><center><a class="pic2" href="">Read More</a></center></h1>
</div>
</div>
<div class="sd1">© 2012 Art School</div>
<div class="sd2"><a style="color: purple; text-decoration: none;" href=""><b>Website Templates</b></a></div>
<div class="sd3">by</div>
<div class="sd4"><a class="ssd1" style="color: red;" href=""><b>TemplateMonster.com</b></a></div>
<div style="margin-top: 150px; margin-left: 220px;"><a href=""><img src="https://www.free-css.com/assets/images/affiliates/elegantthemes-900x120.jpg"></a></div>
</body>
</html>
3 SCHEDULE
<!DOCTYPE html>
<html>
<head>
<title>Schedule</title>
<style type="text/css">
body{
background-color: black;
}
.body1{
width: 1000px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoNg7oFsPVtX47XmNfO2iuQSMyowcUkSFgsYrG4J7Ht9vv7hJ1CltA2eNl1IbMNCiHvcjamrFxNG0hcBtAYVr1NCHShT_673MFUIjBJSrAB-e4OAxTq9TxmmATZN8nlJvIbL2LcUa1gb4/s16000/header.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqB8N632HcubpQaZU6vVzqyYNTGO13KX3eINDX_1yIrR2Kbk-A0-1QXT_AtPZABgJ62CJ3nUMN16ZQYJ3J9TQZfpNU2OoLkpwUZYB0KSzC3dgr-2Iy658mmxA2tcOCgRpg9JewfYKD7Go/s16000/bg.jpg);
background-position: bottom, bottom;
background-repeat: no-repeat, repeat;
background-position-x: 475px, center;
background-position-y: 0px, 0px;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-origin: initial;
background-color: none;
background-size: initial, cover;
background-clip: initial;
}
.abc{
margin-left: 250px;
margin-top: 30px;
}
/*Section 2*/
.abc1{
margin-left: 200px;
}
.m4{
margin-top: -530px;
margin-left: 220px;
}
.s2 .s3 {display: block;
margin-top: 25px;
}
.s4 .s1{
max-width: 1030px;
position: relative;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 65%;
width: 40px;
height: 60px;
padding: 8px;
margin-top: 50px;
color: transparent;
transition: 0.9s ease;
border-radius: 0px 0px 0px 0px;
user-select: none;
}
.prev{
margin-left: 260px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0AxC9I-b1IXR2TcI_lahXL6-Zqt5eCYKPMEjak1hozOfyZKUzpR2I9ILhU4X5cGG0xJaCUWDth-gtgAZ4FeUMq1cHlA05fVyhuzF0Ssg6ECiBD3VW8muMS3T64OfTI1c0gP9IDU4iCdM/s16000/left-hand1.png) no-repeat;
background-color: transparent;
mix-blend-mode: multiply;
}
.prev:hover{
margin-left: 260px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhDRfWUIQJxLtBXBryiYnH9o0ALhGIIe7IiYq4CzNdVRn7HAne6cvisIwiLwaidEAADpd0nrDksGkU1vRUk8QrYvXZ4rTdcW7ZUNjZxAh8_0wVYSkYuCQw_nHizFEitW7L7FmPsiQRa_8/s0/left-hand2.png) no-repeat;
background-color: transparent;
mix-blend-mode: multiply;
}
.next {
right: 190px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpnnMJ53lcgLSZw77lgiCaFmKV2X4TrraTxnpMJ0OTl2qT-5DGRRSG1kv_jCALMRKTTuFvwsCLIBUOdIRKo3YoG9IMeFGGfXRmFI4-0-w25OI8hOxl1O_c0lJdGWvd6iFQRiAbZY-fOtg/w187-h200/right-hand1.png) no-repeat;
border-radius: 3px 0 0 3px;
background-color: transparent;
mix-blend-mode: multiply;
}
.next:hover{
right: 190px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeCjdoBsOrJJvnDhq6QUR2G3lQEeUrSIiLCwRH7u0vz2sD8QpolbGQgDHwHIMdvbquHVTud2wfizOw8nm0A58XxhXrfJMgRJ4SExgdfSGGIOFkUQZTqsp8zSYrn2PLOJn92Zyjip2FEXA/s0/right-hand2.png) no-repeat;
border-radius: 3px 0 0 3px;
background-color: transparent;
mix-blend-mode: multiply;
}
.prev:hover, .next:hover {
background-color: transparent;
}
.abc2{
width: 1010px;
margin-left: 150px;
margin-top: -26px;
position: relative;
}
.menu1{
list-style-type: none;
background-color: none;
margin-left: 90px;
padding-left: 30px;
overflow: hidden;
position: relative;
}
.menu2,.menu3,.menu4,.menu5,.menu6{
float: left;
letter-spacing: -5px;
padding-right: 28px;
}
.menu2 a{
width: 100%px;
display: inline-block;
font-size: 40px;
font-family: 'Cabin Sketch', 'cursive';
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: blue;
position: relative;
}
.menu3 a{
width: 100%px;
display: inline-block;
font-size: 40px;
font-family: 'Cabin Sketch', 'cursive';
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: black;
position: relative;
}
.menu4 a{
width: 100%px;
display: inline-block;
font-size: 40px;
font-family: 'Cabin Sketch', 'cursive';
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: orange;
position: relative;
}
.menu5 a{
width: 100%px;
display: inline-block;
font-size: 40px;
font-family: 'Cabin Sketch', 'cursive';
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: red;
position: relative;
}
.menu6 a{
width: 100%px;
display: inline-block;
font-size: 40px;
font-family: 'Cabin Sketch', 'cursive';
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: purple;
position: relative;
}
.menu2.menu3,.menu4,.menu5,.menu6:hover{
text-decoration: none;
display: block;
}
.menu2,.menu3,.menu4,.menu5,.menu6:hover > a{
position: relative;
color: black;
}
.menu2:hover > a{
position: relative;
color: black;
}
.menu3:hover > a{
position: relative;
color: black;
}
.menu4:hover > a{
position: relative;
color: black;
}
.menu5:hover > a{
position: relative;
color: black;
}
.menu6:hover > a{
position: relative;
color: black;
}
.abc3{
width: 350px;
margin-left: 230px;
margin-top: 70px;
}
/*Second Portion*/
.abc4{
width: 620px;
height: 670px;
background-color: rgb(248,248,248);
margin-left: 550px;
margin-top: -770px;
}
h1{
color: gray;
margin-left: 20px;
margin-top: 20px;
padding-top: 15px;
padding-left: 5px;
padding-bottom: 10px;
text-shadow: 2px 2px 4px gray;
}
p{
color: black;
font-size: 17px;
padding-left: 5px;
margin-left: 20px;
margin-top: -20px;
margin-right: 20px;
}
.pic1{
color: black;
}
.pic1:hover{
color: blue;
}
.pic2{
text-decoration: none;
color: blue;
}
.pic2:hover{
color: red;
}
div{
margin-left: 20px;
margin-right: 20px;
}
span{
text-align: justify-all;
color: black;
font-size: 17px;
}
img{
margin-right: 5px;
}
/* table{
margin-left: 20px;
margin-right: 20px;
}*/
/*
tr,td{
font-size: 17px;
color: green;
}
*/ .op1{
color: red;
text-decoration-style: none;
text-decoration-line: none;
}
.op1:hover{
text-decoration: underline;
}
.sd1{
color: gray;
font-size: 15px;
margin-top: 40px;
margin-left: 830px;
}
.sd2{
color: blue;
font-size: 15px;
margin-top: 2px;
margin-left: 765px;
}
.sd3{
color: gray;
font-size: 15px;
margin-top: -16px;
margin-left: 887px;
}
.sd4{
color: red;
font-size: 15px;
margin-top: -18px;
margin-left: 904px;
}
.ssd1{
text-decoration: none;
}
.ssd1:hover{
text-decoration: underline;
}
</style>
</head>
<body class="body1 body2">
<div class="abc"><a href=""><img style="width: 288px; height: 151px;" src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/logo.png"></a></div>
<!-- section 2 -->
<div class="abc1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVoBeAm_gCOuLkkWsbQLKX7UJh7wNB0EeeTDku6OOTchVWrh1wBpTrq-tpbDSUoQ9bCsNktG0Ts5NQyYsVDQrACRlvCX8HXZJj8vIjrob_6x2oYMQvLWXtyNRjaoDhhtXvozgvaEiWzpQ/s16000/slider-bg.png"></div>
<div class="s1 s4 m4">
<div class="s2 s3 fade">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjQNDQv4C0SJ-SIQEjV8eDNGylyZA7qxSWHJdhoU1UqhvAyMl0OBQND2wgeYyqkO6ykX6-JzR7T83nuXvQcgQ4xc4cYzPJVd7NqszzlM87q9vgNdQvujMSbhByItAGAw5l3iuhQsDtpB8/s16000/slider-1.jpg"></div>
<div class="s2 s3 fade">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2tWRCcxpYtLRt3VXQ-THYyUS8p8By07MPHxdNXrfBfNFBaFmSDLQvAVdyTYBK72967IPeoQpVC_B3bYrZcldd9gQVGFGnLWwyzYEZfOaTBr-GGtgtt6wgMrx3qFtjEvk11_5-wSOZiE/s16000/slider-2.jpg"></div>
<div class="s2 s3 fade">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5MH5P8hl9Shr3Ti_lA5SAVlVnUNcdg4yxoILORoVuM02EcJQSbl5V9S8GZ5_OGPKXLa_IgI_hThl7iMPMpDpG-GrClV8fGIieW7-Lwz3tTE6_tySJrt0-NPVYJvfVc35mShHeTFxXdZ8/s16000/slider-3.jpg"></div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("s3");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("s2");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
<!-- Menu list -->
<div class="abc2">
<ul class="menu1">
<li class="menu2"><a style="font-family: 'Cabin Sketch', 'cursive'" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/home.html">HOME</a></li>
<li class="menu3"><a href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/about.html">ABOUT</a></li>
<li class="menu4"><a href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/schedule.html">SCHEDULE</a></li>
<li class="menu5"><a href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/gallery.html">GALLERY</a></li>
<li class="menu6"><a href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/contact.html">CONTACTS</a></li>
</ul>
</div>
<!-- Left side portion -->
<div class="abc3">
<div style="font-size: 40px; color: white;"><b>About Schedule</b></div>
<div style="font-size: 17px; margin-top: 8px;margin-right: 50px; color: white;">At vero eos et accusam et justo duo dolores et ea rebum.</div>
<div>
<p style="font-size: 16px; margin-top: 10px;margin-left: -8px; color: gray;">Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor. Loremsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
</div>
<div>
<p style="font-size: 16px; margin-top: 10px;margin-left: -8px; color: gray;">Eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet</p>
</div>
<div style="font-size: 16px; margin-top: -33px; margin-left: 53px;"><a class="op1" href="">More...</a></div>
</div>
</div>
<!-- Background 3 use table tag-->
<table style="width: 450px; height: 400px; margin-left: 205px; margin-top: 20px;" background="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/content-img.png">ABC</table>
</div>
<div class="abc4">
<h1 style="font-family:'Comic Sans MS'">Schedule</h1>
<div style="margin-top: -25px;">
<table style="margin-left: 5px; width: 570px; font-size: 17px;">
<tr>
<td><b>Monday</b></td>
<td><b>Wednesday</b></td>
<td><b>Friday</b></td>
<td><b>Saturday</b></td>
</tr>
<tr><td colspan="4"><hr></td></tr>
<tr>
<td>11:00</td>
<td>11:00</td>
<td>11:00</td>
<td>11:00</td>
</tr>
<tr style="color: red;">
<td>Nam liber tempor</td>
<td>Nam liber tempor</td>
<td>Nam liber tempor</td>
<td>Nam liber tempor</td>
</tr>
<tr>
<td>Peter Stanton</td>
<td>Peter Stanton</td>
<td>Peter Stanton</td>
<td>Peter Stanton</td>
</tr>
<tr><td colspan="4"><hr></td></tr>
<tr>
<td>13:00</td>
<td>13:00</td>
<td>13:00</td>
<td>13:00</td>
</tr>
<tr style="color: red;">
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Holen Perton</td>
<td>Holen Perton</td>
<td>Holen Perton</td>
<td>Holen Perton</td>
</tr>
<tr><td colspan="4"><hr></td></tr>
<tr>
<td>16:00</span>
<td>16:00</td>
<td>16:00</td>
<td>16:00</td>
</tr>
<tr style="color: red;">
<td>Dolar sit amet</td>
<td>Dolar sit amet</td>
<td>Dolar sit amet</td>
<td>Dolar sit amet</td>
</tr>
<tr>
<td>Jesica Murray</td>
<td>Jesica Murray</td>
<td>Jesica Murray</td>
<td>Jesica Murray</td>
</tr>
</table>
</div>
<h1 style="margin-top: -2px;">Events Schedule</h1>
<div style="margin-top: -20px; margin-left: 5px;">
<div style="width: 300px; margin-left: 5px; ">
<div><b>April 10,2012</b><br>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
<div style="font-size: 16px; margin-top: -18px; margin-left: 178px;"><a class="op1" href="">More...</a></div>
</div>
<div style="float: left; margin-top: -70px; margin-left: 300px; width: 300px;"><b>April 04,2012</b><br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
<div style="font-size: 16px; margin-top: -18px; margin-left: 168px;"><a class="op1" href="">More...</a></div>
</div>
</div>
<div style="margin-top: 5px; margin-left: 5px; width: 300px;">
<div><b>March 22, 2012</b><br>
Teugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
<div style="font-size: 16px; margin-top: -18px; margin-left: 166px;"><a class="op1" href="">More...</a></div>
</div>
</div>
<div style="float: left; width: 310px; margin-left: 305px; margin-right: 30px; margin-top: -70px;"><b>March 14, 2012</b><br>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
<div style="font-size: 16px; margin-top: -18px; margin-left: 110px;"><a class="op1" href="">More...</a></div>
</div>
</div>
</div>
<h1 style="margin-top: -80px; margin-left: 700px; font-family:'Comic Sans MS'"><center><a class="pic2" href="">Read More</a></center></h1>
</div>
</div>
<div class="sd1">© 2012 Art School</div>
<div class="sd2"><a style="color: purple; text-decoration: none;" href=""><b>Website Templates</b></a></div>
<div class="sd3">by</div>
<div class="sd4"><a class="ssd1" style="color: red;" href=""><b>TemplateMonster.com</b></a></div>
<div style="margin-top: 150px; margin-left: 220px;"><a href=""><img src="https://www.free-css.com/assets/images/affiliates/elegantthemes-900x120.jpg"></a></div>
</body>
</html>
4 GALLERY:
<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<style type="text/css">
body{
background-color: black;
}
.body1{
width: 1000px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoNg7oFsPVtX47XmNfO2iuQSMyowcUkSFgsYrG4J7Ht9vv7hJ1CltA2eNl1IbMNCiHvcjamrFxNG0hcBtAYVr1NCHShT_673MFUIjBJSrAB-e4OAxTq9TxmmATZN8nlJvIbL2LcUa1gb4/s16000/header.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqB8N632HcubpQaZU6vVzqyYNTGO13KX3eINDX_1yIrR2Kbk-A0-1QXT_AtPZABgJ62CJ3nUMN16ZQYJ3J9TQZfpNU2OoLkpwUZYB0KSzC3dgr-2Iy658mmxA2tcOCgRpg9JewfYKD7Go/s16000/bg.jpg);
background-position: bottom, bottom;
background-repeat: no-repeat, repeat;
background-position-x: 475px, center;
background-position-y: 0px, 0px;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-origin: initial;
background-color: none;
background-size: initial, cover;
background-clip: initial;
}
.abc{
margin-left: 250px;
margin-top: 30px;
}
/*Section 2*/
.abc1{
margin-left: 200px;
}
.m4{
margin-top: -530px;
margin-left: 220px;
}
.s2 .s3 {display: block;
margin-top: 25px;
}
.s4 .s1{
max-width: 1030px;
position: relative;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 65%;
width: 40px;
height: 60px;
padding: 8px;
margin-top: 50px;
color: transparent;
transition: 0.9s ease;
border-radius: 0px 0px 0px 0px;
user-select: none;
}
.prev{
margin-left: 260px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0AxC9I-b1IXR2TcI_lahXL6-Zqt5eCYKPMEjak1hozOfyZKUzpR2I9ILhU4X5cGG0xJaCUWDth-gtgAZ4FeUMq1cHlA05fVyhuzF0Ssg6ECiBD3VW8muMS3T64OfTI1c0gP9IDU4iCdM/s16000/left-hand1.png) no-repeat;
background-color: transparent;
mix-blend-mode: multiply;
}
.prev:hover{
margin-left: 260px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhDRfWUIQJxLtBXBryiYnH9o0ALhGIIe7IiYq4CzNdVRn7HAne6cvisIwiLwaidEAADpd0nrDksGkU1vRUk8QrYvXZ4rTdcW7ZUNjZxAh8_0wVYSkYuCQw_nHizFEitW7L7FmPsiQRa_8/s0/left-hand2.png) no-repeat;
background-color: transparent;
mix-blend-mode: multiply;
}
.next {
right: 190px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpnnMJ53lcgLSZw77lgiCaFmKV2X4TrraTxnpMJ0OTl2qT-5DGRRSG1kv_jCALMRKTTuFvwsCLIBUOdIRKo3YoG9IMeFGGfXRmFI4-0-w25OI8hOxl1O_c0lJdGWvd6iFQRiAbZY-fOtg/w187-h200/right-hand1.png) no-repeat;
border-radius: 3px 0 0 3px;
background-color: transparent;
mix-blend-mode: multiply;
}
.next:hover{
right: 190px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeCjdoBsOrJJvnDhq6QUR2G3lQEeUrSIiLCwRH7u0vz2sD8QpolbGQgDHwHIMdvbquHVTud2wfizOw8nm0A58XxhXrfJMgRJ4SExgdfSGGIOFkUQZTqsp8zSYrn2PLOJn92Zyjip2FEXA/s0/right-hand2.png) no-repeat;
border-radius: 3px 0 0 3px;
background-color: transparent;
mix-blend-mode: multiply;
}
.prev:hover, .next:hover {
background-color: transparent;
}
.abc2{
width: 1010px;
margin-left: 150px;
margin-top: -26px;
position: relative;
}
.menu1{
list-style-type: none;
background-color: none;
margin-left: 90px;
padding-left: 30px;
overflow: hidden;
position: relative;
}
.menu2,.menu3,.menu4,.menu5,.menu6{
float: left;
letter-spacing: -5px;
padding-right: 28px;
}
.menu2 a{
width: 100%px;
display: inline-block;
font-size: 40px;
font-family: 'Cabin Sketch', 'cursive';
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: blue;
position: relative;
}
.menu3 a{
width: 100%px;
display: inline-block;
font-size: 40px;
font-family: 'Cabin Sketch', 'cursive';
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: black;
position: relative;
}
.menu4 a{
width: 100%px;
display: inline-block;
font-size: 40px;
font-family: 'Cabin Sketch', 'cursive';
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: orange;
position: relative;
}
.menu5 a{
width: 100%px;
display: inline-block;
font-size: 40px;
font-family: 'Cabin Sketch', 'cursive';
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: red;
position: relative;
}
.menu6 a{
width: 100%px;
display: inline-block;
font-size: 40px;
font-family: 'Cabin Sketch', 'cursive';
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: purple;
position: relative;
}
.menu2.menu3,.menu4,.menu5,.menu6:hover{
text-decoration: none;
display: block;
}
.menu2,.menu3,.menu4,.menu5,.menu6:hover > a{
position: relative;
color: black;
}
.menu2:hover > a{
position: relative;
color: black;
}
.menu3:hover > a{
position: relative;
color: black;
}
.menu4:hover > a{
position: relative;
color: black;
}
.menu5:hover > a{
position: relative;
color: black;
}
.menu6:hover > a{
position: relative;
color: black;
}
.abc3{
width: 350px;
margin-left: 230px;
margin-top: 70px;
}
/*Second Portion*/
.abc4{
width: 620px;
height: 1040px;
background-color: rgb(248,248,248);
margin-left: 550px;
margin-top: -950px;
}
h1{
color: gray;
margin-left: 20px;
margin-top: 20px;
padding-top: 15px;
padding-left: 5px;
padding-bottom: 10px;
text-shadow: 2px 2px 4px gray;
}
p{
color: black;
font-size: 17px;
padding-left: 5px;
margin-left: 20px;
margin-top: -20px;
margin-right: 20px;
}
.pic1{
color: gray;
}
.pic1:hover{
color: red;
}
.pic2{
text-decoration: none;
color: blue;
}
.pic2:hover{
color: red;
}
div{
margin-left: 20px;
margin-right: 20px;
}
span{
text-align: justify-all;
color: black;
font-size: 17px;
}
img{
margin-right: 5px;
}
table{
margin-left: 20px;
margin-right: 20px;
}
tr,td{
font-size: 17px;
color: green;
}
.op1{
color: red;
text-decoration-style: none;
text-decoration-line: none;
}
.op1:hover{
text-decoration: underline;
}
.sd1{
color: gray;
font-size: 15px;
margin-top: 40px;
margin-left: 830px;
}
.sd2{
color: blue;
font-size: 15px;
margin-top: 2px;
margin-left: 765px;
}
.sd3{
color: gray;
font-size: 15px;
margin-top: -16px;
margin-left: 887px;
}
.sd4{
color: red;
font-size: 15px;
margin-top: -18px;
margin-left: 904px;
}
.ssd1{
text-decoration: none;
}
.ssd1:hover{
text-decoration: underline;
}
.pc1{
border: 10px solid white;
}
.pc1:hover{
border: 10px solid rgb(196,231,239);
}
</style>
</head>
<body class="body1 body2">
<div class="abc"><a href=""><img style="width: 288px; height: 151px;" src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/logo.png"></a></div>
<!-- section 2 -->
<div class="abc1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVoBeAm_gCOuLkkWsbQLKX7UJh7wNB0EeeTDku6OOTchVWrh1wBpTrq-tpbDSUoQ9bCsNktG0Ts5NQyYsVDQrACRlvCX8HXZJj8vIjrob_6x2oYMQvLWXtyNRjaoDhhtXvozgvaEiWzpQ/s16000/slider-bg.png"></div>
<div class="s1 s4 m4">
<div class="s2 s3 fade">
<img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/gallery-big-1.jpg"></div>
<div class="s2 s3 fade">
<img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/gallery-big-2.jpg"></div>
<div class="s2 s3 fade">
<img src="images\https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/gallery-big-3.jpg"></div>
<div class="s2 s3 fade">
<img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/gallery-big-4.jpg"></div>
<div class="s2 s3 fade">
<img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/gallery-big-5.jpg"></div>
<div class="s2 s3 fade">
<img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/gallery-big-6.jpg"></div>
<div class="s2 s3 fade">
<img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/gallery-big-7.jpg"></div>
<div class="s2 s3 fade">
<img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/gallery-big-8.jpg"></div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("s3");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("s2");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
<!-- Menu list -->
<div class="abc2">
<ul class="menu1">
<li class="menu2"><a style="font-family: 'Cabin Sketch', 'cursive'" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/home.html">HOME</a></li>
<li class="menu3"><a href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/about.html">ABOUT</a></li>
<li class="menu4"><a href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/schedule.html">SCHEDULE</a></li>
<li class="menu5"><a href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/gallery.html">GALLERY</a></li>
<li class="menu6"><a href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/contact.html">CONTACTS</a></li>
</ul>
</div>
<!-- Left side portion -->
<div class="abc3">
<div style="font-size: 40px; color: white;"><b>Our Archive</b></div>
<div style="margin-top: 10px;">
<div style="margin-left: 9px; margin-top: 3px;"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/marker-1.gif"><a class="pic1" style="text-decoration: none;" href="">April, 2012</a></div>
<div style=" margin-left: 9px; margin-top: 3px;"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/marker-1.gif"><a class="pic1" style="text-decoration: none;" href="">March, 2012</a></div>
<div style="margin-left: 9px; margin-top: 3px;"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/marker-1.gif"><a class="pic1" style="text-decoration: none;" href="">February, 2012</a></div>
<div style="margin-left: 9px; margin-top: 3px;"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/marker-1.gif"><a class="pic1" style="text-decoration: none;" href="">January, 2012</a></div>
<div style="margin-left: 9px; margin-top: 3px;"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/marker-1.gif"><a class="pic1" style="text-decoration: none;" href="">December, 2011</a></div>
<div style="margin-left: 9px; margin-top: 3px;"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/marker-1.gif"><a class="pic1" style="text-decoration: none;" href="">November, 2011</a></div>
<span style="margin-left: 9px; margin-top: 3px;"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/marker-1.gif"><a class="pic1" style="text-decoration: none;" href="">October, 2011</a></div>
<div style="margin-left: 28px; margin-top: 3px;"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/marker-1.gif"><a class="pic1" style="text-decoration: none;" href="">September, 2011</a></div>
<div style="margin-left: 28px; margin-top: 3px;"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/marker-1.gif"><a class="pic1" style="text-decoration: none;" href="">August, 2011</a></div>
<div style="margin-left: 28px; margin-top: 3px;"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/marker-1.gif"><a class="pic1" style="text-decoration: none;" href="">July, 2011</a></div>
<div style="margin-left: 28px; margin-top: 3px;"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/marker-1.gif"><a class="pic1" style="text-decoration: none;" href="">June, 2011</a></div>
<div style="margin-left: 28px; margin-top: 3px;"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/marker-1.gif"><a class="pic1" style="text-decoration: none;" href="">May, 2011</a></div>
</div>
<!-- Background 3 use table tag-->
<table style="width: 400px; height: 400px; margin-left: 205px; margin-top: 200px;" background="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/content-img.png">ABC</table>
</div>
<div style="margin-bottom: 50px;">
<div class="abc4">
<h1 style="font-family:'Comic Sans MS'">Gallery</h1>
<div style="margin-left: 25px;"><a href=""><img class="pc1" src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/gallery-big-1.jpg" width="252px;" height="180px;" class="pc1"></a></div>
<div><a href=""><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/gallery-big-2.jpg" width="252px;" height="180px;" style="float: left; margin-top: -205px; margin-left: 305px;" class="pc1"></a></div>
<div style="margin-left: 25px;"><a href=""><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/gallery-big-3.jpg" width="252px;" height="180px;" style="margin-top: 20px;" class="pc1"></a></div>
<div><a href=""><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/gallery-big-4.jpg" width="252px;" height="180px;" style="float: left; margin-top: -205px; margin-left: 310px;" class="pc1"></a></div>
<div style="margin-left: 25px; margin-top: 20px;"><a href=""><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/gallery-big-5.jpg" width="252px;" height="180px;" class="pc1"></a></div>
<div><a href=""><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/gallery-big-6.jpg" width="252px;" height="180px;" style="float: left; margin-top: -205px; margin-left: 310px;" class="pc1"></a></div>
<div style="margin-left: 25px;"><a href=""><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/gallery-big-7.jpg" width="252px;" height="180px;" style="margin-top: 20px;" class="pc1"></a></div>
<div><a href=""><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/gallery-big-8.jpg" width="252px;" height="180px;" style="float: left; margin-top: -205px; margin-left: 310px;" class="pc1"></a></div>
</div>
<h1 style="margin-top: -80px; margin-left: 700px; font-family:'Comic Sans MS'"><center><a class="pic2" href="">Read More</a></center></h1>
</div>
</div>
<div class="sd1">© 2012 Art School</div>
<div class="sd2"><a style="color: purple; text-decoration: none;" href=""><b>Website Templates</b></a></div>
<div class="sd3">by</div>
<div class="sd4"><a class="ssd1" style="color: red;" href=""><b>TemplateMonster.com</b></a></div>
<div style="margin-top: 150px; margin-left: 220px;"><a href=""><img src="https://www.free-css.com/assets/images/affiliates/elegantthemes-900x120.jpg"></a></div>
</body>
</html>
5 CONTACT:
<!DOCTYPE html>
<html>
<head>
<title>contact</title>
<style type="text/css">
body{
background-color: black;
}
.body1{
width: 1000px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoNg7oFsPVtX47XmNfO2iuQSMyowcUkSFgsYrG4J7Ht9vv7hJ1CltA2eNl1IbMNCiHvcjamrFxNG0hcBtAYVr1NCHShT_673MFUIjBJSrAB-e4OAxTq9TxmmATZN8nlJvIbL2LcUa1gb4/s16000/header.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqB8N632HcubpQaZU6vVzqyYNTGO13KX3eINDX_1yIrR2Kbk-A0-1QXT_AtPZABgJ62CJ3nUMN16ZQYJ3J9TQZfpNU2OoLkpwUZYB0KSzC3dgr-2Iy658mmxA2tcOCgRpg9JewfYKD7Go/s16000/bg.jpg);
background-position: bottom, bottom;
background-repeat: no-repeat, repeat;
background-position-x: 475px, center;
background-position-y: 0px, 0px;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-origin: initial;
background-color: none;
background-size: initial, cover;
background-clip: initial;
}
.abc{
margin-left: 250px;
margin-top: 30px;
}
/*Section 2*/
.abc1{
margin-left: 200px;
}
.m4{
margin-top: -530px;
margin-left: 240px;
}
.s2 .s3 {display: block;
margin-top: 25px;
}
.s4 .s1{
max-width: 1030px;
position: relative;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 65%;
width: 40px;
height: 60px;
padding: 8px;
margin-top: 50px;
color: transparent;
transition: 0.9s ease;
border-radius: 0px 0px 0px 0px;
user-select: none;
}
.prev{
margin-left: 260px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0AxC9I-b1IXR2TcI_lahXL6-Zqt5eCYKPMEjak1hozOfyZKUzpR2I9ILhU4X5cGG0xJaCUWDth-gtgAZ4FeUMq1cHlA05fVyhuzF0Ssg6ECiBD3VW8muMS3T64OfTI1c0gP9IDU4iCdM/s16000/left-hand1.png) no-repeat;
background-color: transparent;
mix-blend-mode: multiply;
}
.prev:hover{
margin-left: 260px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhDRfWUIQJxLtBXBryiYnH9o0ALhGIIe7IiYq4CzNdVRn7HAne6cvisIwiLwaidEAADpd0nrDksGkU1vRUk8QrYvXZ4rTdcW7ZUNjZxAh8_0wVYSkYuCQw_nHizFEitW7L7FmPsiQRa_8/s0/left-hand2.png) no-repeat;
background-color: transparent;
mix-blend-mode: multiply;
}
.next {
right: 190px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpnnMJ53lcgLSZw77lgiCaFmKV2X4TrraTxnpMJ0OTl2qT-5DGRRSG1kv_jCALMRKTTuFvwsCLIBUOdIRKo3YoG9IMeFGGfXRmFI4-0-w25OI8hOxl1O_c0lJdGWvd6iFQRiAbZY-fOtg/w187-h200/right-hand1.png) no-repeat;
border-radius: 3px 0 0 3px;
background-color: transparent;
mix-blend-mode: multiply;
}
.next:hover{
right: 190px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeCjdoBsOrJJvnDhq6QUR2G3lQEeUrSIiLCwRH7u0vz2sD8QpolbGQgDHwHIMdvbquHVTud2wfizOw8nm0A58XxhXrfJMgRJ4SExgdfSGGIOFkUQZTqsp8zSYrn2PLOJn92Zyjip2FEXA/s0/right-hand2.png) no-repeat;
border-radius: 3px 0 0 3px;
background-color: transparent;
mix-blend-mode: multiply;
}
.prev:hover, .next:hover {
background-color: transparent;
}
.abc2{
width: 1010px;
margin-left: 150px;
margin-top: -26px;
position: relative;
}
.menu1{
list-style-type: none;
background-color: none;
margin-left: 90px;
padding-left: 30px;
overflow: hidden;
position: relative;
}
.menu2,.menu3,.menu4,.menu5,.menu6{
float: left;
letter-spacing: -5px;
padding-right: 28px;
}
.menu2 a{
width: 100%px;
display: inline-block;
font-size: 40px;
font-family: 'Cabin Sketch', 'cursive';
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: blue;
position: relative;
}
.menu3 a{
width: 100%px;
display: inline-block;
font-size: 40px;
font-family: 'Cabin Sketch', 'cursive';
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: black;
position: relative;
}
.menu4 a{
width: 100%px;
display: inline-block;
font-size: 40px;
font-family: 'Cabin Sketch', 'cursive';
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: orange;
position: relative;
}
.menu5 a{
width: 100%px;
display: inline-block;
font-size: 40px;
font-family: 'Cabin Sketch', 'cursive';
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: red;
position: relative;
}
.menu6 a{
width: 100%px;
display: inline-block;
font-size: 40px;
font-family: 'Cabin Sketch', 'cursive';
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: purple;
position: relative;
}
.menu2.menu3,.menu4,.menu5,.menu6:hover{
text-decoration: none;
display: block;
}
.menu2,.menu3,.menu4,.menu5,.menu6:hover > a{
position: relative;
color: black;
}
.menu2:hover > a{
position: relative;
color: black;
}
.menu3:hover > a{
position: relative;
color: black;
}
.menu4:hover > a{
position: relative;
color: black;
}
.menu5:hover > a{
position: relative;
color: black;
}
.menu6:hover > a{
position: relative;
color: black;
}
.abc3{
width: 350px;
margin-left: 230px;
margin-top: 70px;
}
/*Second Portion*/
.abc4{
width: 620px;
height: 650px;
background-color: rgb(248,248,248);
margin-left: 550px;
margin-top: -790px;
}
h1{
color: gray;
margin-left: 20px;
margin-top: 20px;
padding-top: 15px;
padding-left: 5px;
padding-bottom: 10px;
text-shadow: 2px 2px 4px gray;
}
/* p{
color: black;
font-size: 17px;
padding-left: 5px;
margin-left: 20px;
margin-top: -20px;
margin-right: 20px;
}
*/ .pic1{
color: black;
}
.pic1:hover{
color: blue;
}
.pic2{
text-decoration: none;
color: blue;
}
.pic2:hover{
color: red;
}
div{
margin-left: 20px;
margin-right: 20px;
}
span{
text-align: justify-all;
color: black;
font-size: 17px;
}
img{
margin-right: 5px;
}
table{
margin-left: 20px;
margin-right: 20px;
}
tr,td{
font-size: 17px;
color: green;
}
.op1{
color: red;
text-decoration-style: none;
text-decoration-line: none;
}
.op1:hover{
text-decoration: underline;
}
.sd1{
color: gray;
font-size: 15px;
margin-top: 40px;
margin-left: 830px;
}
.sd2{
color: blue;
font-size: 15px;
margin-top: 2px;
margin-left: 765px;
}
.sd3{
color: gray;
font-size: 15px;
margin-top: -16px;
margin-left: 887px;
}
.sd4{
color: red;
font-size: 15px;
margin-top: -18px;
margin-left: 904px;
}
.ssd1{
text-decoration: none;
}
.ssd1:hover{
text-decoration: underline;
}
</style>
</head>
<body class="body1 body2">
<div class="abc"><a href=""><img style="width: 288px; height: 151px;" src="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/logo.png"></a></div>
<!-- section 2 -->
<div class="abc1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVoBeAm_gCOuLkkWsbQLKX7UJh7wNB0EeeTDku6OOTchVWrh1wBpTrq-tpbDSUoQ9bCsNktG0Ts5NQyYsVDQrACRlvCX8HXZJj8vIjrob_6x2oYMQvLWXtyNRjaoDhhtXvozgvaEiWzpQ/s16000/slider-bg.png"></div>
<div class="s1 s4 m4">
<div class="s2 s3 fade">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjQNDQv4C0SJ-SIQEjV8eDNGylyZA7qxSWHJdhoU1UqhvAyMl0OBQND2wgeYyqkO6ykX6-JzR7T83nuXvQcgQ4xc4cYzPJVd7NqszzlM87q9vgNdQvujMSbhByItAGAw5l3iuhQsDtpB8/s16000/slider-1.jpg"></div>
<div class="s2 s3 fade">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2tWRCcxpYtLRt3VXQ-THYyUS8p8By07MPHxdNXrfBfNFBaFmSDLQvAVdyTYBK72967IPeoQpVC_B3bYrZcldd9gQVGFGnLWwyzYEZfOaTBr-GGtgtt6wgMrx3qFtjEvk11_5-wSOZiE/s16000/slider-2.jpg"></div>
<div class="s2 s3 fade">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5MH5P8hl9Shr3Ti_lA5SAVlVnUNcdg4yxoILORoVuM02EcJQSbl5V9S8GZ5_OGPKXLa_IgI_hThl7iMPMpDpG-GrClV8fGIieW7-Lwz3tTE6_tySJrt0-NPVYJvfVc35mShHeTFxXdZ8/s16000/slider-3.jpg"></div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("s3");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("s2");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
<!-- Menu list -->
<div class="abc2">
<ul class="menu1">
<li class="menu2"><a style="font-family: 'Cabin Sketch', 'cursive'" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/home.html">HOME</a></li>
<li class="menu3"><a href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/about.html">ABOUT</a></li>
<li class="menu4"><a href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/schedule.html">SCHEDULE</a></li>
<li class="menu5"><a href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/gallery.html">GALLERY</a></li>
<li class="menu6"><a href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/14.%209-1-2021/contact.html">CONTACTS</a></li>
</ul>
</div>
<!-- Left side portion -->
<div class="abc3">
<div style="font-size: 40px; margin-left: 0px; color: white;"><b>Contact Us</b></div>
<!-- map -->
<iframe style="width: 300px; height: 200px; margin-top: 10px;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3399.121026579765!2d74.32917221448439!3d31.575728851567206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39191ba4c4386459%3A0x2d94393e979b7a75!2sGCT%20Railway%20road%20lahore%20architecture%20department!5e0!3m2!1sen!2s!4v1610457633375!5m2!1sen!2s" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
<div style="margin-left: -5px;">
<p style="font-size: 16px; margin-top: 10px;margin-left: 0px; color: gray;">8901 Marmora Road,<br>Glasgow, D04 89GR.</p>
<div style="font-size: 16px; margin-top: -13px; margin-left: 5px; color: white;">Telephone:<a class="op1" href=""> +1 800 603 6035</a></div>
</div>
<div style="font-size: 16px; margin-top: 3px; margin-left: 0px; color: white;">E-mail:<a class="op1" href=""> mail@demolink.org</a></div>
<!-- Background 3 use table tag-->
<table style="width: 400px; height: 400px; margin-left: -25px; margin-top: 20px;" background="https://www.free-css.com/assets/files/free-css-templates/preview/page169/art-school/images/content-img.png">ABC</table>
</div>
<form>
<div class="abc4">
<h1 style="font-family:'Comic Sans MS'">Contact Form</h1>
<div style="margin-left: -30px;">
<div style="margin-top: 5px;">
<label style="margin-left: 45px;"><b>Name:</b></label>
<input style="margin-left: 40px; width: 240px; box-shadow: 0 0 3px #c1c1c1; width: 247px; height: 17px;outline-style: none;
outline-width: medium; padding: 3px 10px 5px 10px; border: #e0e0e1 1px solid; outline-color: initial;" type="text" id="name" name="name"></div>
<div style="margin-top: 8px;">
<label style="margin-left: 45px;"><b>Email:</b></label>
<input style="margin-left: 40px; width: 240px; box-shadow: 0 0 3px #c1c1c1; width: 247px; height: 17px;outline-style: none;
outline-width: medium; padding: 3px 10px 5px 10px; border: #e0e0e1 1px solid; outline-color: initial;" type="email" id="name" name="name"></div>
<div style="margin-top: 8px;">
<label style="margin-left: 45px;"><b>Phone:</b></label>
<input style="margin-left: 39px; width: 240px; box-shadow: 0 0 3px #c1c1c1; width: 247px; height: 17px;outline-style: none;
outline-width: medium; padding: 3px 10px 5px 10px; border: #e0e0e1 1px solid; outline-color: initial;" type="tel" id="name" name="name" pattern="[0-9]{4}-[0-9]{7}"></div>
<div style=" margin-top: 8px;">
<label style="margin-left: 45px; margin-top: 25px; float: left;" for="mob"><b>Message:</b></label>
<textarea style="border: #e0e0e1 1px solid; outline-style: none; box-shadow: 0 0 3px #c1c1c1; float: left; margin-left: 30px;" rows="25" cols="61"></textarea>
<br><br><br><br><br><br>
</div>
</div>
</div>
<div style="margin-top: 20px;">
<div style="margin-left: 700px; margin-top: -100px;">
<h1 style="font-family:'Comic Sans MS'"><center><a class="pic2" href="">Clear</a></center></h1>
</div>
<div style=" margin-left: 870px; margin-top: -90px;">
<h1 style="font-family:'Comic Sans MS'"><center><a class="pic2" href="">Send</a></center></h1>
</div>
</div>
<div class="sd1">© 2012 Art School</div>
<div class="sd2"><a style="color: purple; text-decoration: none;" href=""><b>Website Templates</b></a></div>
<div class="sd3">by</div>
<div class="sd4"><a class="ssd1" style="color: red;" href=""><b>TemplateMonster.com</b></a></div>
<div style="margin-top: 150px; margin-left: 220px;"><a href=""><img src="https://www.free-css.com/assets/images/affiliates/elegantthemes-900x120.jpg"></a></div>
</body>
</html>
No comments:
Post a Comment