~The Code for Web Page Design~
3/11/2024
The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>8 Creating a Flexible Webpage</title>
<link rel="shortcut icon" href="Images/favicon.ico" type="image/x-icon">
<link href="CSS/myStyles.css" rel="stylesheet" type="text/css">
<link href="Styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<header class="header"></header>
<ul class="navigation">
<li><a href="#" class="active"title="Home">☁</a></li>
<li><a href="#" title="Articles This Week">Articles This Week</a></li>
<li><a href="#" title="Articles By Year">Articles By Year</a></li>
<li><a href="#">About</a></li>
</ul>
<article class="main">
<p class="h2Silver"><span class="h2Gold"><span class="h2Gold">~Welcome~</span></span></p>
<p class="pFadedSilver"><span class="pSuedeBlue">This will be the welcome section of your website. You can put anything that you would like into this page. But most people just welcome visitors to the site, and state a few things that the site will be dedicated to the public.</span></p>
</article>
<aside class="aside aside-1">
<img src="Images/Home.png" class="image" padding="0">
</aside>
<aside class="aside aside-2">
<p class="h2Silver">8 Creating a Flexible webpage</p>
<p class="pSilver">Some people might use this side bar for adding additional hyperlinks, but as you can see from my own site, what I use it for, is to explain what my current tutorial will be about.</p>
<p class="pSilver"> This week, my article will be about using flexbox to create a flexible webpage, and the title of this particular article will be:</p>
<p class="archiveListLink"><a href="#"">8 Creating a Flexible Webpage</a></p>
<p class="pSilver"> </p>
<br>
</aside>
<br>
<span class="aside-2"><br>
<img src="Images/A-Typical-Cat-Day.png" class="cartoonImg"></span>
<br>
<br>
<footer class="footer"> ~ by StarsInDust ~ © 2023 –
<script type="text/javascript" src ="JavaScript/FooterYearlyDate.js">
</script></footer>
</body>
</html>
The CSS
@charset "utf-8";
/* CSS Document */
/* Main Page CSS Setup*/
.wrapper {
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
min-height: 450px;
box-shadow: 2px 3px 8px black;
border-radius: 20px;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.header {
background-color: black;
background-image: url(../Images/banner_1200.png);
height: 430px;
background-repeat: no-repeat;
}
.footer {
background-color: #020d25;
color: #9e8c69;
text-align: center;
box-shadow: 2px 3px 8px #424344;
border-radius: 2px;
padding-top: 40px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.main {
text-align: left;
background:#111111;
padding-right: 30px;
padding-left: 30px;
padding-bottom: 40px;
}
.oneColumnDiv {
text-align: left;
background:#111111;
height: 100px;
padding: 10px;
}
.aside-1 {
background: black;
box-shadow: 2px 3px 8px #424344;
border-radius: 15px;
padding-bottom: 40px;
}
.aside-2 {
background: black;
box-shadow: 2px 3px 8px #424344;
border-radius: 15px;
color: Silver;
padding-bottom: 40px;
}
.dropShadow {
box-shadow: 2px 3px 8px black;
border-radius: 20px;
}
/*Dark theme*/
.pGold {
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
color: #eae6ad;
padding-right: 20%;
padding-left: 20%;
line-height: 22px;
}
.h2Silver {
color: Silver;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
padding-right: auto;
padding-left: auto;
text-align: center;
}
.LH2Silver{
font-family: "Times New Roman", Times, serif;
font-size: 24px;
color: Silver;
padding-right: 5%;
padding-left: 5%;
line-height: 22px;
font-weight: 500;
text-align: left;
}
.pSilver {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: Silver;
padding-right: 5%;
padding-left: 5%;
line-height: 22px;
font-weight: 500;
text-align: left;
}
.H2LBrown {
font-family: "Times New Roman", Times, serif;
font-size: 24px;
color: #9e8c69;
padding-right: 5%;
padding-left: 5%;
line-height: 22px;
font-weight: 500;
text-align: left;
}
.h2Gold {
font-family: Georgia, "Times New Roman", Times, serif;
color: #D5DBA4;
;
font-size: 30px;
font-weight: 500;
text-align: center;
}
.pFadedSilver {
font-family: Helvetica, Arial, sans-serif;
color: #999999;
font-size: 13px;
font-weight: 500;
text-align: center;
line-height: 20px;
padding-right: 20%;
padding-left: 20%;
}
.listIndent {
margin-left: 25px;
list-style-type: none;
}
.coverImage {
background-repeat: no-repeat;
background-size: cover;
}
.cartoonImg {
width: 100%;
height: auto;
}
body {
padding: 2em;
background-color:#00050f;
}
/* Navigation CSS Setup*/
.navigation {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
list-style: none;
margin: 0;
background: #020d26;
}
.navigation a {
text-decoration: none;
display: block;
padding: 1em;
color: #9e8c69;
}
.navigation a:hover {
color: #C4B97B;
}
.aside-2 a {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
text-decoration: none;
display:block;
font-weight: bold;
text-align: center;
color: #9e8c69;
}
.aside-2 a:hover {
color: #C4B97B;
text-decoration: underline;
}
/*media Queries*/
@media all and (min-width: 300px) {
.aside { flex: 1 0 0; }
.header{ background-image: url(../Images/banner_425_small.png);
background-repeat: no-repeat;
background-position: center bottom;
height: 110px;
}
.cartoonImg {
width: 80%;
height: auto;
padding-right: 0px;
padding-left: 0px;
margin-right: 0px;
margin-left: 0px;
}
.image {
width: 100%;
height:auto;
}
@media all and (min-width: 600px) {
.aside { flex: 1 0 0; }
.header{ background-image: url(../Images/banner_625_small.png);
background-repeat: no-repeat;
background-position: center bottom;
height: 160px;
}
.cartoonImg {
width: 90%;
height: auto;
}
@media all and (min-width: 800px) {
.aside { flex: 1 0 0; }
.header{ background-image: url(../Images/banner_825.png);
background-repeat: no-repeat;
background-position: center bottom;
height: 300px;
}
@media all and (min-width: 1200px) {
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
.header{
background-image: url(../Images/banner_1200.png);
background-repeat: no-repeat;
background-position: center bottom;
height: 430px;
}
.main {
padding-top: 50px;
}
}
}