Web Design Final by @lola.harrel - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
<title>Definisce il titolo della pagina web.
<div>Crea contenitori generici o sezioni in una pagina
widthImposta la larghezza di un elemento HTML
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

pag. 3 progetto inf

Noleggio Auto es esame

programma base Di lauro

Curriculum vitae

progetti scolastici

Mario-Block.html

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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">
    <link rel="stylesheet" href="index.css">
    <title>Burlington Cougars</title>
</head>

<body>
    <nav>
        <div class="heading">Burlington Cougars</div>
        <span class="sideMenuButton" 
            onclick="openNavbar()">
            &#9776
        </span>

        <div class="navbar">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Register</a></li>
            </ul>
        </div>
    </nav>

    <!-- Side navigation bar for 
        responsive website -->
    <div class="sideNavigationBar" 
        id="sideNavigationBar">
        <a href="#" class="closeButton" 
            onclick="closeNavbar()">
            &#x274C
        </a>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Register</a>
    </div>

    <!-- Content -->
    <div class="line" id="Home">
        <div class="side1">
            <h1>Cougar District</h1>
            <button>
                <a href=
"https://www.burlingtonk12.org/">
                    Explore More
                </a>
            </button>
        </div>
        <div class="side2">
            <img src=
"https://core-docs.s3.amazonaws.com/burlington_school_district_re-6j__co_ar/article/image/large_55d621f6-4e64-42e2-a070-35871dfd9cdb.jpeg"
                width="400">
        </div>
    </div>

    <section class="about" id="My Projects">
        <div class="content">
            <div class="title">
                <span>Events</span>
            </div>
            <div class="boxes">
                <div class="box">
                    <div class="topic">
                        <a href="" target="_blank">
                            Topside 
                        </a>
                    </div>
                    <p>
                        Topside Tip-off is a tournament in Goodland,
                        Kansas. Schools near this district will face 
                        eachother, there will be a performance from
                        our Cougar Drumline. 
                    </p>
                </div>
                <div class="box">

                    <div class="topic">
                        <a href="" target="_blank">
                            State Cheer
                        </a>
                    </div>
                    <p>
                       Thursday the 12th, our cheer team is going to 
                       perform their routine at the state competition. There is a showcase on tuesday, so don't forgot to come and support.
                    </p>
                </div>

                <div class="box">
                    <div class="topic">
                        <a href="" target="_blank">
                            Band Concert
                        </a>
                    </div>
                    <p>
                       Our band has been working on their annual 
                       Christmas concert for the past few weeks.
                       On December 17th they will perform at 6:30
                       in the pit.
                    </p>
                </div>
            </div>
        </div>
    </section>

       <section class="about" id="My Projects">
        <div class="content">
            <div class="title">
                <span>Christmas</span>
            </div>
              <div class="side5">
             <img src=
"https://i.pinimg.com/736x/7f/2e/22/7f2e22ba43a96c986a396d4774e9fe07.jpg"
                width="400" class="center">
             </div>             
       </section>

    <section class="contact" id="contact">
        <div class="content">
            <div class="title"><span>Register</span></div>
            <div class="contactMenu">
                <div class="input1">
                    <div class="label1">Students Name</div>
                    <div class="input2">
                        <input type="text" 
                            placeholder="Enter your Childs Name here">
                    </div>
                    <div class="label1">
                        <label>Your Email</label>
                    </div>
                    <div class="input2">
                        <input type="text" 
                            placeholder="Enter your Email here">
                    </div>
                    <div class="label1">
                        <label>Your Phone Number</label>
                    </div>
                    <div class="input2">
                        <input type="text" 
                            placeholder="Enter your Phone Number here">
                    </div>
                    <div class="button">
                        <button>Submit</button>
                    </div>
                </div>
                <div class="input3">
                    <div class="rightside1">
                        <div class="title1">
                            <span>
                                Contact Us
                            </span>
                        </div>
                        <div class="content1">
                            380 Mike Lounge Dr, Burlington, CO 80807 - (719) 346-8455
                        </div>
                        <div class="title1">
                            <span>More Information</span>
                        </div>
                        <div class="content1">
                           If you have any questions or concers regarding 
                           students, academics, athletics, etc. Do not hesitate
                           to contact us, we would be happy to answer any questions
                           you might have. We believe in collaboration and shared leadership among our dedicated staff, supported by an innovative school administration and a devoted board of education, in conjunction with a supportive community. We are the “Burlington Cougars.”
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Footer section -->
    <footer>
        <div class="footer">
            <span>
                Created By
                Lola Harrel
                <a href= "lolaharrel3@gmail.com">lolaharrel3@gmail.com</a>
                    
                </a>
            </span>
        </div>
    </footer>
    <script src="index.js"></script>
</body>

</html>

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: white;
    color: black;
    font-family: "Fira Sans", sans-serif;
    background-color: white;
}

nav {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    padding: 20px 5%;
    background-color: #b82424;
}

nav .heading {
    font-size: 30px;
    font-weight: 700;
    color: white;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    padding: 8px 15px;
    border-radius: 10px;
    transition: 0.2s ease-in;
}

nav ul li a {
    color: black;
    font-size: 20px;
    font-weight: 500;
    text-decoration: none;
    color: white;
}

nav ul li:hover {
    background-color: rgb(101, 40, 36);
}

nav ul li a:hover {
    color: white;
}

nav .sideMenuButton {
    font-size: 30px;
    font-weight: bolder;
    cursor: pointer;
    display: none;
}

/* responsive navbar css */
@media screen and (max-width: 600px) {
    nav .sideMenuButton {
        display: flex;
    }

    nav .navbar {
        display: none;
    }

    .sideNavigationBar {
        display: block !important;
    }
}

.sideNavigationBar {
    height: 100%;
    position: fixed;
    top: 0;
    right: 0%;
    background-color: rgb(183, 43, 43);
    overflow-x: hidden;
    transition: 0.3s ease-in;
    padding-top: 60px;
    display: none;
}

.sideNavigationBar a {
    padding: 8px 8px 8px 40px;
    display: block;
    font-size: 25px;
    font-weight: 500;
    color: #d1d1d1;
    transition: 0.3s;
    text-decoration: none;
}

.sideNavigationBar a button {
    padding: 10px 20px;
    border-radius: 10px;
    color: rgb(0, 0, 0);
    font-size: 16px;
    border-style: none;
    font-weight: 700;
}

.sideNavigationBar a:hover {
    color: white;
}

.sideNavigationBar .closeButton {
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 20px;
    margin-left: 50px;
}

.line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2% 5%;
}

.line .side1 {
    padding-right: 50px;
}

.side1 h1 {
    font-size: 60px;
    margin-bottom: 10px;
    color: rgb(172, 23, 23);
}

.side1 button {
    width: 200px;
    padding: 12px 20px;
    border-radius: 20px;
    border-style: none;
    color: black;
    font-size: 17px;
    font-weight: 600;
    animation-name: example;
    animation-duration: 4s;
}

a {
    text-decoration: none;
    color: black;
}


}

/* Header content responsive */
@media screen and (max-width: 980px) {
    .side2 img {
        width: 350px;
    }

    .side5 img {
        width: 350px

    }

    .side1 h1 {
        font-size: 40px;
    }

    .side1 p {
        font-size: 17px;
    }

    .line {
        margin-top: 80px;
    }
}

@media screen and (max-width: 800px) {
    .side1 h1 {
        font-size: 35px;
    }

    .line {
        flex-direction: column;
    }

    .line .side1 {
        padding: 30px;
    }
}

/* section */

section .topic a {
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 10px;
}

.about .boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.about .boxes .box {
    margin: 10px 20px;
    max-width: calc(100% / 3 - 50px);
    text-align: center;
    border-radius: 12px;
    padding: 30px 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
    cursor: default;
}
.about .final  {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.about .final {
    margin-left: ;
    margin: 10px 50px;
    max-width: calc(100% / 3 - 50px);
    text-align: center;
    border-radius: 12px;
    padding: 30px 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
    cursor: default;
    
}

/* Contact Page  */

.contact {
    padding: 20px;
}

.contact .content {
    margin: 0 auto;
    padding: 30px 0;
}

.content .title {
    width: 80%;
    text-align: center;
    font-weight: bolder;
    font-size: 40px;
}

.title {
    margin-bottom: 30px;
    margin-left: 80px;
}

.contactMenu {
    display: flex;
    justify-content: space-evenly;
}

.input2 {
    margin-top: 10;
}

.label1 {
    font-size: 18px;
    margin-top: 8px;
    margin-bottom: 8px;
    font-weight: bolder;
}

.contactMenu .input1 input {
    border-radius: 13px;
    padding: 6px;
}

.input2 input {
    border-color: rgb(252, 244, 244);
    width: 400px;
}

.button {
    margin-top: 12px;
    margin-left: 5px;
}

.button button {
    width: 162px;
    height: 35px;
    border-radius: 12px;
    border-color: transparent;
}

.button button:hover {
    background-color: #a52e2e;
}

button {
    width: 162px;
    height: 35px;
    border-radius: 12px;
    border-color: transparent;
    
}

button:hover {
    background-color: #9a2626;
}

.rightside1 {
    display: flex;
    flex-direction: column;
    margin-left: 300px;
}

.title1 {
    font-size: 18px;
    margin-top: 8px;
    margin-bottom: 5px;
    font-weight: bolder;
}

.content1 {
    width: 450px;
    margin-top: 2px;
    color: grey;
}

/* Footer */
footer {
    background: var(--primary-color);
    padding: 15px 0;
    text-align: center;
    font-family: "Poppins", sans-serif;
}

footer .footer span {
    font-size: 17px;
    font-weight: 400;
    color: var(--white-color);
}

footer .footer span a {
    font-weight: 500;
    color: var(--white-color);
}

footer .footer span a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 1060px) {
    .contactMenu {
        flex-direction: column;
        align-items: center;
    }

    .rightside1 {
        display: flex;
        flex-direction: column;
        margin-left: 0px;
    }

    .content1 {
        width: 100%;
        margin-top: 2px;
        color: grey;
    }

    .side2 img {
        width: 95%;
        height: 90%;
    }

    .side5 img {
        width: 75%;
        height: 50%;
        
    }
    .center {
     display: block;
     margin-left: auto;
     margin-right: auto;
     position: sticky;
     
  
}


@media screen and (max-width: 600px) {
    .side2 img {
        width: 100%;
    }

    .side5 img {
        width: 100%;   
    }

    section .topic a {
        font-size: 20px;
    
    }

    section .topic p {
        font-size: 5px;
    }

    .about .boxes {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .about .boxes .box {
        max-width: 70%;
    }

     .about .final {
        display: flex;
        flex-direction: column;
        align-items: center;
    
    }

    .about .final {
        max-width: 70%;
    }
}
@keyframes example{
     from{background-color: black;}
     to{background-color:#b82424}
}