subindo site inicial

Author: annezao

css/main.css

@@ -0,0 +1,179 @@
+@font-face {
+    font-family: 'Xilosa';
+    src: url('../fonts/xilosa.eot');
+    src: url('../fonts/xilosa.eot') format('embedded-opentype'),
+    url('../fonts/xilosa.woff') format('woff'),
+    url('../fonts/xilosa.ttf') format('truetype'),
+    url('../fonts/xilosa.svg#Xilosa') format('svg');
+}
+
+body {
+    width: 100%;
+    height: 100%;
+    /* background-color: #D70800; */
+    font-weight: 400;
+    margin: 0;
+    min-height: 100vh;
+    padding: 0;
+    position: relative;
+    font-family: "Saira", "Helvetica Neue", "Helvetica", "sans-serif";
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+}
+
+main {
+    width: 100%;
+    height: 100%;
+    min-height: 100vh;
+    position: relative;
+    overflow: hidden;
+}
+
+main, main div#main-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.main-font-family {
+    font-family: 'Xilosa';
+}
+
+img#main-logo {
+    max-width: 200px;
+    z-index: 10;
+    margin-bottom: 30px;
+}
+
+h1#main-title {
+    font-size: 6rem;
+    margin-bottom: 10px;
+}
+
+h1#main-title span {
+    padding: 0 13px;
+    transition: all 0.5s ease;
+}
+
+.main-description {
+    cursor: default;
+    z-index: 10;
+}
+.main-description *{
+    transition: all 0.5s ease;
+}
+#main-wrapper:hover span.year {
+    color: #fff;
+    background-color: #000000
+}
+.rainbow-text {
+    border-width: 3px;
+    border-style: solid;
+    border-right: 0;
+    border-top: 0;
+    border-left: 0;
+    border-image: 
+      linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3) 1 1 100%;
+}
+
+.main-description h2 {
+    margin-top: 20px;
+}
+
+.decorations {
+    position: absolute;
+    height: 100%;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.decorations img {
+    max-width: 300px;
+    z-index: 0;
+    opacity: 0.4;
+}
+
+#decoration-left img {
+    animation: bounceRibbonsLeft 2s infinite;
+    animation-timing-function: linear;
+}
+
+#decoration-left {
+    left: -25px
+}
+
+#decoration-right img {
+    animation: bounceRibbonsRight 2s infinite;
+    animation-timing-function: linear;
+}
+
+#decoration-right {
+    right: -30px
+}
+
+#decoration-right #right-ribbon1{
+    max-width: 100px;
+    align-self: flex-end;
+}
+
+#decoration-right #right-ribbon3 {
+    max-width: 150px;
+    align-self: flex-end;
+}
+
+@keyframes bounceRibbonsLeft {
+    0% {
+        transform: translateY(0)
+    }
+    30% {
+        transform: translateY(5px) rotateZ(-20deg);
+    }
+    60% {
+        transform: translateY(10px) rotateZ(-10deg) translateX(10px);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
+@keyframes bounceRibbonsRight {
+    0% {
+        transform: translateY(0)
+    }
+    30% {
+        transform: translateY(-5px) rotateZ(20deg);
+    }
+    60% {
+        transform: translateY(-10px) rotateZ(10deg) translateX(-10px);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
+
+@media (max-width: 768px) {
+    .decorations img {
+        max-width: 200px;
+    }
+    img#main-logo {
+        max-width: 150px;
+        margin-bottom: 10px
+    }
+    h1#main-title {
+        font-size: 4rem;
+    }
+    h1#main-title span {
+        padding: 10px 13px 0px 13px
+    }
+}