Html and Css using website

<! doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width. intial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<title>www.a3programming.com</title>
    <script type="text/javascript">
        function message()
        {
         
        alert("Hello my friend"); 
         
         
        }
    </script>
</head>
<body bgcolor="#d9d9d9" onload="message()">
<form>
 
<div id="outerbox">
<img src="s.jpg"width:1280px; height:349px;>
<div id="matter">
<div id="text">
<span style="color:blue;">a</span><span style="color:red;">3</span>programming...
</div>
</div>
</div>
<div id="icon">
<div id="text2">
</div>
<div id="icon1">
<img src="you4.png" height="40px" width="40px" class="round" onmouseover=this.src="you1.jpg" onmouseout=this.src="you3.jpg">
</div>
<div id="icon2">
<img src="tw.png" height="40px" width="40px" class="round" onmouseover=this.src="tw1.jpg" onmouseout=this.src="tw.png">
</div>
<div id="icon3">
<img src="f1.png" height="40px" width="40px" class="round" onmouseover=this.src="f2.png" onmouseout=this.src="f1.png">
</div>
<div id="icon4">
<img src="w.jpg" height="40px" width="40px" class="round" onmouseover=this.src="wd2.png" onmouseout=this.src="w.jpg">
</div>
<div id="icon5">
<img src="kog.jpg" height="40px" width="40px" class="round" onmouseover=this.src="g3.png" onmouseout=this.src="kog.jpg">
</div>
<div id="icon6">
<img src="ins.jpg" height="40px" width="40px" class="roun" onmouseover=this.src="ins1.png" onmouseout=this.src="ins.jpg">
</div>
</div>
<div id="wname">
    <span style="color:green">www.</span><span style="color:#0000e6" border:1px solid blue>a</span><span style="color:#008000">3</span><span style="color:#0000ff">programming</span><span style="color:green">.com</span>
</div>
<div id="container">
<ul>
<li><a href="file:///C:/Users/Dell/Desktop/website/succes.htm">Home</a></li>
<li> About us
<ul>
<li><a href="#">Developer</a></li>
<li><a href="#">Website</a></li>
<li><a href="#">Programmer</a></li>
</ul>
</li>
<li>Programming
<ul>
<li><a href="#">WebsiteTemplate</a></li>
<li>About Language
<ul>
<li><a href="#">C and C++</a></li>
<li><a href="#">JavaProgramming</a></li>
<li><a href="#">JavaAdvanced</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Html</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">PHP</a></li>
</ul>
</li>
<li>Computer
<ul>
<li><a href="#">ComputerBasics</a></li>
<li><a href="#">Fundamental</a></li>
<li><a href="#">SoftwareRelated</a></li>
<li><a href="#">HardwareRelated</a></li>
</ul>
</li>
<li><a href="#">Programs</a></li>
<li><a href="C:\Users\Dell\Desktop\G-mail program.htm">Business</a></li>
</ul>
</li>
<li>Contact us
<ul>
<li><a href="#">Mobile</a></li>
<li><a href="#">E-mail</a></li>
<li><a href="#">G-mail</a></li>
<li><a href="#">Whatsapp</a></li>
</ul>
</li>
<li><a href="#">Education</a></li>
<li><a href="#">Jobs</a></li>
<li>Feature
<ul>
<li>Question</li>
<li>Example</li>
<li>FAQ
<ul>
<li><a href="#">UniversityQuestion</a></li>
<li><a href="#">Solution</a></li>
<li><a href="#">TrickyQuestion</a></li>
</ul>
</li>
<li>Share
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Whatsapp</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Help</a></li>
</ul>
</div>
 
<div id="banner">
 
<img src="l.jpg" width="1280px" height="350px" class="ban" onmouseover=this.src="banne.jpg" onmouseout=this.src="l.jpg" onclick=this.src="loop.jpg">
</div>
<div id="search">
<input type="text" name="" placeholder="Type. . ." style="color:black; width:201px; height:30px; border:1px solid blue; border-radius:15px; font-family:timesnewroman;font-size:16px; padding-left: 6px;">
<input type="Submit" value="Search" name="" style="color:#000000; background-color:f2f2f2; width:60px; height:30px; border:1px solid blue; border-radius:10px;font-family:timesnewroman;font-size:16px;">
</div>
<div id ="content">
<div id="left-content">
<div id="c">
<a href="#"><img src="c.png" width="180px" height="170px"></a>
    <p class="pname"><a href="#"> C ProgrammingTutorial</a></p>
</div>
<div id="java">
<a href="#"><img src="c++.jpg" width="180px" height="170px"class="im"></a>
    <p class="pname"><a href="#"> C++ProgrammingTutorial</a></p>
    </div>
<div id="javascript">
<a href="#"><img src="hf.png" width="180px" height="170px" class="ima"></a>
    <p class="pname"><a href="#"> JavaProgrammingTutorial</a></p>
    </div>
<div id="hml">
<a href="#"><img src="js.png" width="180px" height="170px" class="ima"></a>
    <p class="pname"><a href="#"> JavaScriptTutorial</a></p>
    </div>
<div id="css">
<a href="C:\Users\Dell\Desktop\know.htm"><img src="combi.jpg" width="180px" height="170px" class="ima"></a>
    <p class="pname"><a href="#"> Html and CSS Tutorial</a></p>
    </div>
<div id="php">
<a href="#"><img src="php2.png" width="180px" height="170px"></a>
    <p class="pname"><a href="#">PHP and Jquery Tutorial</a></p>
    </div>
</div>
<div id="right-content">
<section class="heading">
    Top 10 Tutorial
    </section>
    <section class="tname">
        <a href="#"> C and C++ Tutorial</a>
        <br>
         <a href="#">Java Tutorial</a>
           <br>
        <a href="#">JavaScript Tutorial</a>
           <br>
        <a href="#">JavaAdvance Tutorial</a>
           <br>
        <a href="#">HTML Tutorial</a>
           <br>
        <a href="#">CSS Tutorial</a>
           <br>
        <a href="#">SQL Tutorial</a>
           <br>
    <a href="#">PHP Tutorial</a>
        <br>
        <a href="#">XML Tutorial</a>
           <br>
    <a href="#">jQuery Tutorial</a>
        </section>
    <section class="heading">
    Top 10 References
    </section>
    <section class="tname">
         <a href="#"> C and C++ Reference</a>
        <br>
         <a href="#">Java Reference</a>
           <br>
        <a href="#">JavaScript Reference</a>
           <br>
        <a href="#">JavaAdvance Reference</a>
           <br>
        <a href="#">HTML Reference</a>
           <br>
        <a href="#">CSS Reference</a>
           <br>
        <a href="#">SQL Reference</a>
           <br>
    <a href="#">PHP Reference</a>
        <br>
        <a href="#">XML Reference</a>
           <br>
    <a href="#">jQuery Reference</a>
     
        </section>
     <section class="headin">
    Web Certificates
    </section>
    <section class="tname">
        <a href="#">C and C++ Cerficate</a>
        <br>
     
        <a href="#">JavaScript Cerficate</a>
        <br>
<a href="#">Html Cerficate</a>
        <br>
        <a href="#">CSS Cerficate</a>
        <br>
    </section>
    <section class="lr">
 
        <a href="#">read more...</a>
    </section>
 
    </div>
<div id="link">
    <p></p>
</div>
</div>
<div id="add">
    <div id="update">
     
    </div>
        <div id="update">
             </div>
        <div id="update">
    </div>
    <div id="update">
    </div>
    <div id="update">
    </div>
</div>
<div id="mediabutton">
</div>
<div id="foot1"><pre>
    <quote>"Discovery is not igorance.
     
             it is the illusion of knowledge."</quote></pre>
</div>
<div id="foot2">
    <p><span class="hr">a3</span>programming is optimized for learning,testing and training.Example might be simplified to improve reading and basic understanding.
    Tutorials,reference and example are constantly reviewed to avoid errors,but we can not warrant full correctioness of all content .
    while you using this site ,you agree to have read and accepted our terms of use ,cookie and privacy policy.</p>
    <p>
    @Copyright 2017 by reference data.
        </p>
    <p>All Rights Reversed.</p>
    <a href="#"><img src="like.jpg" height="50px" width="50px" class="he"></a><p>Please give your feedback on Google Play</p>
    <p style="cursor:pointer">www.a3programming.com</p>
    </div>
</form>
</body>
</html>
and it's CSS file:-
*{
margin:0px;
padding:0px
}
#outerbox{
height:106px;
width:200px;
margin-left:5px;
overflow:hidden;
}

#outerbox img{
cursor:pointer;
transition:transform 1s;
}
#outerbox:hover img{
transform:rotate(360deg);
transform:scale(1.020,1.020) rotate(360deg);
}
#matter{
height:106px;
width:200px;
margin:auto;
transition:transform 2.5s;
   
}
#text{
color:green;
text-align:center;
height:106px;
line-height:206px;
font-size:25px;
pointer:cursor;
}
#outerbox:hover #matter{
transform:translateY(-164px) rotate(360deg);
}
#icon{
width:800px;
margin-left:490px;
float:left;
height:60px;
border-radius:10px;
margin-top:-100px;

}
#text2{
margin-top:5px;
width:230px;
height:20px;
float:left;
padding:10px;
margin-top:5px;
margin-left:50px;
font-family:Edwardian Script ITC;
text-align:center;
    font-size:25px;
color:blue;
cursor:progress;
}
#icon1{
width:60px;
height:60px;
margin-top:2px;
margin-left:20px;
border-radius:30px;
float:left;
}
#icon2{
width:60px;
height:60px;
margin-top:2px;
margin-left:20px;
border-radius:30px;
float:left;
}
#icon3{
width:60px;
height:60px;
margin-top:2px;
margin-left:20px;
border-radius:30px;
float:left;
}
#icon4{
width:60px;
height:60px;
margin-top:2px;
margin-left:20px;
border-radius:30px;
float:left;
}
#icon5{
width:60px;
height:60px;
margin-top:2px;
margin-left:20px;
border-radius:30px;
float:left;
}

#icon6{
width:60px;
height:60px;
margin-top:2px;
margin-left:20px;
border-radius:30px;
float:left;
}

#wname{
margin-bottom:5px;
margin-top:5px;
margin-left:5px;
height:35px;
width:200px;
font-size:25px;
font-family:TimesNewRoman;
cursor:progress;
}
#banner{
margin-top:55px;
margin-left:5px;
width:1280px;
height:350px;
border:5px groove #3C3E94;
border-radius:10px;
box-shadow:0px 0px 8px black;
    overflow: hidden;
    
}
#search{
height:30px;
width:265px;
margin-top:15px;
border-radius:10px;
margin-left:1024px;
cursor:help;
}
#container ul{
margin-bottom:5px;
list-style:none;
}
#container ul li{
background-color:#3C3E94;
width:155px;
border:1px solid white;
height:30px;
line-height:30px;
text-align:center;
float:left;
color:white;
font-size:18px;
position:relative;
border-radius:10px;
margin-left:2px;
}
#container ul li a{
text-decoration:none;
color:white;
display:block;
}
#container ul li:hover{
background-color:#388222;
}
#container ul li a:hover{
background-color:#388222;
border-radius:10px;
}

#container ul ul{
display:none;
}
#container ul li:hover > ul{
display:block;
position:absolute;
}
#container ul ul ul{
margin-left:156px;
top:0px;
position:absolute;
}
#content{
width:980px;
height:1200px;
border:2px solid #3C3E94 ;
margin-top:25px;
margin-left:5px;
box-shadow:0px 0px 10px grey;
border-radius:10px;
}
#left-content{
width:435px;
height:700px;
border:2px solid #3C3E94 ;
float:left;
margin-left:20px;
margin-top:80px;
border-radius:10px;
box-shadow:0px 0px 10px grey;
}
#right-content{
width:435px;
height:700px;
border:2px solid #3C3E94 ;
margin-left:20px;
margin-top:80px;
float:left;
font-family:TimesNewRoman;
color:blue;
border-radius:10px;
background-color:lightgray;
box-shadow:0px 0px 10px grey;
    overflow: hidden;
}
.heading{
    text-align:center;
    margin-top:10px;
    background-color:blue;
    border:1px solid blue;
    font-size:20px;
    text-decoration-line: none;
    border-radius:5px;
    color:white;
    }
.heading:hover{
    
    color:white;
    background-color:darkgreen;
    
    
    
}
.headin{
    text-align:center;
    margin-top:10px;
    background-color:blue;
    border:1px solid blue;
    font-size:20px;
    text-decoration-line: none;
    border-radius:5px;
    color:white;
    }
.headin:hover{
    
    color:white;
    background-color:darkgreen;
    text-decoration: line-through;
    
    
}

.tname{
    
    text-align:left;
    margin-top:20px;
    padding-left: 20px;
    margin-bottom: 16px;
    font-family:TimesNewRoman;
    }
.tname a{
    
    color:blue;
     text-decoration: none;    
}
.tname a:hover{
    
    color:darkgreen;
    text-decoration: underline;
}
.lr a{
    background-color:blue;
    margin-left:340px;   
    display:block;
    border:1px solid blue;
    border-radius:15px 5px;
    padding-left:5px;
    color:white;
text-decoration: none;
display:block;
    
}

.lr a:hover{
    color:white;
    background-color:green;
    display:block;
    }
body{
    
     
    border:2px solid gray;
    border-radius:10px;
}
.pname{
    
    background-color:blue;
    border-radius:5px;
    border:1px solid blue;  
    
    
    
}
.pname a{
    

    color:white;
    text-decoration:none;
    display:block;
    text-align:center;
}
.pname a:hover{
    
    color:white;
    background-color: darkgreen;
    cursor:pointer;
    text-decoration: none;
}

#c{
width:180px;
height:200px;
margin-left:20px;
margin-top:20px;
float:left;
border:2px solid #3C3E94;
border-radius:10px;
box-shadow:3px 3px 8px grey;
background-color:lightgray;
color:blue;    
text-align:center;
}
#java{
width:180px;
height:200px;
margin-left:20px;
margin-top:20px;
float:left;
border:2px solid #3C3E94;
border-radius:10px;
box-shadow:3px 3px 8px grey;
background-color:lightgray;
color:blue;    
text-align:center;
}
#javascript{
width:180px;
height:200px;
margin-left:20px;
margin-top:20px;
float:left;
border:2px solid #3C3E94;
border-radius:10px;
box-shadow:3px 3px 8px grey;
background-color:lightgray;
color:blue;    
  text-align:center;
}
#hml{
width:180px;
height:200px;
margin-left:20px;
margin-top:20px;
float:left;
border:2px solid #3C3E94;
border-radius:10px;
box-shadow:3px 3px 8px grey;
background-color:lightgray;
color:blue;
    text-align:center;

}
#css{
width:180px;
height:200px;
margin-left:20px;
margin-top:20px;
float:left;
border:2px solid #3C3E94;
border-radius:10px;
box-shadow:3px 3px 8px grey;
background-color:lightgray;
color:blue;    
  text-align:center;
}
#php{
width:180px;
height:200px;
margin-left:20px;
margin-top:20px;
float:left;
border:2px solid #3C3E94;
border-radius:10px;
box-shadow:3px 3px 8px grey;
background-color:lightgray;
color:blue;    
  text-align:center;
}
#add{
height:1200px;
width:276px;
float:left;
margin-top:-1205px;
margin-left:1005px;
border:2px solid #3C3E94;
border-radius:10px;
}
#link{
margin-top:950px;
height:100px;
width:960px;
border:2px solid #3C3E94;
margin-left:6px;
border-radius:10px;
}
#mediabutton{
height:40px;
width:1280px;
margin-top:20px;
margin-left:5px;
border-radius:10px;
border:2px solid #3C3E94;
}
#foot1{
height:200px;
width:1280px;
border:2px solid #3C3E94;
margin-left:5px;
margin-top:870px;
border-radius:10px;
background-image: url(loop.jpg);
    color:white;
    padding-top:50px;
    padding-left: 5px;
}
span.hr{
    width:0.7px;
    font-size: 50px;
    clear:left;
    
}
img.he{
    
    border-radius:50%;
    background-color: none;
}
#foot2{
height:230px;
width:1280px;
border:2px solid #3C3E94;
margin-left:5px;
margin-bottom:20px;
margin-top:165px;
border-radius:10px;
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 10px;
    color:blue;
    background-color: lightgray;
}
#foot2:hover{
    
    color:white;
    background-color:black;
    
    
    
}
img.round{
border-radius:50px;
cursor:pointer;
border:2px solid white;
}
img.roun{
border-radius:14px;
border:2px solid white;
cursor:pointer;
}
img.ban{
cursor:pointer;
border-radius:2px;
}
img.im{
    
    border-radius:50%;
}
img.ima{
    
    border-radius:50%;
border:;
}

#update{
    height:200px;
    width:250px;
    margin-left: 10px;
    border:2px solid blue;
    margin-top:18px;
    border-radius:10px;
    
    }
@media screen and (min-width: 480px){

}

Post a Comment

0 Comments