Artikel

Membuat Website Statis Responsive

Assets

Download Assets

File: index.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>Document</title>

    <link rel="stylesheet" href="style.css">
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="vendor/fontawesome-free-6.1.1-web/css/all.min.css">
    
</head>
<body>
    <section class="header">
        <nav>
            <a href="index.html"><img src="images/logo.png"></a>
            <div class="nav-links" id="navLinks">
                <i class="fa-solid fa-xmark" onclick="hideMenu()"></i>
                <ul>
                    <li><a href="">HOME</a></li>
                    <li><a href="">ABOUT</a></li>
                    <li><a href="">COURSE</a></li>
                    <li><a href="">BLOG</a></li>
                    <li><a href="">CONTACT</a></li>
                </ul>
            </div>
            <i class="fa-solid fa-bars" onclick="showMenu()"></i>
        </nav>

        <div class="text-box">
            <h1>World's Biggest Academy</h1>
            <p>Making website is now one of easuest thing in the world. You just need to learn HTML, CSS, <br>Javascript and you are good to go</p>
            <a href="" class="hero-btn">Visit Us To know More</a>
        </div>
    </section>

    <!-- --------- Course --------------->
    <section class="course">
        <h1>Course We Offer</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem unde aut atque quo rerum tenetur reiciendis rem deserunt</p>

        <div class="row">
            <div class="course-col">
                <h3>Intermediate</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque soluta omnis ab laborum vitae incidunt nam quam corrupti assumenda quasi. Optio temporibus corporis natus veniam facilis adipisci culpa nostrum veritatis.</p>
            </div>
            <div class="course-col">
                <h3>Degree</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque soluta omnis ab laborum vitae incidunt nam quam corrupti assumenda quasi. Optio temporibus corporis natus veniam facilis adipisci culpa nostrum veritatis.</p>
            </div>
            <div class="course-col">
                <h3>Post Graduation</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque soluta omnis ab laborum vitae incidunt nam quam corrupti assumenda quasi. Optio temporibus corporis natus veniam facilis adipisci culpa nostrum veritatis.</p>
            </div>
        </div>
    </section>

    <!-- -------- campus -------------- -->
    <section class="campus">
        <h1>Our Global Campus</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem unde aut atque quo rerum tenetur reiciendis rem deserunt</p>
        <div class="row">
            <div class="campus-col">
                <img src="images/london.png">
                <div class="layer">
                    <h3>DENPASAR</h3>
                </div>
            </div>
            <div class="campus-col">
                <img src="images/newyork.png">
                <div class="layer">
                    <h3>BADUNG</h3>
                </div>
            </div>
            <div class="campus-col">
                <img src="images/washington.png">
                <div class="layer">
                    <h3>JIMBARAN</h3>
                </div>
            </div>
        </div>
    </section>

    <!-- ------------ Facilities -------------- -->

    <section class="facilities">
        <h1>Our Facilities</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem unde aut atque quo rerum tenetur reiciendis rem deserunt</p>
        <div class="row">
            <div class="facilities-col">
                <img src="images/library.png">
                <h3>World Class Library</h3>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem unde aut atque quo rerum tenetur reiciendis rem deserunt</p>
            </div>
            <div class="facilities-col">
                <img src="images/basketball.png">
                <h3>Largest Playground</h3>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem unde aut atque quo rerum tenetur reiciendis rem deserunt</p>
            </div>
            <div class="facilities-col">
                <img src="images/cafeteria.png">
                <h3>Tasty and Healthy Food</h3>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem unde aut atque quo rerum tenetur reiciendis rem deserunt</p>
            </div>
        </div>

    </section>

    <!-- -------------- Testimonials ----------- -->

    <section class="testimonials">
        <h1>What Our Student Say</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem unde aut atque quo rerum tenetur reiciendis rem deserunt</p>

        <div class="row">
            <div class="testimonials-col">
                <img src="images/user1.jpg">
                <div>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem unde aut atque quo rerum tenetur reiciendis rem deserunt</p>
                    <h3>Christine Berkley</h3>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-regular fa-star"></i>
                </div>
            </div>
            <div class="testimonials-col">
                <img src="images/user2.jpg">
                <div>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem unde aut atque quo rerum tenetur reiciendis rem deserunt</p>
                    <h3>Christine Berkley</h3>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-regular fa-star"></i>
                </div>
            </div>
            
        </div>
    </section>

    <!-- ------------- Call To Action ---------------- -->

    <section class="cta">
        <h1>Enroll For Our Various Online Courses<br>Anywhere From The World</h1>
        <a href="" class="hero-btn">CONTACT US</a>
    </section>

    <!-- ------------- Footer ---------------- -->

    <section class="footer">
        <h4>About Us</h4>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. <br>Voluptatem unde aut atque quo rerum tenetur reiciendis rem deserunt</p>
        <div class="icons">
            <i class="fa-brands fa-facebook"></i>
            <i class="fa-brands fa-twitter"></i>
            <i class="fa-brands fa-instagram"></i>
            <i class="fa-brands fa-youtube"></i>
        </div>
        <p>Made with <i class="fa-solid fa-heart"></i> bikinCoding</p>
    </section>

    <!-- ------------- javascript menu toogle ---------->
    <script>
        var navLinks = document.getElementById("navLinks");
        function showMenu(){
            navLinks.style.right = "0";
        }
        function hideMenu(){
            navLinks.style.right = "-300px";
        }
    </script>
</body>
</html>

File: style.css

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

.header {
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7), rgba(4,9,30,0.7)), url(images/banner.png); 
    background-position: center;
    background-size: cover;
    position: relative;
}
nav {
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
}
nav img {
    width: 150px;
}

.nav-links{
    flex: 1;
    text-align: right;
}

.nav-links ul li {
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}

.nav-links ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 13px;
}

.nav-links ul li::after{
    content: '';
    width: 0%;
    height: 2px;
    background: #f44336;
    display: block;
    margin: auto;
}

.nav-links ul li:hover::after{ 
    width: 100%;
}

.text-box {
    width: 90%;
    color:#fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.text-box h1{
    font-size: 62px;
}

.text-box p{
    margin: 10px 0 40px;
    font-size: 14px;
    color: #fff;
}

.hero-btn {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
}

.hero-btn:hover {
    border: 1px solid #f44336;
    background: #f44336;
    transition: 1s;
}

nav .fa-solid{
    display: none;
}

@media(max-width: 700px){
    .text-box h1{
        font-size: 20px;
    }
    .nav-links ul li {
        display: block;
    }
    .nav-links {
        position: fixed;
        background: #f44336;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -300px;
        text-align: left;
        z-index: 2;
        transition: 1s;
    }

    nav .fa-solid{
        display: block;
        color: #fff;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }
    .nav-links {
        padding: 30px;
    }
}

/* ------------ course ------------ */

.course {
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
}

h1 {
    font-size: 36px;
    font-weight: 600;
}

p{
    color: #777;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px;
}

.row {
    margin-top: 5%;
    display:flex;
    justify-content: space-between;
}

.course-col{
    flex-basis: 31%;
    background: #fff3f3;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
}

h3 {
    text-align: center;
    font-weight: 600;
    margin: 10px 0;
}

.course-col:hover {
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
}

@media(max-width: 700px){
    .row{
        flex-direction: column;
    }
}

/* ------------campus-------------- */
.campus {
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
}

.campus-col {
    flex-basis: 32%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.campus-col img{
    width: 100%;
    display: block;
}

.layer{
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}

.layer:hover{
    background: rgba(226, 0, 0, 0.7);
}

.layer h3 {
    width: 100%;
    font-weight: 500;
    color: #fff;
    font-size: 26px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    transition: 0.5s;
}

.layer:hover h3{
    bottom: 49%;
    opacity: 1;
}

/* ------------ facilities ------------ */

.facilities{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
}

.facilities-col{
    flex-basis: 31%;
    border-radius: 10px;
    margin-bottom: 5%;
    text-align: left;
}

.facilities-col img {
    width: 100%;
    border-radius: 10px;
}

.facilities-col p{
    padding: 0;
}

.facilities-col h3 {
    margin-top: 16px;
    margin-bottom: 15px;
    text-align: left;
}


/* -------------- testimonials ----------------- */

.testimonials {
    width: 80%;
    margin: auto;
    padding-top: 10px;
    text-align: center;
}

.testimonials-col {
    flex-basis: 44%;
    border-radius: 10px;
    margin-bottom: 5%;
    text-align: left;
    background: #fff3f3;
    padding: 25px;
    cursor: pointer;
    display: flex;
}

.testimonials-col img{
    height: 40px;
    margin-left: 5px;
    margin-right: 30px;
    border-radius: 50px;
}

.testimonials-col p {
    padding: 0;
}

.testimonials-col h3 {
    margin-top: 15px;
    text-align: left;
}

.testimonials-col .fa-solid, .fa-regular {
    color: #f44336;
}

@media(max-width: 700px){
    .testimonials-col img{
        margin-left: 0px;
        margin-right: 15px;
    }
}

/* ------------ cta ---------------- */

.cta {
    margin: 100px auto;
    width: 80%;
    background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(images/banner2.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    text-align: center;
    padding: 100px 0;
}

.cta h1 {
    color: #fff;
    margin-bottom: 40px;
    padding: 0;
}

@media(max-width: 700px){
    .cta h1 {
        color: #fff;
        font-size: 20px;
        padding: 10px;
    }
}

/* ------------ footer ---------------- */

.footer{
    width: 100%;
    text-align: center;
    padding: 30px 0;
}

.footer h4 {
    margin-bottom: 25px;
    margin-top: 20px;
}

.footer .fa-brands, .fa-solid{
    color: #f44336;
    margin: 0px 13px;
    cursor: pointer;
    padding: 18px 0;
}

Artikel Terkait :

image
Bootstrap 5 Dasar
Soal Latihan dan Contoh Form Kontrol di Bootstrap 5
30 April, 2024
Ade Bratajaya Pradana
questionmark, info, help-308636.jpg
C Dasar
Tanya Jawab C Bagian 1
29 January, 2024
Ade Bratajaya Pradana
image-3
CSS Dasar HTML Prakerin Tutorial
Layout Web Menggunakan HTML dan CSS
19 January, 2023
Ade Bratajaya Pradana
image-1
Dasar MySQL PHP Prakerin Tutorial
Membuat CRUD Native PHP
18 January, 2023
Ade Bratajaya Pradana
image
Dasar
Membuat Halaman Beranda Menggunakan CodeIgniter4 Dan AdminLTE
05 September, 2022
Ade Bratajaya Pradana
1
Construct 3 Dasar
Membuat Game Flappy Bird Menggunakan Construct 3
08 August, 2022
Ade Bratajaya Pradana
ci 4 logo
Code Igniter 4 Dasar
Struktur Folder CodeIgniter 4 Beserta Fungsinya
20 July, 2022
Ade Bratajaya Pradana
download-xampp
Dasar
Apa itu XAMPP?
19 July, 2022
Ade Bratajaya Pradana
image-10
Dasar
Aturan responsive bootstrap
22 October, 2021
Ade Bratajaya Pradana
Code Igniter 4 Dasar MySQL
Cara membuat inner join pada Code Igniter 3
19 October, 2021
Ade Bratajaya Pradana
Ade Bratajaya Pradana

Ade Bratajaya Pradana

Saya adalah seorang programmer sekaligus guru yang mengajar di SMK TI Bali Global Badung. Antusias dengan dunia programming dan pendidikan. Senang berbagi ilmu tentang teknologi dan berita terbaru seputar IT. Memiliki visi memajukan IT di Indonesia khususnya di Pulau Bali. .

Leave a Comment

Your email address will not be published. Required fields are marked *