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

Aligned address block and made it responsive

Browse Source
main
oabrivard 2 years ago
parent c730d136d6
commit 068ddb7e1e
4 changed files with 38 additions and 18 deletions
Show Stats Download Patch File Download Diff File

42
css/style.css
Unescape Escape View File

@ -6,16 +6,17 @@
@font-face { @font-face {
font-family: sourcecodevf; font-family: sourcecodevf;
src: url(css/SourceCodeVF-Upright.otf); src: url(SourceCodeVF-Upright.otf);
} }
/* General Body Styling */ /* General Body Styling */
body { body {
font-family: 'Arial', sans-serif; font-family: sourcecodevf, 'Arial', sans-serif;
margin: 0 auto; margin: 0 auto;
max-width: 1581px; max-width: 1581px;
padding: 0; padding: 0;
background-color: var(--secondary-bg-color); background-color: var(--secondary-bg-color);
color: var(--main-text-color);
} }
/* Container */ /* Container */
@ -28,7 +29,6 @@ body {
/* Header */ /* Header */
.header { .header {
background: var(--main-bg-color); background: var(--main-bg-color);
color: var(--main-text-color);
padding-top: 30px; padding-top: 30px;
min-height: 70px; min-height: 70px;
border-bottom: var(--secondary-bg-color) 3px solid; border-bottom: var(--secondary-bg-color) 3px solid;
@ -94,9 +94,7 @@ body {
position: absolute; position: absolute;
top: 34%; top: 34%;
left: 36%; left: 36%;
font-family: sourcecodevf;
font-size: 54px; /* Responsive font size */ font-size: 54px; /* Responsive font size */
color: white;
text-align: center; text-align: center;
} }
@ -106,16 +104,14 @@ body {
.banner-content-bottom { .banner-content-bottom {
position: absolute; position: absolute;
bottom: 10px; bottom: 7%;
right: 10px; right: 11%;
font-size: 1.3vw; /* Responsive font size */ font-size: 20px; /* Responsive font size */
color: white;
} }
.banner-content-bottom a { .banner-content-bottom a {
color: var(--main-text-color); color: var(--main-text-color);
text-decoration: none; text-decoration: none;
font-family: sourcecodevf;
} }
.banner-content-bottom a:hover { .banner-content-bottom a:hover {
@ -132,10 +128,10 @@ body {
/* Footer */ /* Footer */
.footer { .footer {
background: var(--main-bg-color); background: var(--main-bg-color);
color: var(--main-text-color);
text-align: center; text-align: center;
padding: 30px 0; padding: 30px 0;
overflow: hidden; /* Clear the float */ overflow: hidden; /* Clear the float */
margin-top: -1px;
} }
.footer-left { .footer-left {
@ -167,18 +163,21 @@ body {
/* Media Queries */ /* Media Queries */
@media (max-width: 1581px) { @media (max-width: 1581px) {
.banner-content-middle { .banner-content-middle {
position: absolute;
top: 35%; top: 35%;
left: 35%; left: 35%;
font-family: sourcecodevf;
font-size: 4.0vw; /* Responsive font size */ font-size: 4.0vw; /* Responsive font size */
color: white;
text-align: center;
} }
.banner-content-middle .company-name { .banner-content-middle .company-name {
font-size: 5.0vw; /* Responsive font size */ font-size: 5.0vw; /* Responsive font size */
} }
.banner-content-bottom {
position: absolute;
bottom: 8%;
right: 4%;
font-size: 1.4vw; /* Responsive font size */
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@ -212,9 +211,7 @@ body {
position: relative; position: relative;
padding-top: 10px; padding-top: 10px;
left: 0%; left: 0%;
font-family: sourcecodevf;
font-size: 4.0vw; /* Responsive font size */ font-size: 4.0vw; /* Responsive font size */
color: white;
text-align: center; text-align: center;
} }
@ -222,6 +219,17 @@ body {
font-size: 5.0vw; /* Responsive font size */ font-size: 5.0vw; /* Responsive font size */
} }
.banner-content-bottom {
position: relative;
left: 0%;
padding-top: 10px;
font-size: 2.5vw; /* Responsive font size */
text-align: center;
}
.banner-content-bottom .company-name {
display: none;
}
.footer-left, .footer-right { .footer-left, .footer-right {
float: none; float: none;

BIN
images/cell.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 880 B

BIN
images/email.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 997 B

14
index.html
Unescape Escape View File

@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CelticInfo</title> <title>CelticInfo</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/69f3c65ce4.js" crossorigin="anonymous"></script>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
@ -35,7 +36,18 @@
<div>IT Consulting</div> <div>IT Consulting</div>
</div> </div>
<div class="banner-content-bottom"> <div class="banner-content-bottom">
<a href="mailto:info@celticinfo.fr?subject=Information request">info@celticinfo.fr</a> <div class="company-name">Celtic info</div>
<div>
5, rue du Bondon</br>56000 Vannes, France
</div>
<div>
<i class="fa fa-phone" aria-hidden="true"></i>
<a href="tel:+33607765340">+33 6 07 76 53 40</a>
</div>
<div>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href="mailto:info@celticinfo.fr?subject=Information request">info@celticinfo.fr</a>
</div>
</div> </div>
</picture> </picture>
</div> </div>

Write Preview
Loading…
Cancel
Save