Scribd
Upload
2 views5 pages

Code

This document provides a step-by-step guide to creating a GitHub Page, starting from creating a GitHub account to enabling GitHub Pages and sharing the link. It includes detailed instructions for creating an HTML file, setting up a repository, uploading the file, and configuring the page settings. Additionally, it contains example HTML code for a Valentine-themed page with interactive elements.

Uploaded by

lankikkumar
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
2 views5 pages

Code

This document provides a step-by-step guide to creating a GitHub Page, starting from creating a GitHub account to enabling GitHub Pages and sharing the link. It includes detailed instructions for creating an HTML file, setting up a repository, uploading the file, and configuring the page settings. Additionally, it contains example HTML code for a Valentine-themed page with interactive elements.

Uploaded by

lankikkumar
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

Complete Step-by-Step Guide: Create GitHub Page

& Share Link

STEP 1: Create a GitHub Account

1 Open [Link]

2 Tap on Sign up

3 Enter email, password, and username

4 Verify your email

5 Login to GitHub

STEP 2: Create HTML File (Where You Paste Code)

1 Open Notes or any Text app

2 Paste your full HTML code

3 Save file name as [Link]

4 Make sure file name is exactly [Link]

STEP 3: Create a GitHub Repository

1 Open GitHub menu

2 Tap Repositories

3 Tap New

4 Enter repository name (example: valentine)

5 Select Public

6 Tap Create repository

STEP 4: Upload [Link] File

1 Open your repository

2 Tap Add file

3 Tap Upload files


4 Select [Link]

5 Tap Commit changes

STEP 5: Enable GitHub Pages

1 Open repository Settings

2 Tap Pages

3 Select Branch: main

4 Select Folder: /root

5 Tap Save

6 Wait 30–60 seconds

STEP 6: Copy Final Link

1 Stay on Settings → Pages

2 Refresh the page

3 Copy the link shown4 Example: [Link]

DONE ■

Share this link with anyone to show your Valentine page


Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Valentine </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
height: 100vh;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
overflow: hidden;
}
.card {
background: white;
padding: 30px;
border-radius: 20px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
width: 90%;
max-width: 350px;
position: relative;
}
h1 {
color: #ff4d6d;
margin-bottom: 25px;
}
button {
padding: 12px 25px;
font-size: 16px;
border: none;
border-radius: 25px;
cursor: pointer;
}
.yes {
background: #ff4d6d;
color: white;
}
.no {
background: #ddd;
position: absolute;
left: 20px;
top: 120px;
}
</style>
</head>
<body>

<div class="card">
<h1> yourname, will you be my Valentine? </h1>
<button class="yes" onclick="yesClick()">Yes </button>
<button class="no" id="noBtn">No </button>
</div>

<script>
const noBtn = [Link]("noBtn");
const card = [Link](".card");

function randomMove() {
const maxX = [Link] - [Link];
const maxY = [Link] - [Link];

const x = [Link]() * maxX;


const y = [Link]() * maxY;

[Link] = x + "px";
[Link] = y + "px";
}

// No button keeps moving


setInterval(randomMove, 700);

function yesClick() {
[Link] = `
<div style="
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
height:100vh;
background:#ff9a9e;
color:white;
text-align:center;
padding:20px;
">
<h1> Yayyy yourname! I knew it </h1>
<img
src="[Link]
alt="Dancing girl"
style="width:250px; margin-top:20px; border-radius:20px;"
>
</div>`;
}
</script>

</body>
</html>

You might also like