init

css/articles/article-base.css

@@ -0,0 +1,12 @@
+article{
+    font-size: 0.9em;
+    color: white;
+    padding: 1em;
+}
+article header{
+    margin-bottom: 2em;
+    line-height: 2em;
+}
+article p, article section p{
+    line-height: 1.5em;
+}

css/articles/other/about-us.css

@@ -0,0 +1,44 @@
+article{
+    color: white;
+    padding: 1em;
+    text-align: center;
+}
+.about-us{
+    margin: 2em;
+    color: white;
+
+    position: relative;
+    display: grid;
+    z-index: 5;
+}
+.about-us-big{
+    display: none;
+}
+.about-us-small{
+    margin: auto;
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+}
+.about-us-small header{
+    text-align: center;
+    margin: auto;
+    width: 80%;
+}
+.about-us-small header hr{
+    height: 0;
+    border-style: solid;
+}
+
+.about-us-small main{
+    margin: auto;
+    width: 80%; 
+}
+.about-us-small h2{
+    font-size: 1.2em;
+    text-align: center;
+}
+.about-us-small main p{
+    text-align: center;
+    margin: 1em;
+}

css/articles/other/reference.css

@@ -0,0 +1,48 @@
+.reference{
+    margin-top: 4em;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+}
+.reference h1{
+    font-size: 1.5em;
+    margin-bottom: 1em;
+}
+.reference .desktop-img{
+    width: 80%;
+    margin: 1em;
+    
+}
+.reference .mobile-img{
+    margin: 1em;
+}
+.reference header{
+    width: 80%;
+    text-align: center;
+}
+/*.ref-hr{
+    border-color: gold !important;
+    height: 0;
+    width: 200%;
+    left: -50%;
+    position: relative;
+    background-color: gold;
+}*/
+
+@media screen and (min-width: 1000px){
+    .desktop-img{
+        display: none;
+    }
+    .reference header{
+        width: 35%;
+        text-align: center;
+    }
+}
+@media screen and (max-width: 1000px){
+    .mobile-img{
+        width: -webkit-fill-available !important;
+        display: none;
+    }
+}

css/body.css

@@ -0,0 +1,57 @@
+body{
+    background-color: white;
+    width: 100%;
+
+    font-family: "Montserrat", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 200;
+    font-style: normal;
+
+    font-size: 1.5em;
+    line-height: normal;
+}
+hr{
+    border-color: #edbf63 !important;
+    background-color: none !important;
+    width: 100% !important;
+    margin-bottom: 1em;
+}
+
+h1{
+    font-size: 2em;
+}
+b{
+    font-weight: bold;
+}
+
+.carousel-cover-skew{
+    height: 10em;
+    
+    background-color: white;
+}
+.carousel-cover-skew-top{
+    position: relative;
+    z-index: 1;
+    bottom: -4em;
+
+    transform: skewY(-2deg);
+    -webkit-transform: skewY(-2deg);
+}
+.carousel-cover-skew-bottom{
+    position: relative;
+    z-index: 1;
+    bottom: 4em;
+    margin-bottom: -9em;
+
+    transform: skewY(-3deg);
+    -webkit-transform: skewY(-3deg);
+}
+
+@media screen and (min-width: 1000px){
+
+}
+@media screen and (max-width: 1000px){
+    body{
+        font-size: unset;
+    }
+}

css/index/about_us.css

@@ -0,0 +1,63 @@
+
+.about-us::before{
+    content: '';
+    display: block;
+    position: relative;
+    z-index: -1;
+    bottom: 0;
+    margin-top: -3em;
+    transform: skewY(-3deg);
+    -webkit-transform: skewY(-3deg);
+    height: 5em;
+    background-color: white;
+}
+.about-us::after{
+    content: '';
+    display: block;
+    position: relative;
+    z-index: -1;
+    bottom: 0;
+    margin-bottom: -2em;
+    transform: skewY(-3deg);
+    -webkit-transform: skewY(-3deg);
+    height: 5em;
+    background-color: white;
+}
+.about-us{
+    background-color: white;
+    width: 100%;
+    position: relative;
+    display: grid;
+    z-index: 5;
+}
+.about-us-big{
+    display: none;
+}
+.about-us-small{
+    margin: auto;
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+}
+.about-us-small header{
+    text-align: center;
+    margin: auto;
+    width: 80%;
+}
+.about-us-small header hr{
+    height: 0;
+    border-style: solid;
+}
+
+.about-us-small main{
+    margin: auto;
+    width: 80%; 
+}
+.about-us-small h2{
+    font-size: 1.2em;
+    text-align: center;
+}
+.about-us-small main p{
+    text-align: center;
+    margin: 1em;
+}

css/index/carousel.css

@@ -0,0 +1,120 @@
+.carousel{
+    height: 25em;
+    width: 100%;
+    margin-bottom: 1em;
+    overflow-x: hidden;
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+}
+.carousel-inner{
+    height: 100%;
+    /* min-width: 400%; */
+    display: flex;
+    transition: all ease .5s;
+}
+
+.carousel-item{
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.carousel-item h1{
+    position: relative;
+    color: white;
+    bottom: 1.5em;
+}
+.carousel-controls .prev{
+    display: inline-block;
+    height: 3em;
+    width: 3em;
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background-image: url('/img/other/svg/prev.svg');
+    background-position: center;
+    background-size: auto 100%;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    opacity: .5;
+}
+
+.carousel-controls .next{
+    display: inline-block;
+    height: 3em;
+    width: 3em;
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background-image: url('/img/other/svg/next.svg');
+    background-position: center;
+    background-size: auto 100%;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    opacity: .5;
+}
+
+.prev:hover, .next:hover{
+    opacity: 1;
+}
+
+.carousel-indicators{
+    position: absolute;
+    bottom: 4em;
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: center;
+}
+
+.carousel-indicators span{
+    display: inline-block;
+    background-color: white;
+    width: 30px;
+    height: 4px;
+    border-radius: 2px;
+    opacity: .5;
+    cursor: pointer;
+    margin: 3px;
+}
+
+.carousel-indicators span.active{
+    opacity: 1;
+}
+
+
+.carousel-item-first{
+    background-image: url("/img/carousel/DAVO_Web_slide_1.png");
+}
+.carousel-item-second{
+    background-image: url("/img/carousel/DAVO_Web_slide_2.png");
+}
+.carousel-item-third{
+    background-image: url("/img/carousel/DAVO_Web_slide_3.png");
+}
+.carousel-item-fourth{
+    background-image: url("/img/carousel/DAVO_Web_slide_4.png");
+}
+.carousel-item-fifth{
+    background-image: url("/img/carousel/DAVO_Web_slide_5.png");
+}
+.carousel-item-sixth{
+    background-image: url("/img/carousel/DAVO_Web_slide_6.png");
+}
+
+
+@media only screen and (min-width: 991px){
+    .prev, .next{
+        height: 1em !important;
+        width: 1em !important;
+    }
+}

css/index/contact.css

@@ -0,0 +1,50 @@
+body{
+    background-color: #212121;
+}
+.contacts{
+    width: 100%;
+
+    background-color: #212121;
+    color: white;
+
+    text-align: center;
+
+    padding-top: 4em;
+    padding-bottom: 4em;
+    margin: auto;
+}
+.contacts a{
+    color: white;
+    text-decoration: none;
+}
+.contacts br{
+    content: " ";
+    display: block;
+    height: 0.5em;
+}
+.contacts h2{
+    font-size: 1.5em;
+}
+.contact-format-container{
+    line-height: 1.2;
+    margin: auto;
+    width: 80%;
+}
+.contacts i{
+    font-size: 1.5em;
+}
+.iframe-map{
+    position: absolute;
+    width: 100%;
+    height: 50%;
+
+}
+
+@media screen and (min-width: 900px){
+    .contacts{
+        font-size: 0.9em;
+    }
+    .contact-format-container{
+        width: 35%;
+    }
+}

css/index/products.css

@@ -0,0 +1,67 @@
+.products{
+
+    display: none !important;
+
+    position: relative;
+    z-index: 2;
+
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+
+    color: white;
+}
+.products-container{
+    display: grid;
+    grid-gap: 1em;
+    grid-template-columns: repeat(2, 1fr);
+
+    padding: 3em;
+}
+.products-item{
+    flex: 0 0 45%;
+
+    margin-top: 2em;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    background-color: #212121;
+
+    border-radius: 2em;
+
+    transition: transform 0.3s ease; /* Smooth transition on transform */
+    box-shadow: 0 0.5em 0.5em 0 rgba(0,0,0,0.2), 0 0.25em 0.25em 0 rgba(0,0,0,0.19) !important;
+}
+.products-item:hover{
+    transform: scale(1.2);
+}
+.products-item:active{
+    transform: scale(1.2);
+}
+
+.products-img{
+    padding-top: 2em;
+}
+.products-item a{
+    padding: 1em;
+    font-size: 1.5em;
+    color: white;
+
+    text-decoration: none;
+}
+
+@media screen and (min-width: 900px){
+    .products-container{
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 2em;
+    }
+    .products{
+        margin: auto;
+        width: 70%;
+    }
+}

css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

css/tools/email-me.css

@@ -0,0 +1,72 @@
+input[type=text],
+input[type=email], 
+textarea {
+    width: 100%;
+
+    box-sizing: border-box;
+
+    font-family: "Montserrat", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 300;
+    font-style: normal;
+
+    font-size: 1em;
+    line-height: 1em;
+
+    margin-top: 0.5em;
+    margin-bottom: 1em;
+    margin-left: 0;
+    padding: 0.5em;
+    min-height: 0.75em;
+
+    border: unset;
+    border-radius: 0.2em;
+
+    outline-color: rgb(84 105 212 / 0.5);
+    background-color: rgb(255, 255, 255);
+    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
+}
+.email-me label{
+    display: block;
+    padding: 0.5em;
+}
+
+.email-me-form{
+    margin: auto;
+    width: 35%;
+}
+
+
+.email-me-container{
+    padding-top: 4em;
+    padding-bottom: 1em;
+
+    background-color: #212121;
+    color: white;
+
+    font-size: 0.95em;
+}
+.email-me-container header{
+    font-size: 1.5em;
+    text-align: center;
+}
+.email-me hr{
+    border-color: gold;
+    height: 0;
+}
+.email-me-form button{
+    font-size: 1em;
+
+    padding: 0.8em;
+
+    border-radius: 0.5em;
+    border-width: 0;
+    background-color: goldenrod;
+    color: black;
+}
+
+@media screen and (max-width: 910px){
+    .email-me-form{
+        width: 80%;
+    }
+}

css/tools/footer.css

@@ -0,0 +1,16 @@
+footer{
+    background-color: #A4A4A4;
+
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+}
+footer a{
+    color: black;
+}
+
+.iframe-map{
+    width: 100%;
+}

css/tools/nav.css

@@ -0,0 +1,173 @@
+nav{
+    background-color: #0f0f10;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    z-index: 999;
+}
+nav a{
+    color: white;
+    text-decoration: none;
+}
+.nav-logo{
+    position: relative;
+    height: fit-content;
+
+    width: 100%;
+}
+.nav-logo img{
+    margin: 1em;
+    height: 2.5em;
+}
+.mobile-nav .nav-logo button{
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    right: 0;
+    border: 0;
+    color: white;
+    height: auto;
+    width: 1.6em;
+    background-color: #edbf63;
+    font-size: 3em;
+}
+.mobile-nav .nav-links{
+    -webkit-transition: max-height 1s, color 1s ease; 
+    -moz-transition: max-height 1s, color 1s ease; 
+    -ms-transition: max-height 1s, color 1s ease; 
+    -o-transition: max-height 1s, color 1s ease; 
+    transition: max-height 1s, color 1s ease;
+    overflow: hidden;
+
+    max-height: 0;
+}
+.mobile-nav .nav-links-expanded{
+    max-height: 100em;
+}
+.mobile-nav .nav-items{
+    display: block;
+    height: 3em;
+    text-align: center;
+
+    line-height: 3em;
+
+    font-size: 2em;
+
+    border-color: white;
+    border-style: solid;
+    border-top-width: 0.05em;
+}
+.mobile-nav .nav-items:hover{
+    background-color: #c9ab5f;
+    max-height: 20em;
+}
+/*#drop-act:hover{
+    color: black;
+}*/
+
+.mobile-nav .dropdown-content{
+    width: 100%;
+    margin-right: auto;
+
+    -webkit-transition: max-height 1s; 
+    -moz-transition: max-height 1s; 
+    -ms-transition: max-height 1s; 
+    -o-transition: max-height 1s; 
+    transition: max-height 1s;  
+    overflow: hidden;
+    max-height: 0;
+
+    background-color: #847546;
+
+    /*border-color: white;
+    border-style: solid;
+    border-right-width: 0.2em;*/
+}
+.mobile-nav .dropdown-active{
+    max-height: 40em;
+}
+
+
+
+
+
+
+
+.desktop-nav{
+    display: flex;
+    flex-direction: row;
+}
+
+.desktop-nav .nav-logo{
+    width: min-content;
+}
+
+.desktop-nav-second-section{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-evenly;
+    width: 100%;
+}
+
+.desktop-nav .dropdown-content{
+    -webkit-transition: max-height 1s;
+    -moz-transition: max-height 1s;
+    -ms-transition: max-height 1s;
+    -o-transition: max-height 1s;
+    transition: max-height 1s;
+
+    max-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    
+    z-index: 5;
+    background-color: black;
+    border-bottom-right-radius: 0.5em;
+    border-bottom-left-radius: 0.5em;
+    margin-top: 1.45em;
+    margin-left: -2em;
+}
+
+.desktop-nav .dropdown:hover .dropdown-content{
+    max-height: 20em;
+}
+.desktop-nav .dropdown .dropdown-content .nav-items{
+    padding: 1em;
+}
+
+.nav-items{
+    -webkit-transition: color 0.5s ease; 
+    -moz-transition: color 0.5s ease; 
+    -ms-transition: color 0.5s ease; 
+    -o-transition: color 0.5s ease; 
+    transition: color 0.5s ease;
+}
+.nav-items:hover{
+    color: #edbf63;
+}
+
+.dropdown{
+    z-index: 99;
+}
+
+
+@media screen and (min-width: 1000px){
+    .mobile-nav{
+        display: none;
+    }
+    .nav-logo img {
+        margin: 1em;
+        height: 1.8em;
+    }
+}
+@media screen and (max-width: 1000px){
+    .desktop-nav{
+        display: none;
+    }
+    
+}