Úlohy

Znenie

  1. Otvoríme si projekt s názvom „cv_8“
  2. Vytvoríme si nový HTML dokument s názvom „new-user.html“ a vložíme si doň kód z predlohy
  3. Upravíme CSS dokument podľa predlohy

Predloha

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tech News</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&amp;subset=latin-ext" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
    <header>
        <span class="site-title">Tech News</span>
    </header>

    <main>
        <section id="form" class="thin">
            <div class="title-container">
                <h1>New user</h1>
            </div>

            <div class="content-container">
                <form>
                    <div class="input-group radio-checkbox">
                        <div class="input-group-title">Account type *</div>

                        <div class="input-holder">
                            <input id="cp-account-account-type-personal" type="radio" name="account-type" checked>
                            <label for="cp-account-account-type-personal" class="input-label">Personal</label>
                        </div>

                        <div class="input-holder">
                            <input id="cp-account-account-type-business" type="radio" name="account-type" data-value="">
                            <label for="cp-account-account-type-business" class="input-label">Business</label>
                        </div>
                    </div>

                    <div class="input-group flex">
                        <div class="input-holder">
                            <input type="text" name="name" id="contact-name" placeholder=" " required>
                            <label for="contact-name" class="input-placeholder">Name *</label>
                            <div class="underline"></div>
                        </div>

                        <div class="input-holder">
                            <input type="text" name="surname" id="contact-surname" placeholder=" " required>
                            <label for="contact-surname" class="input-placeholder">Surname *</label>
                            <div class="underline"></div>
                        </div>
                    </div>

                    <div class="input-holder">
                        <input type="email" name="email" id="contact-email" placeholder=" " required>
                        <label for="contact-email" class="input-placeholder">E-mail *</label>
                        <div class="underline"></div>
                    </div>

                    <div class="input-holder">
                        <input type="tel" name="phone" id="contact-phone" placeholder=" ">
                        <label for="contact-phone" class="input-placeholder">Phone</label>
                        <div class="underline"></div>
                    </div>

                    <div class="input-holder">
                        <input id="terms" type="checkbox" name="terms">
                        <label for="terms" class="input-label">I agree to all Terms of and Conditions</label>
                    </div>

                    <div class="input-group bordered">
                        <div class="input-holder switch">
                            <input id="newsletter" type="checkbox" name="newsletter">
                            <label for="newsletter" class="input-label">Subscribe to newsletter</label>
                        </div>
                    </div>

                    <div class="input-holder">
                        <input type="submit" name="submit" value="Create account" class="read-more">
                    </div>
                </form>
            </div>
        </section>
    </main>
</body>
</html>

CSS

 html{
    font-size: 10px;
}

body{
    margin: 0;
    font-size: 16px;
    font-family: sans-serif;
}

/* radio buttons and checkboxes */
 .bordered{
 	margin: 30px 0;
 	border-top: 2px solid #c5c5c5;
 	border-bottom: 2px solid #c5c5c5;
 }

.input-group.radio-checkbox .input-holder{
    margin-right: 30px;
    display: inline-block;
    padding-top: 20px;
}

.input-group .input-holder:last-child{
    margin-right: 0px;
}

.input-group.flex{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.input-group.flex .input-holder{
    flex-basis: 0;
    flex-grow: 1;
    margin-right: 15px;
    margin-left: 15px;
}

.input-holder .input-label {
    padding-left: 4.8rem;
    position: relative;
    cursor: pointer; 
    padding-top: 0.8rem;
}
.input-holder .input-label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    border: 2px solid #c5c5c5;
    width: 2.8rem;
    height: 2.8rem;
    background: transparent;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s; 
}

.input-holder .input-label:after {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    color: #000000;
    opacity: 0; 
    font-weight: 900;
}

.input-holder input[type="radio"] + .input-label:before {
    border-radius: 50%; 
}
.input-holder input[type="checkbox"],
.input-holder input[type="radio"] {
    display: none; 
}
.input-holder input[type="checkbox"]:hover + .input-label:after,
.input-holder input[type="radio"]:hover + .input-label:after {
    color: #b6b6b6;
    opacity: 1; 
}
.input-holder input[type="checkbox"]:checked + .input-label:before,
.input-holder input[type="radio"]:checked + .input-label:before {
    border-color: #269086;
    background: #269086; 
}
.input-holder input[type="checkbox"]:checked + .input-label:after,
.input-holder input[type="radio"]:checked + .input-label:after {
    color: #fff;
    opacity: 1; 
}

/* switch */
.input-holder.switch{
    padding-top: 20px;
}

.input-holder.switch .input-label{
    padding-top: 0;
}

.input-holder.switch .input-label:before{
    top: -0.8rem;
}

.input-holder.switch input[type="checkbox"] + .input-label {
    padding-left: 8rem; 
}
.input-holder.switch input[type="checkbox"] + .input-label:before {
    border-radius: 50%;
    background: #e2e2e2;
    z-index: 1; 
}
.input-holder.switch input[type="checkbox"] + .input-label:after {
    content: "";
    border-radius: 1.5rem;
    width: 6rem;
    height: 1.5rem;
    background: #e2e2e2;
    left: 0;
    transform: translateY(-50%);
    opacity: 1; 
}
.input-holder.switch input[type="checkbox"]:checked + .input-label:before {
    left: 3.2rem;
    background: #269086; 
}

/* contact */
.thin .content-container{
    max-width: 500px;
    margin: 0 auto;
}

Vizualizácia