Scribd
Upload
16 views17 pages

Clone Webpage HTML - CSS Tutorial

The document provides a tutorial on how to clone a webpage using HTML and CSS, guiding users on extracting HTML and CSS from a webpage using browser developer tools. It includes a wireframe layout with specified heights for various sections, emphasizing the importance of a main container div with no margins for consistency. Additionally, it offers responsive design tips and examples of HTML and CSS code for a webpage layout with buttons and sections for a freelance hub theme.

Uploaded by

Asish Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views17 pages

Clone Webpage HTML - CSS Tutorial

The document provides a tutorial on how to clone a webpage using HTML and CSS, guiding users on extracting HTML and CSS from a webpage using browser developer tools. It includes a wireframe layout with specified heights for various sections, emphasizing the importance of a main container div with no margins for consistency. Additionally, it offers responsive design tips and examples of HTML and CSS code for a webpage layout with buttons and sections for a freelance hub theme.

Uploaded by

Asish Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Clone webpage HTML/CSS tutorial

https://asishsoumya06.bubbleapps.io/version-test?debug_mode=true can u clone the webpage


and give me html csss code i ahve the pcitures

I can't directly clone or provide the full HTML and CSS code of a website. However, I can help guide you
on how to extract the HTML and CSS from a webpage using browser developer tools.

1. Open the Webpage: Navigate to the webpage you want to clone.


2. Open Developer Tools:
Right-click on the page and select "Inspect" or "Inspect Element".
Or press `Ctrl+Shift+I` (Windows) or `Cmd+Option+I` (Mac) to open Developer Tools.
3. Copy HTML:
Go to the "Elements" tab.
Right-click on the `<html>` tag or the specific section you want to copy.
Select "Copy" > "Copy outerHTML".
4. Copy CSS:
In the "Elements" tab, select the element you want to copy styles for.
In the "Styles" pane, you can copy individual styles or view the external CSS file link.
5. Save Images:
Right-click on images and select "Save image as...".

By following these steps, you can manually extract the HTML, CSS, and images from the webpage. If
you need further assistance, let me know!

i want to make a webpage with total 9 divisions on page 1st is header last is footer header is 80px
footer is 256px and other starting below header have 539,243,778,866,640,846,384px all are
height just after the last height footer is there this is just the wire frame of the website keep css
separately and for each division keep unique element in css since ill have to modify it later also
add colour to each section of the wireframe also remember no margins should come since its the
main page its content will be inside it .

Sure! Here's a simple wireframe for the webpage with the specified sections and unique styles for
each division. The HTML and CSS files are separated as requested.
HTML (index.html):

Printed using Save ChatGPT as PDF, powered by PDFCrowd HTML to PDF API. 1/17
html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Wireframe Page</title>
</head>
<body>
<div class="header">Header</div>
<div class="section1">Section 1</div>
<div class="section2">Section 2</div>
<div class="section3">Section 3</div>
<div class="section4">Section 4</div>
<div class="section5">Section 5</div>
<div class="section6">Section 6</div>
<div class="section7">Section 7</div>
<div class="footer">Footer</div>
</body>
</html>

CSS (styles.css):

css

body {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.header {
height: 80px;
background-color: #ffcccc;
}

.section1 {
height: 539px;
background-color: #ff9999;
}

.section2 {
height: 243px;
background-color: #ff6666;
}

.section3 {
height: 778px;
background-color: #ff3333;
}

.section4 {
height: 866px;
background-color: #ff0000;
}

.section5 {
height: 640px;
background-color: #cc0000;
}

.section6 {
height: 846px;
background-color: #990000;
}

.section7 {
Printed using Save ChatGPT as PDF, powered by PDFCrowd HTML to PDF API. 2/17
height: 384px;
background-color: #660000;
}

.footer {
height: 256px;
background-color: #330000;
}

This setup gives you a wireframe with the specified heights and unique colors for each section,
making it easier to modify later.

umm is it okay to divide page directly or make a full page a div with no margin as canvas and then
inside=it all division the main div should have no margin

It's a good idea to have a main container div with no margins that acts as a canvas, and then place all
the divisions inside it. This ensures that the layout remains consistent and is easier to manage. Here’s
the revised version:
HTML (index.html):

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Wireframe Page</title>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="section1">Section 1</div>
<div class="section2">Section 2</div>
<div class="section3">Section 3</div>
<div class="section4">Section 4</div>
<div class="section5">Section 5</div>
<div class="section6">Section 6</div>
<div class="section7">Section 7</div>
<div class="footer">Footer</div>
</div>
</body>
</html>

CSS (styles.css):

css

body, html {
margin: 0;
padding: 0;
box-sizing: border-box;

Printed using Save ChatGPT as PDF, powered by PDFCrowd HTML to PDF API. 3/17
height: 100%;
}

.container {
width: 100%;
height: 100%;
}

.header {
height: 80px;
background-color: #ffcccc;
}

.section1 {
height: 539px;
background-color: #ff9999;
}

.section2 {
height: 243px;
background-color: #ff6666;
}

.section3 {
height: 778px;
background-color: #ff3333;
}

.section4 {
height: 866px;
background-color: #ff0000;
}

.section5 {
height: 640px;
background-color: #cc0000;
}

.section6 {
height: 846px;
background-color: #990000;
}

.section7 {
height: 384px;
background-color: #660000;
}

.footer {
height: 256px;
background-color: #330000;
}

This ensures that all your divisions are within a main container that covers the entire page, and no
margins will interfere with your layout.

width is auto adjustable ryt like is someone changes width of tab the should look weord

Yes, the width of the container will automatically adjust to fit the screen size, ensuring it looks good on
different devices. However, if you want to make sure the layout remains responsive and adapts well to

Printed using Save ChatGPT as PDF, powered by PDFCrowd HTML to PDF API. 4/17
different screen sizes, you can use CSS media queries.
Here's an example of how you can ensure the layout remains responsive:
CSS (styles.css):

css

body, html {
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100%;
}

.container {
width: 100%;
height: 100%;
}

.header, .section1, .section2, .section3, .section4, .section5, .section6, .section7,


.footer {
width: 100%;
}

.header {
height: 80px;
background-color: #ffcccc;
}

.section1 {
height: 539px;
background-color: #ff9999;
}

.section2 {
height: 243px;
background-color: #ff6666;
}

.section3 {
height: 778px;
background-color: #ff3333;
}

.section4 {
height: 866px;
background-color: #ff0000;
}

.section5 {
height: 640px;
background-color: #cc0000;
}

.section6 {
height: 846px;
background-color: #990000;
}

.section7 {
height: 384px;
background-color: #660000;
}

.footer {
height: 256px;
background-color: #330000;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.header, .section1, .section2, .section3, .section4, .section5, .section6, .section7,

Printed using Save ChatGPT as PDF, powered by PDFCrowd HTML to PDF API. 5/17
.footer {
width: 100%;
}
}

This setup ensures that the sections will always take up the full width of the screen, regardless of the
device's width. The media query ensures the layout adapts to smaller screens appropriately.

see i want a layout and buttons like these

Sure, let's create a layout with buttons similar to the one in your screenshot. We'll use HTML and CSS
to achieve this.
HTML (index.html):

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>AI-Powered Freelance Hub</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">Lancerstreak</div>
<nav>
<ul>
<li><a href="#">Dashboard</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">AI Used</a></li>
</ul>
</nav>
<div class="auth-buttons">
<button class="login">Login</button>
<button class="signup">Sign Up</button>
</div>
</div>
<div class="main-content">
<div class="text-content">
<h1>AI-Powered Freelance Hub</h1>
<p>Revolutionize your freelancing with Lancerstreak, the futuristic AI
tool.</p>
<button class="cta">Sign up today</button>
</div>
<div class="image-content">
<img src="path_to_your_image.jpg" alt="Freelancing AI">
</div>
</div>
</div>

Printed using Save ChatGPT as PDF, powered by PDFCrowd HTML to PDF API. 6/17
</body>
</html>

CSS (styles.css):

css

body, html {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
background-color: #000;
color: #fff;
}

.container {
width: 100%;
}

.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #333;
height: 80px;
}

.logo {
font-size: 24px;
font-weight: bold;
}

nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}

nav ul li {
margin: 0 15px;
}

nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}

.auth-buttons {
display: flex;
}

.auth-buttons .login,
.auth-buttons .signup {
margin-left: 10px;
padding: 8px 15px;
border: none;
cursor: pointer;
}

.auth-buttons .login {
background-color: #555;
color: #fff;
}

.auth-buttons .signup {
background-color: #fff;

Printed using Save ChatGPT as PDF, powered by PDFCrowd HTML to PDF API. 7/17
color: #000;
}

.main-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: url('path_to_your_image.jpg') no-repeat center center/cover;
height: calc(100vh - 80px); /* Adjusts height based on header */
}

.text-content {
max-width: 50%;
}

.text-content h1 {
font-size: 48px;
margin: 0 0 20px 0;
}

.text-content p {
font-size: 18px;
margin: 0 0 20px 0;
}

.text-content .cta {
padding: 10px 20px;
background-color: #000;
color: #fff;
border: none;
cursor: pointer;
}

.image-content img {
max-width: 100%;
height: auto;
}

Replace `"path_to_your_image.jpg"` with the actual path to your image file. This code sets up a header
with navigation links and authentication buttons, and a main content area with text and an image,
styled similarly to the screenshot you provided.

section 2 and 3 design

Sure, let's enhance the design with sections similar to the screenshot you provided. Here's the
updated HTML and CSS, including the new sections for "Unlock Your Freelancing Potential" and the
three features (Relevant Feeds, Smart Scheduling, Smart Summaries).
HTML (index.html):

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

Printed using Save ChatGPT as PDF, powered by PDFCrowd HTML to PDF API. 8/17
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>AI-Powered Freelance Hub</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">Lancerstreak</div>
<nav>
<ul>
<li><a href="#">Dashboard</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">AI Used</a></li>
</ul>
</nav>
<div class="auth-buttons">
<button class="login">Login</button>
<button class="signup">Sign Up</button>
</div>
</div>
<div class="main-content">
<div class="text-content">
<h1>AI-Powered Freelance Hub</h1>
<p>Revolutionize your freelancing with Lancerstreak, the futuristic AI
tool.</p>
<button class="cta">Sign up today</button>
</div>
<div class="image-content">
<img src="path_to_your_image.jpg" alt="Freelancing AI">
</div>
</div>
<div class="section2">
<h2>The #1 AI-powered tool for freelancers and students</h2>
<p>As endorsed by top freelancing experts</p>
<div class="icon-row">
<!-- Add icons or images here -->
<img src="icon1.jpg" alt="Icon 1">
<img src="icon2.jpg" alt="Icon 2">
<img src="icon3.jpg" alt="Icon 3">
<img src="icon4.jpg" alt="Icon 4">
</div>
</div>
<div class="section3">
<h2>Unlock Your Freelancing Potential</h2>
<p>Integrate AI to manage notifications and access valuable resources
seamlessly.</p>
<div class="feature-cards">
<div class="card">
<img src="path_to_image1.jpg" alt="Relevant Feeds">
<h3>Relevant Feeds</h3>
<p>Get relevant updates and resources tailored to your interests and
current projects.</p>
<button class="learn-more">Learn more</button>
</div>
<div class="card">
<img src="path_to_image2.jpg" alt="Smart Scheduling">
<h3>Smart Scheduling</h3>
<p>Smart Scheduling optimizes your calendar by recommending the best
times for tasks and meetings.</p>
<button class="learn-more">Learn more</button>
</div>
<div class="card">
<img src="path_to_image3.jpg" alt="Smart Summaries">
<h3>Smart Summaries</h3>
<p>Quickly generate concise summaries that highlight the essential
points of your documents.</p>
<button class="learn-more">Learn more</button>
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>

Printed using Save ChatGPT as PDF, powered by PDFCrowd HTML to PDF API. 9/17
</body>
</html>

CSS (styles.css):

css

body, html {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
background-color: #000;
color: #fff;
}

.container {
width: 100%;
}

.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #333;
height: 80px;
}

.logo {
font-size: 24px;
font-weight: bold;
}

nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}

nav ul li {
margin: 0 15px;
}

nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}

.auth-buttons {
display: flex;
}

.auth-buttons .login,
.auth-buttons .signup {
margin-left: 10px;
padding: 8px 15px;
border: none;
cursor: pointer;
}

.auth-buttons .login {
background-color: #555;
color: #fff;
}

.auth-buttons .signup {
background-color: #fff;

Printed using Save ChatGPT as PDF, powered by PDFCrowd HTML to PDF API. 10/17
color: #000;
}

.main-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: url('path_to_your_image.jpg') no-repeat center center/cover;
height: calc(100vh - 80px); /* Adjusts height based on header */
}

.text-content {
max-width: 50%;
}

.text-content h1 {
font-size: 48px;
margin: 0 0 20px 0;
}

.text-content p {
font-size: 18px;
margin: 0 0 20px 0;
}

.text-content .cta {
padding: 10px 20px;
background-color: #000;
color: #fff;
border: none;
cursor: pointer;
}

.image-content img {
max-width: 100%;
height: auto;
}

.section2 {
text-align: center;
padding: 40px 20px;
background-color: #222;
}

.section2 h2 {
font-size: 36px;
margin-bottom: 10px;
}

.section2 p {
font-size: 18px;
margin-bottom: 20px;
}

.icon-row {
display: flex;
justify-content: center;
gap: 20px;
}

.icon-row img {
width: 50px;
height: 50px;
}

.section3 {
text-align: center;
padding: 40px 20px;
background-color: #333;
}

.section3 h2 {
font-size: 36px;
margin-bottom: 10px;
Printed using Save ChatGPT as PDF, powered by PDFCrowd HTML to PDF API. 11/17
}

.section3 p {
font-size: 18px;
margin-bottom: 20px;
}

.feature-cards {
display: flex;
justify-content: center;
gap: 20px;
}

.card {
background-color: #444;
padding: 20px;
border-radius: 10px;
width: 30%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
text-align: left;
}

.card img {
width: 100%;
border-radius: 10px;
}

.card h3 {
font-size: 24px;
margin: 10px 0;
}

.card p {
font-size: 16px;
}

.card .learn-more {
padding: 10px 20px;
background-color: #000;
color: #fff;
border: none;
cursor: pointer;
margin-top: 10px;
}

.footer {
height: 256px;
background-color: #330000;
}

Make sure to replace the `"path_to_your_image.jpg"` and `"path_to_imageX.jpg"` placeholders with the
actual paths to your images. This setup provides a layout with a header, main content, additional
sections, and a footer, styled to match the design you provided.

section 4

To create a section similar to the "Cutting-edge AI Solutions" from the screenshot, let's add this new
section to the HTML and CSS files. This section will include a background image, a title, a description,

Printed using Save ChatGPT as PDF, powered by PDFCrowd HTML to PDF API. 12/17
and a call-to-action button.
HTML (index.html):

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>AI-Powered Freelance Hub</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">Lancerstreak</div>
<nav>
<ul>
<li><a href="#">Dashboard</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">AI Used</a></li>
</ul>
</nav>
<div class="auth-buttons">
<button class="login">Login</button>
<button class="signup">Sign Up</button>
</div>
</div>
<div class="main-content">
<div class="text-content">
<h1>AI-Powered Freelance Hub</h1>
<p>Revolutionize your freelancing with Lancerstreak, the futuristic AI
tool.</p>
<button class="cta">Sign up today</button>
</div>
<div class="image-content">
<img src="path_to_your_image.jpg" alt="Freelancing AI">
</div>
</div>
<div class="section2">
<h2>The #1 AI-powered tool for freelancers and students</h2>
<p>As endorsed by top freelancing experts</p>
<div class="icon-row">
<img src="icon1.jpg" alt="Icon 1">
<img src="icon2.jpg" alt="Icon 2">
<img src="icon3.jpg" alt="Icon 3">
<img src="icon4.jpg" alt="Icon 4">
</div>
</div>
<div class="section3">
<h2>Unlock Your Freelancing Potential</h2>
<p>Integrate AI to manage notifications and access valuable resources
seamlessly.</p>
<div class="feature-cards">
<div class="card">
<img src="path_to_image1.jpg" alt="Relevant Feeds">
<h3>Relevant Feeds</h3>
<p>Get relevant updates and resources tailored to your interests and
current projects.</p>
<button class="learn-more">Learn more</button>
</div>
<div class="card">
<img src="path_to_image2.jpg" alt="Smart Scheduling">
<h3>Smart Scheduling</h3>
<p>Smart Scheduling optimizes your calendar by recommending the best
times for tasks and meetings.</p>
<button class="learn-more">Learn more</button>
</div>
<div class="card">
Printed using Save ChatGPT as PDF, powered by PDFCrowd HTML to PDF API. 13/17
<img src="path_to_image3.jpg" alt="Smart Summaries">
<h3>Smart Summaries</h3>
<p>Quickly generate concise summaries that highlight the essential
points of your documents.</p>
<button class="learn-more">Learn more</button>
</div>
</div>
</div>
<div class="section4">
<h2>Cutting-edge AI Solutions</h2>
<p>Explore how our innovative AI tools can help you manage notifications and
boost productivity.</p>
<div class="section4-image">
<img src="path_to_image4.jpg" alt="AI Solutions">
<button class="get-started">Get started</button>
</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>

CSS (styles.css):

css

body, html {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
background-color: #000;
color: #fff;
}

.container {
width: 100%;
}

.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #333;
height: 80px;
}

.logo {
font-size: 24px;
font-weight: bold;
}

nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}

nav ul li {
margin: 0 15px;
}

nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}

Printed using Save ChatGPT as PDF, powered by PDFCrowd HTML to PDF API. 14/17
.auth-buttons {
display: flex;
}

.auth-buttons .login,
.auth-buttons .signup {
margin-left: 10px;
padding: 8px 15px;
border: none;
cursor: pointer;
}

.auth-buttons .login {
background-color: #555;
color: #fff;
}

.auth-buttons .signup {
background-color: #fff;
color: #000;
}

.main-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: url('path_to_your_image.jpg') no-repeat center center/cover;
height: calc(100vh - 80px); /* Adjusts height based on header */
}

.text-content {
max-width: 50%;
}

.text-content h1 {
font-size: 48px;
margin: 0 0 20px 0;
}

.text-content p {
font-size: 18px;
margin: 0 0 20px 0;
}

.text-content .cta {
padding: 10px 20px;
background-color: #000;
color: #fff;
border: none;
cursor: pointer;
}

.image-content img {
max-width: 100%;
height: auto;
}

.section2 {
text-align: center;
padding: 40px 20px;
background-color: #222;
}

.section2 h2 {
font-size: 36px;
margin-bottom: 10px;
}

.section2 p {
font-size: 18px;
margin-bottom: 20px;
}

.icon-row {
Printed using Save ChatGPT as PDF, powered by PDFCrowd HTML to PDF API. 15/17
display: flex;
justify-content: center;
gap: 20px;
}

.icon-row img {
width: 50px;
height: 50px;
}

.section3 {
text-align: center;
padding: 40px 20px;
background-color: #333;
}

.section3 h2 {
font-size: 36px;
margin-bottom: 10px;
}

.section3 p {
font-size: 18px;
margin-bottom: 20px;
}

.feature-cards {
display: flex;
justify-content: center;
gap: 20px;
}

.card {
background-color: #444;
padding: 20px;
border-radius: 10px;
width: 30%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
text-align: left;
}

.card img {
width: 100%;
border-radius: 10px;
}

.card h3 {
font-size: 24px;
margin: 10px 0;
}

.card p {
font-size: 16px;
}

.card .learn-more {
padding: 10px 20px;
background-color: #000;
color: #fff;
border: none;
cursor: pointer;
margin-top: 10px;
}

.section4 {
text-align: center;
padding: 40px 20px;
background: url('path_to_background_image.jpg') no-repeat center center/cover;
color: #fff;
position: relative;
}

.section4 h2 {
font-size: 36px;
margin-bottom: 10px;
Printed using Save ChatGPT as PDF, powered by PDFCrowd HTML to PDF API. 16/17
}

.section4 p {
font-size: 18px;
margin-bottom: 20px;
}

.section4-image {
position: relative;
display: inline-block;
}

.section4-image img {
width: 100%;
border-radius: 10px;
}

.section4 .get-started {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
background-color: #000;
color: #fff;
border: none;
cursor: pointer;
}

.footer {
height: 256px;
background-color: #330000;
}

Replace `"path_to_your_image.jpg"`, `"path_to_imageX.jpg"`, and `"path_to_background_image.jpg"`


with the actual paths to your images. This setup adds a new section with a background image, title,
description, an image, and a call-to-action button styled similarly to the provided design.

ChatGPT can make mistakes. Check important info.

Printed using Save ChatGPT as PDF, powered by PDFCrowd HTML to PDF API. 17/17

You might also like