Scribd
Upload
9 views

Project CSS

The CSS code styles various elements of a website layout including a header, navigation menu, image slider, and product sections. It sets styles like colors, positioning, animations and hovers for the header, links, images and containers. Responsive styles are also included to hide menu items on smaller screens.

Uploaded by

antonmichael8888
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views

Project CSS

The CSS code styles various elements of a website layout including a header, navigation menu, image slider, and product sections. It sets styles like colors, positioning, animations and hovers for the header, links, images and containers. Responsive styles are also included to hide menu items on smaller screens.

Uploaded by

antonmichael8888
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

CSS CODE:

*{

margin: 0;

padding: 0;

box-sizing: border-box;

header {

display: flex;

justify-content: space-evenly;

align-items: center;

height: 60px;

width: 100%;

background:black;

.heading ul {

display: flex;

.logo a {

color: white;

transition-duration: 3s;

font-weight: 800;

.logo a:hover {

color: rgb(240, 197, 6);

transition-duration: 1s;

.heading ul li {
list-style: none;

.heading ul li a {

margin: 5px;

text-decoration: none;

color: black;

font-weight: 500;

position: relative;

color: white;

margin: 2px 14px;

font-size: 18px;

transition-duration: 1s;

.heading ul li a:active {

color: red;

.heading ul li a:hover {

color: rgb(243, 168, 7);

transition-duration: 1s;

.heading ul li a::before {

content: "";

height: 2px;

width: 0px;

position: absolute;

left: 0;
bottom: 0;

background-color: white;

transition-duration: 1s;

.heading ul li a:hover::before {

width: 100%;

transition-duration: 1s;

background-color: rgb(243, 168, 7);

#input {

height: 30px;

width: 300px;

text-decoration: none;

border: 0px;

padding: 5px;

.logo a {

color: white;

font-size: 35px;

font-weight: 500;

text-decoration: none;

ion-icon {

width: 30px;

height: 30px;

background-color: white;

color: black;
}

ion-icon:hover {

cursor: pointer;

.search a {

display: flex;

header a ion-icon {

position: relative;

right: 3px;

.img-slider img {

height: 720px;

width: 1080px;

@keyframes slide {

0% {

left: 0px;

15% {

left: 0px;

20% {

left: -1080px;

32% {

left: -1080px;
}

35% {

left: -2160px;

47% {

left: -2160px;

50% {

left: -3240px;

63% {

left: -3240px;

66% {

left: -4320px;

79% {

left: -4320px;

82% {

left: -5400px;

100% {

left: 0px;

.img-slider {
display: flex;

float: left;

position: relative;

width: 1080px;

height: 720px;

animation-name: slide;

animation-duration: 10s;

animation-iteration-count: infinite;

transition-duration: 2s;

.heading1 {

opacity: 0;

.search {

display: flex;

position: relative;

.section1 {

width: 1080px;

overflow: hidden;

justify-content: center;

align-items: center;

margin: 0px auto;

}
.section2 .container {

display: flex;

width: 100%;

height: max-content;

flex-wrap: wrap;

justify-content: center;

margin: 10px auto;

.section2 .container .items {

margin: 10px;

width: 200px;

height: 300px;

background-color: white;

border: 2.5px solid black;

border-radius: 12px;

.section2 .container .items .name {

text-align: center;

background-color: rgb(240, 197, 6);

height: 25px;

padding-top: 4px;

color: white;

margin: 0;

.section2 .container .items .price {

float: left;

padding-left: 10px;
display: block;

width: 100%;

color: rgb(255, 0, 0);

font-weight: 650;

.section2 .container .items .info {

padding-left: 10px;

color: rgb(243, 168, 7);

.section2 .container .items .img img {

width: 200px;

height: 200px;

margin: 0;

padding: 0;

border-radius: 12px;

transition-duration: 0.8s;

.section2 .container .items .img {

overflow: hidden;

margin: 0;

.section2 .container .items:hover .img img {

transform: scale(1.2);

transition-duration: 0.8s;

border-radius: 12px;

}
.menu {

visibility: hidden;

.heading1 .ham:active {

color: red;

.items {

overflow: hidden;

.ham,

.close {

cursor: pointer;

@media screen and (max-width: 1250px) {

.heading ul li {

display: none;

You might also like