Scribd
Upload
5 views

New Text Document

The document outlines the structure and design of a website for Arena Animation Ranchi, including a navigation bar, a welcome section, and a login form. It details the institution's history, training standards, and various design elements in HTML and CSS. Additionally, it provides examples of CSS properties for styling fonts and margins.

Uploaded by

abdulpreneur01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views

New Text Document

The document outlines the structure and design of a website for Arena Animation Ranchi, including a navigation bar, a welcome section, and a login form. It details the institution's history, training standards, and various design elements in HTML and CSS. Additionally, it provides examples of CSS properties for styling fonts and margins.

Uploaded by

abdulpreneur01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>this is my first website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<nav>
<div class="logo"><img src="img/logo (1).png" alt="" width="200"></div>
<div class="links">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About us</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Placements</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div class="btn"><button type="button">Location</button></div>
</nav>
<img src="img/banner-2.png" alt="">

<div class="container" style="padding: 30px;">


<h2>Welcome to Arena Animation Ranchi</h2>
<p>Launching Winning Careers Since 1997</p>
<p>Arena Animation (previously known as Arena Multimedia), a unit of Aptech Ltd.,
in Ranchi situated at Circular Road, a prime location of Ranchi City. This
institution was established in the year 1997 and it has been running successfully
since its inception.</p>
<p>Being leaders in the Animation, VFX, Gaming, Web & Graphics Design training
space, we take our responsibilities as trainers & career makers very seriously. We
set in training standards with Responsibility, Competence, Integrity & High
Standards.</p>

<button type="button">Read more</button>


</div>

</body>
</html>

nav{
width: 100%;
height: 60px;
background-color: black;
border-bottom: solid 2px yellow;
}
.logo{
width: 20%;
height: 50px;
text-align: center;
padding-top: 10px;
float: left;
}
.links{
width: 50%;
height: 50px;
text-align: center;
float: left;
}
.links ul li{
list-style: none;
display: inline;
padding-left: 15px;
}
.links ul li a{
text-decoration: none;
color: white;
}
.btn{
width: 20%;
height: 40px;
padding: 20px;
float: left;
text-align: right;
}
.btn button{
width: 100px;
height: 30px;
background-color: yellow;
border: none;
border-radius: 10px;
}
.container p{
font-family: sans-serif;
font-weight: 500;
color: gray;
}
.container h2{
font-family: Blackadder ITC;
font-style: italic;
}
button{
width: 100px;
height: 40px;
background-color: transparent;
border: solid 1px black;
border-radius: 7px;
transition: 0.3s;
}
button:hover{
background-color: black;
color: white;
}

---------------------------------

----------------------------------------Margin in
css-----------------------------------------------

margin-left: 12px;
margin-right: ;
margin-top: ;
margin-bottom: ;
margin: ;

margin is use to make space/gapping grid in whatever direction you want.

------------------------------------Login page using


--------------------------------------------------

HTML:-
<div class="container">
<h2>Login</h2>
<form>
<input type="text" placeholder="Username">
<input type="password" placeholder="password">
<input type="checkbox"><span>Remember me</span>
<button type="button">Login</button>
<span class="a">Donot have an account</span><a href="">Signup?</a>
</form>
</div>

CSS:-
.container{
width: 300px;
height: 300px;
background-color: black;
border-radius: 20px;
}
h2{
color: white;
text-align: center;
padding-top: 30px;
}
input{
background-color: black;
color: white;
width: 200px;
height: 25px;
border: none;
border-bottom: solid 2px white;
margin-left: 45px;
margin-top: 20px;
}
input::placeholder{
color: white;
}
input[type="checkbox"]{
width: 10px;
height: 10px;
}
span{
color: white;
}
button{
width: 200px;
height: 25px;
background-color: aqua;
border-radius: 30px;
border: none;
margin-left: 45px;
margin-top: 20px;
}
.a{
margin-left: 45px;
}
a{
color: aqua;
text-decoration: none;
}
----------------------------------------FONTS IN
CSS-------------------------------------------------------------------

font-weight: ; its used for increase weight of font like 100,200,bold,light


font-size: ; its used for font size like larger small 10px 50px
font-style: ; its used for font styling
font-family: ; its used for font family light roboto,arial,etc
font: ; its used for font calling like regular,bol,light,semibold etc.

--------------------------------------------------------
NAVBAR----------------------------------------------------------

HTML:

<div class="navbar">
<div class="logo"></div>
<div class="links">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About US</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
<div class="login">
<input type="button" value="Login">
</div>
</div>

CSS:

.navbar{
width: 100%;
height: 50px;
background-color: black;
}
.logo{
width: 15%;
height: 50px;
background-color: aliceblue;
background-image: url(img/ghy.png);
background-position: center;
background-size: 110px;
background-repeat: no-repeat;
float: left;
}
.links{
width: 65%;
height: 50px;
float: left;

}
ul li a{
text-decoration: none;
float: left;
padding: 12px;
color: white;
font-weight: bold;
margin-top: -10px;
}
ul li{
list-style: none;
margin-left: 300px;
}
input[type="button"]{
float: right;
margin-right: 50px;
background-color: yellow;
width: 80px;
height: 30px;
margin-top: 10px;
border: none;
border-radius: 5px;
font-weight: bold;
}

You might also like