Configuration

Overview

Gallery

CSS nav { margin: 27px auto 0; position: relative; width: 590px; height: 50px; background-color: #34495e; border-radius: 6px; font-size: 0; } nav a { line-height: 50px; height: 100%; font-size: 15px; display: inline-block; position: relative; z-index: 1; text-decoration: none; text-transform: uppercase; text-align: center; color: white; cursor: pointer; } nav .animation { position: absolute; height: 100%; top: 0; z-index: 0; transition: all .5s ease 0s; border-radius: 10px; } a:nth-child(1) { width: 100px; } a:nth-child(2) { width: 110px; } a:nth-child(3) { width: 100px; } a:nth-child(4) { width: 140px; } a:nth-child(5) { width: 120px; } nav .start-home, a:nth-child(1):hover~.animation { width: 100px; left: 0; background-color: #1abc9c; } nav .start-about, a:nth-child(2):hover~.animation { width: 110px; left: 100px; background-color: #e74c3c; } nav .start-blog, a:nth-child(3):hover~.animation { width: 100px; left: 210px; background-color: #3498db; } nav .start-portefolio, a:nth-child(4):hover~.animation { width: 140px; left: 300px; background-color: #9b59b6; } nav .start-contact, a:nth-child(5):hover~.animation { width: 120px; left: 470px; background-color: #e67e22; } /* body, html { margin: 0px; padding: 0px; width: 100%; height: 100%; } */ .image { width: 100%; height: auto; overflow:hidden; align-items: center; } .image img { width: 110%; height: auto; object-fit:cover; align-items: center; } .top { width: 100%; height: auto; overflow:hidden; } .top img { padding-top: 15px; padding:10px 15px; width: 260px; margin-left: 75px; height: auto; float: left; } .section-heading { text-align: center; color: #282827; margin: 30px 0px 10px; text-transform: uppercase; font-family:'Times New Roman', Times, serif; } .main { font-family: 'Times New Roman', Times, serif; } /* .image { display: flex; } */ table { width: 80%; border-collapse: collapse; margin-left: 165px; } table, th, td { border: 1px solid black; } th, td { padding: 10px; text-align: center; } .container { display: flex; justify-content: center; } .column { flex: 5; /* // max-height: 100vh; */ /* overflow-y: visible; padding: 30px; */ width: 45%; margin: 0 10px; } #cards-left, #cards-right { list-style: armenian; padding: 0; margin: 0; } .card { margin-bottom: 20px; grid-area: text; width: 80%; place-self: center; text-align: left; justify-content: center; display: grid; gap: 1em; place-items: start; } .card figure { margin: 0; display: flex; justify-content: center; align-items: center; } .card img { max-width: 100%; height: auto; } #cards-left, #cards-right { padding-bottom: calc(var(--numcards) * var(--card-top-offset)); margin-bottom: var(--card-margin); #card_1 { --index: 1; body { color: rgb(19, 149, 172); } } #card_2 { --index: 2; } #card_3 { --index: 3; } #card_4 { --index: 4; } .card { position: sticky; top: 0; padding-top: calc(var(--index) * var(--card-top-offset)); } #cards-left, #cards-right { list-style:armenian; outline: calc(var(--outline-width) * 10) solid blue; display: grid; /* // grid-template-columns: 1fr; */ grid-template-rows: repeat(var(--numcards), var(--card-height)); gap: var(--card-margin); } .card { outline: var(--outline-width) solid hotpink; } .card__content { box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.1), 0 1em 2em rgba(0, 0, 0, 0.1); background: rgb(237, 234, 234); color: rgb(10, 5, 7); border-radius: 1em; overflow: hidden; display: grid; align-items: stretch; outline: var(--outline-width) solid lime; } .btn { background: rgb(188 87 36); color: rgb(213, 213, 213); text-decoration: none; display: inline-block; padding: 0.5em; border-radius: 0.25em; } .card { display: flex; justify-content: center; align-items: center; margin: 10px; margin-left: 175px; } figure { margin: 0; display: flex; justify-content: start; align-items: start; } img { max-width: 680px; max-height: 700px; } } * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .slider { width: 100%; overflow: hidden; position: relative; max-width: 1000px; margin: auto; } .slides { display: flex; width: calc(100% * 10); animation: slide 20s linear infinite; } .slide { width: 5%; flex: 0 0 auto; } img { width: 100%; vertical-align: middle; } @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .main a { text-align: center; margin: 0 auto; padding: 20px; } .section-heading { text-align: center; margin: 0px; font-size: 30px; text-decoration: underline; } .containerabout { width: 100%; max-width: 1200px; margin: 0 auto; } .row { display: flex; flex-wrap: wrap; justify-content: center; margin: 20px 0; } .center { flex: 1 1 30%; box-sizing: border-box; padding: 15px; text-align: center; } .center img { max-width: 40%; height: auto; } .center h1 { font-size: 20px; } @media (max-width: 768px) { .center { flex: 1 1 100%; } } PHP Connection failed: Access denied for user 'root'@'localhost' (using password: NO)