Skip to content

Commit

Permalink
Merge Dev into Main (#9)
Browse files Browse the repository at this point in the history 
Added the final version of the site to the main.
  • Loading branch information
@leonvsc
leonvsc authored Oct 17, 2021
1 parent 5940e0b commit 7747206
Show file tree
Hide file tree
Showing 23 changed files with 823 additions and 54 deletions.
44 changes: 32 additions & 12 deletions contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
<link rel="stylesheet" href="css/contact.css" />
<link rel="stylesheet" href="css/navigatiebalk.css" />
<link rel="stylesheet" href="css/footer.css" />
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon" />
<!-- Favicon van de website -->
</head>

<body>
Expand All @@ -24,12 +26,12 @@
</a>
<ul class="nav-links">
<li class="center">
<a class="nav-link" href="index.html#section-1">
<a class="nav-link" href="index.html">
Meer informatie
</a>
</li>
<li class="center">
<a class="nav-link" href="https://www.google.nl/">
<a class="nav-link" href="diensten.html">
Onze diensten
</a>
</li>
Expand Down Expand Up @@ -57,18 +59,18 @@ <h4>
Bij Premaz ondersteunen wij u bij het migreren naar
Azure
</h4>
<div class="arrow-down">
<div class="arrow-down-contact">
<a
class="nav-link read-more"
href="index.html#section-1"
href="contact.html#contactSection-1"
>
Lees meer
Contactgegevens
</a>
</div>
</div>
</div>
</header>
<div class="container">
<div class="container" id="contactSection-1">
<!-- Een container om de volledige pagina in een flexbox container te zetten. -->
<div class="row">
<!-- Op deze row staan de contactbeschrijving en de contact info zodat deze naast elkaar staan. -->
Expand Down Expand Up @@ -111,9 +113,13 @@ <h4>
<br />
Breda
<br />
<a href="mailto:info@premaz.nl">info@premaz.nl</a>
<a class="contact-link" href="mailto:info@premaz.nl">
info@premaz.nl
</a>
<br />
<a href="tel:+31881010100">+31 88 10 10 100</a>
<a class="contact-link" href="tel:+31881010100">
+31 88 10 10 100
</a>
<br />
1234567
<br />
Expand Down Expand Up @@ -228,12 +234,10 @@ <h4>
<a class="footer-link" href="#">Home</a>
</li>
<li class="footer-item">
<a class="footer-link" href="index.html#section-1">
Meer informatie
</a>
<a class="footer-link" href="index.html">Meer informatie</a>
</li>
<li class="footer-item">
<a class="footer-link" href="https://google.com">
<a class="footer-link" href="diensten.html">
Onze diensten
</a>
</li>
Expand All @@ -259,6 +263,22 @@ <h4>
</a>
. Dit is een website voor een schoolopdracht, Premaz is een
fictief bedrijf.
<br />
<a
class="footer-link"
target="_blank"
href="pdf-files/Algemene voorwaarden Premaz.pdf"
>
Algemene voorwaarden
</a>
/
<a
class="footer-link"
target="_blank"
href="pdf-files/privacy_statement_16-10-2021.pdf"
>
Privacyverklaring
</a>
</p>
</footer>
<script src="js/navBar.js"></script>
Expand Down
44 changes: 40 additions & 4 deletions css/alineas.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,41 @@
opacity: 0.6;
}

/* Align the paragraphs on the page */
.features {
display: flex;
flex-wrap: wrap;
justify-content: center;
/* background-color: rgba(123, 147, 255, 0.116);
border-radius: 25px; */
}

.reverse-flex {
flex-wrap: wrap-reverse;
display: flex;
justify-content: center;
width: 100%;
}

.afbeelding-alinea-2 {
width: 35%;
height: auto;
border-radius: 8px;
margin-left: 2%;
margin-top: 50px;
margin-bottom: 50px;
opacity: 0.6;
}

.section-title-reverse {
align-self: center;
justify-self: center;
padding-left: 5%;
width: 40%;
font-size: 1.5rem;
}

.features-header-reverse {
font-size: 2rem;
margin-bottom: 1rem;
}

.features-header {
Expand Down Expand Up @@ -52,14 +81,21 @@
align-self: center;
}

/* Resize for phone usage */
@media only screen and (max-width: 768px) {
.afbeelding-alinea {
width: 90%;
}
.mobile-view {
display: none;

.afbeelding-alinea-2 {
width: 90%;
}

.section-title {
width: 500px;
}

.section-title-reverse {
width: 500px;
}
}
61 changes: 61 additions & 0 deletions css/contact.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@
padding-bottom: 0.5rem; /* Padding zorgt ervoor dat er meer ruimte komt tussen de border en de content van het element */
}

/* Styling van de icons voor de input tag */
.icon {
max-width: 50%;
padding-top: 0.6rem;
}

/* Styling van de submit button */
.submitButton {
margin-left: 8%; /* Margin zorgt ervoor dat er meer ruimte buiten de border komt van het element */
background: #002ca56c;
Expand All @@ -22,15 +24,25 @@
font-weight: 400;
font-size: 1.6rem;
cursor: pointer; /* Maakt van de cursor een handje zodat die klikbaar lijkt */
transition: 0.3s;
}

/* Styling van de submit button als er gehovered wordt */
.submitButton:hover {
background: #002ca59f;
box-shadow: 0px 0px 2px 2px #888888;
transition: 0.3s;
}

/* Styling van de contact description boven het formulier */
.contactDescription {
font-size: 1.8rem;
font-weight: 600; /* Zorgt ervoor dat de tekst dikker wordt */
text-align: center;
padding-top: 7%;
}

/* Styling van het contact blokje met bedrijfsnaam, adres etc. */
.contact {
margin-left: 6rem;
margin-top: 4rem;
Expand All @@ -39,13 +51,53 @@
color: #002ca56c;
}

/* Styling van de contactinfo met Premaz, Straatnaam etc. */
.contactInfo {
font-size: 1.4rem;
font-weight: 500;
margin-left: 1rem;
margin-top: 4rem;
}

/* Styling van emailadres en telefoonnummer */
.contact-link {
color: rgb(0, 0, 0);
text-decoration: none;
}

/* Styling van emailadres en telefoonnummer wanneer er gehovered wordt */
.contact-link:hover {
color: rgb(116, 116, 116);
text-decoration: underline;
}

/* Stylng van de contactgegevens button in de header */
.arrow-down-contact {
position: absolute;
top: 130%;
left: 50%;
transform: translate(-50%, -50%);
transition: 0.2s;
display: block;
width: 150px;
height: 15px;
background: #91919193;
padding: 10px;
border-radius: 15px;
color: white;
font-weight: bold;
text-align: center;
line-height: 150%;
}

/* Stylng van de contactgegevens button in de header wanneer er gehovered wordt */
.arrow-down-contact:hover {
background: #7e7e7e93;
box-shadow: 0px 0px 1px 1px #7e7e7e93;
transition: 0.2s;
}

/* De container van de body waar alle elementen in zitten */
.container {
width: 100%;
padding-right: var(
Expand All @@ -57,6 +109,7 @@
margin-left: auto;
}

/* De styling van de rows die op de pagina zichtbaar zijn */
.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
Expand All @@ -69,11 +122,13 @@
margin-left: calc(var(--bs-gutter-x) * -0.5);
}

/* Styling van de Google Maps kaart */
.map {
margin-top: 1rem;
margin-bottom: 1rem;
}

/* Styling van de kolommen in de container */
.col {
flex: 1 0 0%; /* Flex is een verkorte benaming voor flex-grow, flex-schrink en flex-basis.
Flex-grow geeft aan hoeveel een element mag groeien. Flex-schrink geeft aan hoeveel het element mag verkleinen.
Expand Down Expand Up @@ -193,6 +248,12 @@
.row {
justify-content: center;
}
.arrow-down-contact {
top: 140%;
width: 80px;
height: 7px;
line-height: 90%;
}
}

@media screen and (max-width: 576px) {
Expand Down
Loading

0 comments on commit 7747206

Please sign in to comment.