Skip to content

Instantly share code, notes, and snippets.

@smriazkhan

smriazkhan/practis.html

Created March 2, 2019 07:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save smriazkhan/a16d49d734349f05384bd29030a7d9f4 to your computer and use it in GitHub Desktop.
Save smriazkhan/a16d49d734349f05384bd29030a7d9f4 to your computer and use it in GitHub Desktop.
Download ZIP
practis
Raw
practis.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>website.com</title>
<style>
.head{
list-style-type:none;
height:150px;
background: gray;
}
ul li a{
float:left;
margin-right:10px;
text-decoration:none;
color:white;
margin-right:20px;
padding-right:50px;
}
ul{
margin:0 auto;
}
h1{
color:pink;
}
ul li a:hover{
color:lightblue;
}
.singup {
float:right;
margin-top:-100px;
color:white;
margin-right:100px;
text-decoration:none;
}
.body{
width:960px;
margin:0 auto;
background: blue;
}
.design{
background:lightgray;
margin-left:50px;
display:inline-block;
text-align:center;
}
.menu{
background:gray;
height:50px;
margin-top:100px;
}
.menu ul li{
float:left;
list-style:none;
margin-top:15px;
padding-right:50px;
}
.content{
width:300px;
border:2px solid gray;
border-radius:5px;
margin-right:50px;
text-align:justify;
margin-top:30px;
}
.content1{
width:300px;
border:2px solid gray;
border-radius:5px;
margin-left:655px;
margin-top:-110px;
}
footer{
height:30px;
background:gray;
text-align:center;
}
@media only screen and (max-width:800px){
.header{
width:100%;
padding:0;
}
}
@media only screen and (max-width:800px){
.menu ul{
width:100%;
padding:0;
}
}
}
</style>
</head>
<body>
<header>
<ul class="head">
<h1>website.com</h1>
<li><a href="#">home</a></li>
<li><a href="#">how it work</a></li>
<li><a href="#">survy service</a></li>
<li><a href="#">plan</a></li>
</ul>
<div class="singup">
<a style="text-decoration:none; color:white;" href="singup.html">singup</a>
<a style="text-decoration:none; color:white;" href="login.html">log in</a>
</div>
</header>
<div class="body">
<img style="height:250px; width:100%;;"src="light.jpg" alt="img" />
<h1 style="margin-top:-250px; margin-left:350px;">create survey answer</h1>
<div class="design">
<h3>design</h3>
<p>buled your design paragraph</p>
</div>
<div class="design">
<h3>collect</h3>
<p>collect your website and your bussuness</p>
</div>
<div class="design">
<h3>analyze</h3>
<p>analyze your seo and website</p>
</div>
<div class="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">top</a></li>
<li><a href="#">bottom</a></li>
<li><a href="#">right</a></li>
<li><a href="#">left</a></li>
</ul>
</div>
<div class="content">
<a style="text-decoration:none;" href="#"><h2 style="font-size:20px;color:pink; text-align:center;">sm riaz khan</h2></a>
<p style="color:lightblue;">sm riaz khan smriaz khan sm riaz khan sm riaz khan</p>
</div>
<div class="content1">
<a style="text-decoration:none;" href="#"><h2 style="font-size:20px;color:pink; text-align:center;"> sm riaz khan</h2>
<p style="color:lightblue;">sm riaz khan smriaz khan sm riaz khan sm riaz khan</p>
</div>
<footer>
<p>copy right 2019 sm riaz khan</p>
</footer>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment