forked from Jimbo/Jimbo-Landing-Page
added CornTV
This commit is contained in:
parent
2bd9052c93
commit
14412a644c
|
|
@ -0,0 +1,11 @@
|
|||
footer {
|
||||
font-family: 'Segoe UI', sans-serif;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: #000000B3;
|
||||
padding: 0.6em 0;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<meta property="og:title" content="CornTV">
|
||||
<meta property="og:description" content="Freecorn's Private Analog TV Station'">
|
||||
<meta property="og:image" content="https://freecorn1854.win/image/corntvlogo.png">
|
||||
<meta property="og:url" content="https://freecorn1854.win/corntv">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CornTV Homepage</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="footer.css">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<div class="logo-container">
|
||||
<img src="../images/corntvlogo.png" style="width: 20em; height: auto;" alt="CornTV Logo" class="mainlogo">
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<h1>CornTV is a Private Cable Analog TV Channel running on Channel 10 VHF!<h1>
|
||||
</main>
|
||||
<main>
|
||||
<h2><a href="https://freecorn1854.win/">Back to Main Site!</a><h2>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
<footer>This website is under GPL-3.0 license, you can find the code <a href="https://git.jimbosfiles.com/Freecorn1854/Freecorn-Landing-Page">here. </a>Some art by <a href="https://www.tumblr.com/tinyattack09">tinyattack_09.</a></footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
html, body {
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #333;
|
||||
text-align: center;
|
||||
color: white;
|
||||
overflow-x: hidden; /* Prevent horizontal scrolling */
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 1.25em;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.875em;
|
||||
width: 100%; /* Ensure header takes full width */
|
||||
padding: 0 1em; /* Add horizontal padding */
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
width: 80%;
|
||||
max-width: 44em;
|
||||
display: flex;
|
||||
justify-content: center; /* Center logo inside the container */
|
||||
margin: 0 auto; /* Center container itself */
|
||||
}
|
||||
|
||||
.mainlogo, .sublogo {
|
||||
max-width: 100%; /* Scale down if necessary */
|
||||
height: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.6em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.1em;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2em;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.app-icon-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1.875em; /* 30px / 16px = 1.875em */
|
||||
border-radius: 0.9375em; /* 15px / 16px = 0.9375em */
|
||||
transition: transform 0.3s;
|
||||
width: 15em; /* 250px / 16px = 15.625em */
|
||||
height: 15em; /* 250px / 16px = 15.625em */
|
||||
color: white;
|
||||
}
|
||||
|
||||
.app-icon img {
|
||||
width: 6.25em; /* 100px / 16px = 6.25em */
|
||||
height: 6.25em; /* 100px / 16px = 6.25em */
|
||||
}
|
||||
|
||||
.app-icon p {
|
||||
margin-top: 1.25em; /* 20px / 16px = 1.25em */
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.app-icon:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.app-icon.red {
|
||||
background: linear-gradient(145deg, #f25555, #c91e1e);
|
||||
}
|
||||
|
||||
.app-icon.orange {
|
||||
background: linear-gradient(145deg, #f2b06f, #fc771e);
|
||||
}
|
||||
|
||||
.app-icon.blue {
|
||||
background: linear-gradient(145deg, #1a94b8, #2c67f2);
|
||||
}
|
||||
|
||||
.app-icon.green {
|
||||
background: linear-gradient(145deg, #74D680, #378B29);
|
||||
}
|
||||
|
||||
.app-icon.yellow {
|
||||
background: linear-gradient(145deg, #fcf06c, #fcea2a);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.app-icon.purple {
|
||||
background: linear-gradient(145deg, #c29ae0, #8459a5);
|
||||
}
|
||||
|
||||
.app-icon.contact {
|
||||
background: linear-gradient(145deg, #ffffff, #dbdbdb);
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
@media (max-width: 768px) {
|
||||
.logo-container {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.mainlogo, .sublogo {
|
||||
max-width: 90%; /* Scale down logo */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.logo-container {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.mainlogo, .sublogo {
|
||||
max-width: 80%; /* Scale down more for smaller screens */
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
|
|
@ -33,6 +33,15 @@
|
|||
<span class="button-text">OpenWebRX WebSDR</span>
|
||||
</div>
|
||||
</button>
|
||||
</button>
|
||||
<a href="https://freecorn1854.win/corntv">
|
||||
<button class="custom-button steam">
|
||||
<div class="color-part"></div>
|
||||
<div class="button-content">
|
||||
<img class="button-image" src="./images/corntvlogo.png" alt="Button Logo" style="width: 4em; height: auto;">
|
||||
<span class="button-text">CornTV Info</span>
|
||||
</div>
|
||||
</button>
|
||||
<a href="https://nonfree.freecorn1854.win/shortstack">
|
||||
<button class="custom-button steam">
|
||||
<div class="color-part"></div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue