Landing Page Website Template
Our Team Section Page normally used to occur at the server, after the client had entered all the necessary data and then pressed the Submit button. If the data entered by a client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information. This was really a lengthy process which used to put a lot of burden on the server.
A website is a collection of publicly accessible, interlinked Web pages that share a single domain name. Websites can be created and maintained by an individual, group, business or organization to serve a variety of purposes.
Together, all publicly accessible websites constitute the World Wide Web.
Although it is sometimes called “web page,” this definition is wrong, since a website consists of several webpages. A website is also known as a “web presence” or simply “site”.
Websites come in a nearly endless variety, including educational sites, news sites, porn sites, forums, social media sites, e-commerce sites, and so on. The pages within a website are usually a mix of text and other media. That said, there are no rules dictating the form of a website.
A person could create a website of nothing but black and white photos of roses, or the word “cat” linked to another Web page with the word “mouse.” However, many sites follow a standard pattern of a homepage that links off to other categories and content within the website.
<div class="navbar"> <div class="heading"> <a href="#heading"><img src="https://rainbowit.net/themes/inbio/wp-content/themes/inbio/assets/images/logo/logo-dark.png"></a> </div> <div class="list"> <ul type="none"> <li>HOME</li> <li>FEATURES</li> <li>©PORTFOLIO</li> <li>RESUME</li> <li>TESTIMONIAL</li> <li>CLIENTS</li> <li>SPRICING </li> <li>BLOG </li> <li>CONTACTS</li> </ul> </div> <div class="icons"> <ion-icon name="bag-add-sharp"></ion-icon> <div class="icons_div"> <p><b>0</b></p> </div> <button><b>BUY NOW</b></button> </div> </div> <div class="page1"> <div class="page1_in_div1"> <h2>WELCOME TO MY WORLD</h2> <h1>Hi, I’m <span>Jone Leea Developer.</span> <br>Professional Coder. </h1> <p>I use animation as a third dimension by which to simplify experiences and kuiding<br>thro each and every interaction. I’m not adding motion just to spruce things up,<br> but doing it in ways that.</p> <div class="icons1"> <h3>FIND WITH ME</h3> <div class="icons_div1"> <ul type="none"> <li> <ion-icon name="logo-facebook"></ion-icon> </li> <li> <ion-icon name="logo-instagram"></ion-icon> </li> <li> <ion-icon name="logo-twitter"></ion-icon> </li> </ul> </div> <div class="icons_div2"> <h3>BEST SKILL ON</h3> <ul type="none"> <li><img src="https://rainbowit.net/themes/inbio/wp-content/uploads/2021/08/icons-03.png"></li> <li><img src="https://rainbowit.net/themes/inbio/wp-content/uploads/2021/08/icons-02.png"></li> <li><img src="https://rainbowit.net/themes/inbio/wp-content/uploads/2021/08/icons-01.png"></li> </ul> </div> </div> </div> <div class="page1_in_div2"> <div class="image"> <img src="https://rainbowit.net/themes/inbio/wp-content/uploads/2021/08/banner-01.png"> </div> </div> </div> <div class="footer"> <div class="footer1"> <a href="#heading"><img src="https://rainbowit.net/themes/inbio/wp-content/themes/inbio/assets/images/logo/logo-dark.png"></a> <div class="icons_div1"> <ul type="none"> <li> <ion-icon name="logo-facebook"></ion-icon> </li> <li> <ion-icon name="logo-instagram"></ion-icon> </li> <li> <ion-icon name="logo-twitter"></ion-icon> </li> </ul> </div> </div> <div class="footer1"> <h3>QUICK LINK</h3> <ul type="none"> <li>About</li> <li>Portfolio</li> <li>Services</li> <li>Blog</li> <li>Contact</li> </ul> </div> <div class="footer1"> <h3>RESOURCES</h3> <ul type="none"> <li>Authentication</li> <li>System Status</li> <li>Terms of Service</li> <li>Pricing</li> <li>Over Right</li> </ul> </div> <div class="footer1"> <h3>DEVELOPERS</h3> <ul type="none"> <li>Documentation</li> <li>Authentication</li> <li>API Reference</li> <li>Support</li> <li>Open Source</li> </ul> </div> </div>
* {
margin: 0;
padding: 0;
font-family: arial;
}
body {
background-color: #dce2ec;
overflow-x: hidden;
}
.navbar {
width: 100%;
height: 7rem;
border-bottom: 1px solid dimgray;
float: left;
/*position: fixed;*/
background-color: #dce2ec;
}
.heading {
width: 10rem;
height: 100%;
/*background-color: yellow;*/
margin-left: 3rem;
float: left;
}
.heading img {
position: relative;
top: 1.1rem;
}
.list {
width: 55.5rem;
height: 100%;
/*background-color: blue;*/
float: left;
}
.list ul {
margin-left: 3rem;
}
.list ul li {
font-size: .9rem;
float: left;
margin-left: 1.5rem;
margin-top: 2.5rem;
}
.list ul li:hover {
color: #ff014f;
}
.icons ion-icon {
font-size: 1.8rem;
padding: .7rem;
/*background-color: white;*/
position: relative;
top: 1.5rem;
left: 2rem;
border-radius: 50%;
box-shadow: 5px 4px 20px 5px #888888;
}
.icons ion-icon:hover {
font-size: 1.9rem;
}
.icons_div {
width: 20px;
height: 20px;
background-color: #ff014f;
position: absolute;
right: 160px;
top: 25px;
text-align: center;
border-radius: 50%;
}
.icons_div p {
color: white;
position: relative;
top: 2px;
}
.icons button {
width: 6rem;
height: 2.5rem;
background-color: #dce2ec;
position: relative;
left: 3.5rem;
top: .2rem;
border: none;
border-radius: .5rem;
box-shadow: 2px 3px 20px 2px #888888;
color: #ff014f;
transition: .6s;
}
.icons button:hover {
color: white;
background: linear-gradient(to bottom right, #6497be 0%, #ff014f 100%);
position: relative;
}
.page1 {
width: 100%;
height: 40rem;
/*background-color:#D0B8A8;*/
position: relative;
top: 8em;
left: 3rem;
}
.page1_in_div1 {
width: 50rem;
height: 100%;
/*background-color: #7895B2;*/
}
.page1_in_div1 h2 {
color: #3c3e41;
font-size: 18px;
position: relative;
top: -3rem;
}
.page1_in_div1 h1 {
font-size: 3.5rem;
position: relative;
top: -1.8rem;
}
.page1_in_div1 span {
color: #ff014f;
}
.page1_in_div1 p {
font-size: 1.2rem;
line-height: 1.7rem;
}
.icons_div1 ul li {
float: left;
margin-left: 1.5rem;
border-radius: none;
/*background-color: #eef1f4;*/
border-radius: 50%;
padding: 18px 18px 15px 18px;
box-shadow: 2px 3px 20px 2px #888888;
font-size: 23px;
}
.icons_div1 ul li:hover {
color: white;
background: linear-gradient(to bottom right, #6497be 0%, #ff014f 100%);
}
.icons_div1 ul {
margin-top: 50px;
position: relative;
left: -2rem;
}
.icons1 h3 {
font-size: .8rem;
position: relative;
top: 2rem;
/*left: 2rem;*/
color: gray;
}
/*.gg */
{
width: 100px;
height: 500px;
background-color: darkred;
}
.icons_div2 ul li img {
width: 1.5rem;
height: 1.5rem;
position: relative;
left: 4rem;
float: left;
padding: 18px 18px 15px 18px;
box-shadow: 2px 3px 20px 2px #888888;
border-radius: 50%;
margin-left: 20px;
}
.icons_div2 h3 {
position: relative;
top: -1rem;
left: 5.5rem;
}
.page1_in_div2 {
width: 27rem;
height: 80%;
/*background-color: yellow;*/
border-radius: 10px;
position: relative;
top: -35rem;
left: 49rem;
box-shadow: 2px 3px 20px 2px #888888;
}
.page1_in_div2 img {
width: 100%;
height: 100%;
position: relative;
top: -5rem;
}
.footer {
width: 100%;
height: 25rem;
/*background-color: black;*/
position: relative;
top: 10rem;
float: left;
}
.footer1 {
width: 320px;
height: 100%;
/*background-color: #FFA1CF;*/
float: left;
margin-left: 10px;
}
.footer1 h3 {
font-size: 20px;
position: relative;
top: 4rem;
left: 4rem;
color: #ff014f;
}
.footer1 ul {
position: relative;
top: 5.5rem;
left: 4rem;
font-size: 20px;
}
.footer1 ul li {
margin-top: 20px;
}
.footer1 ul li:hover {
color: #ff014f;
}
.footer1 img {
position: relative;
top: 4rem;
left: 4rem;
}
.footer1 .icons_div1 ul {
position: relative;
top: 20px;
left: 10px;
}
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>