diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Less/about-page.less b/Less/about-page.less new file mode 100644 index 0000000..349ff99 --- /dev/null +++ b/Less/about-page.less @@ -0,0 +1,159 @@ +@import "variables"; +@import "mixins"; + +#aboutcontainer { + max-width: 90%; + width:100%; + margin: 0 auto; + min-height: 100%; + @media @phone{ + max-width: 100%; + } + + #members{ + .toptitle{ + width: 100%; + text-align: center; + margin-top: 5rem; + font-family: @third-font; + } + .teamlead{ + margin-top: 5rem; + width: 100%; + .text-box2(); + .center(); + .margincenter(); + flex-wrap: wrap; + img:not(.gitimg){ + width: 40%; + min-width: 23rem; + height: auto; + border-radius: 100%; + } + .teamleadpic{ + .center(); + .margincenter(); + max-width:100%; + + + + } + .descriptionlead{ + margin-top:2rem; + + width: 70%; + text-align: center; + .leadDev{ + font-size: 2.3rem; + font-family: @third-font; + } + .contact{ + font-size: 1.5rem; + font-family: @third-font; + .gitimg{ + width: 6rem; + vertical-align: middle; + background-color:(rgba(0, 0, 0, 0.418)); + border-radius:1rem; + } + } + + + } + @media @phone{ + + margin-bottom:0; + border-radius: initial; + } + + } +.memberlist{ + + margin-top: 2rem; + .center(); + .margincenter(); + flex-wrap: wrap; + .membersl,.membersr{ + .center(); + .margincenter(); + width: 100%; + .smalltitle{ + font-size: 2.3rem; + font-family: @third-font; + } + .memberpic{ + max-width:30rem; + min-width: 16rem; + } + .membimg{ + border-radius: 50%; + .center(); + .margincenter(); + max-width: 18rem; + + } + @media @phone{ + margin-top:0; + margin-bottom:0; + } + .contact{ + + font-size: 1.7rem; + font-family: @third-font; + + + } + .gitimg{ + width: 6rem; + vertical-align: middle; + background-color:(rgba(0, 0, 0, 0.418)); + border-radius:1rem; + margin-top: 1rem; + margin-bottom: 1rem; + } + } + .membersr{ + .text-box1(); + display: flex; + justify-content:flex-end; + margin-bottom: 2rem; + padding-right: 4rem; + .descriptionr{ + padding-right:2rem; + text-align:right; + } + + @media @phone{ + margin-bottom:0; + border-radius: initial; + } + } + .membersl{ + .text-box2(); + display: flex; + justify-content:flex-start; + margin-bottom: 2rem; + .descriptionl{ + padding-left:4rem; + text-align:left; + } + @media @phone{ + margin-bottom:0; + border-radius: initial; + } + } + @media @phone{ + margin-top:0; + margin-bottom:0; + } + + + } + + +} + + + + +} \ No newline at end of file diff --git a/Less/global.css b/Less/global.css new file mode 100644 index 0000000..8297dd7 --- /dev/null +++ b/Less/global.css @@ -0,0 +1,41 @@ +* { + box-sizing: border-box; +} +html { + font-size: 62.5%; +} +html, +body { + font-family: 'Montserrat', sans-serif; + height: 100%; + background-color: rgba(247, 236, 216, 0.81); + background-image: url(../img/header.jpg); + background-blend-mode: color-burn; +} +h1, +h2, +h3, +h4, +h5 { + font-family: 'Sigmar One', cursive; +} +h1 { + font-size: 4rem; +} +h2 { + font-size: 2.3rem; + padding-bottom: 10px; +} +h4 { + font-size: 2.5rem; + padding-bottom: 10px; +} +p { + line-height: 1.5; + font-size: 1.6rem; + padding-bottom: 10px; +} +img { + max-width: 100%; + height: auto; +} diff --git a/Less/global.less b/Less/global.less new file mode 100644 index 0000000..8b0d9d6 --- /dev/null +++ b/Less/global.less @@ -0,0 +1,47 @@ + +* { + box-sizing: border-box; + } + + html { + font-size: 62.5%; + } + + html, body { + font-family:'Montserrat', sans-serif; + height: 100%; + background-color: rgba(247, 236, 216,0.81); + background-image: url(../img/header.jpg); + background-blend-mode:color-burn; + // rgb(182, 194, 170) + } + + h1, h2, h3, h4, h5 { + font-family: 'Sigmar One', cursive; + } + + h1 { + font-size: 4rem; + } + + h2 { + font-size: 2.3rem; + padding-bottom: 10px; + } + + h4 { + font-size: 2.5rem; + padding-bottom: 10px; + } + + p { + line-height: 1.5; + font-size: 1.6rem; + padding-bottom: 10px; + } + + img { + max-width: 100%; + height: auto; + } + diff --git a/Less/index.css b/Less/index.css new file mode 100644 index 0000000..835df67 --- /dev/null +++ b/Less/index.css @@ -0,0 +1,794 @@ +@font-face { + font-family: 'Raleway'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ISg.ttf) format('truetype'); +} +@font-face { + font-family: 'ZCOOL QingKe HuangYou'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('ZCOOL QingKe HuangYou Regular'), local('ZCOOLQingKeHuangYou-Regular'), url(https://fonts.gstatic.com/s/zcoolqingkehuangyou/v5/2Eb5L_R5IXJEWhD3AOhSvFC554MOOahI4mR4jPe4.ttf) format('truetype'); +} +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhzg.ttf) format('truetype'); +} +@font-face { + font-family: 'Sigmar One'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https://fonts.gstatic.com/s/sigmarone/v10/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype'); +} +@font-face { + font-family: 'Anton'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v11/1Ptgg87LROyAm3Kz-Co.ttf) format('truetype'); +} +.text-box1 { + color: #b6c2aa; + background-image: linear-gradient(#586e6b, #3d3f4c); + border-radius: 20px; + padding: 2rem 2rem 2rem 2rem; +} +.text-box2 { + color: #ccc3b2; + background-image: linear-gradient(#7c5a50, #332131); + border-radius: 20px; + padding: 2rem 2rem 2rem 2rem; +} +/* 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; +} +* { + box-sizing: border-box; +} +html { + font-size: 62.5%; +} +html, +body { + font-family: 'Montserrat', sans-serif; + height: 100%; + background-color: rgba(247, 236, 216, 0.81); + background-image: url(../img/header.jpg); + background-blend-mode: color-burn; +} +h1, +h2, +h3, +h4, +h5 { + font-family: 'Sigmar One', cursive; +} +h1 { + font-size: 4rem; +} +h2 { + font-size: 2.3rem; + padding-bottom: 10px; +} +h4 { + font-size: 2.5rem; + padding-bottom: 10px; +} +p { + line-height: 1.5; + font-size: 1.6rem; + padding-bottom: 10px; +} +img { + max-width: 100%; + height: auto; +} +#navgroup { + background-color: #5a3a3f; + background-image: linear-gradient(#7c5a50, #5a3a3f); + z-index: 2; + transition: 0.32s; + width: 100%; + padding-top: 1rem; + padding-bottom: 1rem; +} +#navgroup nav { + display: flex; + justify-content: space-evenly; +} +#navgroup nav .safeLogo { + max-width: 18rem; +} +#navgroup .links { + display: flex; +} +#navgroup .links .signup { + color: #3b3b3b; + font-weight: bold; + border: 2px solid #095721; + border-radius: 20px; + background-color: #8be697; + background-image: linear-gradient(#c5f8cc, #8be697); +} +#navgroup .links .signup:hover { + background-image: linear-gradient(#c5f8cc, #c5f8cc); + background-color: #c5f8cc; +} +#navgroup a:not(.safeLogo) { + border-radius: 20px; + border: 1px solid rgba(59, 59, 59, 0.8); + background-image: linear-gradient(#7c5a50, #5a3a3f); + padding-top: 1rem; + padding-bottom: 1rem; + text-align: center; + white-space: nowrap; + text-decoration: none; + width: 15rem; + margin-left: 1rem; + color: #dddddd; + font-size: 1.6rem; + font-family: 'Montserrat', sans-serif; +} +#navgroup a:not(.safeLogo):hover { + color: black; + transition: 0.32s; + background-color: #faffce; + background-image: linear-gradient(#917260, #7c5a50); + border-radius: 20px; +} +@media ( max-width: 500px ) { + #navgroup nav { + display: flex; + flex-wrap: wrap; + width: 100%; + } + #navgroup nav .safeLogo { + white-space: nowrap; + display: flex; + justify-content: center; + margin-left: auto; + margin-right: auto; + width: 100%; + } + #navgroup nav .links { + display: flex; + justify-content: center; + flex-wrap: wrap; + } + #navgroup nav .links .signup { + padding-top: 1rem; + margin-left: auto; + margin-right: auto; + } + #navgroup nav .links a { + width: 60%; + margin-left: auto; + margin-right: auto; + margin-top: 5px; + margin-bottom: 5px; + background-image: none; + font-size: 2rem; + border: 1px solid black; + } +} +@media ( max-width: 800px ) { + #navgroup nav { + display: flex; + flex-wrap: wrap; + } + #navgroup nav .safeLogo { + display: flex; + justify-content: center; + margin-left: auto; + margin-right: auto; + } + #navgroup nav .links { + margin-top: 2rem; + width: 100%; + margin-left: auto; + margin-right: auto; + display: flex; + justify-content: center; + } + #navgroup nav .signup { + padding-top: 1rem; + padding-bottom: 1rem; + } +} +footer { + color: #22283B; + background: #f4f4f4; + display: flex; + justify-content: center; + align-items: center; +} +.footer { + width: 100%; + background: #000000; +} +.footer p { + text-align: center; + color: white; + font-size: 1.6rem; + padding: 20px; +} +#container { + max-width: 90%; + width: 100%; + margin: 0 auto; + min-height: 100%; +} +@media ( max-width: 500px ) { + #container { + max-width: 100%; + } +} +#container .header .headerimg { + display: flex; + justify-content: center; + margin-left: auto; + margin-right: auto; + max-height: 30rem; +} +@media ( max-width: 500px ) { + #container .header { + display: none; + } +} +@media ( max-width: 800px ) { + #container .header { + display: none; + } +} +#container .landing { + margin-top: 0; + display: flex; + justify-content: center; + align-content: center; + max-width: 150rem; + margin-left: auto; + margin-right: auto; +} +@media ( max-width: 500px ) { + #container .landing { + flex-wrap: wrap; + margin-top: 0; + } +} +@media ( max-width: 800px ) { + #container .landing { + flex-wrap: wrap; + margin-top: 0; + } +} +#container .landing .carouselreal { + margin: 0 auto; + margin-top: 2rem; + position: relative; + width: 70%; + height: 0; + padding-bottom: 40%; + user-select: none; + background-color: #4c4c4c; + border: solid 10px #2c2c2c; + border-radius: 1rem; + overflow: hidden; +} +@media ( max-width: 500px ) { + #container .landing .carouselreal { + margin-top: 0; + border-radius: 0; + } +} +@media ( max-width: 800px ) { + #container .landing .carouselreal { + height: 40rem; + } +} +#container .landing .carouselreal .slide-img { + position: absolute; + width: 100%; + height: 100%; + z-index: -1; +} +#container .landing .carouselreal .slide-img img { + width: inherit; + height: inherit; +} +#container .landing .carouselreal #nav_slide { + width: 100%; + height: 11px; + bottom: 12%; + position: absolute; + text-align: center; + z-index: 99; + cursor: default; +} +#container .landing .carouselreal #nav_slide .dots { + top: -5px; + width: 1.8rem; + height: 1.8rem; + margin: 0 4px; + position: relative; + border-radius: 50%; + display: inline-block; + background: rgba(0, 0, 0, 0.6); +} +#container .landing .carouselreal #nav_slide .dots:hover { + cursor: pointer; + background-color: rgba(255, 255, 255, 0.9); + transition: 0.25s; +} +#container .landing .carouselreal #i1, +#container .landing .carouselreal #i2, +#container .landing .carouselreal #i3, +#container .landing .carouselreal #i4, +#container .landing .carouselreal #i5, +#container .landing .carouselreal #i6 { + display: none; +} +#container .landing .carouselreal .pre, +#container .landing .carouselreal .nxt { + width: 12%; + height: inherit; + position: absolute; + top: 0; + background-color: rgba(88, 88, 88, 0.2); + z-index: 99; + transition: 0.45s; + cursor: pointer; + text-align: center; +} +#container .landing .carouselreal .pre:hover, +#container .landing .carouselreal .nxt:hover { + transition: 0.3s; + background-color: rgba(88, 88, 89, 0.8); + color: #ffffff; +} +#container .landing .carouselreal .pre { + left: 0; +} +#container .landing .carouselreal .nxt { + right: 0; +} +#container .landing .carouselreal #i1:checked ~ #one, +#container .landing .carouselreal #i2:checked ~ #two, +#container .landing .carouselreal #i3:checked ~ #three, +#container .landing .carouselreal #i4:checked ~ #four, +#container .landing .carouselreal #i5:checked ~ #five, +#container .landing .carouselreal #i6:checked ~ #six { + z-index: 9; + animation: scroll 1s ease-in-out; +} +#container .landing .carouselreal #i1:checked ~ #nav_slide #dot1, +#container .landing .carouselreal #i2:checked ~ #nav_slide #dot2, +#container .landing .carouselreal #i3:checked ~ #nav_slide #dot3, +#container .landing .carouselreal #i4:checked ~ #nav_slide #dot4, +#container .landing .carouselreal #i5:checked ~ #nav_slide #dot5, +#container .landing .carouselreal #i6:checked ~ #nav_slide #dot6 { + background-color: rgba(255, 255, 255, 0.9); +} +@keyframes scroll { + 0% { + opacity: 0.4; + } + 100% { + opacity: 1; + } +} +#container .landing .carouseldesc { + margin-top: 2rem; + color: #b6c2aa; + background-image: linear-gradient(#586e6b, #3d3f4c); + border-radius: 20px; + padding: 2rem 2rem 2rem 2rem; + max-width: 32rem; + min-width: 23rem; + margin-left: 3rem; + padding-top: 2rem; + padding: 3rem 3rem 3rem 3rem; +} +@media ( max-width: 500px ) { + #container .landing .carouseldesc { + width: 90%; + background-image: initial; + color: #332131; + display: none; + } +} +@media ( max-width: 800px ) { + #container .landing .carouseldesc { + width: 90%; + background-image: initial; + color: #332131; + } +} +#container .landing .carouseldesc .carouseltitle { + font-size: 2.3rem; + font-family: 'Anton', sans-serif; +} +@media ( max-width: 800px ) { + #container .landing .landing { + margin-top: 0; + } + #container .landing .carouselreal { + width: 100%; + height: 0; + padding-bottom: 55%; + } +} +@media ( max-width: 500px ) { + #container .landing .carouselreal { + border: none; + width: 100%; + height: 0; + padding-bottom: 55%; + } + #container .landing .pre, + #container .landing .nxt { + width: 15%; + } + #container .landing #nav_slide .dots { + width: 1rem; + height: 1rem; + } +} +#container #welcome { + margin-top: 3rem; + display: flex; + justify-content: center; + flex-wrap: wrap; + text-align: center; + margin-left: auto; + margin-right: auto; +} +#container #welcome .mobiletext .hiddentext { + display: none; +} +@media ( max-width: 800px ) { + #container #welcome .mobiletext { + width: 80%; + } +} +@media ( max-width: 500px ) { + #container #welcome .mobiletext { + width: 90%; + } + #container #welcome .mobiletext .hiddentext { + display: initial; + } +} +#container #welcome .welcometext { + width: 100%; +} +#container #welcome .signupbtndiv { + margin-top: 3rem; + width: 100%; + margin-left: auto; + margin-right: auto; + display: flex; + justify-content: center; +} +#container #welcome .signupbtndiv .signbtn { + text-decoration: none; + line-height: 4rem; + display: block; + transition: 0.32s; + background-color: #6dc472; + margin: 0 10px 20px; + cursor: pointer; + width: 12rem; + height: 45px; + font-size: 2rem; + border-radius: 10px; + color: white; + letter-spacing: 1px; + font-family: 'Anton', sans-serif; + border: 2px solid #6dc472; +} +#container #welcome .signupbtndiv .signbtn:hover { + color: darkolivegreen; + background-image: linear-gradient(#c5f8cc, #c5f8cc); + background-color: #c5f8cc; + box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); +} +#aboutcontainer { + max-width: 90%; + width: 100%; + margin: 0 auto; + min-height: 100%; +} +@media ( max-width: 500px ) { + #aboutcontainer { + max-width: 100%; + } +} +#aboutcontainer #members .toptitle { + width: 100%; + text-align: center; + margin-top: 5rem; + font-family: 'Anton', sans-serif; +} +#aboutcontainer #members .teamlead { + margin-top: 5rem; + width: 100%; + color: #ccc3b2; + background-image: linear-gradient(#7c5a50, #332131); + border-radius: 20px; + padding: 2rem 2rem 2rem 2rem; + display: flex; + justify-content: center; + margin-left: auto; + margin-right: auto; + flex-wrap: wrap; +} +#aboutcontainer #members .teamlead img:not(.gitimg) { + width: 40%; + min-width: 23rem; + height: auto; + border-radius: 100%; +} +#aboutcontainer #members .teamlead .teamleadpic { + display: flex; + justify-content: center; + margin-left: auto; + margin-right: auto; + max-width: 100%; +} +#aboutcontainer #members .teamlead .descriptionlead { + margin-top: 2rem; + width: 70%; + text-align: center; +} +#aboutcontainer #members .teamlead .descriptionlead .leadDev { + font-size: 2.3rem; + font-family: 'Anton', sans-serif; +} +#aboutcontainer #members .teamlead .descriptionlead .contact { + font-size: 1.5rem; + font-family: 'Anton', sans-serif; +} +#aboutcontainer #members .teamlead .descriptionlead .contact .gitimg { + width: 6rem; + vertical-align: middle; + background-color: rgba(0, 0, 0, 0.418); + border-radius: 1rem; +} +@media ( max-width: 500px ) { + #aboutcontainer #members .teamlead { + margin-bottom: 0; + border-radius: initial; + } +} +#aboutcontainer #members .memberlist { + margin-top: 2rem; + display: flex; + justify-content: center; + margin-left: auto; + margin-right: auto; + flex-wrap: wrap; +} +#aboutcontainer #members .memberlist .membersl, +#aboutcontainer #members .memberlist .membersr { + display: flex; + justify-content: center; + margin-left: auto; + margin-right: auto; + width: 100%; +} +#aboutcontainer #members .memberlist .membersl .smalltitle, +#aboutcontainer #members .memberlist .membersr .smalltitle { + font-size: 2.3rem; + font-family: 'Anton', sans-serif; +} +#aboutcontainer #members .memberlist .membersl .memberpic, +#aboutcontainer #members .memberlist .membersr .memberpic { + max-width: 30rem; + min-width: 16rem; +} +#aboutcontainer #members .memberlist .membersl .membimg, +#aboutcontainer #members .memberlist .membersr .membimg { + border-radius: 50%; + display: flex; + justify-content: center; + margin-left: auto; + margin-right: auto; + max-width: 18rem; +} +@media ( max-width: 500px ) { + #aboutcontainer #members .memberlist .membersl, + #aboutcontainer #members .memberlist .membersr { + margin-top: 0; + margin-bottom: 0; + } +} +#aboutcontainer #members .memberlist .membersl .contact, +#aboutcontainer #members .memberlist .membersr .contact { + font-size: 1.7rem; + font-family: 'Anton', sans-serif; +} +#aboutcontainer #members .memberlist .membersl .gitimg, +#aboutcontainer #members .memberlist .membersr .gitimg { + width: 6rem; + vertical-align: middle; + background-color: rgba(0, 0, 0, 0.418); + border-radius: 1rem; + margin-top: 1rem; + margin-bottom: 1rem; +} +#aboutcontainer #members .memberlist .membersr { + color: #b6c2aa; + background-image: linear-gradient(#586e6b, #3d3f4c); + border-radius: 20px; + padding: 2rem 2rem 2rem 2rem; + display: flex; + justify-content: flex-end; + margin-bottom: 2rem; + padding-right: 4rem; +} +#aboutcontainer #members .memberlist .membersr .descriptionr { + padding-right: 2rem; + text-align: right; +} +@media ( max-width: 500px ) { + #aboutcontainer #members .memberlist .membersr { + margin-bottom: 0; + border-radius: initial; + } +} +#aboutcontainer #members .memberlist .membersl { + color: #ccc3b2; + background-image: linear-gradient(#7c5a50, #332131); + border-radius: 20px; + padding: 2rem 2rem 2rem 2rem; + display: flex; + justify-content: flex-start; + margin-bottom: 2rem; +} +#aboutcontainer #members .memberlist .membersl .descriptionl { + padding-left: 4rem; + text-align: left; +} +@media ( max-width: 500px ) { + #aboutcontainer #members .memberlist .membersl { + margin-bottom: 0; + border-radius: initial; + } +} +@media ( max-width: 500px ) { + #aboutcontainer #members .memberlist { + margin-top: 0; + margin-bottom: 0; + } +} diff --git a/Less/index.less b/Less/index.less new file mode 100644 index 0000000..ec1cb86 --- /dev/null +++ b/Less/index.less @@ -0,0 +1,13 @@ +// Vars and Mixins +@import "variables"; +@import "mixins"; + +//General Styles Here +@import "reset"; +@import "global"; + +// Components Here +@import "navigation"; +@import "footer"; +@import "landing-page"; +@import "about-page"; diff --git a/Less/landing-page.less b/Less/landing-page.less new file mode 100644 index 0000000..51bf33f --- /dev/null +++ b/Less/landing-page.less @@ -0,0 +1,244 @@ +@import "variables"; +@import "mixins"; +#container { + max-width: 90%; + width:100%; + margin: 0 auto; + min-height: 100%; + @media @phone{ + max-width: 100%; + } +.header{ + .headerimg{ + .center(); + .margincenter(); + max-height: 30rem; + } + @media @phone{ + display: none; + } + @media @tablet{ + display: none; + } +} +.landing{ + margin-top: 0; + .center(); + align-content: center; + max-width: 150rem; + .margincenter(); + @media @phone{ + flex-wrap: wrap; + margin-top:0; + } + @media @tablet{ + flex-wrap: wrap; + margin-top:0; + } + // .placeholderimg{ + // border-radius: 20px; + // } + .carouselreal{ + margin: 0 auto; + margin-top:2rem; + position: relative; + width: 70%; + height: 0; + padding-bottom: 40%; + user-select: none; + background-color: #4c4c4c; + border: solid 10px #2c2c2c; + border-radius: 1rem; + overflow:hidden; + @media @phone{ + margin-top:0; + border-radius: 0; + } + @media @tablet{ + height:40rem; + + } + .slide-img{ + position: absolute; + width: 100%; + height: 100%; + z-index:-1; + img{ + width:inherit; + height: inherit; + } + } + #nav_slide{ + width: 100%; + height: 11px; + bottom: 12%; + position: absolute; + text-align: center; + z-index: 99; + cursor: default; + .dots{ + top: -5px; + width: 1.8rem; + height: 1.8rem; + margin: 0 4px; + position: relative; + border-radius: 50%; + display: inline-block; + background:rgba(0,0,0,.6); + &:hover{ + cursor: pointer; + background-color: rgba(255, 255, 255, 0.9); + transition: .25s + } + } + } + #i1,#i2,#i3,#i4,#i5,#i6{ + display: none; + } + + .pre , .nxt{ + width: 12%; + height: inherit; + position: absolute; + top: 0; + background-color: rgba(88,88,88,.2); + z-index: 99; + transition: .45s; + cursor: pointer; + text-align: center; + &:hover{ + transition: .3s; + background-color: rgba(88, 88, 89,.8); + color: #ffffff; + } + } + + .pre{ + left:0; + } + + .nxt{ + right: 0; + } + + #i1:checked ~ #one, + #i2:checked ~ #two, + #i3:checked ~ #three, + #i4:checked ~ #four, + #i5:checked ~ #five, + #i6:checked ~ #six{ + z-index:9; animation: scroll 1s ease-in-out; + } + + #i1:checked ~ #nav_slide #dot1, + #i2:checked ~ #nav_slide #dot2, + #i3:checked ~ #nav_slide #dot3, + #i4:checked ~ #nav_slide #dot4, + #i5:checked ~ #nav_slide #dot5, + #i6:checked ~ #nav_slide #dot6{ + background-color: rgba(255,255,255,.9); + } + + + @keyframes scroll{ + 0%{ opacity:.4;} + 100%{opacity:1;} + } + } + .carouseldesc{ + margin-top:2rem; + .text-box1(); + max-width: 32rem; + min-width: 23rem; + margin-left: 3rem; + padding-top: 2rem; + padding: 3rem 3rem 3rem 3rem; + @media @phone{ + width: 90%; + background-image:initial; + color:@pallete11; + display: none; + } + @media @tablet{ + width:90%; + background-image:initial; + color:@pallete11; + } + + .carouseltitle{ + font-size: 2.3rem; + font-family: @third-font; + } + } + @media @tablet{ + .landing{ + margin-top: 0; + } + .carouselreal{ + width: 100%; + height: 0; + padding-bottom: 55%; + } + } + @media @phone{ + .carouselreal{ + border: none; + width: 100%; + height: 0; + padding-bottom: 55%; + + } + + .pre, .nxt{ + width: 15%; + } + #nav_slide{ + .dots{ + width: 1rem; + height: 1rem; + } + } + } +} + +#welcome{ + margin-top: 3rem; + .center(); + flex-wrap: wrap; + text-align: center; + .mobiletext{ + .hiddentext{ + display: none; + } + @media @tablet{ + width: 80%; + } + + @media @phone{ + + width: 90%; + .hiddentext{ + display: initial; + } + } + } + .margincenter(); + .welcometext{ + width: 100%; + } + .signupbtndiv{ + margin-top: 3rem; + width: 100%; + .margincenter(); + .center(); + .signbtn{ + text-decoration: none; + line-height: 4rem; + .custom-btn(); + } +} +} + + + +} \ No newline at end of file diff --git a/Less/mixins.less b/Less/mixins.less new file mode 100644 index 0000000..e610aaa --- /dev/null +++ b/Less/mixins.less @@ -0,0 +1,64 @@ +// Mixins in here +@import "variables"; +@import "mixins"; +//mixins +.center(){ //we want the parethesis because we want this mixin to be consumed by the compiler + display:flex; + justify-content:center; + } + .margincenter(){ + margin-left:auto; + margin-right:auto; + } +.supersize(){ + font-size:30px; + font-weight: bold; +} + +.text-box1{ + color:@pallete6; + background-image: linear-gradient( @pallete3, @pallete1); + border-radius: 20px; + padding:2rem 2rem 2rem 2rem; +} + +.text-box2{ + color:@pallete13; + background-image: linear-gradient( @pallete9,@pallete11); + border-radius: 20px; + padding:2rem 2rem 2rem 2rem; +} + +.custom-btn(@color:rgb(109, 196, 114),@width:12rem,@text-color:white){ + display: block; + transition: 0.32s; + background-color:@color; + margin: 0 10px 20px; + cursor: pointer; + width: @width; + height: 45px; + font-size: 2rem; + border-radius: 10px; + color:@text-color; + letter-spacing: 1px; + font-family:@third-font; + border:2px solid rgb(109, 196, 114); + &:hover{ + color:darkolivegreen; + background-image: linear-gradient( rgb(197, 248, 204),rgb(197, 248, 204)); + background-color: rgb(197, 248, 204); + box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); + } + } + + .keyframes(@name; @arguments) { + @-moz-keyframes @name { @arguments(); } + @-webkit-keyframes @name { @arguments(); } + @keyframes @name { @arguments(); } +} + +.animation(@arguments) { + -webkit-animation: @arguments; + -moz-animation: @arguments; + animation: @arguments; +} diff --git a/Less/reset.css b/Less/reset.css new file mode 100644 index 0000000..55c1f5c --- /dev/null +++ b/Less/reset.css @@ -0,0 +1,128 @@ +/* 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; +} diff --git a/Less/reset.less b/Less/reset.less new file mode 100644 index 0000000..af94440 --- /dev/null +++ b/Less/reset.less @@ -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; +} \ No newline at end of file diff --git a/Less/variables.less b/Less/variables.less new file mode 100644 index 0000000..acc1b59 --- /dev/null +++ b/Less/variables.less @@ -0,0 +1,39 @@ + +// Color assignments +@font-color: @shark; +@button-bg: @eastern-blue; +@main-bg: @white; +@navigation-border: @silver; +@footer-bg: @sandy-beach; + +// Colors +@white: #FFFFFF; +@silver: #C0C0C0; +@shark: #212529; +@eastern-blue: #17A2B8; +@sandy-beach: #FFEBCD; + +@import url('https://fonts.googleapis.com/css?family=Raleway|ZCOOL+QingKe+HuangYou&display=swap'); +@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); +@import url('https://fonts.googleapis.com/css?family=Sigmar+One&display=swap'); +@import url('https://fonts.googleapis.com/css?family=Anton&display=swap'); +@main-color:rgb(253, 228, 228); +@second-color:rgb(210, 253, 175); +@pallete1:rgb(61, 63, 76); +@pallete2:rgb(72, 81, 88); +@pallete3:rgb(88, 110, 107); +@pallete4:rgb(115, 142, 127); +@pallete5:rgb(149, 167, 145); +@pallete6:rgb(182, 194, 170); +@pallete7:rgb(228, 217, 197); +@pallete8:rgb(145, 114, 96); +@pallete9:rgb(124, 90, 80); +@pallete10:rgb(90, 58, 63); +@pallete11:rgb(51, 33, 49); +@pallete12:rgb(38, 16, 37); +@pallete13:rgb(204, 195, 178); +@title-font: 'Sigmar One', cursive; +@second-font:'Montserrat', sans-serif; +@third-font:'Anton', sans-serif; +@phone: ~'( max-width: 500px )'; +@tablet: ~'( max-width: 800px )'; diff --git a/about.html b/about.html new file mode 100644 index 0000000..a8ef6b7 --- /dev/null +++ b/about.html @@ -0,0 +1,120 @@ + + + + + + + SAFE - Quick and Safe Travel to Health Facilities + + + + + + + + + + + + +
+ +
+

About the Developers

+
+ +
+ Tim Jeffries Profile +
+
+

Tim Jeffries - Project Lead

+

timothyrexjeffries@gmail.com +

+

Tim Jeffries is responsible for supervising and guiding project development efforts for all projects managed, including audits, risks analyses, project coordination, communication, and review of work completed by others.

+
+
+
+
+
+
+

Scott Smith - Web UI

+

scthsm@outlook.com +

+

Responsible for the layout and styling of the landing pages. Developed various graphic designs for the website.

+
+
+ Scott Smith profile +
+
+
+
+ William Ryan profile +
+
+

William Ryan - Web React I

+

billy.ryan.rom@gmail.com +

+

Worked in conjunction with the Web UI Developer as well as the Front End Framework Developer on the product to deliver a fully functioning web app.

+
+
+
+ +
+

Handell Desulme - Web React II

+

handelldesulme51@gmail.com +

+

Worked in conjunction with the Web UI Developer as well as the Front End Developer on the product to deliver a fully functioning web app.

+
+
+ Handell Desulme profile +
+
+
+
+ Avraham Candinov profile +
+ + +
+

Avraham Candinov - Backend Developer

+

avkan1087@gmail.com +

+

Built an API that provides the endpoints that the front end needs to complete client requirements.

+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/img/57ab7df7e4f6911e008b4934.jpg b/img/57ab7df7e4f6911e008b4934.jpg new file mode 100644 index 0000000..3c9eac9 Binary files /dev/null and b/img/57ab7df7e4f6911e008b4934.jpg differ diff --git a/img/GitHub_Logo_White.png b/img/GitHub_Logo_White.png new file mode 100644 index 0000000..c61ab9d Binary files /dev/null and b/img/GitHub_Logo_White.png differ diff --git a/img/PlaceHolder.jpg b/img/PlaceHolder.jpg new file mode 100644 index 0000000..80687da Binary files /dev/null and b/img/PlaceHolder.jpg differ diff --git a/img/banner.png b/img/banner.png new file mode 100644 index 0000000..ee71436 Binary files /dev/null and b/img/banner.png differ diff --git a/img/carousel1.jpg b/img/carousel1.jpg new file mode 100644 index 0000000..6c4cc5b Binary files /dev/null and b/img/carousel1.jpg differ diff --git a/img/carousel2.jpg b/img/carousel2.jpg new file mode 100644 index 0000000..aa93b7e Binary files /dev/null and b/img/carousel2.jpg differ diff --git a/img/carousel3.jpg b/img/carousel3.jpg new file mode 100644 index 0000000..c89bf34 Binary files /dev/null and b/img/carousel3.jpg differ diff --git a/img/carousel4.jpg b/img/carousel4.jpg new file mode 100644 index 0000000..a6cefe4 Binary files /dev/null and b/img/carousel4.jpg differ diff --git a/img/carousel5.jpg b/img/carousel5.jpg new file mode 100644 index 0000000..3dde0ec Binary files /dev/null and b/img/carousel5.jpg differ diff --git a/img/carousel6.jpg b/img/carousel6.jpg new file mode 100644 index 0000000..169f053 Binary files /dev/null and b/img/carousel6.jpg differ diff --git a/img/header.jpg b/img/header.jpg new file mode 100644 index 0000000..b84f42e Binary files /dev/null and b/img/header.jpg differ diff --git a/img/headerold.jpg b/img/headerold.jpg new file mode 100644 index 0000000..8a29086 Binary files /dev/null and b/img/headerold.jpg differ diff --git a/img/logo2.png b/img/logo2.png new file mode 100644 index 0000000..fa0f751 Binary files /dev/null and b/img/logo2.png differ diff --git a/img/palleteref.png b/img/palleteref.png new file mode 100644 index 0000000..e77cf37 Binary files /dev/null and b/img/palleteref.png differ diff --git a/img/q1.png b/img/q1.png new file mode 100644 index 0000000..57c95b8 Binary files /dev/null and b/img/q1.png differ diff --git a/img/q2.png b/img/q2.png new file mode 100644 index 0000000..63ecde1 Binary files /dev/null and b/img/q2.png differ diff --git a/img/q3.png b/img/q3.png new file mode 100644 index 0000000..0b7ac11 Binary files /dev/null and b/img/q3.png differ diff --git a/img/q4.png b/img/q4.png new file mode 100644 index 0000000..daf93e0 Binary files /dev/null and b/img/q4.png differ diff --git a/img/q6.png b/img/q6.png new file mode 100644 index 0000000..9a4b6e5 Binary files /dev/null and b/img/q6.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..99abd0c --- /dev/null +++ b/index.html @@ -0,0 +1,124 @@ + + + + + + + SAFE - Quick and Safe Travel to Health Facilities + + + + + + + + + + + + +
+
+ Ride For Life Banner +
+
+ +
+ + + + + + +
+ + + + +
+
+ + + +
+
+ + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+ +
+
+

Ride for Life

+ +

Ride For Life Aims to provide expecting mothers in Uganda a way to safely travel to medical facilities that are beyond their reach. Our motorcycle ambulances will be alerted and will respond within seconds to a request being made by a mother or a caregiver. Availability of health facilities are a huge obstacle that pregnant women face here in Uganda. Ride For Life operates within all regions of Uganda. If you are an expecting mother/caregiver or a driver who is willing to help secure a future for Uganda's children; We encourage you to Sign up now!

+
+
+
+
+

Welcome!

+
+
+

Ride For Life is a service that aims to provide expecting mothers a way to travel to medical facilities quickly and safely

+

If you or someone you care for is expecting a child or if you are a driver looking for work; we encourage you to sign up now!

+
+
+ Sign Up! +
+ +
+ + + +
+ + + + + \ No newline at end of file diff --git a/less/about-page.css b/less/about-page.css new file mode 100644 index 0000000..4a895e8 --- /dev/null +++ b/less/about-page.css @@ -0,0 +1,216 @@ +@font-face { + font-family: 'Raleway'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ISg.ttf) format('truetype'); +} +@font-face { + font-family: 'ZCOOL QingKe HuangYou'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('ZCOOL QingKe HuangYou Regular'), local('ZCOOLQingKeHuangYou-Regular'), url(https://fonts.gstatic.com/s/zcoolqingkehuangyou/v5/2Eb5L_R5IXJEWhD3AOhSvFC554MOOahI4mR4jPe4.ttf) format('truetype'); +} +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhzg.ttf) format('truetype'); +} +@font-face { + font-family: 'Sigmar One'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https://fonts.gstatic.com/s/sigmarone/v10/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype'); +} +@font-face { + font-family: 'Anton'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v11/1Ptgg87LROyAm3Kz-Co.ttf) format('truetype'); +} +.text-box1 { + color: #b6c2aa; + background-image: linear-gradient(#586e6b, #3d3f4c); + border-radius: 20px; + padding: 2rem 2rem 2rem 2rem; +} +.text-box2 { + color: #ccc3b2; + background-image: linear-gradient(#7c5a50, #332131); + border-radius: 20px; + padding: 2rem 2rem 2rem 2rem; +} +#aboutcontainer { + max-width: 90%; + width: 100%; + margin: 0 auto; + min-height: 100%; +} +@media ( max-width: 500px ) { + #aboutcontainer { + max-width: 100%; + } +} +#aboutcontainer #members .toptitle { + width: 100%; + text-align: center; + margin-top: 5rem; + font-family: 'Anton', sans-serif; +} +#aboutcontainer #members .teamlead { + margin-top: 5rem; + width: 100%; + color: #ccc3b2; + background-image: linear-gradient(#7c5a50, #332131); + border-radius: 20px; + padding: 2rem 2rem 2rem 2rem; + display: flex; + justify-content: center; + margin-left: auto; + margin-right: auto; + flex-wrap: wrap; +} +#aboutcontainer #members .teamlead img:not(.gitimg) { + width: 40%; + min-width: 23rem; + height: auto; + border-radius: 100%; +} +#aboutcontainer #members .teamlead .teamleadpic { + display: flex; + justify-content: center; + margin-left: auto; + margin-right: auto; + max-width: 100%; +} +#aboutcontainer #members .teamlead .descriptionlead { + margin-top: 2rem; + width: 70%; + text-align: center; +} +#aboutcontainer #members .teamlead .descriptionlead .leadDev { + font-size: 2.3rem; + font-family: 'Anton', sans-serif; +} +#aboutcontainer #members .teamlead .descriptionlead .contact { + font-size: 1.5rem; + font-family: 'Anton', sans-serif; +} +#aboutcontainer #members .teamlead .descriptionlead .contact .gitimg { + width: 6rem; + vertical-align: middle; + background-color: rgba(0, 0, 0, 0.418); + border-radius: 1rem; +} +@media ( max-width: 500px ) { + #aboutcontainer #members .teamlead { + margin-bottom: 0; + border-radius: initial; + } +} +#aboutcontainer #members .memberlist { + margin-top: 2rem; + display: flex; + justify-content: center; + margin-left: auto; + margin-right: auto; + flex-wrap: wrap; +} +#aboutcontainer #members .memberlist .membersl, +#aboutcontainer #members .memberlist .membersr { + display: flex; + justify-content: center; + margin-left: auto; + margin-right: auto; + width: 100%; +} +#aboutcontainer #members .memberlist .membersl .smalltitle, +#aboutcontainer #members .memberlist .membersr .smalltitle { + font-size: 2.3rem; + font-family: 'Anton', sans-serif; +} +#aboutcontainer #members .memberlist .membersl .memberpic, +#aboutcontainer #members .memberlist .membersr .memberpic { + max-width: 30rem; + min-width: 16rem; +} +#aboutcontainer #members .memberlist .membersl .membimg, +#aboutcontainer #members .memberlist .membersr .membimg { + border-radius: 50%; + display: flex; + justify-content: center; + margin-left: auto; + margin-right: auto; + max-width: 18rem; +} +@media ( max-width: 500px ) { + #aboutcontainer #members .memberlist .membersl, + #aboutcontainer #members .memberlist .membersr { + margin-top: 0; + margin-bottom: 0; + } +} +#aboutcontainer #members .memberlist .membersl .contact, +#aboutcontainer #members .memberlist .membersr .contact { + font-size: 1.7rem; + font-family: 'Anton', sans-serif; +} +#aboutcontainer #members .memberlist .membersl .gitimg, +#aboutcontainer #members .memberlist .membersr .gitimg { + width: 6rem; + vertical-align: middle; + background-color: rgba(0, 0, 0, 0.418); + border-radius: 1rem; + margin-top: 1rem; + margin-bottom: 1rem; +} +#aboutcontainer #members .memberlist .membersr { + color: #b6c2aa; + background-image: linear-gradient(#586e6b, #3d3f4c); + border-radius: 20px; + padding: 2rem 2rem 2rem 2rem; + display: flex; + justify-content: flex-end; + margin-bottom: 2rem; + padding-right: 4rem; +} +#aboutcontainer #members .memberlist .membersr .descriptionr { + padding-right: 2rem; + text-align: right; +} +@media ( max-width: 500px ) { + #aboutcontainer #members .memberlist .membersr { + margin-bottom: 0; + border-radius: initial; + } +} +#aboutcontainer #members .memberlist .membersl { + color: #ccc3b2; + background-image: linear-gradient(#7c5a50, #332131); + border-radius: 20px; + padding: 2rem 2rem 2rem 2rem; + display: flex; + justify-content: flex-start; + margin-bottom: 2rem; +} +#aboutcontainer #members .memberlist .membersl .descriptionl { + padding-left: 4rem; + text-align: left; +} +@media ( max-width: 500px ) { + #aboutcontainer #members .memberlist .membersl { + margin-bottom: 0; + border-radius: initial; + } +} +@media ( max-width: 500px ) { + #aboutcontainer #members .memberlist { + margin-top: 0; + margin-bottom: 0; + } +} diff --git a/less/footer.css b/less/footer.css new file mode 100644 index 0000000..cd0e0c0 --- /dev/null +++ b/less/footer.css @@ -0,0 +1,17 @@ +footer { + color: #22283B; + background: #f4f4f4; + display: flex; + justify-content: center; + align-items: center; +} +.footer { + width: 100%; + background: #000000; +} +.footer p { + text-align: center; + color: white; + font-size: 1.6rem; + padding: 20px; +} diff --git a/less/footer.less b/less/footer.less new file mode 100644 index 0000000..d1a606a --- /dev/null +++ b/less/footer.less @@ -0,0 +1,19 @@ +footer { + color: #22283B; + background: #f4f4f4; + display: flex; + justify-content: center; + align-items: center; + + } + .footer { + width: 100%; + background: rgb(0,0,0); + + p { + text-align: center; + color: white; + font-size: 1.6rem; + padding: 20px; + } + } diff --git a/less/landing-page.css b/less/landing-page.css new file mode 100644 index 0000000..ebb2973 --- /dev/null +++ b/less/landing-page.css @@ -0,0 +1,327 @@ +@font-face { + font-family: 'Raleway'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ISg.ttf) format('truetype'); +} +@font-face { + font-family: 'ZCOOL QingKe HuangYou'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('ZCOOL QingKe HuangYou Regular'), local('ZCOOLQingKeHuangYou-Regular'), url(https://fonts.gstatic.com/s/zcoolqingkehuangyou/v5/2Eb5L_R5IXJEWhD3AOhSvFC554MOOahI4mR4jPe4.ttf) format('truetype'); +} +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhzg.ttf) format('truetype'); +} +@font-face { + font-family: 'Sigmar One'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https://fonts.gstatic.com/s/sigmarone/v10/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype'); +} +@font-face { + font-family: 'Anton'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v11/1Ptgg87LROyAm3Kz-Co.ttf) format('truetype'); +} +.text-box1 { + color: #b6c2aa; + background-image: linear-gradient(#586e6b, #3d3f4c); + border-radius: 20px; + padding: 2rem 2rem 2rem 2rem; +} +.text-box2 { + color: #ccc3b2; + background-image: linear-gradient(#7c5a50, #332131); + border-radius: 20px; + padding: 2rem 2rem 2rem 2rem; +} +#container { + max-width: 90%; + width: 100%; + margin: 0 auto; + min-height: 100%; +} +@media ( max-width: 500px ) { + #container { + max-width: 100%; + } +} +#container .header .headerimg { + display: flex; + justify-content: center; + margin-left: auto; + margin-right: auto; + max-height: 30rem; +} +@media ( max-width: 500px ) { + #container .header { + display: none; + } +} +@media ( max-width: 800px ) { + #container .header { + display: none; + } +} +#container .landing { + margin-top: 0; + display: flex; + justify-content: center; + align-content: center; + max-width: 150rem; + margin-left: auto; + margin-right: auto; +} +@media ( max-width: 500px ) { + #container .landing { + flex-wrap: wrap; + margin-top: 0; + } +} +@media ( max-width: 800px ) { + #container .landing { + flex-wrap: wrap; + margin-top: 0; + } +} +#container .landing .carouselreal { + margin: 0 auto; + margin-top: 2rem; + position: relative; + width: 70%; + height: 0; + padding-bottom: 40%; + user-select: none; + background-color: #4c4c4c; + border: solid 10px #2c2c2c; + border-radius: 1rem; + overflow: hidden; +} +@media ( max-width: 500px ) { + #container .landing .carouselreal { + margin-top: 0; + border-radius: 0; + } +} +@media ( max-width: 800px ) { + #container .landing .carouselreal { + height: 40rem; + } +} +#container .landing .carouselreal .slide-img { + position: absolute; + width: 100%; + height: 100%; + z-index: -1; +} +#container .landing .carouselreal .slide-img img { + width: inherit; + height: inherit; +} +#container .landing .carouselreal #nav_slide { + width: 100%; + height: 11px; + bottom: 12%; + position: absolute; + text-align: center; + z-index: 99; + cursor: default; +} +#container .landing .carouselreal #nav_slide .dots { + top: -5px; + width: 1.8rem; + height: 1.8rem; + margin: 0 4px; + position: relative; + border-radius: 50%; + display: inline-block; + background: rgba(0, 0, 0, 0.6); +} +#container .landing .carouselreal #nav_slide .dots:hover { + cursor: pointer; + background-color: rgba(255, 255, 255, 0.9); + transition: 0.25s; +} +#container .landing .carouselreal #i1, +#container .landing .carouselreal #i2, +#container .landing .carouselreal #i3, +#container .landing .carouselreal #i4, +#container .landing .carouselreal #i5, +#container .landing .carouselreal #i6 { + display: none; +} +#container .landing .carouselreal .pre, +#container .landing .carouselreal .nxt { + width: 12%; + height: inherit; + position: absolute; + top: 0; + background-color: rgba(88, 88, 88, 0.2); + z-index: 99; + transition: 0.45s; + cursor: pointer; + text-align: center; +} +#container .landing .carouselreal .pre:hover, +#container .landing .carouselreal .nxt:hover { + transition: 0.3s; + background-color: rgba(88, 88, 89, 0.8); + color: #ffffff; +} +#container .landing .carouselreal .pre { + left: 0; +} +#container .landing .carouselreal .nxt { + right: 0; +} +#container .landing .carouselreal #i1:checked ~ #one, +#container .landing .carouselreal #i2:checked ~ #two, +#container .landing .carouselreal #i3:checked ~ #three, +#container .landing .carouselreal #i4:checked ~ #four, +#container .landing .carouselreal #i5:checked ~ #five, +#container .landing .carouselreal #i6:checked ~ #six { + z-index: 9; + animation: scroll 1s ease-in-out; +} +#container .landing .carouselreal #i1:checked ~ #nav_slide #dot1, +#container .landing .carouselreal #i2:checked ~ #nav_slide #dot2, +#container .landing .carouselreal #i3:checked ~ #nav_slide #dot3, +#container .landing .carouselreal #i4:checked ~ #nav_slide #dot4, +#container .landing .carouselreal #i5:checked ~ #nav_slide #dot5, +#container .landing .carouselreal #i6:checked ~ #nav_slide #dot6 { + background-color: rgba(255, 255, 255, 0.9); +} +@keyframes scroll { + 0% { + opacity: 0.4; + } + 100% { + opacity: 1; + } +} +#container .landing .carouseldesc { + margin-top: 2rem; + color: #b6c2aa; + background-image: linear-gradient(#586e6b, #3d3f4c); + border-radius: 20px; + padding: 2rem 2rem 2rem 2rem; + max-width: 32rem; + min-width: 23rem; + margin-left: 3rem; + padding-top: 2rem; + padding: 3rem 3rem 3rem 3rem; +} +@media ( max-width: 500px ) { + #container .landing .carouseldesc { + width: 90%; + background-image: initial; + color: #332131; + display: none; + } +} +@media ( max-width: 800px ) { + #container .landing .carouseldesc { + width: 90%; + background-image: initial; + color: #332131; + } +} +#container .landing .carouseldesc .carouseltitle { + font-size: 2.3rem; + font-family: 'Anton', sans-serif; +} +@media ( max-width: 800px ) { + #container .landing .landing { + margin-top: 0; + } + #container .landing .carouselreal { + width: 100%; + height: 0; + padding-bottom: 55%; + } +} +@media ( max-width: 500px ) { + #container .landing .carouselreal { + border: none; + width: 100%; + height: 0; + padding-bottom: 55%; + } + #container .landing .pre, + #container .landing .nxt { + width: 15%; + } + #container .landing #nav_slide .dots { + width: 1rem; + height: 1rem; + } +} +#container #welcome { + margin-top: 3rem; + display: flex; + justify-content: center; + flex-wrap: wrap; + text-align: center; + margin-left: auto; + margin-right: auto; +} +#container #welcome .mobiletext .hiddentext { + display: none; +} +@media ( max-width: 800px ) { + #container #welcome .mobiletext { + width: 80%; + } +} +@media ( max-width: 500px ) { + #container #welcome .mobiletext { + width: 90%; + } + #container #welcome .mobiletext .hiddentext { + display: initial; + } +} +#container #welcome .welcometext { + width: 100%; +} +#container #welcome .signupbtndiv { + margin-top: 3rem; + width: 100%; + margin-left: auto; + margin-right: auto; + display: flex; + justify-content: center; +} +#container #welcome .signupbtndiv .signbtn { + text-decoration: none; + line-height: 4rem; + display: block; + transition: 0.32s; + background-color: #6dc472; + margin: 0 10px 20px; + cursor: pointer; + width: 12rem; + height: 45px; + font-size: 2rem; + border-radius: 10px; + color: white; + letter-spacing: 1px; + font-family: 'Anton', sans-serif; + border: 2px solid #6dc472; +} +#container #welcome .signupbtndiv .signbtn:hover { + color: darkolivegreen; + background-image: linear-gradient(#c5f8cc, #c5f8cc); + background-color: #c5f8cc; + box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); +} diff --git a/less/mixins.css b/less/mixins.css new file mode 100644 index 0000000..2405269 --- /dev/null +++ b/less/mixins.css @@ -0,0 +1,59 @@ +@font-face { + font-family: 'Raleway'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ISg.ttf) format('truetype'); +} +@font-face { + font-family: 'ZCOOL QingKe HuangYou'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('ZCOOL QingKe HuangYou Regular'), local('ZCOOLQingKeHuangYou-Regular'), url(https://fonts.gstatic.com/s/zcoolqingkehuangyou/v5/2Eb5L_R5IXJEWhD3AOhSvFC554MOOahI4mR4jPe4.ttf) format('truetype'); +} +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhzg.ttf) format('truetype'); +} +@font-face { + font-family: 'Sigmar One'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https://fonts.gstatic.com/s/sigmarone/v10/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype'); +} +@font-face { + font-family: 'Anton'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v11/1Ptgg87LROyAm3Kz-Co.ttf) format('truetype'); +} +.text-box1 { + color: #b6c2aa; + background-image: linear-gradient(#586e6b, #3d3f4c); + border-radius: 20px; + padding: 2rem 2rem 2rem 2rem; +} +.text-box2 { + color: #ccc3b2; + background-image: linear-gradient(#7c5a50, #332131); + border-radius: 20px; + padding: 2rem 2rem 2rem 2rem; +} +.text-box1 { + color: #b6c2aa; + background-image: linear-gradient(#586e6b, #3d3f4c); + border-radius: 20px; + padding: 2rem 2rem 2rem 2rem; +} +.text-box2 { + color: #ccc3b2; + background-image: linear-gradient(#7c5a50, #332131); + border-radius: 20px; + padding: 2rem 2rem 2rem 2rem; +} diff --git a/less/navigation.css b/less/navigation.css new file mode 100644 index 0000000..ed072ae --- /dev/null +++ b/less/navigation.css @@ -0,0 +1,159 @@ +@font-face { + font-family: 'Raleway'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ISg.ttf) format('truetype'); +} +@font-face { + font-family: 'ZCOOL QingKe HuangYou'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('ZCOOL QingKe HuangYou Regular'), local('ZCOOLQingKeHuangYou-Regular'), url(https://fonts.gstatic.com/s/zcoolqingkehuangyou/v5/2Eb5L_R5IXJEWhD3AOhSvFC554MOOahI4mR4jPe4.ttf) format('truetype'); +} +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhzg.ttf) format('truetype'); +} +@font-face { + font-family: 'Sigmar One'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https://fonts.gstatic.com/s/sigmarone/v10/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype'); +} +@font-face { + font-family: 'Anton'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v11/1Ptgg87LROyAm3Kz-Co.ttf) format('truetype'); +} +.text-box1 { + color: #b6c2aa; + background-image: linear-gradient(#586e6b, #3d3f4c); + border-radius: 20px; + padding: 2rem 2rem 2rem 2rem; +} +.text-box2 { + color: #ccc3b2; + background-image: linear-gradient(#7c5a50, #332131); + border-radius: 20px; + padding: 2rem 2rem 2rem 2rem; +} +#navgroup { + background-color: #5a3a3f; + background-image: linear-gradient(#7c5a50, #5a3a3f); + z-index: 2; + transition: 0.32s; + width: 100%; + padding-top: 1rem; + padding-bottom: 1rem; +} +#navgroup nav { + display: flex; + justify-content: space-evenly; +} +#navgroup nav .safeLogo { + max-width: 18rem; +} +#navgroup .links { + display: flex; +} +#navgroup .links .signup { + color: #3b3b3b; + font-weight: bold; + border: 2px solid #095721; + border-radius: 20px; + background-color: #8be697; + background-image: linear-gradient(#c5f8cc, #8be697); +} +#navgroup .links .signup:hover { + background-image: linear-gradient(#c5f8cc, #c5f8cc); + background-color: #c5f8cc; +} +#navgroup a:not(.safeLogo) { + border-radius: 20px; + border: 1px solid rgba(59, 59, 59, 0.8); + background-image: linear-gradient(#7c5a50, #5a3a3f); + padding-top: 1rem; + padding-bottom: 1rem; + text-align: center; + white-space: nowrap; + text-decoration: none; + width: 15rem; + margin-left: 1rem; + color: #dddddd; + font-size: 1.6rem; + font-family: 'Montserrat', sans-serif; +} +#navgroup a:not(.safeLogo):hover { + color: black; + transition: 0.32s; + background-color: #faffce; + background-image: linear-gradient(#917260, #7c5a50); + border-radius: 20px; +} +@media ( max-width: 500px ) { + #navgroup nav { + display: flex; + flex-wrap: wrap; + width: 100%; + } + #navgroup nav .safeLogo { + white-space: nowrap; + display: flex; + justify-content: center; + margin-left: auto; + margin-right: auto; + width: 100%; + } + #navgroup nav .links { + display: flex; + justify-content: center; + flex-wrap: wrap; + } + #navgroup nav .links .signup { + padding-top: 1rem; + margin-left: auto; + margin-right: auto; + } + #navgroup nav .links a { + width: 60%; + margin-left: auto; + margin-right: auto; + margin-top: 5px; + margin-bottom: 5px; + background-image: none; + font-size: 2rem; + border: 1px solid black; + } +} +@media ( max-width: 800px ) { + #navgroup nav { + display: flex; + flex-wrap: wrap; + } + #navgroup nav .safeLogo { + display: flex; + justify-content: center; + margin-left: auto; + margin-right: auto; + } + #navgroup nav .links { + margin-top: 2rem; + width: 100%; + margin-left: auto; + margin-right: auto; + display: flex; + justify-content: center; + } + #navgroup nav .signup { + padding-top: 1rem; + padding-bottom: 1rem; + } +} diff --git a/less/navigation.less b/less/navigation.less new file mode 100644 index 0000000..9f86b00 --- /dev/null +++ b/less/navigation.less @@ -0,0 +1,124 @@ +// Navigation Styles here +@import "variables"; +@import "mixins"; + +#navgroup{ + background-color:@pallete10; + background-image: linear-gradient(@pallete9,@pallete10); + width: 100%; + z-index: 2; + padding-top: 1rem; + transition: 0.32s; + width: 100%; + padding-top:1rem; + padding-bottom: 1rem; + nav{ + display: flex; + justify-content: space-evenly; + + .safeLogo{ + max-width: 18rem; + } + } + .links{ + display: flex; + + + .signup{ + color:rgb(59, 59, 59); + font-weight: bold; + border: 2px solid rgb(9, 87, 33); + border-radius: 20px; + background-color: rgb(139, 230, 151); + background-image: linear-gradient( rgb(197, 248, 204),rgb(139, 230, 151)); + &:hover{ + background-image: linear-gradient( rgb(197, 248, 204),rgb(197, 248, 204)); + background-color: rgb(197, 248, 204); + } + } + } + a:not(.safeLogo){ + border-radius: 20px; + border: 1px solid rgba(59, 59, 59, 0.8); + background-image: linear-gradient(@pallete9,@pallete10); + padding-top: 1rem; + padding-bottom: 1rem; + text-align: center; + white-space: nowrap; + text-decoration: none; + width: 15rem; + margin-left: 1rem; + color:rgb(221, 221, 221); + font-size: 1.6rem; + font-family: @second-font; + &:hover{ + color:black; + transition: 0.32s; + background-color: rgb(250, 255, 206); + background-image: linear-gradient(@pallete8,@pallete9); + border-radius: 20px; + } + + + } + + @media @phone{ + nav{ + display: flex; + flex-wrap: wrap; + width:100%; + .safeLogo{ + white-space:nowrap; + .center(); + .margincenter(); + width: 100%; + } + .links{ + + .center(); + flex-wrap: wrap; + + .signup{ + padding-top: 1rem; + .margincenter(); + } + a{ + width:60%; + .margincenter(); + margin-top:5px; + margin-bottom: 5px; + background-image:none; + font-size: 2rem; + border: 1px solid black; + + } + } + } + } + + + @media @tablet{ + nav{ + display: flex; + flex-wrap: wrap; + .safeLogo{ + .center(); + .margincenter(); + } + .links{ + margin-top:2rem; + width: 100%; + .margincenter(); + .center(); + } + .signup{ + padding-top: 1rem; + padding-bottom: 1rem; + + } + + + } + + } +} \ No newline at end of file diff --git a/less/variables.css b/less/variables.css new file mode 100644 index 0000000..6091024 --- /dev/null +++ b/less/variables.css @@ -0,0 +1,35 @@ +@font-face { + font-family: 'Raleway'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ISg.ttf) format('truetype'); +} +@font-face { + font-family: 'ZCOOL QingKe HuangYou'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('ZCOOL QingKe HuangYou Regular'), local('ZCOOLQingKeHuangYou-Regular'), url(https://fonts.gstatic.com/s/zcoolqingkehuangyou/v5/2Eb5L_R5IXJEWhD3AOhSvFC554MOOahI4mR4jPe4.ttf) format('truetype'); +} +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhzg.ttf) format('truetype'); +} +@font-face { + font-family: 'Sigmar One'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https://fonts.gstatic.com/s/sigmarone/v10/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype'); +} +@font-face { + font-family: 'Anton'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v11/1Ptgg87LROyAm3Kz-Co.ttf) format('truetype'); +}