Lesson 12 Final Exam Project

This is the code and example for a search widget typically found in a nav bar.

<div class="search-container">
<form action="#">
    <input type="text" placeholder="Search.." name="search" aria-label="search">
    <button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>

.search-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.search-container input[type=text] {
    padding: .25em;
    margin-top: .5em;
    font-size: 1.25em;
    border: none;
}
.search-container button {
    font-size: 1.1em;
    padding: .4em .8em;
    margin-left: -.2em;
    border: none;
    background-color: var(--main-med-dark-color);
    color: var(--main-light-color);
    cursor: pointer;
}
.search-container button:hover {
    background-color: var(--main-med-light-color);
    color: var(--main-dark-color);
}

This is the code and example for a site login widget.

<form action="https://secure.riosalado.edu/cis-course-resources/postscript.aspx" method="post" id="site-login">
    <fieldset>
        <legend>Log In to Your Account</legend>
        <div class="field-group">
            <label for="email-addr">Email Address</label>
            <input type="email" required id="email-addr">
        </div>
        <div class="field-group">
            <label for="password">Password</label>
            <input type="password" required id="password" pattern="/(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/">
        </div>
        <button type="submit">Log In</button>
    </fieldset>
</form>

#site-login {
    width: 300px;
    margin: auto;
    padding: 20px;
    background-color: var(--main-dark-color);
    color: var(--main-light-color);
}
#site-login fieldset {
    padding: 24px;
    text-align: center;
}
#site-login legend {
    text-transform: uppercase;
    padding-left: 20px;
    padding-right: 20px;
    background-color: var(--main-med-light-color);
    color: var(--main-dark-color);
}
#site-login .field-group {
    margin-bottom: 16px;
}
#site-login .field-group label {
    width: 95%;
    display: block;
    font-size: 1.2em;
}
#site-login .field-group input {
    width: 95%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30px;
    padding: 5px;
}
#site-login button {
    border: 2px solid var(--main-med-light-color);;
    padding: 10px;
    background-color: var(--main-med-light-color);
    border: 2px solid var(--main-med-light-color);
    font-size: .9em;
    font-weight: bold;
}
#site-login button:hover {    
    cursor: pointer;
    background-color: var(--main-med-dark-color);
    color: var(--main-light-color);
    border: 2px solid var(--main-med-light-color);
}

The following component can be used to allow a user to create a new account to access password protected areas on a site.

<form action="https://secure.riosalado.edu/cis-course-resources/postscript.aspx" method="post" id="account-creation">
    <fieldset>
        <legend>Create an Account</legend>
        <div class="field-group">
            <label for="first-name">First Name</label>
            <input type="text" required id="first-name">
        </div>
        <div class="field-group">
            <label for="last-name">Last Name</label>
            <input type="text" required id="last-name">
        </div>    
        <div class="field-group">
            <label for="email-addr">Email Address</label>
            <input type="email" required id="email-addr">
        </div>
        <div class="field-group">
            <label for="password">Password</label>
            <input type="password" required id="password" pattern="/(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/">
        </div>
        <div class="field-group">
            <label for="conf-password">Confirm Password</label>
            <input type="password" required id="conf-password" pattern="/(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/">
        </div>
        <button type="submit">Create Account</button>
        <button type="reset">Reset</button>
    </fieldset>
</form>

#account-creation {
    width: 300px;
    margin: auto;
    font-family: Verdana, Geneva, sans-serif;
    background-color: var(--main-med-light-color);
    padding: 20px;
    color: black;  /* modified to make text legible */
}
#account-creation fieldset {
    padding: 24px;
}
#account-creation legend {
    text-transform: uppercase;
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
}
#account-creation .field-group {
    margin-top: 16px;
    margin-bottom: 16px;
}
#account-creation .field-group label {
    display: block;
    margin: 8px auto;
}
#account-creation .field-group input {
    width: 95%;
    display: block;
    height: 20px;
}
#account-creation button {
    padding: 10px;
    background-color: var(--main-light-color);
    border: none;
    margin-right: .8em;
    font-size: .9em;
}
#account-creation button:hover {    
    cursor: pointer;
    background-color: var(--main-dark-color);
    color: var(--main-light-color);
}

This is the code and example for a newsletter signup widget.

<form action="https://secure.riosalado.edu/cis-course-resources/postscript.aspx" method="post" id="newsletter">
    <fieldset>
        <legend>Sign up for our newsletter</legend>
        <div class="field-group">
            <label for="email-addr">Email Address:</label>
            <input type="email" required id="email-addr">
        </div>
        <div class="field-group">
            <input type="checkbox" required id="privacy">
            <label for="privacy">I have read and accept the privacy terms and conditions.</label>
        </div>
        <button type="submit">Sign Up</button>
    </fieldset>
</form>

#newsletter {
    width: 360px;
    margin: auto;
    padding: 10px;
    background-color: var(--main-med-light-color);
}
#newsletter fieldset {
    padding: 10px;
}
#newsletter legend {
    text-transform: uppercase;
    text-align: center;
    padding: 10px;
    font-size: 1.2em;
    font-weight: bold;
    background-color: var(--main-med-dark-color);
    color: var(--main-light-color);
}
#newsletter .field-group {
    margin: 10px;
}
#newsletter input[type=email] {
    padding: 5px;
}
#newsletter button {
    padding: 10px;
    margin-left: 10px;
    background-color: var(--main-med-dark-color);
    color: var(--main-light-color);
    border: none;
}
#newsletter button:hover {
    background-color: var(--main-light-color);
    color: var(--main-dark-color);
    cursor: pointer;
}

This is the code and example for an ad widget.

<div class="ad-widget">
    <a href="#">
        <div class="ad-widget-content">
            <div class="ad-img"><img src="images/self.jpg" alt="photo of Kelly Ferrigan"></div>
            <div class="ad-name">Kelly Ferrigan</div>
            <div class="ad-desc">With 2 years of experience designing and developing accessible and responsive websites, I can help you connect with all your visitors.</div>
            <div class="ad-cta">Hire Kelly Ferrigan today!</div>
        </div>
    </a>
</div>

.ad-widget {
    width: 350px;
    margin: auto;
    background-color: var(--main-med-light-color);
}
.ad-widget > a {
    text-decoration: none;
    color: var(--main-dark-color);
}
.ad-widget-content {
    display: grid;
    grid-template-rows: auto auto auto 3rem;
    align-items: center;
}
.ad-img {
    grid-row: 1;
    text-align: center;
    margin-top: 25px;
}
.ad-img img {
    padding: 15px;
    background-color: var(--main-med-color);
}
.ad-name {
    grid-row: 2;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
}
.ad-desc {
    grid-row: 3;
    text-align: center;
    margin-left: 2em;
    margin-right: 2em;
    margin-bottom: .75em;
}
.ad-cta {
    grid-row: 4;
    width: 100%;
    padding: .5rem 0;
    text-transform: capitalize;
    letter-spacing: .1em;
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    align-self: center;
    background-color: var(--main-med-color);
}

Example

Kelly Ferrigan

With 2 years of experience designing and developing accessible and responsive websites, I can connect you with all your visitors.

Hire Kelly Ferrigan today!