Skip to content

Commit

Permalink
upd. style header
Browse files Browse the repository at this point in the history
  • Loading branch information
GamingHackintosh committed Aug 31, 2024
1 parent e42e91b commit 1b1ff43
Show file tree
Hide file tree
Showing 7 changed files with 234 additions and 74 deletions.
79 changes: 60 additions & 19 deletions assets/CSS/adaptation.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,67 @@

/*=== Header.css ===*/
@media (max-width: 768px) {
/* main-header */
.main-header {
padding: 2rem;
flex-direction: column;
justify-content: center;
text-align: center;
text-align: center;
}
.header-description {
max-width: 100% !important;
margin-top: 10px;
.header-content {
flex-direction: column;
align-items: center;
gap: 20px;
}

.header-img {
display: none;
}

.header-text {
text-align: center;
}
.header-title {
font-size: 3em;
}
.header-description p {
font-size: 15px;
}
}

@media (max-width: 810px) {
.main-header {
padding: 2rem;
flex-direction: column;
text-align: center;
}

.header-content {
flex-direction: column;
align-items: center;
gap: 20px;
}

.header-img {
display: none;
}

.header-text {
text-align: center;
}

.header-title {
font-size: 2.8em;
}

.header-description p {
font-size: 1em;
line-height: 1.4;
}
}



/*=== Navigation ===*/
@media (max-width: 768px) {
@media (max-width: 810px) {
.navigation.historical {
width: 70%;
padding: 10px;
Expand All @@ -35,18 +82,6 @@
font-size: 14px;
border-radius: 20px;
}

.main-header {
padding: 10px 0;
}

.header-title {
font-size: 24px;
}

.header-description {
font-size: 14px;
}
}


Expand Down Expand Up @@ -118,6 +153,12 @@
font-size: 14px;
border-radius: 10px;
}

#error-message {
display: flex;
position: inherit;
width: 280px;
}
}

/* Стили для телефонов */
Expand Down
108 changes: 89 additions & 19 deletions assets/CSS/footer.css
Original file line number Diff line number Diff line change
@@ -1,40 +1,110 @@
/*===== Footer =====*/
footer {
text-align: center;
background: var(--color-footer-bg);
/*===== Футер =====*/
.main-footer {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(10, 10, 10, 0.9);
color: var(--color-footer-text);
margin: 2rem;
padding: 2rem;
border-radius: 10px;
font-size: 14px;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
border-radius: 15px;
box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.7);
text-align: center;
flex-direction: column;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1000px;
gap: 20px;
flex-wrap: wrap;
}

/*=== Footer-text ===*/
footer p {
opacity: 0.7;
transition: opacity 0.3s ease;
.footer-logo img {
width: 100px;
height: 100px;
background-image: url('../photo/icon/logo.png');
background-size: cover;
background-position: center;
border-radius: 20%;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.footer-info {
max-width: 400px;
text-align: center;
}
footer p:hover {
opacity: 1;
.footer-info p {
margin: 0.5rem 0;
font-size: 1em;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.footer-info p:hover {
opacity: 1;
}

footer a {
color: var(--color-footer-text);
text-decoration: none;
transition: color 0.3s ease;
transition: color 0.3s ease, text-decoration 0.3s ease;
}
footer a:hover {
color: var(--color-hover-text);
text-decoration: underline;
}

/*=== Footer Link ===*/
.footer-link {
color: inherit;
text-decoration: underline;
font-weight: bold;
opacity: 0.8;
transition: opacity 0.3s ease;
}

.footer-link:hover {
opacity: 0.9;
}
opacity: 1;
}

.footer-social {
display: flex;
gap: 15px;
}

.footer-social .social-link img {
width: 30px;
height: 30px;
transition: transform 0.3s ease, opacity 0.3s ease;
}

.footer-social .social-link:hover img {
transform: scale(1.1);
opacity: 0.8;
}

/*=== Адаптация футера ===*/
@media (max-width: 768px) {
.main-footer {
padding: 1.5rem;
}

.footer-content {
flex-direction: column;
align-items: center;
gap: 10px;
}

.footer-logo img {
display: none;
}

.footer-info p {
font-size: 0.9em;
}

.footer-social .social-link img {
width: 25px;
height: 25px;
}
}
61 changes: 40 additions & 21 deletions assets/CSS/header.css
Original file line number Diff line number Diff line change
@@ -1,35 +1,54 @@
/*===== Шапка =====*/
.main-header {
display: flex;
justify-content: space-between;
justify-content: center;
align-items: center;
background-color: rgba(10, 10, 10, 0.9);
color: var(--color-white);
padding: 2rem;
border-radius: 10px;
padding: 4rem 2rem;
border-radius: 15px;
margin: 2rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
}

.header-title {
font-size: 3em;
font-weight: bold;
font-family: 'Header-TITLE', sans-serif;
.header-content {
display: flex;
flex-direction: row;
align-items: center;
gap: 50px;
}
.header-description {
text-align: center;
font-size: 1.1em;
font-family: 'Header-DESC', sans-serif;
max-width: 50%;
line-height: 1.6;

.header-img {
width: 140px;
height: 140px;
background-image: url('../photo/icon/logo.png');
background-size: cover;
background-position: center;
border-radius: 20%;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.header-img:hover {
transform: translateY(-10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

.header-action {
color: #4e9af1;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease;
.header-text {
max-width: 600px;
}
.header-action:hover {
color: #81baf6;
.header-title {
font-size: 3.5em;
font-weight: bold;
font-family: 'Header-TITLE', sans-serif;
margin-bottom: 1rem;
color: #f8f8f8;
border-bottom: 3px solid #f8f8f8;
padding-bottom: 0.5rem;
}
.header-description p {
font-size: 1.2em;
font-family: 'Header-DESC', sans-serif;
line-height: 1.6;
margin: 0;
color: #ddd;
}
27 changes: 22 additions & 5 deletions assets/CSS/menu-1.css
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,6 @@
padding-top: 10px;
flex: 1 0 21%;
}

.list_menu ul {
display: flex;
flex-wrap: wrap;
Expand All @@ -99,18 +98,36 @@
margin: 20px 0;
}


/* FOOTER-MENU */
.footer_menu {
display: flex;
border-radius: 15px;
text-align: center;
}

.footer_menu p {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 15px;
color: var(--color-white);
margin: 0.5rem 0;
font-size: 1em;
color: var(--color-footer-text);
opacity: 0.7;
transition: opacity 0.3s ease;
}

.footer_menu p:hover {
opacity: 1;
}

.footer_menu a {
color: var(--color-footer-text);
text-decoration: none;
transition: color 0.3s ease, text-decoration 0.3s ease;
}
.footer_menu a:hover {
color: var(--color-hover-text);
text-decoration: underline;
}


@media screen and (max-width: 768px) {
.menu {
width: 300px;
Expand Down
3 changes: 1 addition & 2 deletions assets/CSS/search.css
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
color: var(--color-text-alt);

border: 1px solid var(--color-bg);
border-radius: 5px;
border-radius: 20px;

padding: 20px;
width: 100%;
Expand Down Expand Up @@ -160,7 +160,6 @@
color: var(--color-text-alt);
border-radius: 5px;
padding: 20px;
width: 100%;
max-width: 900px;
max-height: 400px;
overflow: auto;
Expand Down
Binary file added assets/photo/icon/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 1b1ff43

Please sign in to comment.