Homework/1-html-css/homework1/style.css
2023-03-14 20:47:00 +03:00

137 lines
No EOL
2.1 KiB
CSS

.div_header {
background-image: url(https://deadsign.ru/images/articles/code/code-11.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: 0% 40%;
height: 280px;
}
.header_h1 {
color: bisque;
text-align: center;
padding-left: 50%;
padding-top: 12%;
}
.footer {
text-align: center;
color: #777;
}
.footer-gradient {
background: rgb(117, 112, 228);
background: linear-gradient(90deg, rgba(117, 112, 228, 1) 0%, rgba(135, 135, 247, 1) 21%, rgba(0, 212, 255, 1) 97%);
height: 20px;
}
p {
font-family: Helvetica, Arial, sans-serif;
}
a,
a:link {
color: blue;
}
a:visited {
color: blueviolet;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active,
a:focus {
color: orangered;
}
.m_menu li {
display: inline;
margin-left: 10px;
margin-right: 10px;
padding-left: 5px;
padding-right: 5px;
white-space: nowrap;
font-size: 2rem;
}
.m_menu a:hover {
text-decoration: none;
color: rgb(110, 145, 57);
}
.Project {
margin-top: 5px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
padding: 5px;
border: blue solid 1px;
}
.s_project {
margin-left: 5px;
margin-right: 5px;
font-weight: 600;
}
.icon {
width: 20px;
border-radius: 50%;
}
.icon:hover {
opacity: 0.7;
}
.video-container {
height: 100px;
width: 100%;
max-width: 2000px;
position: relative;
overflow: hidden;
}
video {
object-fit: cover;
position: absolute;
height: 100px;
width: 100%;
top: 0;
left: 0;
}
.video-container:after {
content: '';
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(black, .2);
z-index: 1;
}
.desc {
font-family: Raleway;
font-weight: 400;
color: coral;
font-size: 18px;
}
.callout {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
text-align: center;
position: relative;
z-index: 10;
width: 70%;
margin: auto;
}