website experiment 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/practice1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" />
<title>Document</title>
</head>
<body>
<div class="nav">
<img src="../pic/logo1.jpg">
<p>QUALEX IT</p>
<div class="menu">
<!-- span holo div er moto but div block level a kaj kore.Span kaj kore line level a .span dhoreeditkorte hoi.
ar ☰ holo menu code .ota dela manu icon ashe amon onek html icone code google src dela paoua jai' -->
<span onClick="kkfunction()">☰</span>
<ul class ="uiclass" id="mal">
<li class="list"><a href=#>HOME</a> </li>
<li class="list"><a href=#>ABOUT ME</a></li>
<li class="list"><a href=#>STUDY</a></li>
<li class="list"><a href=#>EXTRA</a></li>
</ul>
</div>
</div>
<script>
function kkfunction(){
var x= document.getElementById("mal");
if (x.style.display=="none")
{
x.style.display="block";
}
else
{
x.style.display="none";
}
}
</script>
<!-- navber ar porer kaj -->
<div class="header">
<div class="hdu fixed-top">
<div class="centu">
<h1 >QUALEX IT</h1>
<p> An Upcomming Project</p>
<div class="bute">
<a href="#">About Us</a>
<a href="#">Connect</a>
</div>
</div>
</div>
</div>
<!-- ###################### ner part sart############## -->
<br>
<br>
<br>
<div class="moth">
<div class="ch ch1">
<h1>EASY</h1>
<hr>
<p>Paragraphs are the most commonly used units of discourse.
While they are important, they are also the most commonly
misused to emulate other units, like headings, lists and tables.
</div>
<div class="ch ch1">
<h1>RELIABLE</h1>
<hr>
<p>Paragraphs are the most commonly used units of discourse.
While they are important, they are also the most commonly
misused to emulate other units, like headings, lists and tables.
</p>
</div>
<div class="ch ch1">
<h1>FREE</h1>
<hr>
<p>Paragraphs are the most commonly used units of discourse.
While they are important, they are also the most commonly
misused to emulate other units, like headings, lists and tables.
</p>
</div>
</div>
<!-- next 2 part start -->
<br>
<br>
<div class="bar1">
<h1>What We Offer</h1>
<p>Learn Programming whenever you want</p>
</div>
<div class="berol">
<div class="patali patali1">
<img src="../pic/progress.png" alt="prgress">
</div>
<div class="patali patali2">
<div class="new">
<h1>HTML</h1>
<p>Lear html from us</p>
</div>
</div>
<div class="patali patali3">
<div class="new">
<h1>CSS</h1>
<p>Lear css from us</p>
</div>
</div>
<div class="patali patali4">
<div class="new">
<h1>JAVA SCRIPT</h1>
<p>Lear javascript from us</p>
</div>
</div>
</div>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="subject">Subject</label>
</div>
<div class="col-75">
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
.menu{
text-align: right;
font-weight: bolder;
}
/* thats part is very important part .aikhne class dhore kono kaj holo na ul ii dhore orizontal korte holo */
ul li{
display: inline-block;
padding:20px;
}
.list a{
text-decoration: none;
color: white;
padding: 20px;
}
.uiclass :hover{
background: rgb(0, 255, 242);
color: tomato;
}
.nav{
background: linear-gradient(to right,#1e5799 0%,#3ccdbb 0%,#16c9f6 100% );
color:white; /* Totala box er moddhe color marle text ar color hoi */
padding: 10px;
position: relative;
}
.nav img{
display:block;
height: 60px;
float:left;
margin-left: 30px;
padding-bottom: 5px;
position:absolute;
}
.nav p{
font-size: xx-large;
font-weight: bolder;
font-style: italic;
display:block;
margin-left:100px ;
margin-top: 6px;
position:absolute;
}
span{
margin: 0px 20px 0px 20px;
font-size: 40px;
cursor: pointer;
display: none;
/* display none kore dela gayeb hoye jai mal da */
}
/* media quary use kora hoi ak ak display size device a ak ak rokom show korte */
@media (max-width:768px){
span{
display: block;
}
ul li{
/* choto screen a option gula vertically sajalam */
display: block;
}
ul{
display:none;
}
/* media quary sobar niche likhte hoi */
/* @media (min-weidth:768) and (max-width: 1023px) dui point ar majhedakhate amon use korbo */
/* min-width:2345 amon dela amon hobe je oi size er opore na gale oinlayout ashbe na */
/* ar moddhe je code likhbo ta karjokor hobe sei device er jonno jar display weight 700px ar niche */
}
/* nav er kaj sesh */
.header{
width: 100%;
height: 80vh;
background-image:linear-gradient(rgba(0,168,255,0.3),rgba(0,168,255,0.3)) ,url('../pic/cover2.jpg');
clip-path: polygon(100% 0%, 100% 77%, 50% 100%, 0 75% ,0 0);
position: relative;
}
.header:before {
content: "";
position: absolute;
top:0%;
bottom: 0%;
left:0%;
right: 0%;
background: linear-gradient(to right,#1e5799 0%,#3ccdbb 0%,#16c9f6 100% );
opacity: .5;
z-index: -1;
}
.hdu{
width: 100%;
height: inherit;
color: white;
text-align: center;
position: relative;
}
.centu{
width: 100%;
height: auto;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}
.centu h1{
font-size: 4rem ;
font-weight: bold;
font-style: italic;
}
.centu p{
font-size: 25px ;
color:white;
font-style: italic;
}
.bute{
margin-top:30px;
}
.bute a{
border: 1px solid;
border-radius: 100px;
margin: 0px 15px;
padding: 12px 25px;
outline: none;
color: white;
font-size: 1rem;
font-weight: 1.4;
line-height: 1.4;
text-align: center;
text-decoration: none;
font-weight: bold;
}
.bute a:hover{
color:rgb(0, 172, 252);
background: rgb(227, 233, 230);
text-decoration:none;
box-shadow: 0 0 20px 0 rgb(0, 0 ,0, 0.3);
}
/* next ar kaj shuru */
.ch{
color:black;
font-size:18px;
padding: 20px 70px;
align-items:center;
transition: 0.3s;
}
.moth{
display:grid;
height: 100%;
grid-template-columns: 1fr 1fr 1fr;
}
.ch P{
text-align: center;
padding: 10px;
}
.ch h1{
color: rgb(0, 153, 255);
text-align: center;
padding: 5px;
}
.ch:hover{
box-shadow: 0 0 20px 0 rgb(0, 0 ,0, 0.3);
transform: translateY(-20px);
}
.bar1{
text-align: center;
margin:30px
}
.bar1 p{
margin:10px;
font-weight: bold;
font-size: 20px;
}
.bar1 h1{
color: rgb(0, 153, 255);
}
.patali{
margin: 30px;
}
.patali1{
grid-column:span 2;
grid-row:span 3;
}
.patali1 img{
display:block;
height: 65px;
width:12px;
}
.patali2{
grid-column:span 2;
}
.patali3{
grid-column:span 2;
}
.patali4{
grid-column:span 2;
}
.patali1 img{
height:100%;
width:100%
}
.berol{
display: grid;
height: 100%;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 10px;
row-gap: 10px;
/* background-color: rgb(247, 240, 240); */
}
.new{
text-align: center;
}
.new p{
font-size: 25px;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
Comments
Post a Comment