Scribd
Upload
1 views

css chtgpt

The document contains CSS styles for a web page layout, including a main section with a background image, a responsive navbar, and various text and image elements. It defines styles for lists, links, and hover effects to enhance user interaction. Additionally, it includes specific styling for icons and informational sections, ensuring a visually appealing design.

Uploaded by

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

css chtgpt

The document contains CSS styles for a web page layout, including a main section with a background image, a responsive navbar, and various text and image elements. It defines styles for lists, links, and hover effects to enhance user interaction. Additionally, it includes specific styling for icons and informational sections, ensuring a visually appealing design.

Uploaded by

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

*{

margin: 0;

padding: 0;

.main {

width: 100%;

background: url(images/ytb.webp);

background-position: center;

background-size: cover;

height: 100vh;

position: relative;

font-family: sans-serif;

.navbar {

width: 86%;

display: flex;

margin: auto;

padding: 15px 0;

align-items: center;

justify-content: space-between;

.navbar .logo {
width: 160px;

cursor: pointer;

margin-top: -3%;

margin-left: -2%;

ul {

margin-top: 0; /* Corrected */

ul li {

list-style: none;

display: inline-block;

padding: 10px 16px;

ul li a {

font-size: 16px;

font-weight: bold;

text-decoration: none;

color: darkslategray;

margin-top: 3%;

transition: .3s ease;

}
ul li a:hover {

color: rgb(230, 104, 59);

.info h1 {

font-size: 65px;

column-rule: rgb(36 32 30);

.info h3 {

font-size: 18px;

letter-spacing: 1px;

line-height: 24px;

.info span {

color: rgb(230, 104, 59);

.info {

text-decoration: none;

color: #fff;

background-color: rgb(36, 32, 30);

margin: 26px;

padding: 10px 18px;


border-radius: 10px; /* Corrected */

display: inline;

transition: .3s ease;

.info a:hover {

background-color: rgb(59, 174, 209); /* Corrected RGB value */

.image {

width: 30%;

height: 60%;

position: absolute;

right: 100px;

bottom: 0;

.image img {

position: absolute;

height: 140%;

left: 40%;

transform: translate(-50%);

bottom: 0;

}
.image:hover .myimg { /* Corrected selector */

left: 55%;

.icons .icon-icon {

margin-bottom: 7%;

color: #000;

margin-right: -60px;

font-size: 40px;

transition: .3s ease;

.icons .icon-con:hover {

color: rgb(59, 174, 209); /* Corrected hover effect */

You might also like