Thursday, 20 May 2021

PTET 2021 Official Site Home page Design Tutorial in Hindi & English

TechnoGTB May 20, 2021 Codding, Techno

PTET 2021 Official Site Home page Design Tutorial in Hindi & English

Codding Steps

1.Step ----- Open your Codding Software in your pc

(A) Notepad (B) Notepad++ or (C) Brackets Soft.

2.Step----Create a new folder in your pc

3.Step----- Create a file in codding soft. And Save it in the folder with the extension of index.html or a file for style.css

4.Step----Then Copy The below Html Codding in index.html

👇

-----------------------------x-------------------------x----------------------------------

<head>

<meta charset='utf-8'/>

<meta content='width' name='MobileOptimized'/>

<meta content='true' name='HandheldFriendly'/>

<meta content='yes' name='apple-mobile-web-app-capable'/>

<meta content='index,nofollow' name='robots'/>

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

<title> PTET 2021 </title>

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

</head>

<body>

<div class="headerpart">

<h3>logo</h3>

<ul><h1> OFFICE OF COORDINATOR P.T.E.T.-2021 </h1>

<h2> GOVERNMENT DUNGAR COLLEGE,BIKANER(RAJASTHAN) INDIA </h2>

</ul>

</div>

<div class="menu-bar">

<ul>

<li ><a href="">Home</a></li>

<li><a href="#">Important Dates</a></li>

<li><a href="#">Important Downloads</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

</div>

<div class="years"><h6>(2 Year Course) [B.Ed.] Eligibility :- Graduation</h6>

<b><a herf="https://www.youtube.com/channel/UCFKaoY3OoV26-PGy6ndNrEw"> Click Here for B.Ed. 2 Year Course </a></b>

</div>

<div class="news"><h5>General Instructions</h5>

<marquee direction="up" height="80%" >

<p><i class="fa fa-cog fa-spin fa-2x fa-fw"></i>Ptet 2020 form last date extended </p> <br>

<p><i class="fa fa-cog fa-spin fa-2x fa-fw"></i>Subject Combination for PTET-2021</p> <hr>

<p><i class="fa fa-cog fa-spin fa-2x fa-fw"></i>General Guidelines for PTET-2021/B.A. B.Ed./B.SC. B.Ed. -2021</p><br>

<p><i class="fa fa-cog fa-spin fa-2x fa-fw"></i>Press Notification for PTET-2021/B.A B.Ed./B.SC. B.Ed. -2021</p><hr>

</marquee>

</div>

<div class="year"><h4> [4 Year Integrated Course] [B.A B.Ed./B.SC. B.Ed.] Eligibility :- 10+2 </h4>

<b><a herf="#">Click Here for B.A B.Ed./B.SC. B.Ed. 4 Year Course</a></b>

</div>

<div class="Contact"><h8>Schedule</h8>

<ul><p>PTET-2021 Office Phone No:09876543210</p>

<p>Email Id:<a href="#">asasdd@gmail.com</a></p>

<p>Address: Coordinator PTET-2021</p>

<p>GOVERNMENT DUNGAR COLLEGE,BIKANER (RAJ.) INDIA</p>

</ul>

</div>

<div class="ccontact"><h8>Schedule</h8>

<ul><p>PTET-2021 Office Phone No:09876543210</p>

<p>Email Id:<a href="#">asasdd@gmail.com</a></p>

<p>Address: Coordinator PTET-2021</p>

<p>GOVERNMENT DUNGAR COLLEGE,BIKANER (RAJ.) INDIA</p>

</ul>

</div>

</body>

</html>

-----------------------------x-------------------------x----------------------------------

5.Step-----Then Save as

6.Step----Now Copy the CSS file and paste it in style.css and save as

👇👇

----------------------x---------------------------------------------------------x-------------------------------

padding:0;

margin:0;

font-family: 'Lato',sans-serif;

}

body

{

background:#fff;

height: 100vh;width: auto;

background-position: center;

background-size: cover;

}

{

margin-top: 25px;

list-style-type: none;

}

ul h1

{

text-align: center;

text-decoration: none;

padding: 5px ;

color: darkblue;

border: 1px solid transparent;

transition: 0.6s ease;

}

ul h2

{

text-align: center;

text-decoration: none;

padding: 5px ;

color: blue;

border: 1px solid transparent;

transition: 0.6s ease;

}

{

text-decoration: none;margin-left: 5px;margin-top: 5px;

padding:40px;padding-left: 30px;padding-right: 30;

background-image: url(ptet20211.png);

color: transparent;

float: left;

}

.menu-bar{

background-color: darkblue;

}

.menu-bar ul

{

list-style-type: none;

}

ul li

{ margin-top: 12px;

display: inline-block;

width: auto; height: 29px;

}

ul li a

{ position:relative;

text-decoration: none;

padding

:11px 25px;

color: white;

border: 1px solid ;

}

ul li a:hover

{

background-color: #fff;

color: #000;

}

ul li.active a

{

background-color: #fff;

color: #000;

}

.main

{

margin: auto;

max-width: 1200px;

}

.menu-bar a:hover {

text-decoration: none;

}

.year

{

margin-top: 1px; width:350px; height:400px; background: skyblue; border-style: groove;float: inherit;

}

.year h4{

color: #fff; background:brown; text-align: center;animation:repeat;padding: 25px;

}

.news

{

margin-top: 1px; width:630px; height:400px;

border-style: groove;float: right;

background: skyblue;

}

.news h5{

color: #fff; background:brown; text-align: center;animation:repeat;padding: 25px;

}

.years

{

margin-top: 1px; width:350px; height:400px; background: skyblue; border-style: groove;float: right;

}

.years h6{

color: #fff; background:brown; text-align: center;animation:repeat;padding: 25px;

}

b a{

position:relative;

display: flex;

top: 40%;

left: 50%;

transform: translate(-50%,-50%);

background:blue;

border-radius: 4rem;

padding: 25px;

justify-content: center;width: 10rem;

text-decoration: none;

text-align: center;

}

b a:hover {

width: 10rem;

padding: 2rem;

box-shadow: 0rem 2rem 2rem -1.5rem;

background-color: darkorange;color: #000;

}

b.active a

{

background-color: #fff;

color: #000;}

.ccontact{ color: #fff;animation:repeat;padding: 90px;

width:165px; height:120px; background: blue; position:relative; border-radius: 3rem;margin-top:2px;border-style: groove;float: none;}

.ccontact ul{ right: 50%;

position:relative;

background:skyblue;color: brown;

border-radius: 2rem;

padding:20px; justify-content: center;

text-decoration: none;width: 300px;

}

.Contact { color: #fff;animation:repeat;padding: 90px;

width:165px; height:120px; background: blue; position:relative; border-radius: 3rem;margin-top: 2px;border-style: groove;float: right;}

.Contact ul{ right: 50%;

position:relative;

background:skyblue;color: brown;

border-radius: 2rem;

padding:20px; justify-content: center;

text-decoration: none;width: 300px;

}

h8{left:1%;top:5%;

color: yellowgreen; background:brown; text-align: center;animation:repeat;padding: 20px;position:absolute;border-radius: 3rem;width:300px;text-decoration: none;justify-content: center;

}

----------------------x---------------------------------------------------------x-------------------------------

Watch for more

https://youtu.be/8e6jQOUP0Tc

6.Step----Download logo and save it in folder with this name -ptet20211.png

NOW You will able to create this home page

Note:- our intense is not to create any spam or cheating...... We just give knowledge about Codding

About TechnoGTB
alistarbot is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of alistarbot is to provide the best quality blogger templates.