Scribd
Upload
17 views20 pages

People Who Are in The Same Area As A Working On Earlier

The document is an HTML template for a personal digital dashboard titled 'T.I.M.IX'. It includes styles for various sections such as header, navigation, hero, about, social feeds, analytics, gallery, contact, and footer, utilizing CSS variables for color themes and responsive grid layouts. The design features modern aesthetics with hover effects, gradients, and a mobile-friendly layout.

Uploaded by

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

People Who Are in The Same Area As A Working On Earlier

The document is an HTML template for a personal digital dashboard titled 'T.I.M.IX'. It includes styles for various sections such as header, navigation, hero, about, social feeds, analytics, gallery, contact, and footer, utilizing CSS variables for color themes and responsive grid layouts. The design features modern aesthetics with hover effects, gradients, and a mobile-friendly layout.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>T.I.M.IX - Personal Digital Dashboard</title>
<style>
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:root {
--primary: #2d3436;
--secondary: #0984e3;
--accent: #00cec9;
--light: #dfe6e9;
--dark: #2d3436;
--success: #00b894;
--warning: #fdcb6e;
--danger: #d63031;
--text-light: #dfe6e9;
--text-dark: #2d3436;
}

body {
background-color: var(--light);
color: var(--text-dark);
line-height: 1.6;
overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
}

h1 {
font-size: 3.5rem;
background: linear-gradient(135deg, var(--secondary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

h2 {
font-size: 2.5rem;
color: var(--secondary);
}

h3 {
font-size: 1.8rem;
color: var(--primary);
}
p {
margin-bottom: 1rem;
font-size: 1.1rem;
}

/* Layout */
.container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}

.section {
padding: 5rem 0;
}

.grid {
display: grid;
gap: 2rem;
}

.grid-2 {
grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
grid-template-columns: repeat(4, 1fr);
}

/* Header */
header {
background-color: var(--primary);
color: var(--text-light);
padding: 1rem 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}

.brand {
font-size: 1.8rem;
font-weight: 700;
color: var(--text-light);
text-decoration: none;
display: flex;
align-items: center;
}

.brand span {
color: var(--accent);
}

/* Navigation */
nav ul {
display: flex;
list-style: none;
}

nav ul li {
margin-left: 2rem;
}

nav ul li a {
color: var(--text-light);
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
}

nav ul li a:hover {
color: var(--accent);
}

nav ul li a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background-color: var(--accent);
transition: all 0.3s ease;
}

nav ul li a:hover::after {
width: 100%;
}

/* Hero Section */
.hero {
height: 100vh;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: var(--text-light);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}

.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('/api/placeholder/1920/1080') no-repeat center
center/cover;
opacity: 0.2;
z-index: 0;
}

.hero-content {
position: relative;
z-index: 1;
max-width: 800px;
}

.hero h1 {
font-size: 4rem;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, var(--text-light), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.hero p {
font-size: 1.5rem;
margin-bottom: 2rem;
opacity: 0.9;
}

.btn {
display: inline-block;
padding: 0.8rem 2rem;
background-color: var(--accent);
color: var(--text-dark);
text-decoration: none;
border-radius: 5px;
font-weight: 600;
transition: all 0.3s ease;
border: 2px solid transparent;
}

.btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.btn-outline {
background-color: transparent;
border: 2px solid var(--accent);
color: var(--accent);
margin-left: 1rem;
}

.btn-outline:hover {
background-color: var(--accent);
color: var(--text-dark);
}
/* About Section */
.about {
background-color: #fff;
}

.about-content {
display: flex;
align-items: center;
gap: 4rem;
}

.about-image {
flex: 1;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.about-image img {
width: 100%;
height: auto;
display: block;
transition: all 0.5s ease;
}

.about-image img:hover {
transform: scale(1.05);
}

.about-text {
flex: 1;
}

/* Social Media Feeds */


.social-feeds {
background-color: var(--light);
padding: 5rem 0;
}

.social-feeds h2 {
text-align: center;
margin-bottom: 3rem;
}

.feed-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}

.feed-card {
background-color: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.feed-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.feed-header {
padding: 1.5rem;
background-color: var(--primary);
color: var(--text-light);
display: flex;
align-items: center;
gap: 1rem;
}

.feed-icon {
width: 30px;
height: 30px;
background-color: var(--accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

.feed-icon i {
font-size: 1.2rem;
}

.feed-content {
padding: 1.5rem;
max-height: 400px;
overflow-y: auto;
}

.feed-item {
padding: 1rem 0;
border-bottom: 1px solid #eee;
}

.feed-item:last-child {
border-bottom: none;
}

.feed-item .feed-meta {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
font-size: 0.9rem;
color: #666;
}

.feed-item .feed-text {
margin-bottom: 0.5rem;
}

.feed-item .feed-image {
border-radius: 5px;
overflow: hidden;
margin-bottom: 0.5rem;
}

.feed-item .feed-image img {


width: 100%;
height: auto;
display: block;
}

.feed-item .feed-actions {
display: flex;
gap: 1rem;
font-size: 0.9rem;
color: #666;
}

/* Analytics Dashboard */
.analytics {
background-color: #fff;
padding: 5rem 0;
}

.analytics h2 {
text-align: center;
margin-bottom: 3rem;
}

.analytics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}

.analytics-card {
background-color: #fff;
border-radius: 10px;
padding: 2rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.analytics-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.analytics-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(135deg, var(--secondary), var(--accent));
}
.analytics-card h3 {
margin-bottom: 1rem;
font-size: 1.5rem;
}

.analytics-card p {
font-size: 2.5rem;
font-weight: 700;
color: var(--secondary);
margin-bottom: 0.5rem;
}

.analytics-card .trend {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
}

.analytics-card .trend.up {
color: var(--success);
}

.analytics-card .trend.down {
color: var(--danger);
}

.chart-container {
width: 100%;
height: 400px;
margin-top: 2rem;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
padding: 2rem;
}

/* Gallery */
.gallery {
background-color: var(--light);
padding: 5rem 0;
}

.gallery h2 {
text-align: center;
margin-bottom: 3rem;
}

.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}

.gallery-item {
border-radius: 10px;
overflow: hidden;
position: relative;
height: 250px;
cursor: pointer;
}

.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}

.gallery-item:hover img {
transform: scale(1.1);
}

.gallery-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
opacity: 0;
transition: all 0.3s ease;
z-index: 1;
}

.gallery-item:hover::before {
opacity: 1;
}

.gallery-item .caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 1.5rem;
color: #fff;
z-index: 2;
transform: translateY(100%);
transition: all 0.3s ease;
}

.gallery-item:hover .caption {
transform: translateY(0);
}

/* Contact Section */
.contact {
background-color: #fff;
padding: 5rem 0;
}

.contact h2 {
text-align: center;
margin-bottom: 3rem;
}

.contact-form {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.form-group {
margin-bottom: 1.5rem;
}

.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
}

.form-control {
width: 100%;
padding: 0.8rem;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
transition: all 0.3s ease;
}

.form-control:focus {
outline: none;
border-color: var(--secondary);
box-shadow: 0 0 0 2px rgba(9, 132, 227, 0.1);
}

textarea.form-control {
resize: vertical;
min-height: 150px;
}

.btn-submit {
background-color: var(--secondary);
width: 100%;
cursor: pointer;
}

/* Footer */
footer {
background-color: var(--primary);
color: var(--text-light);
padding: 3rem 0;
}

.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
}

.footer-col h3 {
color: var(--text-light);
margin-bottom: 1.5rem;
font-size: 1.5rem;
position: relative;
padding-bottom: 0.5rem;
}

.footer-col h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background-color: var(--accent);
}

.footer-col p {
margin-bottom: 1rem;
}

.footer-col ul {
list-style: none;
}

.footer-col ul li {
margin-bottom: 0.8rem;
}

.footer-col ul li a {
color: var(--text-light);
text-decoration: none;
transition: all 0.3s ease;
}

.footer-col ul li a:hover {
color: var(--accent);
padding-left: 5px;
}

.social-links {
display: flex;
gap: 1rem;
margin-top: 1rem;
}

.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: var(--dark);
color: var(--text-light);
border-radius: 50%;
transition: all 0.3s ease;
}

.social-links a:hover {
background-color: var(--accent);
color: var(--text-dark);
transform: translateY(-3px);
}

.copyright {
text-align: center;
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.9rem;
}

/* Modal */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}

.modal.active {
opacity: 1;
visibility: visible;
}

.modal-content {
background-color: #fff;
border-radius: 10px;
max-width: 90%;
max-height: 90%;
overflow: auto;
position: relative;
}

.modal-close {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
background-color: var(--primary);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1;
}
.modal-img {
display: block;
max-width: 100%;
max-height: 80vh;
}

.modal-caption {
padding: 1rem;
text-align: center;
}

/* Login/Signup Form */
.auth-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
z-index: 3000;
}

.auth-box {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 400px;
padding: 2rem;
text-align: center;
position: relative;
overflow: hidden;
}

.auth-logo {
margin-bottom: 2rem;
}

.auth-tabs {
display: flex;
margin-bottom: 2rem;
border-bottom: 1px solid #eee;
}

.auth-tab {
flex: 1;
padding: 1rem;
cursor: pointer;
transition: all 0.3s ease;
}

.auth-tab.active {
border-bottom: 2px solid var(--secondary);
color: var(--secondary);
font-weight: 600;
}
.auth-form {
max-width: 320px;
margin: 0 auto;
}

.auth-form .form-group {
text-align: left;
}

.auth-form .btn-submit {
margin-top: 1rem;
}

.auth-links {
margin-top: 1.5rem;
font-size: 0.9rem;
}

.auth-links a {
color: var(--secondary);
text-decoration: none;
}

.auth-links a:hover {
text-decoration: underline;
}

/* Brand Logo Style */


.timix-logo {
font-size: 2.5rem;
font-weight: 800;
text-align: center;
margin: 0 auto 1rem;
position: relative;
display: inline-block;
}

.timix-logo .text {
background: linear-gradient(to right, #6a11cb, #2575fc, #00b894);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
padding: 0 10px;
position: relative;
z-index: 1;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.timix-logo .text::after {
content: 'T.I.M.IX';
position: absolute;
top: 2px;
left: 12px;
z-index: -1;
background: linear-gradient(to right, #fc466b, #3f5efb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
opacity: 0.4;
}

.timix-subtitle {
font-size: 1rem;
color: #666;
text-align: center;
margin-bottom: 2rem;
}

/* Motion Background */
.motion-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}

.bubble {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 206, 201, 0.4), rgba(9,
132, 227, 0.2));
animation: float 15s infinite ease-in-out;
filter: blur(5px);
}

.bubble:nth-child(1) {
width: 100px;
height: 100px;
left: 10%;
top: 20%;
animation-delay: 0s;
}

.bubble:nth-child(2) {
width: 150px;
height: 150px;
left: 40%;
top: 10%;
animation-delay: 2s;
}

.bubble:nth-child(3) {
width: 80px;
height: 80px;
left: 20%;
top: 50%;
animation-delay: 4s;
}

.bubble:nth-child(4) {
width: 120px;
height: 120px;
left: 70%;
top: 30%;
animation-delay: 6s;
}

.bubble:nth-child(5) {
width: 200px;
height: 200px;
left: 80%;
top: 60%;
animation-delay: 8s;
}

@keyframes float {
0% {
transform: translateY(0) rotate(0deg);
opacity: 0.8;
}
50% {
transform: translateY(-100px) rotate(180deg);
opacity: 0.4;
}
100% {
transform: translateY(0) rotate(360deg);
opacity: 0.8;
}
}

/* Particles */
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.particle {
position: absolute;
width: 3px;
height: 3px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
}

/* Responsive Design */
@media (max-width: 992px) {
.grid-2, .grid-3, .grid-4 {
grid-template-columns: 1fr;
}

.about-content {
flex-direction: column;
gap: 2rem;
}

.about-image {
width: 100%;
}

h1 {
font-size: 3rem;
}

h2 {
font-size: 2rem;
}
}

@media (max-width: 768px) {


.header-content {
flex-direction: column;
gap: 1rem;
}

nav ul {
margin-top: 1rem;
}

nav ul li {
margin-left: 1rem;
margin-right: 1rem;
}

.hero h1 {
font-size: 2.5rem;
}

.hero p {
font-size: 1.2rem;
}

.btn {
display: block;
margin-bottom: 1rem;
text-align: center;
}

.btn-outline {
margin-left: 0;
}
}

/* Animated Elements */
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fadeIn {
animation-name: fadeIn;
}

@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

.slideInLeft {
animation-name: slideInLeft;
}

@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

.slideInRight {
animation-name: slideInRight;
}

/* Loading Animation */
.loader {
width: 50px;
height: 50px;
border: 5px solid var(--light);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
to {
transform: rotate(360deg);
}
}

/* Custom Scrollbar */
::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: var(--secondary);
border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}
</style>
</head>
<body>
<!-- Motion Graphics Background -->
<div class="motion-bg">
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div id="particles" class="particles"></div>
</div>

<!-- Login/Signup Form -->


<div class="auth-container" id="authContainer">
<div class="auth-box">
<div class="auth-logo">
<div class="timix-logo">
<span class="text">T.I.M.IX</span>
</div>
<div class="timix-subtitle">Your Personal Digital Dashboard</div>
</div>
<div class="auth-tabs">
<div class="auth-tab active" id="loginTab">Login</div>
<div class="auth-tab" id="signupTab">Sign Up</div>
</div>
<div class="auth-form-container">
<!-- Login Form -->
<form class="auth-form" id="loginForm">
<div class="form-group">
<label for="loginEmail">Email</label>
<input type="email" id="loginEmail" class="form-control"
value="[email protected]" required>
</div>
<div class="form-group">
<label for="loginPassword">Password</label>
<input type="password" id="loginPassword" class="form-
control" value="@Timix" required>
</div>
<button type="submit" class="btn btn-submit">Login</button>
<div class="auth-links">
<a href="#">Forgot Password?</a>
</div>
</form>

<!-- Signup Form (Hidden by Default) -->


<form class="auth-form" id="signupForm" style="display: none;">
<div class="form-group">
<label for="signupName">Full Name</label>
<input type="text" id="signupName" class="form-control"
required>
</div>
<div class="form-group">
<label for="signupEmail">Email</label>
<input type="email" id="signupEmail" class="form-control"
required>
</div>
<div class="form-group">
<label for="signupPassword">Password</label>
<input type="password" id="signupPassword" class="form-
control" required>
</div>
<div class="form-group">
<label for="signupConfirm">Confirm Password</label>
<input type="password" id="signupConfirm" class="form-
control

You might also like