Friday 3/6/2026

I started making a new website. This one will be a pseudo clone of the Eriesd site. I have already made a header, their image bar, which does not slide yet, but I will work on. And I have stylized it and made a hover effect for the announcement cards.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body id="indexbody">
    <header id="homeheader">
        <h1 class="hometitle">Ace's Public Schools</h1>
    </header>
        <div class="dropdowns">
            <div class="menu" id="rightmenu"><p>placeholder</p></div>
            <div class="menu"><p>placeholder</p></div>
            <div class="menu"><p>placeholder</p></div>
        </div>
    <div class="nav">
        <ul class="navlist">
            <li>
                <a href="index.html" class="navitem" id="rightnav">HOME</a>
            </li>
            <li>
                <a href="https://www.bing.com/ck/a?!&&p=75089472c711700e8b838862069cf82691196f1cfef7410900a09d5a6989d658JmltdHM9MTc3Mjc1NTIwMA&ptn=3&ver=2&hsh=4&fclid=31022be0-f333-6c9f-2ea1-3db4f2ac6da3&u=a1L3ZpZGVvcy9yaXZlcnZpZXcvcmVsYXRlZHZpZGVvP3E9cmlja3JvbGwmJm1pZD04MzFBRjkwOTE0NjkwMTJDRjBCRjgzMUFGOTA5MTQ2OTAxMkNGMEJGJmNodXJsPWh0dHBzJTNhJTJmJTJmd3d3LnlvdXR1YmUuY29tJTJmY2hhbm5lbCUyZlVDXzZoWF9DWFpmTGxxRkpURDhoZWh2dyZGT1JNPVZBTUdaQw" class="navitem">"HOME"</a>
            </li>
            <li>
                <a href="index.html" class="navitem">HOME</a>
            </li>
        </ul>
    </div>
    <div class="picturediv">
        <img src="images\Soviet_Union_Flag.jpg" alt="FORMOTHERRODINA" class="homepictures">
    </div>
    <div class="announcements">
        <div class="card" id="announcementcard">
            <img src="images/cardplaceholder.jpg" alt="homeimg1" class="homecardimg">
            <p class="homecardtext">Yes</p>
        </div>
        <div class="card" id="announcementcard">
            <img src="images/cardplaceholder.jpg" alt="homeimg2" class="homecardimg">
            <p class="homecardtext">Yes2</p>
        </div>
        <div class="card" id="announcementcard">
            <img src="images/cardplaceholder.jpg" alt="homeimg3" class="homecardimg"> 
            <p class="homecardtext">Yes3</p>
        </div>
    </div>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Pinyon+Script&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Tera:wght@100..900&family=Lexend:wght@100..900&family=Pinyon+Script&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    --lightprimarybgcolor: lightpink;
    --lightsecondarybgcolor:rgb(245, 174, 184);
    --lightbordercolor: #fffcbc;
    --lighttextcolor: rgb(3, 3, 3);
    --lightlinkcolor: #ff0000ab;
}
body{
  overflow-x: hidden;
}
#indexbody{
    display: grid;
    grid-template-areas:
    "header dropdowns"
    "nav nav"
    "picture picture"
    "announce announce"
    "calendar calendar"
    "news livefeed";
    background-color: var(--lightprimarybgcolor);
    color: var(--lighttextcolor);
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
}
#homeheader{
    display: flex;
    align-items: center;
    width: 52vmax;
    height: 3vmax;
    background-color: var(--lightsecondarybgcolor);
    border-bottom: 3px solid var(--lightbordercolor);
    color: var(--lighttextcolor);
}
.hometitle{
    align-self: center;
    font-family: "Lexend Tera", sans-serif;
    font-optical-sizing: auto;
}
.dropdowns{
    grid-area: dropdowns;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 20px;
    width: 50vmax;
    background-color: var(--lightsecondarybgcolor);
    border-bottom: 3px solid var(--lightbordercolor);
}
.menu{
    font-size: larger;
    
}
#rightmenu{
    margin-right: 80px;
}
.nav{
    grid-area: nav;
    border-bottom: 3px solid var(--lightbordercolor);
    padding: 10px;
    
}
.navlist{
    width: 100vmax;
    display: flex;
    flex-direction: row-reverse;
    gap: 20px;
    list-style: none;
}
.navitem{
    color: var(--lightlinkcolor);
    text-decoration: none;
    font-size: 24px;
}
#rightnav{
 margin-right: 60px;   
}


.picturediv{
    grid-area: picture;
}
.homepictures{
    height: 20vmax;
    width: 100vmax;
}


.announcements{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    grid-area: announce;
}
#announcementcard{
    position: relative;
    width: 25vw;
    height: 12vw;
    border: 4px solid var(--lightbordercolor);
    border-radius: 10px;
}
.homecardimg{
    width: 100%;
    height: 100%;
    border-radius: 7px;
}
.homecardtext{
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 30px;
    background-color: color-mix(in srgb, var(--lightprimarybgcolor) 40%, transparent);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    transition: all 0.5s ease-out;
}
#announcementcard:hover{
    .homecardtext{
        height: 100%;
        border-radius: 7px;
    }
}

Next Week I will continue to practice for SkillsUSA competitions taking place in April.

Comments

Leave a Reply Cancel reply