diff --git a/animals/css/styles.less b/animals/css/styles.less new file mode 100644 index 0000000..f47b6f6 --- /dev/null +++ b/animals/css/styles.less @@ -0,0 +1,195 @@ +@import url("./variables.css"); + +*{padding: 0; margin: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif;} + +body, html{ + width: 100%; + height: 100%; +} + +a{ + text-decoration: none; +} + +header{ + min-height: 5vh; + width: 100%; + background-color: var(--primary-color); + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5em 1.5em; + border-bottom: 2px solid #000; +} + + + + +/* +header > .header__logo > a > img { + width: 50px; +} + + +header > .header__menu > ul{ + display: flex; + gap: 1em; +} + +header > .header__menu > ul > li{ + list-style: none; +} + +header > .header__menu > ul > li > a{ + list-style: none; + color: #FFF; + font-weight: bold; +} +*/ + + +header { + + > .header__logo > a > img { width: 50px; } + + > .header__menu > ul{ + + display: flex; + gap: 1em; + > li { + list-style:none; + a { + color: #FFF; + font-weight: bold; + } + } + + } + + } + + + + main{ + min-height: 87vh; + background-color: #CCC; + } + + .main_content{ + width: 805px; + padding: 1em; + display: flex; + flex-direction: column; + align-items: center; + } + + .container{ + width: 100%; + min-height: 87vh; + display: flex; + padding: 2em; + align-items: center; + flex-direction: column; + } + + footer{ + min-height: 7vh; + background-color: var(--primary-color); + display: flex; + justify-content: center; + align-items: center; + border-top: 2px solid #000; + } + + .main__table { + border-collapse: collapse; + width: 100%; + max-width: 800px; + margin: 0 auto; + font-family: Arial, sans-serif; + font-size: 14px; + box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; + font-weight: bold; + font-size: 1em; + } + + .main__table > thead { + background-color: #CCC; + border: 2px solid #000; + text-align: left; + padding: 1em; + } + + .main__table > thead > tr th { + padding: 1em; + border: 2px solid #000; + } + + .main__table > th, td { + padding: 10px; + text-align: left; + border: 2px solid #000; + } + + .main__options{ + width: 100%; + display: flex; + justify-content: flex-start; + } + + .btn{ + background-color: none; + color: var(--primary-color); + border: 2px solid var(--primary-color); + margin-bottom: 0.5em; + width: fit-content; + text-align: center; + padding: 0.3em 0.4em; + font-weight: bold; + border-radius: 5px; + font-size: 1em; + cursor: pointer; + } + + .btn:hover{ + color: #FFF; + background-color: var(--primary-color); + transition: 0.3s; + } + + .form-control{ + width: 550px; + display: flex; + flex-direction: column; + gap: 1em; + padding: 1em; + box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; + border-radius: 5px; + } + + .form-control > .form-control__input-group{ + display: flex; + flex-direction: column; + gap: 0.3em; + } + + .form-control > .form-control__input-group > input{ + padding: 0.4em 0.4em; + font-size: 1em; + border: none; + border-radius: 5px; + } + + .form-control > .form-control__input-group > label{ + font-weight: bold; + } + + .main__iframe{ + width: 550px; + border: 2px solid #000; + } + + .title > h1 > a{ + color: var(--primary-color); + text-decoration: underline; + } diff --git a/animals/index.html b/animals/index.html index 610f1d3..3c61655 100644 --- a/animals/index.html +++ b/animals/index.html @@ -11,7 +11,8 @@ - + +