Website Layout 1

Developer
Mayur Elbhar
Size
3,608 Kb
Views
6,072
  1. Website Layout 1 Previews
  2. Website Layout 1 HTML Codes
  3. Website Layout 1 CSS Codes

How do I make an website layout 1?

Hello Folks, Please let me know your feedback in comments :). What is a website layout 1? How do you make a website layout 1? This script and codes were developed by Mayur Elbhar on 12 November 2022, Saturday.

Website Layout 1 Previews
IQ Test

Website Layout 1 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Website Layout 1</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="paneer_wrap"> <header> <nav role="navigation"> <ul> <li>Home</li> <li>About</li> <li>Work</li> <li class="icon-man-people-streamline-user"></li> <li class="icon-email-mail-streamline"> </li> <li class="icon-social-twitter"></li> <li class="icon-social-facebook"></li> </ul> </nav> <h1>me</h1> </header> <section id="home"> <div class="inner"> <h2>Heading one: Say something</h2> <p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text</p> <button>Know More</button> </div> </section> <section id="about"> <div class="inner"> <h2>Tell 'em about youself!</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, sto, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede ellus. Aenean leo ligula, porttitor eu, consequat vitae, el augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem consequat, leo eget bibendum sodales, augue velit cursus nunc,</p> <button>Tell me More</button> </div> </section> <section id="Work"> <div class="work_section"> <h3>Put your<br>work here</h3> </div> <div class="work_boxes"> <ul> <li><img src="http://placehold.it/250x200"></li> <li><img src="http://placehold.it/250x200"></li> <li><img src="http://placehold.it/250x200"></li> </ul> <ul> <li><img src="http://placehold.it/250x200"></li> <li><img src="http://placehold.it/250x200"></li> <li><img src="http://placehold.it/250x200"></li> </ul> <button>Show me More</button> </div> </section> <section id="contact"> <div class="work_section"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="100%" height="450" frameborder="0" style="border:0"></iframe> </div> <form> <input type="text" id="input-name" placeholder="Your Good Name?"> <input type="email" id="input-email" placeholder="Email address"> <input type="text" id="input-subject" placeholder="Subject"> <textarea id="textarea" name="message" type="text" id="input-message" placeholder="Say Hello..."></textarea> <input type="submit" value="Submit" id="input-submit">
</form> </section> <section id="footer"> <p>Copyrights 2014 | Designed By <a href="#">Mayur Elbhar</a></p> <ul> <li class="icon-social-twitter"></li> <li class="icon-social-facebook"></li> </ul> </section>
</div>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href="https://fontastic.s3.amazonaws.com/qXDGBpBG6AawYwtmYPpQBb/icons.css" rel="stylesheet">
</body>
</html>

Website Layout 1 - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
header { height: 60px; width: 100%; background: #2C3E50; color: white; font-family: 'Source Sans Pro', sans-serif; color: #fff; position: fixed; z-index: 1; border-bottom: 2px solid #c5550b;
}
header h1 { margin-left: 150px; padding-top: 0px; font-family: 'Lobster', cursive; font-size: 40px; max-width: 60px;
}
header h1:hover { color: #c5550b;
}
nav ul { float: right; margin-right: 50px;
}
nav ul li { list-style: none; display: inline-block; padding: 14px; border-bottom: 5px solid #2C3E50; font-size: 21px;
}
nav ul li:hover { background: white; border-color: rgba(175, 50, 0, 0.8); color: #c5550b;
}
section .inner { height: 650px; color: #fff; font-family: 'Source Sans Pro', sans-serif; background-color: rgba(3, 3, 0, 0.7); text-align: center;
}
h2 { color: #fff; font-size: 100px; padding-top: 200px; opacity: ;
}
.inner p { font-size: 22px;
}
#home { height: 650px; background: url(https://i.imgur.com/85B4vg2.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; border-bottom: 2px solid #c5550b;
}
#home button { padding: 15px 50px; margin-top: 150px; background: none; border: 2px solid #fff; color: #fff; font-family: 'Source Sans Pro', sans-serif; font-size: 18px; cursor: pointer;
}
#about { height: 650px; background: url(https://i.imgur.com/F4P1cUY.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; border-bottom: 2px solid #c5550b;
}
#about p { max-width: 800px; text-align: justify; margin-left: 20%; font-size: 16px; line-height: 20px;
}
#about button { padding: 15px 50px; margin-top: 40px; background: none; border: 2px solid #fff; color: #fff; font-family: 'Source Sans Pro', sans-serif; font-size: 18px; cursor: pointer; }
#Work { background: gba(44, 54, 65, 0.1); height: 500px; border-bottom: 2px solid #c5550b;
}
#Work h3 { font-family: 'Source Sans Pro', sans-serif; font-size: 80px; margin-top: 75px; margin-left: 20px; color: #212121; text-align: justify; border-right: 6px solid #F5D76E; padding: 10px; max-width: 300px;
}
.work_boxes { margin-left: 450px; margin-top: -360px
}
.work_boxes ul li { display: inline-block; list-style: none; }
.work_boxes ul li:hover { background-color: rgba(175, 50, 0, 0.8); box-shadow: 2px 2px 50px rgba(20, 20, 10, 0.8);
}
#Work button { padding: 15px 50px; margin-top: 40px; background: none; border: 2px solid #000; color: #000; font-family: 'Source Sans Pro', sans-serif; font-size: 18px; cursor: pointer; margin-left: 538px;
}
#contact { height: 450px;
}
form { margin-top: -420px; margin-left: 750px; width: 400px; background-color: rgba(0, 0, 0, 0.9);
}
[type="text"], [type="email"] { width: 450px; height: 30px; padding: 10px; border: 2px solid #D35400; font-family: 'Source Sans Pro', sans-serif; color: #D35400; font-size: 18px; margin: 10px;
}
[type="submit"] {
padding: 10px 20px; margin-top: 10px; margin-left: 379px; background: #D35400; border: 2px solid #D35400; color: #fff; font-family: 'Source Sans Pro', sans-serif; font-size: 18px; cursor: pointer; }
#textarea { height: 80px;
}
#footer { height: 40px; background: #2C3E50; font-family: 'Source Sans Pro', sans-serif; border-top: 10px solid #c5550b; color: #fff; text-align: left;
}
#footer p { margin-top: 10px; margin-left: 50px;
}
#footer a { color: #fff;
}
#footer ul { float: right; margin-top: -20px; list-style: none; margin-right: 50px;
}
#footer ul li { display: inline-block; font-size: 20px; padding-right: 20px;
}
#footer ul li:hover { color: #c5550b;
}
Website Layout 1 - Script Codes
Website Layout 1 - Script Codes
Home Page Home
Developer Mayur Elbhar
Username mayurelbhar
Uploaded November 12, 2022
Rating 3
Size 3,608 Kb
Views 6,072
Do you need developer help for Website Layout 1?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mayur Elbhar (mayurelbhar) Script Codes
Name
Contact US Form
A Pen by Mayur Elbhar
Social Media Icons
Text-Shadow
SAMSUNG PHONE MOCKUP
Website Layout
Contact Us Form
Buttons with Google material design icons.
Simple Text Shadow with CSS
Hamburger menu prototypes
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!