Skip to content

Commit

Permalink
fix: index page
Browse files Browse the repository at this point in the history
  • Loading branch information
@minikas
minikas committed Oct 3, 2024
1 parent 4d317a3 commit 8660e6c
Show file tree
Hide file tree
Showing 5 changed files with 241 additions and 1 deletion.
Binary file added favicon.ico
View file
Binary file not shown.
240 changes: 240 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,240 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Clone Pages - Popular Website Clones</title>
<meta
name="description"
content="Explore clones of popular websites including Google, Facebook, Twitter, Apple, Microsoft, and Instagram."
/>
<meta
name="keywords"
content="website clones, Google clone, Facebook clone, Twitter clone, Apple clone, Microsoft clone, Instagram clone"
/>
<link rel="icon" type="image/png" href="favicon.png" />
<meta property="og:title" content="Clone Pages - Popular Website Clones" />
<meta
property="og:description"
content="Explore clones of popular websites including Google, Facebook, Twitter, Apple, Microsoft, and Instagram."
/>
<style>
.page {
font-family: Arial, sans-serif;
background-color: #09090b;
color: #e0e0e0;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
max-width: 1200px;
}
.card {
padding: 50px 20px;
position: relative;
background-color: #27272a33;
border-radius: 8px;
width: 200px;
text-align: center;
transition: transform 0.3s ease, opacity 0.3s ease;
cursor: pointer;
border: 1px solid #27272a;
text-decoration: none;
color: inherit;
display: block;
}
.card:hover {
transform: translateY(-5px);
opacity: 0.8;
}
.card__logo {
width: 40px;
height: 40px;
margin-bottom: 10px;
transition: transform 0.3s ease;
}
.card:hover .card__logo {
transform: scale(1.1);
}
.card__title {
margin-top: 10px;
line-height: 1;
font-size: 18px;
margin: 0;
}
.card__coming-soon {
margin: 0;
font-size: 12px;
position: absolute;
top: 0;
right: 15px;
background: rgba(255, 255, 255, 0.2);
padding: 2px 5px;
border-radius: 0 0 5px 5px;
}
.card--coming-soon {
opacity: 0.3;
}
.card--coming-soon:hover {
opacity: 0.8;
}
</style>
</head>
<body class="page">
<div class="card-container">
<a href="google.html" class="card" target="_blank">
<svg
class="card__logo"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#4285F4"
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
/>
<path
fill="#34A853"
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
/>
<path
fill="#FBBC05"
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
/>
<path
fill="#EA4335"
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
/>
<path fill="none" d="M1 1h22v22H1z" />
</svg>
<h2 class="card__title">Google</h2>
</a>
<a href="#" class="card card--coming-soon">
<svg
class="card__logo"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#1877F2"
d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"
/>
</svg>
<h2 class="card__title">Facebook</h2>
<p class="card__coming-soon">Coming soon</p>
</a>
<a href="#" class="card card--coming-soon">
<svg
class="card__logo"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#1DA1F2"
d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
/>
</svg>
<h2 class="card__title">Twitter</h2>
<p class="card__coming-soon">Coming soon</p>
</a>
<a href="#" class="card card--coming-soon">
<svg
class="card__logo"
viewBox="0 0 814 1000"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M788.1 340.9C782.3 345.4 679.9 403.1 679.9 531.4C679.9 679.8 810.2 732.3 814.1 733.6C813.5 736.8 793.4 805.5 745.4 875.5C702.6 937.1 657.9 998.6 589.9 998.6C521.9 998.6 504.4 959.1 425.9 959.1C349.4 959.1 322.2 999.9 260 999.9C197.8 999.9 154.4 942.9 104.5 872.9C46.7 790.7 0 663 0 541.8C0 347.4 126.4 244.3 250.8 244.3C316.9 244.3 372 287.7 413.5 287.7C453 287.7 514.6 241.7 589.8 241.7C618.3 241.7 720.7 244.3 788.1 340.9ZM554.1 159.4C585.2 122.5 607.2 71.3 607.2 20.1C607.2 13 606.6 5.8 605.3 0C554.7 1.9 494.5 33.7 458.2 75.8C429.7 108.2 403.1 159.4 403.1 211.3C403.1 219.1 404.4 226.9 405 229.4C408.2 230 413.4 230.7 418.6 230.7C464 230.7 521.1 200.3 554.1 159.4Z"
fill="white"
/>
</svg>
<h2 class="card__title">Apple</h2>
<p class="card__coming-soon">Coming soon</p>
</a>
<a href="#" class="card card--coming-soon">
<svg
class="card__logo"
viewBox="0 0 23 23"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_18_8076)">
<path d="M0 0H23V23H0V0Z" fill="#F3F3F3" />
<path d="M1 1H11V11H1V1Z" fill="#F35325" />
<path d="M12 1H22V11H12V1Z" fill="#81BC06" />
<path d="M1 12H11V22H1V12Z" fill="#05A6F0" />
<path d="M12 12H22V22H12V12Z" fill="#FFBA08" />
</g>
<defs>
<clipPath id="clip0_18_8076">
<rect width="23" height="23" fill="white" />
</clipPath>
</defs>
</svg>

<h2 class="card__title">Microsoft</h2>
<p class="card__coming-soon">Coming soon</p>
</a>
<a href="#" class="card card--coming-soon">
<svg
class="card__logo"
viewBox="0 0 132 132"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M66.0339 1C38.8919 1 30.9539 1.028 29.4109 1.156C23.8409 1.619 20.3749 2.496 16.5989 4.376C13.6889 5.821 11.3939 7.496 9.12893 9.844C5.00393 14.126 2.50393 19.394 1.59893 25.656C1.15893 28.696 1.03093 29.316 1.00493 44.844C0.994933 50.02 1.00493 56.832 1.00493 65.969C1.00493 93.089 1.03493 101.019 1.16493 102.559C1.61493 107.979 2.46493 111.389 4.26493 115.119C7.70493 122.259 14.2749 127.619 22.0149 129.619C24.6949 130.309 27.6549 130.689 31.4549 130.869C33.0649 130.939 49.4749 130.989 65.8949 130.989C82.3149 130.989 98.7349 130.969 100.305 130.889C104.705 130.682 107.26 130.339 110.085 129.609C117.875 127.599 124.325 122.319 127.835 115.079C129.6 111.439 130.495 107.899 130.9 102.762C130.988 101.642 131.025 83.785 131.025 65.952C131.025 48.116 130.985 30.292 130.897 29.172C130.487 23.952 129.592 20.442 127.77 16.732C126.275 13.695 124.615 11.427 122.205 9.108C117.904 5 112.644 2.5 106.376 1.596C103.339 1.157 102.734 1.027 87.1939 1H66.0339Z"
fill="url(#paint0_radial_18_8071)"
/>
<path
d="M66.0339 1C38.8919 1 30.9539 1.028 29.4109 1.156C23.8409 1.619 20.3749 2.496 16.5989 4.376C13.6889 5.821 11.3939 7.496 9.12893 9.844C5.00393 14.126 2.50393 19.394 1.59893 25.656C1.15893 28.696 1.03093 29.316 1.00493 44.844C0.994933 50.02 1.00493 56.832 1.00493 65.969C1.00493 93.089 1.03493 101.019 1.16493 102.559C1.61493 107.979 2.46493 111.389 4.26493 115.119C7.70493 122.259 14.2749 127.619 22.0149 129.619C24.6949 130.309 27.6549 130.689 31.4549 130.869C33.0649 130.939 49.4749 130.989 65.8949 130.989C82.3149 130.989 98.7349 130.969 100.305 130.889C104.705 130.682 107.26 130.339 110.085 129.609C117.875 127.599 124.325 122.319 127.835 115.079C129.6 111.439 130.495 107.899 130.9 102.762C130.988 101.642 131.025 83.785 131.025 65.952C131.025 48.116 130.985 30.292 130.897 29.172C130.487 23.952 129.592 20.442 127.77 16.732C126.275 13.695 124.615 11.427 122.205 9.108C117.904 5 112.644 2.5 106.376 1.596C103.339 1.157 102.734 1.027 87.1939 1H66.0339Z"
fill="url(#paint1_radial_18_8071)"
/>
<path
d="M66.004 18C52.968 18 51.332 18.057 46.212 18.29C41.102 18.524 37.614 19.333 34.562 20.52C31.405 21.746 28.727 23.386 26.059 26.055C23.389 28.723 21.749 31.401 20.519 34.557C19.329 37.61 18.519 41.099 18.289 46.207C18.06 51.327 18 52.964 18 66C18 79.036 18.058 80.667 18.29 85.787C18.525 90.897 19.334 94.385 20.52 97.437C21.747 100.594 23.387 103.272 26.056 105.94C28.723 108.61 31.401 110.254 34.556 111.48C37.61 112.667 41.099 113.476 46.208 113.71C51.328 113.943 52.963 114 65.998 114C79.035 114 80.666 113.943 85.786 113.71C90.896 113.476 94.388 112.667 97.442 111.48C100.598 110.254 103.272 108.61 105.939 105.94C108.609 103.272 110.249 100.594 111.479 97.438C112.659 94.385 113.469 90.896 113.709 85.788C113.939 80.668 113.999 79.036 113.999 66C113.999 52.964 113.939 51.328 113.709 46.208C113.469 41.098 112.659 37.61 111.479 34.558C110.249 31.401 108.609 28.723 105.939 26.055C103.269 23.385 100.599 21.745 97.439 20.52C94.379 19.333 90.889 18.524 85.779 18.29C80.659 18.057 79.029 18 65.989 18H66.004ZM61.698 26.65C62.976 26.648 64.402 26.65 66.004 26.65C78.82 26.65 80.339 26.696 85.4 26.926C90.08 27.14 92.62 27.922 94.312 28.579C96.552 29.449 98.149 30.489 99.828 32.169C101.508 33.849 102.548 35.449 103.42 37.689C104.077 39.379 104.86 41.919 105.073 46.599C105.303 51.659 105.353 53.179 105.353 65.989C105.353 78.799 105.303 80.319 105.073 85.379C104.859 90.059 104.077 92.599 103.42 94.289C102.55 96.529 101.508 98.124 99.828 99.803C98.148 101.483 96.553 102.523 94.312 103.393C92.622 104.053 90.08 104.833 85.4 105.047C80.34 105.277 78.82 105.327 66.004 105.327C53.187 105.327 51.668 105.277 46.608 105.047C41.928 104.831 39.388 104.049 37.695 103.392C35.455 102.522 33.855 101.482 32.175 99.802C30.495 98.122 29.455 96.526 28.583 94.285C27.926 92.595 27.143 90.055 26.93 85.375C26.7 80.315 26.654 78.795 26.654 65.977C26.654 53.159 26.7 51.647 26.93 46.587C27.144 41.907 27.926 39.367 28.583 37.675C29.453 35.435 30.495 33.835 32.175 32.155C33.855 30.475 35.455 29.435 37.695 28.563C39.387 27.903 41.928 27.123 46.608 26.908C51.036 26.708 52.752 26.648 61.698 26.638V26.65ZM91.626 34.62C88.446 34.62 85.866 37.197 85.866 40.378C85.866 43.558 88.446 46.138 91.626 46.138C94.806 46.138 97.386 43.558 97.386 40.378C97.386 37.198 94.806 34.618 91.626 34.618V34.62ZM66.004 41.35C52.391 41.35 41.354 52.387 41.354 66C41.354 79.613 52.391 90.645 66.004 90.645C79.617 90.645 90.65 79.613 90.65 66C90.65 52.387 79.617 41.35 66.004 41.35ZM66.004 50C74.84 50 82.004 57.163 82.004 66C82.004 74.836 74.84 82 66.004 82C57.167 82 50.004 74.836 50.004 66C50.004 57.163 57.167 50 66.004 50Z"
fill="white"
/>
<defs>
<radialGradient
id="paint0_radial_18_8071"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(35.5384 141.001) rotate(-90) scale(128.829 119.853)"
>
<stop stop-color="#FFDD55" />
<stop offset="0.1" stop-color="#FFDD55" />
<stop offset="0.5" stop-color="#FF543E" />
<stop offset="1" stop-color="#C837AB" />
</radialGradient>
<radialGradient
id="paint1_radial_18_8071"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-20.7793 10.3642) rotate(78.6776) scale(57.5876 237.438)"
>
<stop stop-color="#3771C8" />
<stop offset="0.128" stop-color="#3771C8" />
<stop offset="1" stop-color="#6600FF" stop-opacity="0" />
</radialGradient>
</defs>
</svg>

<h2 class="card__title">Instagram</h2>
<p class="card__coming-soon">Coming soon</p>
</a>
</div>
</body>
</html>
0 google.html → pages/google.html
View file
File renamed without changes.
0 internet-off.html → pages/internet-off.html
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ This project aims to recreate a pixel-perfect clone of the Google Sign page for

The "clone-pages" repository contains multiple clones of popular web pages, including (but not limited to):

- Google Sign Page (current project)
- Google Sign Page
- Facebook (coming soon)
- Twitter (coming soon)
- Apple (coming soon)
Expand Down

0 comments on commit 8660e6c

Please sign in to comment.