Scribd
Upload
5 views17 pages

Stylish Web Page CSS Layout

The document contains CSS styles for a web page layout, including global styles, header, navigation menu, dropdowns, content, and footer. It defines various properties such as colors, fonts, padding, margins, and responsive design elements. The styles aim to create a visually appealing and user-friendly interface with hover effects and dropdown menus.

Uploaded by

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

Stylish Web Page CSS Layout

The document contains CSS styles for a web page layout, including global styles, header, navigation menu, dropdowns, content, and footer. It defines various properties such as colors, fonts, padding, margins, and responsive design elements. The styles aim to create a visually appealing and user-friendly interface with hover effects and dropdown menus.

Uploaded by

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

/* GLOBAL */

*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background: #FFF5E0;
padding: 20px;
border: 1px solid #ccc;
border-radius: 6px;
}

/* HEADER */
.header {
background: #F9E4B7;
color: #7A1C1C;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 64px;
text-align: center;
z-index: 1001;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.header img:hover {
transform: scale(1.3);
}

/* NAVIGATION MENU */
.navigation_menu {
background-color: #a64437;
color: #F9E4B7;
text-align: center;
font-size: 18px;
font-family: "Segoe UI", sans-serif;
position: fixed;
top: 64px;
left: 0;
width: 100%;
padding: 12px 0;
z-index: 900;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
[Link]
tion_menu a:hover {
color: #FFD93D;
text-shadow: 0 0 5px #FFD93D;
}
.navigation_menu > a:not(:last-child)::after,
.navigation_menu > .dropdown:not(:last-child)::after {
content: "|";
color: #F9E4B7;
left: 0;
width: 100%;
padding: 12px 0;
z-index: 900;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
[Link]
tion_menu a:hover {
color: #FFD93D;
text-shadow: 0 0 5px #FFD93D;
}
.navigation_menu > a:not(:last-child)::after,
.navigation_menu > .dropdown:not(:last-child)::after {
content: "|";
color: #F9E4B7;
left: 0;
width: 100%;
padding: 12px 0;
z-index: 900;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
[Link]
tion_menu a:hover {
color: #FFD93D;
text-shadow: 0 0 5px #FFD93D;
}
.navigation_menu > a:not(:last-child)::after,
.navigation_menu > .dropdown:not(:last-child)::after {
content: "|";
color: #F9E4B7;
left: 0;
width: 100%;
padding: 12px 0;
z-index: 900;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
[Link]
tion_menu a:hover {
color: #FFD93D;
text-shadow: 0 0 5px #FFD93D;
}
.navigation_menu > a:not(:last-child)::after,
.navigation_menu > .dropdown:not(:last-child)::after {
content: "|";
color: #F9E4B7;

margin: 0 15px;
}

/* DROPDOWN */
.dropdown {
position: relative;
display: inline-block;
}
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #a64437;
border: 1px solid #F9E4B7;
width: 180px;
padding: 10px 0;
z-index: 9999;
border-radius: 4px;
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
navigation_menu > a:not(:last-child)::after,
.navigation_menu > .dropdown:not(:last-child)::after {
content: "|";
color: #F9E4B7;

margin: 0 15px;
}

/* DROPDOWN */
.dropdown {
position: relative;
display: inline-block;
}
navigation_menu > a:not(:last-child)::after,
.navigation_menu > .dropdown:not(:last-child)::after {
content: "|";
color: #F9E4B7;

margin: 0 15px;
}

/* DROPDOWN */
.dropdown {
position: relative;
display: inline-block;
}
navigation_menu > a:not(:last-child)::after,
.navigation_menu > .dropdown:not(:last-child)::after {
content: "|";
color: #F9E4B7;

margin: 0 15px;
}

/* DROPDOWN */
.dropdown {
position: relative;
display: inline-block;
}

}
.submenu a {
display: block;
padding: 8px 12px;
text-decoration: none;
color: #F9E4B7;
transition: background 0.3s;
}
.submenu a:hover {
background: #8c372a;
}
.menu-item {
position: relative;
}
.menu-item:hover .submenu {
display: block;
opacity: 1;
visibility: visible;
}

/* BUTTONS AND DROPDOWN */


.dropbtn {
cursor: pointer;
text-decoration: none;
}
.textsize {
font-size: 20px;
}

/* CONTENT */
.content {
width: 60%;
margin: 125px auto 60px auto;
text-align: justify;
padding: 20px;
background: #fffaf0;
border-radius: 6px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.content img,
.content video {
width: 100%;
height: auto;
display: block;
object-fit: contain;
margin: 0 auto 20px auto;
border-radius: 6px;
}
.content p:not(.tenmuc):not(.tenmucphu) {
text-indent: 3em;
margin-bottom: 1em;
}
.tenmuc {
font-size: 30px;
font-family: Arial, cursive;
text-align: center;
margin-bottom: 15px;
}
.tenmucphu {
font-size: 18px;
font-family: Verdana, cursive;
text-align: center;
font-style: italic;
margin-bottom: 15px;
}
.line-divider {
border: none;
border-top: 1px solid rgba(0,0,0,0.2);
margin: 20px 0;
}
[id] {
scroll-margin-top: 150px;
}

/* FOOTER */
.footer {
background: #F9E4B7;
color: #7A1C1C;
text-align: center;
width: 60%;
margin: 0 auto 40px auto;
padding: 15px;
border-radius: 6px;
}
.footer ol {
display: inline-block;
padding-left: 20px;
text-align: left;
}

/* FLOATING IMAGES */
.floating-img-right,
.floating-img-left {
position: absolute;
top: 0;
z-index: 9999;
max-width: 150px;
}
.floating-img-right { right: 0; }
.floating-img-left { left: 0; }

/* RESPONSIVE */
@media(max-width: 900px) {
.content, .footer {
width: 90%;
}
.navigation_menu a {
display: block;
margin: 5px 0;
}
.submenu {
width: 100%;
}
}
/* GLOBAL */
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background: #FFF5E0;
color: #3C0A00;
line-height: 1.6;
}

/* REGION */
.region {
padding: 20px;
border: 1px solid #ccc;
border-radius: 6px;
}

/* HEADER */
.header {
background: #F9E4B7;
color: #7A1C1C;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 64px;
text-align: center;
z-index: 1001;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.header img {
height: 80%;
width: auto;
object-fit: contain;
transform: scale(1.2);
transition: transform 0.3s ease;
}
.header img:hover {
transform: scale(1.3);
}

/* NAVIGATION MENU */
.navigation_menu {
background-color: #a64437;
color: #F9E4B7;
text-align: center;
font-size: 18px;
font-family: "Segoe UI", sans-serif;
position: fixed;
top: 64px;
left: 0;
width: 100%;
padding: 12px 0;
z-index: 900;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.navigation_menu a {
color: #F9E4B7;
text-decoration: none;
padding: 0 10px;
transition: color 0.3s, text-shadow 0.3s;
}
.navigation_menu a:hover {
color: #FFD93D;
text-shadow: 0 0 5px #FFD93D;
}
.navigation_menu > a:not(:last-child)::after,
.navigation_menu > .dropdown:not(:last-child)::after {
content: "|";
color: #F9E4B7;
margin: 0 15px;
}

/* DROPDOWN */
.dropdown {
position: relative;
display: inline-block;
}
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #a64437;
border: 1px solid #F9E4B7;
width: 180px;
padding: 10px 0;
z-index: 9999;
border-radius: 4px;
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
}
.submenu a {
display: block;
padding: 8px 12px;
text-decoration: none;
color: #F9E4B7;
transition: background 0.3s;
}
.submenu a:hover {
background: #8c372a;
}
.menu-item {
position: relative;
}
.menu-item:hover .submenu {
display: block;
opacity: 1;
visibility: visible;
}

/* BUTTONS AND DROPDOWN */


.dropbtn {
cursor: pointer;
text-decoration: none;
}
.textsize {
font-size: 20px;
}

/* CONTENT */
.content {
width: 60%;
margin: 125px auto 60px auto;
text-align: justify;
padding: 20px;
background: #fffaf0;
border-radius: 6px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.content img,
.content video {
width: 100%;
height: auto;
display: block;
object-fit: contain;
margin: 0 auto 20px auto;
border-radius: 6px;
}
.content p:not(.tenmuc):not(.tenmucphu) {
text-indent: 3em;
margin-bottom: 1em;
}
.tenmuc {
font-size: 30px;
font-family: Arial, cursive;
text-align: center;
margin-bottom: 15px;
}
.tenmucphu {
font-size: 18px;
font-family: Verdana, cursive;
text-align: center;
font-style: italic;
margin-bottom: 15px;
}
.line-divider {
border: none;
border-top: 1px solid rgba(0,0,0,0.2);
margin: 20px 0;
}
[id] {
scroll-margin-top: 150px;
}

/* FOOTER */
.footer {
background: #F9E4B7;
color: #7A1C1C;
text-align: center;
width: 60%;
margin: 0 auto 40px auto;
padding: 15px;
border-radius: 6px;
}
.footer ol {
display: inline-block;
padding-left: 20px;
text-align: left;
}

/* FLOATING IMAGES */
.floating-img-right,
.floating-img-left {
position: absolute;
top: 0;
z-index: 9999;
max-width: 150px;
}
.floating-img-right { right: 0; }
.floating-img-left { left: 0; }

/* RESPONSIVE */
@media(max-width: 900px) {
.content, .footer {
width: 90%;
}
.navigation_menu a {
display: block;
margin: 5px 0;
}
.submenu {
width: 100%;
}
}
/* GLOBAL */
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background: #FFF5E0;
color: #3C0A00;
line-height: 1.6;
}

/* REGION */
.region {
padding: 20px;
border: 1px solid #ccc;
border-radius: 6px;
}

/* HEADER */
.header {
background: #F9E4B7;
color: #7A1C1C;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 64px;
text-align: center;
z-index: 1001;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.header img {
height: 80%;
width: auto;
object-fit: contain;
transform: scale(1.2);
transition: transform 0.3s ease;
}
.header img:hover {
transform: scale(1.3);
}

/* NAVIGATION MENU */
.navigation_menu {
background-color: #a64437;
color: #F9E4B7;
text-align: center;
font-size: 18px;
font-family: "Segoe UI", sans-serif;
position: fixed;
top: 64px;
left: 0;
width: 100%;
padding: 12px 0;
z-index: 900;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.navigation_menu a {
color: #F9E4B7;
text-decoration: none;
padding: 0 10px;
transition: color 0.3s, text-shadow 0.3s;
}
.navigation_menu a:hover {
color: #FFD93D;
text-shadow: 0 0 5px #FFD93D;
}
.navigation_menu > a:not(:last-child)::after,
.navigation_menu > .dropdown:not(:last-child)::after {
content: "|";
color: #F9E4B7;
margin: 0 15px;
}

/* DROPDOWN */
.dropdown {
position: relative;
display: inline-block;
}
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #a64437;
border: 1px solid #F9E4B7;
width: 180px;
padding: 10px 0;
z-index: 9999;
border-radius: 4px;
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
}
.submenu a {
display: block;
padding: 8px 12px;
text-decoration: none;
color: #F9E4B7;
transition: background 0.3s;
}
.submenu a:hover {
background: #8c372a;
}
.menu-item {
position: relative;
}
.menu-item:hover .submenu {
display: block;
opacity: 1;
visibility: visible;
}

/* BUTTONS AND DROPDOWN */


.dropbtn {
cursor: pointer;
text-decoration: none;
}
.textsize {
font-size: 20px;
}

/* CONTENT */
.content {
width: 60%;
margin: 125px auto 60px auto;
text-align: justify;
padding: 20px;
background: #fffaf0;
border-radius: 6px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.content img,
.content video {
width: 100%;
height: auto;
display: block;
object-fit: contain;
margin: 0 auto 20px auto;
border-radius: 6px;
}
.content p:not(.tenmuc):not(.tenmucphu) {
text-indent: 3em;
margin-bottom: 1em;
}
.tenmuc {
font-size: 30px;
font-family: Arial, cursive;
text-align: center;
margin-bottom: 15px;
}
.tenmucphu {
font-size: 18px;
font-family: Verdana, cursive;
text-align: center;
font-style: italic;
margin-bottom: 15px;
}
.line-divider {
border: none;
border-top: 1px solid rgba(0,0,0,0.2);
margin: 20px 0;
}
[id] {
scroll-margin-top: 150px;
}

/* FOOTER */
.footer {
background: #F9E4B7;
color: #7A1C1C;
text-align: center;
width: 60%;
margin: 0 auto 40px auto;
padding: 15px;
border-radius: 6px;
}
.footer ol {
display: inline-block;
padding-left: 20px;
text-align: left;
}

/* FLOATING IMAGES */
.floating-img-right,
.floating-img-left {
position: absolute;
top: 0;
z-index: 9999;
max-width: 150px;
}
.floating-img-right { right: 0; }
.floating-img-left { left: 0; }

/* RESPONSIVE */
@media(max-width: 900px) {
.content, .footer {
width: 90%;
}
.navigation_menu a {
display: block;
margin: 5px 0;
}
.submenu {
width: 100%;
}
}

You might also like