Scribd
Upload
9 views4 pages

Kok

The document contains CSS styles for a web page, defining the layout and appearance of various elements such as the header, navigation, container, and footer. It includes responsive design features for mobile devices, ensuring a flexible layout with adjustments to card items and navigation positioning. The styles emphasize a modern aesthetic with smooth transitions and hover effects.

Uploaded by

terminalkuning3
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
9 views4 pages

Kok

The document contains CSS styles for a web page, defining the layout and appearance of various elements such as the header, navigation, container, and footer. It includes responsive design features for mobile devices, ensuring a flexible layout with adjustments to card items and navigation positioning. The styles emphasize a modern aesthetic with smooth transitions and hover effects.

Uploaded by

terminalkuning3
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

*, html, body {

margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Helvetica;
scroll-behavior: smooth;
}

header {
background: #1A2238;
color: #eaeaea;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
}

.logo {
margin-right: auto;
display: flex;
gap: 6px;
}

.logo-img {
width: 35px;
height: 35px;
margin-left: 10px;
}

.logo-title {
cursor: pointer;
transition: all .5 ease 0s;

.logo:hover {
color: #ff6a3d;
transform: rotate(2deg);
}

.btn-cta {
margin-right: 10px;
border: none;
font-size: 20px;
padding: 6px 12px;
background-color: rgba(194, 102, 255, 0.295);
color: white;
border-radius: 8px;
cursor: pointer;
}

nav ul{
display: flex;
padding: 20px;
}
li {
list-style-type: none;
padding: 10px;
}

li a {
transition: all .5s ease 0s;
display: inline-block;
}

li a:hover {
color: #FF6A3D;
transform: rotate(2deg);
}

a {
color: #eaeaea;
text-decoration: none;
}

.container {
max-width: 1200px;
margin: auto;
padding: 70px 0;
}

.intro {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
text-align: center;
}

.title {
font-size: 20px;
font-weight: bold;
}

.description {
font-size: 28px;
font-weight: bolder;
}

.img-foto {
width: 100%;
max-width: 500px;
max-width: auto;
padding: 10px;
max-width: 500px;
}

.pallarax {
background-image: url(asset/foto/bg.png);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}

.tentang {
display: flex;
padding: 5px;
justify-content: center;
align-items: center;
flex-direction: column;
background: #1A2238;
color: white;
}

.mt-10 {
margin-top: 20px;
}

.cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 50vh;
gap: 8px;
}

.card-item {
text-align: center;
width: 25%;
background: #f7f7f7;
color: #222;
padding: 24px;
box-shadow: 2px 5px 5px 1px rgba(0, 0, 0, 5);
}

.card-title {

font-size: 18px;
font-weight: bolder;
}

.card-description {
font-size: 14px;
margin-top: 4px;
}

.icon {
width: 75px;
height: 75px;
padding: 10px;
padding: 4px;
}

footer {
padding: 20px;
text-align: center;
background: #1A2238;
color: #eaeaea;
}
@media screen and (max-width: 500px) {
.card {
flex-direction: column;
gap: 0;
}
.card-item {
width: 100%;
opacity: 0.9;
}

.container {
width: 100%;
padding: 0;
}

.intro {
margin-top: 20px;
}

.img-foto {
padding: 0;
}

nav {
position: fixed;
bottom: 0;
width: 100%;
background: #1A2238;
z-index: 9;
}

footer {
margin-bottom: 70px;
margin-top: 70px;
}
}

You might also like