oabrivard
/
www_celticinfo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change style of Services and About Me sections

Browse Source
main
oabrivard 2 years ago
parent 89c8df8b54
commit c4a57ab65d
6 changed files with 50 additions and 32 deletions
Show Stats Download Patch File Download Diff File

BIN
assets/celticinfo_banner_assets.xcf
View File

Binary file not shown.

57
css/style.css
Unescape Escape View File

@ -1,7 +1,8 @@
/* Define root CSS variables for easy theme management */
:root { :root {
--main-bg-color: #121E2A; --main-bg-color: #121E2A;
--main-text-color: #fff; --main-text-color: #fff;
--secondary-bg-color: #DAE6E7; --secondary-bg-color: #e8eff0;
--secondary-text-color: #121E2A; --secondary-text-color: #121E2A;
} }
@ -10,17 +11,17 @@
src: url(SourceCodeVF-Upright.otf); src: url(SourceCodeVF-Upright.otf);
} }
/* General Body Styling */ /* General body styling, applies to the entire document */
body { body {
font-family: sourcecodevf, 'Arial', sans-serif; font-family: sourcecodevf, 'Arial', sans-serif;
margin: 0 auto; margin: 0 auto;
max-width: 1581px; max-width: 2048px;
padding: 0; padding: 0;
background-color: white; background-color: white;
color: var(--main-text-color); color: var(--main-text-color);
} }
/* Container */ /* Container is a wrapper for all content, provides padding and centers content */
.container { .container {
width: 100%; width: 100%;
margin: auto; margin: auto;
@ -39,7 +40,7 @@ body {
color: var(--main-text-color); color: var(--main-text-color);
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
font-size: 16px; font-size: 26px;
} }
/* logo */ /* logo */
@ -65,7 +66,7 @@ body {
} }
.menu ul li { .menu ul li {
display: inline; display: inline; /* inline display for list items for a horizontal navigation menu */
margin-left: 35px; margin-left: 35px;
} }
@ -93,21 +94,21 @@ body {
.banner-content-middle { .banner-content-middle {
position: absolute; position: absolute;
top: 34%; top: 35%;
left: 36%; left: 35%;
font-size: 54px; /* Responsive font size */ font-size: 80px;
text-align: center; text-align: center;
} }
.banner-content-middle .company-name { .banner-content-middle .company-name {
font-size: 68px; /* Responsive font size */ font-size: 100px;
} }
.banner-content-bottom { .banner-content-bottom {
position: absolute; position: absolute;
bottom: 7%; bottom: 8%;
right: 11%; right: 4%;
font-size: 20px; /* Responsive font size */ font-size: 28px;
} }
.banner-content-bottom a { .banner-content-bottom a {
@ -119,14 +120,29 @@ body {
text-decoration: underline; text-decoration: underline;
} }
/* Main Content */ /* Main Content */
main { main {
padding: 20px; padding: 20px;
color: var(--secondary-text-color); color: var(--secondary-text-color);
background: var(--main-bg-color);
margin-top: -1px;
}
section {
padding: 5px 15px;
-webkit-box-shadow: 6px 6px 8px 0px rgba(255,255,255,0.6);
box-shadow: 6px 6px 8px 0px rgba(255,255,255,0.6);
/*
-webkit-box-shadow: 6px 6px 8px 0px rgba(18,30,42,0.6);
box-shadow: 6px 6px 8px 0px rgba(18,30,42,0.6);
*/
background: var(--secondary-bg-color); background: var(--secondary-bg-color);
} }
section:not(:first-child) {
margin-top: 20px;
}
/* Footer */ /* Footer */
.footer { .footer {
background: var(--main-bg-color); background: var(--main-bg-color);
@ -163,7 +179,11 @@ main {
} }
/* Media Queries */ /* Media Queries */
@media (max-width: 1581px) { @media (max-width: 2048px) {
.header a {
font-size: 20px;
}
.banner-content-middle { .banner-content-middle {
top: 35%; top: 35%;
left: 35%; left: 35%;
@ -175,14 +195,15 @@ main {
} }
.banner-content-bottom { .banner-content-bottom {
position: absolute;
bottom: 8%;
right: 4%;
font-size: 1.4vw; /* Responsive font size */ font-size: 1.4vw; /* Responsive font size */
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.header a {
font-size: 16px;
}
.menu { .menu {
float: none; float: none;
width: 120px; width: 120px;

BIN
images/celticinfo_banner_large.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 MiB

BIN
images/celticinfo_banner_medium.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 MiB

BIN
images/celticinfo_banner_upscale.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

25
index.html
Unescape Escape View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@ -12,23 +13,20 @@
<body> <body>
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<!-- logo -->
<div class="logo"> <div class="logo">
<img src="images/celticinfo_logo_small.png" alt="CelticInfo"> <img src="images/celticinfo_logo_small.png" alt="CelticInfo">
</div> </div>
<!-- menu --> <div class="menu">
<div class="menu"> <ul>
<ul> <li><a href="#" class="active">Home</a></li>
<li><a href="#" class="active">Home</a></li> <li><a href="#services">Services</a></li>
<li><a href="#services">Services</a></li> <li><a href="#about">About Us</a></li>
<li><a href="#about">About Us</a></li> </ul>
</ul> </div>
</div>
</div> </div>
<div class="banner"> <div class="banner">
<picture> <picture>
<source media="(min-width: 1582px)" srcset="images/celticinfo_banner_large.png"> <source media="(min-width: 769px)" srcset="images/celticinfo_banner_upscale.png">
<source media="(min-width: 769px)" srcset="images/celticinfo_banner_medium.png">
<img src="images/celticinfo_logo_medium.png" alt="CelticInfo"> <img src="images/celticinfo_logo_medium.png" alt="CelticInfo">
<div class="banner-content-middle"> <div class="banner-content-middle">
<div class="company-name">Celtic info</div> <div class="company-name">Celtic info</div>
@ -37,7 +35,7 @@
<div class="banner-content-bottom"> <div class="banner-content-bottom">
<div class="company-name">Celtic info</div> <div class="company-name">Celtic info</div>
<div> <div>
5, rue du Bondon</br>56000 Vannes, France 5, rue du Bondon<br>56000 Vannes, France
</div> </div>
<div> <div>
<i class="fa fa-phone" aria-hidden="true"></i> <i class="fa fa-phone" aria-hidden="true"></i>
@ -89,5 +87,4 @@
</div> </div>
</div> </div>
</body> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save