Scribd
Upload
14 views4 pages

Accessibilty Style-Css

The document contains CSS styles for a web page layout, defining styles for various elements such as the body, header, navigation, main content, and footer. It includes responsive design features like smooth scrolling and flexible sizing for logos and text. The styles also enhance user interaction with hover effects and structured layouts for forms and questions.

Uploaded by

thebestlolt
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views4 pages

Accessibilty Style-Css

The document contains CSS styles for a web page layout, defining styles for various elements such as the body, header, navigation, main content, and footer. It includes responsive design features like smooth scrolling and flexible sizing for logos and text. The styles also enhance user interaction with hover effects and structured layouts for forms and questions.

Uploaded by

thebestlolt
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

@media (prefers-reduced-motion: no-preference){

* {
scroll-behavior: smooth;
}
}

body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}

header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}

#logo {
width: max(10rem, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}

h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
text-align: center;
}

nav {
width: 50%;
max-width: 300px;
height: 50px;
}

nav > ul {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: center;
padding-inline-start: 0;
margin-block: 0;
height: 100%;
}

nav > ul > li {


color: #dfdfe2;
margin: 0 0.2rem;
padding: 0.2rem;
display: block;
}
nav > ul > li:hover {
background-color: #dfdfe2;
color: #1b1b32;
cursor: pointer;
}

li > a {
color: inherit;
text-decoration: none;
}

main {
padding-top: 50px;
}

section {
width: 80%;
margin: 0 auto 10px auto;
max-width: 600px;
}

h1,
h2 {
font-family: Verdana, Tahoma;
}

h2 {
border-bottom: 4px solid #dfdfe2;
margin-top: 0px;
padding-top: 60px;
}

.info {
padding: 10px 0 0 5px;
}

.formrow {
margin-top: 30px;
padding: 0px 15px;
}

input {
font-size: 1rem;
}

.info label, .info input {


display: inline-block;
}

.info input {
width: 50%;
text-align: left;
}

.info label {
width: 10%;
min-width: 55px;
text-align: right;
}

.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}

h3 {
margin-top: 5px;
padding-left: 15px;
font-size: 1.375rem;
}

h3::before {
content: "Question #";
}

.question {
border: none;
padding-bottom: 0;
}

.answers-list {
list-style: none;
padding: 0;
}

button {
display: block;
margin: 40px auto;
width: 40%;
padding: 15px;
font-size: 1.438rem;
background: #d0d0d5;
border: 3px solid #3b3b4f;
}

footer {
background-color: #2a2a40;
display: flex;
justify-content: center;
}

footer,
footer a {
color: #dfdfe2;
}

address {
text-align: center;
padding: 0.3em;
}

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

You might also like