[INTERNAL LAB]

Nikola Tesla Infographic HTML Source

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nikola Tesla Infographic</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Lora:ital,wght@0,400;0,700;1,400&family=Oswald:wght@400;600&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #1a0f05;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Lora', serif;
padding: 20px;
}
.infographic {
width: 100%;
max-width: 800px;
background: linear-gradient(135deg, #3b2412 0%, #1f1106 50%, #3b2412 100%);
border: 4px solid #c99b3b;
border-radius: 8px;
padding: 30px;
position: relative;
box-shadow: 0 0 50px rgba(201, 155, 59, 0.3), inset 0 0 80px rgba(0,0,0,0.8);
color: #e8d5a5;
overflow: hidden;
}
.infographic::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 0;
}
.content {
position: relative;
z-index: 1;
}
h1 {
font-family: 'Cinzel', serif;
font-size: 3.5rem;
text-align: center;
color: #f5d77a;
text-shadow: 0 0 10px rgba(245, 215, 122, 0.5), 2px 2px 4px #000;
letter-spacing: 2px;
margin-bottom: 5px;
line-height: 1;
}
.subtitle {
text-align: center;
font-style: italic;
font-size: 1.1rem;
color: #d4b87a;
margin-bottom: 25px;
border-bottom: 1px solid #8a6d3b;
padding-bottom: 15px;
}
h2 {
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 1.4rem;
color: #f5d77a;
text-transform: uppercase;
letter-spacing: 3px;
margin: 30px 0 20px 0;
position: relative;
}
h2::before, h2::after {
content: "⚡";
color: #c99b3b;
font-size: 1rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
h2::before { left: 0; }
h2::after { right: 0; }
.top-section {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 30px;
position: relative;
}
.location-card {
text-align: center;
width: 45%;
}
.location-icon {
font-size: 3rem;
margin-bottom: 5px;
display: block;
}
.location-card h3 {
font-family: 'Oswald', sans-serif;
font-size: 1.1rem;
color: #f5d77a;
letter-spacing: 1px;
}
.location-card p {
font-size: 0.85rem;
color: #b89a6b;
font-style: italic;
}
.inventions-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.invention-item {
text-align: center;
background: rgba(0,0,0,0.3);
border: 1px solid #5a4020;
border-radius: 4px;
padding: 10px 5px;
transition: border-color 0.3s;
}
.invention-item:hover {
border-color: #c99b3b;
}
.invention-icon {
font-size: 2.5rem;
margin-bottom: 8px;
display: block;
filter: drop-shadow(0 0 5px rgba(201, 155, 59, 0.4));
}
.invention-item h4 {
font-family: 'Oswald', sans-serif;
font-size: 0.8rem;
color: #f5d77a;
text-transform: uppercase;
line-height: 1.2;
}
.middle-section {
display: flex;
justify-content: space-around;
align-items: center;
background: rgba(0,0,0,0.2);
border-top: 1px solid #5a4020;
border-bottom: 1px solid #5a4020;
padding: 20px 0;
margin-bottom: 20px;
}
.middle-item {
text-align: center;
width: 45%;
}
.middle-icon {
font-size: 4rem;
margin-bottom: 10px;
display: block;
filter: drop-shadow(0 0 8px rgba(201, 155, 59, 0.6));
}
.middle-item h3 {
font-family: 'Oswald', sans-serif;
font-size: 1rem;
color: #f5d77a;
text-transform: uppercase;
}
.legacy-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
margin-bottom: 20px;
}
.legacy-item {
text-align: center;
background: rgba(0,0,0,0.3);
border: 1px solid #5a4020;
border-radius: 4px;
padding: 15px 5px;
}
.legacy-icon {
font-size: 2.5rem;
margin-bottom: 10px;
display: block;
filter: drop-shadow(0 0 5px rgba(201, 155, 59, 0.4));
}
.legacy-item h4 {
font-family: 'Oswald', sans-serif;
font-size: 0.8rem;
color: #f5d77a;
text-transform: uppercase;
line-height: 1.2;
}
.footer {
text-align: center;
border-top: 1px solid #8a6d3b;
padding-top: 15px;
margin-top: 10px;
}
.footer p {
font-family: 'Cinzel', serif;
font-size: 1.2rem;
color: #f5d77a;
font-style: italic;
text-shadow: 0 0 8px rgba(245, 215, 122, 0.4);
}
.lightning-bg {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle at 50% 30%, rgba(201, 155, 59, 0.15) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
animation: pulse 4s infinite alternate;
}
@keyframes pulse {
0% { opacity: 0.5; }
100% { opacity: 1; }
}
</style>
</head>
<body>
<div class="infographic">
<div class="lightning-bg"></div>
<div class="content">
<h1>NIKOLA TESLA</h1>
<p class="subtitle">The Genius Who Electrified the World</p>
<div class="top-section">
<div class="location-card">
<span class="location-icon">🏡</span>
<h3>BORN 1856 • SMILJAN</h3>
<p>(Now Croatia)</p>
</div>
<div class="location-card">
<span class="location-icon">🗽</span>
<h3>DIED 1943 • NEW YORK CITY</h3>
</div>
</div>
<h2>KEY INVENTIONS</h2>
<div class="inventions-grid">
<div class="invention-item"><span class="invention-icon">〰️</span><h4>Alternating Current (AC)</h4></div>
<div class="invention-item"><span class="invention-icon">⚡</span><h4>Tesla Coil</h4></div>
<div class="invention-item"><span class="invention-icon">⚙️</span><h4>Induction Motor</h4></div>
<div class="invention-item"><span class="invention-icon">📡</span><h4>Wireless Feed</h4></div>
<div class="invention-item"><span class="invention-icon">🗼</span><h4>Wireless Power</h4></div>
</div>
<h2>RADIO & REMOTE CONTROL</h2>
<div class="middle-section">
<div class="middle-item"><span class="middle-icon">📻</span><h3>Pioneer of Radio</h3></div>
<div class="middle-item"><span class="middle-icon">🚤</span><h3>Pioneer of Robotics</h3></div>
</div>
<h2>LASTING LEGACY</h2>
<div class="legacy-grid">
<div class="legacy-item"><span class="legacy-icon">🏗️</span><h4>Electrical Grids</h4></div>
<div class="legacy-item"><span class="legacy-icon">📶</span><h4>Wireless Technology</h4></div>
<div class="legacy-item"><span class="legacy-icon">☀️</span><h4>Renewable Energy</h4></div>
<div class="legacy-item"><span class="legacy-icon">🚗</span><h4>Tesla Motors</h4></div>
</div>
<div class="footer">
<p>"The Man Who Electrified the World"</p>
</div>
</div>
</div>
</body>
</html>

 html
>
<
html
 lang
=
"en"
>
<
head
>
    <
meta
 charset
=
"UTF-8"
>
    <
meta
 name
=
"viewport"
 content
=
"width=device-width, initial-scale=1.0"
>
    <
title
>
Nikola Tesla Infographic
title
>
    <
style
>
        @import
 url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Lora:ital,wght@0,400;0,700;1,400&family=Oswald:wght@400;600&display=swap')
;

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

        body
 {
            background-color
:
 #1a0f05
;
            display
:
 flex
;
            justify-content
:
 center
;
            align-items
:
 center
;
            min-height
:
 100vh
;
            font-family
:
 'Lora', serif
;
            padding
:
 20px
;
        }

        .infographic
 {
            width
:
 100%
;
            max-width
:
 800px
;
            background
:
 linear-gradient
(
135deg
,
 #3b2412
 0%
,
 #1f1106
 50%
,
 #3b2412
 100%
)
;
            border
:
 4px solid
 #c99b3b
;
            border-radius
:
 8px
;
            padding
:
 30px
;
            position
:
 relative
;
            box-shadow
:
 0 0 50px rgba
(
201
,
 155
,
 59
,
 0.3
)
,
 inset 0 0 80px rgba
(
0
,
0
,
0
,
0.8
)
;
            color
:
 #e8d5a5
;
            overflow
:
 hidden
;
        }

        / Footer */
        .footer
 {
            text-align
:
 center
;
            border-top
:
 1px solid
 #8a6d3b
;
            padding-top
:
 15px
;
            margin-top
:
 10px
;
        }
    style
>
head
>
<
body
>
    <
div
 class
=
"infographic"
>
        <
h1
>
NIKOLA TESLA
h1
>
    div
>
body
>
html
>

Search This Blog

[INTERNAL LAB]

Comments

Post a Comment

Popular posts from this blog

TO-DO_LIST RELATED APP: JOB DONE v5 versi MOBILE-PURPOSE aka +Bootstrap

[MAIN PROGRAM] UNDONE HOUSEHOLD WORKs WEB-PROGRAM v2/MAIN

PENDING ITEMs [REVISION] v0