Get Pre Made Website Code For Free

-

    Pre Made Website Code For Free

                                   HTML+CSS

THIS WEBSITE HAS BEEN MADE BY USING HTML AND CSS

1. HTML CODE 

<!DOCTYPE html>
<html>
<head>
<title>WEBSITE DESIGNING:TUTORIALS</title>
</head>
<style type="text/css">

</style>
<body>
<div class="banner">
<div class="navbar">
<img src="logo1.png" class="logo">
<ul> 
      <li><a href="#">Home</a></li>
      <li><a href="#">Gallery</a></li>
       <li><a href="#">Design</a></li>
      <li><a href="#">contact us</a></li>
       <li><a href="#">About us</a></li>
</ul>
</div>

<div class="content">
<h1>DESIGN YOUR HOUSE</h1>
            <p>Subscribe Easy Tutorials Youtube Channel to watch more videos, <br>Press the bell icon to get latest updates.</p> 
            <div>
            <button type="button"><span></span> WATCH MORE</button>
            <button type="button"><span></span> SUBSCRIBE</button>
            </div>

</div>

</div>

</body>
</html>

2. CSS CODE

body
{
background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(lol11.png);
background-size: cover;
background-position: center;
}

*
{
margin: 0;
padding: 0;
font-family: sans-serif;
}

.banner
{
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(lol11.png);
background-size: cover;
}

.navbar
{
width: 85%;
margin: auto;
padding: 35px 0;
display: flex;
align-items: center;
justify-content: space-between;
}

.logo
{
width: 120px;
cursor: pointer;
}

.navbar ul li
{
list-style: none;
display: inline-block;
margin: 0 20px;
position: relative;
}

.navbar ul li a
{
text-decoration: none;
color: #fff;
text-transform: uppercase;
}

.navbar ul li::after
{
content: '';
height: 3px;
width: 0;
background: #009688;
position: absolute;
left: 0;
bottom: -10px;
transition: 0.5s;
}

.navbar ul li:hover::after
{
width: 100%;
}

.content
{
width: 100%;
position:absolute; 
top: 50%;
transform: translatelY(-50%);
text-align: center;
color: #fff;
}

.content H1
{
font-size: 70px;
margin-top: 80px;
}

.content p
{
margin: 20px auto;
font-weight: 100;
line-height: 25px;
}

button
{
width: 200px;
padding: 15px 0;
text-align: center;
margin: 20px 10px;
border-radius: 25px;
font-weight: bold;
border: 2px solid #009688;
background: transparent;
color: #fff;
cursor: pointer;
position: relative;
overflow: hidden;
}

span
{
background: #009688;
height: 100%;
width: 0;
border-radius: 25px;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
transition: 0.5s;
}

button:hover span
{
width: 100%;
}
button:hover
{

border: none;
}


Full code html with css.  (html+css)

<!DOCTYPE html>
<html>
<head>
<title>WEBSITE DESIGNING:TUTORIALS</title>
</head>
<style type="text/css">
body
{
background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(lol11.png);
background-size: cover;
background-position: center;
}

*
{
margin: 0;
padding: 0;
font-family: sans-serif;
}

.banner
{
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(lo.png);
background-size: cover;
}

.navbar
{
width: 85%;
margin: auto;
padding: 35px 0;
display: flex;
align-items: center;
justify-content: space-between;
}

.logo
{
width: 120px;
cursor: pointer;
}

.navbar ul li
{
list-style: none;
display: inline-block;
margin: 0 20px;
position: relative;
}

.navbar ul li a
{
text-decoration: none;
color: #fff;
text-transform: uppercase;
}

.navbar ul li::after
{
content: '';
height: 3px;
width: 0;
background: #009688;
position: absolute;
left: 0;
bottom: -10px;
transition: 0.5s;
}

.navbar ul li:hover::after
{
width: 100%;
}

.content
{
width: 100%;
position:absolute; 
top: 50%;
transform: translatelY(-50%);
text-align: center;
color: #fff;
}

.content H1
{
font-size: 70px;
margin-top: 80px;
}

.content p
{
margin: 20px auto;
font-weight: 100;
line-height: 25px;
}

button
{
width: 200px;
padding: 15px 0;
text-align: center;
margin: 20px 10px;
border-radius: 25px;
font-weight: bold;
border: 2px solid #009688;
background: transparent;
color: #fff;
cursor: pointer;
position: relative;
overflow: hidden;
}

span
{
background: #009688;
height: 100%;
width: 0;
border-radius: 25px;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
transition: 0.5s;
}

button:hover span
{
width: 100%;
}
button:hover
{

border: none;

}
</style>
<body>
<div class="banner">
<div class="navbar">
<img src="logo1.png" class="logo">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">About us</a></li>


</ul>
</div>

<div class="content">
<h1>DESIGN YOUR HOUSE</h1>
            <p>Subscribe Easy Tutorials Youtube Channel to watch more videos, <br>Press the bell icon to get latest updates.</p> 
            <div>
            <button type="button"><span></span> WATCH MORE</button>
            <button type="button"><span></span> SUBSCRIBE</button>
            </div>

</div>

</div>
    
</body>
</html>







Comments

Post a Comment

Popular posts from this blog

The Future of Android Developers in 2025

-
Image
Future Trends of Android Developers in 2025 In the fast-moving technology world, while standing at the threshold of 2025, we notice that Android developers are likely to experience an unprecedented transformation- The Future of Android Developers in 2025. This paper will take you through a newly evolving landscape and, in the process, note a few of the key trends and changes happening within it. What do we know about the future of Android developers? Take the trip with us as we outline the skills, tools, and opportunities that will lead to success in Android's development field. 1. Integration of AI and ML: Apps of the Future Android development is going to be changed completely since 2025 happens to be the year in which the AI-ML hybrid would form the heart of the innovation in an all-new application world. This will be when and where the Android application developers will truly step forward and reclaim phenomenal learning abilities in their applications, producing something as n...
Read more

Why is the dollar so powerful?

-
Image
Why Dollar So Mighty? Perhaps no currency is as powerful as the US dollar. After all, it is, in some sense, the most important reserve currency, since most international trade, finance, and investment takes place in US dollars. Why does the dollar possess such power, and how did it become so central in the world economy? This relates to an understanding of the historical, economic, and political context that led to concentration in dollars firmly at the top of the currency pyramid. 1. Legacy of Bretton Woods and Post-WWII Global Order However, the history of dollar hegemony dates back into the post-WW II era. The Bretton Woods Agreement introduced a new world order in 1944-the dollar pegged to gold at an agreed price of $35 per ounce, and all other currencies pegged to the dollar. Consequently, the U.S. dollar became the basis of international trade and finance. In spite of officially being taken off the gold standard since President Richard Nixon in 1971, the dollar is essential for t...
Read more

The Future: Uncover the Hottest Tech Trends of 2024

-
Image
The Future is Now: Uncover the Hottest Tech Trends of 2024 Technology continues to move at a breakneck pace. Each week feels like a new innovation popping up that's shifting our way of life, the way we work, or the way we play. With such exciting developments from the emergence of a true AI to the next cutting-edge virtual reality, this would really be the year when unparalleled tech advancements are achieved in 2024. But today, let's talk of some of the most heated matters defining our digital future. First off, let's speak about the hottest topic which brings some sparks: Generative AI. 1. - Creative Machine Artificial intelligence is no longer a novelty, but generative AI—ability to create text, images, music, or even code—is at a new pinnacle. Such tools include the likes of ChatGPT, MidJourney, and DALL·E, where professional creators as well as amateur are able to quicken to the thought itself. But the more shocking aspect? These tools are also getting smart. And beyon...
Read more