Wznowienie po 2 latach – poprawki CSS #2
16
Dockerfile
Normal file
16
Dockerfile
Normal file
@ -0,0 +1,16 @@
|
||||
# Dockerfile for kotec website service
|
||||
FROM nginx:alpine
|
||||
|
||||
WORKDIR /usr/share/nginx/html
|
||||
|
||||
# Copy website files from kotec.pl directory
|
||||
COPY kotec.pl/ .
|
||||
|
||||
# Provide explicit nginx config listening on 8081
|
||||
COPY default.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
# Expose port
|
||||
EXPOSE 8081
|
||||
|
||||
# Nginx will start automatically
|
||||
|
||||
14
default.conf
Normal file
14
default.conf
Normal file
@ -0,0 +1,14 @@
|
||||
server {
|
||||
listen 8081;
|
||||
listen [::]:8081;
|
||||
server_name _;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html index.htm;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ =404;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -4,7 +4,9 @@
|
||||
<head>
|
||||
<title>Kotec</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="kooperatywa technologiczna kotec">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
|
||||
@ -1,62 +1,103 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&display=swap');
|
||||
|
||||
/* Colors */
|
||||
:root {
|
||||
--main-bg-color: #444346;
|
||||
--main-text-color: #ffffff;
|
||||
--accent-color: #e4ae46;
|
||||
--main-bg-color: #0a0a0a;
|
||||
--main-text-color: #c0c0c0;
|
||||
--main-text-bright: #ffffff;
|
||||
--accent-color: rgba(160, 112, 11, 0.8);
|
||||
--accent-color-hover: rgba(160, 112, 11, 1);
|
||||
--card-bg: rgba(15, 15, 15, 0.7);
|
||||
--card-bg-hover: rgba(15, 15, 15, 0.9);
|
||||
}
|
||||
|
||||
/* Reset */
|
||||
html, body, h1, h2, h3, h4, h5, h6, ol, li {
|
||||
html, body, h1, h2, h3, h4, h5, h6, ol, li, ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
background-color: var(--main-bg-color);
|
||||
color: var(--main-text-color);
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
background-color: var(--main-bg-color);
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
padding: 2em 1em;
|
||||
border-bottom: 1px solid rgba(160, 112, 11, 0.2);
|
||||
}
|
||||
|
||||
#logo {
|
||||
display: inline-block;
|
||||
width: 12em;
|
||||
height: 12em;
|
||||
background-color: var(--accent-color);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin: 1em;
|
||||
border: 2px solid rgba(160, 112, 11, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#logo:hover {
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 8px 32px rgba(160, 112, 11, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
#name h1 {
|
||||
color: var(--main-text-bright);
|
||||
font-size: 2em;
|
||||
font-weight: 400;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 0.5em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.slogan {
|
||||
color: var(--accent-color);
|
||||
font-size: 1.1em;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
#nav-bar {
|
||||
margin: 1em;
|
||||
margin: 2em 1em;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
color: var(--main-text-color);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
padding: 1em 2em;
|
||||
margin: 1em;
|
||||
border: 0.14em solid var(--main-text-color);
|
||||
border-radius: 1em;
|
||||
font-weight: 400;
|
||||
padding: 0.8em 2em;
|
||||
margin: 0.5em;
|
||||
border: 1px solid rgba(160, 112, 11, 0.3);
|
||||
border-radius: 6px;
|
||||
background: var(--card-bg);
|
||||
transition: all 0.3s ease;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.nav-btn:hover, .nav-btn-special:hover {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--main-bg-color);
|
||||
background-color: var(--card-bg-hover);
|
||||
border-color: var(--accent-color);
|
||||
color: var(--accent-color-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 32px rgba(160, 112, 11, 0.2);
|
||||
}
|
||||
|
||||
/* Split */
|
||||
@ -64,16 +105,26 @@ header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1em 4em;
|
||||
padding: 4em 2em;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.split img {
|
||||
width: 28vw;
|
||||
max-width: 400px;
|
||||
border-radius: 8px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.split img:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
@media (orientation: portrait) {
|
||||
.split {
|
||||
flex-wrap: wrap;
|
||||
padding: 2em 1em;
|
||||
}
|
||||
|
||||
.split img {
|
||||
@ -88,47 +139,117 @@ header {
|
||||
|
||||
.split-left {
|
||||
flex: 1;
|
||||
max-width: 80%;
|
||||
max-width: 50%;
|
||||
height: auto;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.split-right {
|
||||
flex: 1;
|
||||
max-width: 80%;
|
||||
max-width: 50%;
|
||||
height: auto;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
/* Section */
|
||||
#about {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--main-bg-color);
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(135deg, rgba(160, 112, 11, 0.15) 0%, rgba(15, 15, 15, 0.9) 100%);
|
||||
color: var(--main-text-color);
|
||||
font-size: 1.1em;
|
||||
font-weight: 400;
|
||||
border-top: 1px solid rgba(160, 112, 11, 0.2);
|
||||
border-bottom: 1px solid rgba(160, 112, 11, 0.2);
|
||||
}
|
||||
|
||||
#about p {
|
||||
margin-bottom: 1.5em;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
#about a, #about a:visited {
|
||||
color: var(--main-bg-color);
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba(160, 112, 11, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#about a:hover {
|
||||
border-bottom-color: var(--accent-color-hover);
|
||||
color: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
#services {
|
||||
background-color: var(--main-text-color);
|
||||
color: var(--main-bg-color);
|
||||
background: var(--main-bg-color);
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
|
||||
#services h2 {
|
||||
color: var(--main-text-bright);
|
||||
font-size: 2em;
|
||||
font-weight: 400;
|
||||
margin-bottom: 1.5em;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#services p {
|
||||
margin-bottom: 1.5em;
|
||||
line-height: 1.8;
|
||||
font-size: 1.05em;
|
||||
}
|
||||
|
||||
#services ul {
|
||||
list-style: none;
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
#services li {
|
||||
margin: 1em 0;
|
||||
padding-left: 1.5em;
|
||||
position: relative;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
#services li:before {
|
||||
content: "→";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--accent-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#services a, #services a:visited {
|
||||
color: var(--main-bg-color);
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba(160, 112, 11, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#services a:hover {
|
||||
border-bottom-color: var(--accent-color-hover);
|
||||
color: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
/* Footer Styles */
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
padding: 3em 1em;
|
||||
background-color: var(--main-bg-color);
|
||||
color: var(--main-text-color);
|
||||
font-size: 1.2em;
|
||||
font-size: 1.1em;
|
||||
border-top: 1px solid rgba(160, 112, 11, 0.2);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
footer a, footer a:visited {
|
||||
color: var(--main-text-color);
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba(160, 112, 11, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
border-bottom-color: var(--accent-color-hover);
|
||||
color: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user