Asif Website Codes

 


<!DOCTYPE html>

<html lang="en">

<head>


<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Asif Web</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>


<style>



*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

header{

background-color: black;


}

nav{

width: 100%;

height: 60px;

}

.logo{

font-size: 35px;

font-weight: bold;

letter-spacing:1.5px;

line-height: 60px;

color: white;

padding: 0 100px;

cursor: pointer;

}

nav ul{

float: right;

margin-right: 20px;

}

nav ul li{

display: inline-block;

line-height: 60px;

margin: 0 5px;

list-style: none;

}

nav ul li a{

font-size: 16px;

font-weight: 500;

color: #fff;

padding: 7px 13px;

text-decoration: none;

text-transform: uppercase;

}


a.active, a:hover{

color: #f64b3e;

transition: .5s;

}


.checkBtn{

font-size: 1.5rem;

color: #fff;

float: right;

line-height: 60px;

margin-right: 40px;

cursor: pointer;

display: none;


}

#check{

display: none;

}


/* Welcome Section */


.welcomeSection{

    

    width: 100%;

    padding: 80px;

margin-top: 60px;

text-align: center;

flex-direction: column;

align-items: center;

justify-content: center;

color: lightgrey;

}


.welcomeSection h1{

font-size: 3vw;

margin-bottom: 1rem;

color: black;

}


.welcomeSection p{

text-align: center;

font-size: 1.3vw;

color: darkred;

margin-bottom: 35px;

}


/* Responsive Design */


@media (max-width:992px){

.logo{

font-size: 30px;

padding-left: 50px;

}


.welcomeSection {

padding: 40px;

}


.welcomeSection h1{

font-size: 3.5vw;

}

.welcomeSection p{

font-size: 1.8vw;

}

}


@media (max-width:858px){

.checkBtn{

display: block;

}

ul{

position: fixed;

width: 100%;

height: 100vh;

background: #54213c;

top: 60px;

left: 100%;

text-align: center;

transition: all .5s;

}

#check:checked ~ ul{

left: 0;

}

nav ul li{

display: block;

margin: 50px 0;

line-height: 30px;

}

nav ul li a{

font-size: 20px;

}


.welcomeSection {

padding: 20px;

}


.welcomeSection h1{

font-size: 4.2vw;

}

.welcomeSection p{

font-size: 2.7vw;

}

}


nav li a:hover{

color: #ff8c69;

transition: all 0.4s ease 0s;

}

.content-items img{

width: 100%;

height: 100vh;

background-size: cover;

background-position: center;

}


footer{


margin-top: 60px;

width: 100%;

position: static;

bottom: 0;

background: linear-gradient(to right, #00093c, #2d0b00);

color: #fff;

padding: 100px 0 30px;

border-top-left-radius: 125px;

font-size: 15px;

line-height: 22px;

}

.row{

width: 85%;

margin: auto;

display: flex;

flex-wrap: wrap;

align-items: flex-start;

justify-content: space-between;

}

.col{

flex-basis: 25%;

padding: 10px;

}


.col:nth-child(2), .col:nth-child(3){

flex-basis: 15%;

}


.logo{

width: 80px;

margin-bottom: 30px;

}

.col h3{

width: fit-content;

margin-bottom: 40px;

position: relative;

font-size: 20px;

}

.email-id{

width: fit-content;

margin: 10px 0;

text-decoration: none;

}

ul li {

list-style: none;

margin-bottom: 8px;

}

ul li a{

text-decoration: none;

color: #fff;

}

form{

padding-bottom: 15px;

display: flex;

align-items: center;

justify-content: space-between;

border-bottom: 1px solid #ccc;

margin-bottom: 50px;

}

form .far{

font-size: 18px;

margin-right: 10px;

}

form input{

width: 100%;

background: transparent;

color: #ccc;

border: 0;

outline: none;

padding-left: 10px;

}

form button{

background: transparent;

border: 0;

outline: none;

cursor: pointer;

}

form button .fas{

font-size: 16px;

color: #ccc;

}

.social-icons .fab{

width: 40px;

height: 40px;

border-radius: 50px;

text-align: center;

line-height: 40px;

font-size: 20px;

color: #000;

background: #fff;

margin-right: 15px;

cursor: pointer;

}

hr{

width: 90%;

border:0;

border-bottom: 1px solid #ccc;

margin: 20px auto;

}

.copyright{

text-align: center;

}



@media (max-width: 700px){

footer{

bottom: unset;


}

.col{

flex-basis: 100%;

margin-bottom: 30px;

}


.col:nth-child(2), .col:nth-child(3){

flex-basis: 100%;

}

}


table {

  font-family: arial, sans-serif;

  border-collapse: collapse;

  width: 100%;

}


td, th {

  border: 1px solid #dddddd;

  text-align: left;

  padding: 8px;

  color:#000000;

}


td b {

    color:blue;

}


tr:nth-child(even) {

  background-color: #dddddd;

}


.welcomeimg {


border: 2px solid green;

}


iframe {


margin-top: 60px;

width: 100%;

height: 750px;

}


</style>


</head>


<header>

<nav>

<input type="checkbox" id="check">

<label for="check" class="checkBtn">

<i class="fa-solid fa-bars"></i>

</label>

<label for="Logo" class="logo">WebName</label>

<ul>

<li><a href="#" class="active">Home</a></li>

<li><a href="https://www.youtube.com/watch?v=eNUpTV9BGac">About</a></li>

<li><a href="#">Services</a></li>

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

<li><a href="#">ThankYou</a></li>

</ul>

</nav>

</header>


<body>

<section class="welcomeSection">

<h1>Empowering You with Tech</h1>

<p>"Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them!<br>

Download now Font Awesome Free Icons - Pack Fill | Available sources SVG, EPS, PSD, PNG files. Personal and Commercial use.</p>


<br>


    <img class="welcomeimg" src="https://sb.ecobnb.net/app/uploads/sites/3/2020/01/nature.jpg">


    <br><br><br>


<table>  

  <tr>

    <td><b>What is Lorem Ipsum?</b></td>

    <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry</td>

  </tr>

  <tr>

    <td><b>Why do we use it?</b></td>

    <td>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</td>

  </tr>

  <tr>

    <td><b>Where does it come from?</b></td>

    <td>Contrary to popular belief, Lorem Ipsum is not simply random text.</td>

  </tr>

  <tr>

    <td><b>Where can I get some?</b></td>

    <td>There are many variations of passages of Lorem Ipsum available...</td>

  </tr>

   

</table>


<iframe src="https://picjumbo.com/free-images/nature/" title="Where does it come from?">

</iframe>



   <h1>The standard Lorem Ipsum passage, used since the 1500s</h1>

<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

</section>




<footer>

<div class="row">

<div class="col">

<img src="#" class="logo">

<p>Civil construction is often defined as a branch of Civil Engineering involved with the  design, maintenance and development of both natural and physically built environments.</p>

</div>

<div class="col">

<h3>Home</h3>

<p>Hariyawala Chowk,</p>

<p>Basai Road</p>

<p>Kashipur, PIN 244713, India</p>

<p class="email-id">asif@gmail.co.in</p>

<h4>+91 - 1234567890</h4>

</div>

<div class="col">

<h3>Links</h3>

<ul>

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

<li><a href="#">Services</a></li>

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

<li><a href="#">Features</a></li>

<li><a href="#">Contacts</a></li>

</ul>

</div>

<div class="col">

<h3>Newsletter</h3>

<form>

<i class="fa-regular fa-envelope"></i>

<input type="email" placeholder="Enter your email-id" required>

<button type="submit"><i class="fas fa-arrow-right"></i></button>

</form>

<div class="social-icons">

<i class="fab fa-facebook-f"></i>

<i class="fab fa-twitter"></i>

<i class="fab fa-whatsapp"></i>

<i class="fab fa-pinterest"></i>

</div>

</div>

</div>

<hr>

<p class="copyright">Asif © 2025 | All Reght Reserved</p>

</footer>


</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Most Trusted Sources of YTX Found

Image
Many poets and writers have been born in India, here many poets have captured the events of their time in their books. Today you can read the ghazals and poems written by him on the Internet. You can read its articles at any time on organizations like Rekhta Foundation, Youtreex Foundation, or Kavita Kosh. If seen, there is not much difference between a poet who writes in Urdu and writers who write in Hindi, only the difference is in language. Even in today’s time, people present their arts, but their lines do not reflect the pain which was reflected in the ghazals of earlier poets. We also organize poetry writing competitions every year. If you are a poet of English or Hindi language then you can join every poetry competitions. Read more Best Online Platform for Hindi Poetry in next post. Source Most Trusted Sources of YTX Found The individual income tax has been the largest single source of federal revenue since 1950, amounting to about 50 percent of the total and 8.1 percent of GDP ...
Read more

Best SEO Poetry Sites for Writers

Image
As a guide, the following definitions and table summarize the basic use of articles. Continue reading for a more detailed explanation of the rules and for examples of how and when to apply them. Best SEO Poetry Sites for Writers https://www.slideserve.com/YoutreexAuthors https://www.thetoptens.com/m/YoutreexAuthors/p/77493/ https://grabcad.com/rahul.kumar-453 https://orcid.org/0000-0003-4321-8109 https://www.anobii.com/01d4001b8fa32ca54f/profile/activity http://www.ipernity.com/user/2704622?rev=31 https://www.debate.org/YoutreexAuthors/ https://in.enrollbusiness.com/BusinessProfile/5743024/Youtreex-Foundation-Udham-Singh-Nagar---244713-Uttarakhand https://www.sitejabber.com/users/rahulk442 https://www.callupcontact.com/b/businessprofile/Youtreex_Foundation/7970523 https://www.trustorigin.com/company/youtreex.org https://www.bestincom.com/kashipur/community/youtreex-foundation https://www.peeplocal.com/kashipur/entertainment-media/youtreex-foundation https://www.crowdspring.com/users/Yo...
Read more

Dil Se Har Guzri Baat Guzri Hai

Image
dil se har guzri baat guzri hai kis qayamat ki raat guzri hai, chandni nim-wa daricha sukut aankhon aankhon mein raat guzri hai, hae wo log khubsurat log jin ki dhun mein hayat guzri hai, tamtamata hai chehra-e-ayyam dil pe kya wardat guzri hai, kisi bhatke hue khayal ki mauj kitni yaadon ke sat guzri hai, phir koi aas ladkhadai hai ki nasim-e-hayat guzri hai, bujhte jate hain dikhti palkon pe dip nind aai hai raat guzri hai. Famous Poetry in Hindi and Urdu:- https://diva.sfsu.edu/collections/glbt/bundles/238725 https://youtreex.medium.com/ramdan-kareem-wishes-and-ramdan-mubarak-quotes-in-hindi-for-2021-f6ce5d8ad514 http://wasearch.loc.gov/e2k/*/www.youtreex.org/ https://slashdot.org/submission/15397015/youtreex-foundation https://community.benchmarkemail.com/users/A4255/newsletter/Staged-Crime-Scenes https://www.indiegogo.com/individuals/28509960 https://www.pentaxuser.com/article/in-conversation-with-pentax-ambassadors-1240#comm387540 https://www.crunchbase.com/organization/youtreex-...
Read more