Ar-Rahman( HTML, CSS and JS codes)

 😁😁 creating first 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">
    <link rel="stylesheet" href="css/style.css">
    <title>Ar-Rahman</title>
</head>
<body>
    <nav class="navbar background h-nav resp">
        <ul class="nav-list v-class resp">
            <div class="logo"><img src="img/In.png" alt="logo"></div>
            <li> <a href="#home">Home</a> </li>
            <li> <a href="#home">About</a> </li>
            <li> <a href="#home">Services</a> </li>
            <li> <a href="#home">Contact</a> </li>
        </ul>
        <div class="rightNav v-class resp">
            <input type="text" name="Search" id="Search1">
            <button class="btn btn-sm">Search</button> 
        </div>
        <div class="burger">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>

    </nav>
    <section class="background firstSection">
        <div class="box-main">
            <div class="firstHalf">
                <p class="text-big" id="head1">Let them forgive and overlook, do you not wish 
                that Allah should forgive you? For Allah is
                Oft-forgiving, Most Merciful. Quran-24:22. </p>
                <p class="text-small",id="head2">Allah will not be merciful to those, who are not merciful to mankind:- Prophet Muhammad(peace be upon him).</p>
            
             
            </div>
            <div class="secondHalf">
                <img src="img/mercy3.jpg" alt="image">

            </div>
        </div>

    </section>
    <section class="section" id="services">
        <div class="paragraph">
            <p class="sectionTag text-big"> Al-merciful</p>
            <p class="sectionTag textsmall"> “Protect your tongue from slander. It’s one of the most hated crimes and the Almighty has promised severe punishment to the slanderer. Engaging in this sinful act will destroy your good deeds and devalue your worship and prayers. It will also exclude you from His protection.The real test of a man’s integrity is how he reacts when he’s been proven wrong. Blessed is he who’s able to admit his mistake graciously.‬”</p>
        </div>
        <div class="thumbnail">
            <img src="img/mercy8.jpg" alt="image" class="imgFluid">
        </div>
    </section>
    <section class="section section-left" id="about">
        <div class="paragraph">
            <p class="sectionTag text-big"> Al-merciful</p>
            <p class="sectionTag textsmall"> “Protect your tongue from slander. It’s one of the most hated crimes and the Almighty has promised severe punishment to the slanderer. Engaging in this sinful act will destroy your good deeds and devalue your worship and prayers. It will also exclude you from His protection.The real test of a man’s integrity is how he reacts when he’s been proven wrong. Blessed is he who’s able to admit his mistake graciously.‬”</p>
        </div>
        <div class="thumbnail">
            <img src="img/mercy9.jpg" alt="image" class="imgFluid">
        </div>
    </section>
    <section class="section">
        <div class="paragraph">
            <p class="sectionTag text-big"> Al-merciful</p>
            <p class="sectionTag textsmall"> “Protect your tongue from slander. It’s one of the most hated crimes and the Almighty has promised severe punishment to the slanderer. Engaging in this sinful act will destroy your good deeds and devalue your worship and prayers. It will also exclude you from His protection.The real test of a man’s integrity is how he reacts when he’s been proven wrong. Blessed is he who’s able to admit his mistake graciously.‬”</p>
        </div>
        <div class="thumbnail">
            <img src="img/mercy10.jpg" alt="image" class="imgFluid">
            
        </div>
    </section>

    <section class="contact" id="Contact">
        <h2 class="text-center">Contact Us</h2>
        <div class="form">
            
            
            <input class="form-input" type="text" name="name" id="name" placeholder="name ">
            <input class="form-input" type="text" name="phone" id="phone" placeholder="phone ">
            <input class="form-input" type="email" name="email" id="email" placeholder="email">
            <textarea class="form-input"  name="text" id="text" placeholder="Share your Care" cols="30" rows="10"></textarea>
            <button class="btn btn-sm btn-dark">Submit

            </button> 
        </div>
    
    </section>
    <footer class="background">
        <p class="text-footer">
            Copyright &copy; 2021 Ar-Rahman Cares - All rights reserved
        </p>
              
    </footer>
    <script src="js/resp.js"></script>
    
</body>
</html>



css -codes



*{  
    margin:0;
    padding:0;
}
html{
    scroll-behavior: smooth;
}
.navbar{
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0%;
    cursor: pointer;

}    
.logo{
    width:30%;
    display:flex;
    justify-content: center;
    align-items: center;
}
.logo img{
    width:33%;
    border: 3px solid wheat;
    border-radius: 50%;
    margin: 5px;
}
.nav-list{
    width:70%;
    display: flex;
    align-items: center;

}
.nav-list li{
    list-style:none;
    padding: 25px 30px
    


}
.nav-list li a{
    text-decoration: none;
    color: chartreuse;
    font-size: larger;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.nav-list li a:hover{
    color: tomato;
}

.rightNav{
    width:30%;
    text-align:right;
    padding: 0 23px;

}
#Search1{
    padding: 2px;
    font-size: 17px;
    border: 2px color transparent;
    background:grey;
    


}
.background{
    background: rgba(0, 0, 0, 0.7) url('../img/mercy4.jpg');
    background-size:contain 40vh; 
    background-blend-mode: darken;
}
.firstSection{
        height: 70vh;
}
.box-main{
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Times New Roman', Times, serif;
    margin: auto;
    height: 80%;

}
.firstHalf{
    width: 80%;
    display:flex;
    flex-direction: column;
    justify-content: center;
}
.secondHalf{
    width:30%;

}
.secondHalf img{
    width: 70%;
    border: 4px solid white;
    border-radius: 40px;
    display: block;
    margin:auto;
    height:5cm
    

}
.text-big{
    font-size: 25px;
    padding: 30px 40px;


}
.text-small{
    font-size: 22px;
    padding: 30px 40px;
    height: 150px;

}
.btn-sm{
    padding: 3px 10px;
    vertical-align:middle;
    border-radius:10px color white;
    cursor: pointer;
    color: chartreuse;
    background:grey;
    font-family: Verdana, Geneva, Tahoma, sans-serif ;
    top: 20px;
}
.btn-dark{
    color: black;
        border: 2p solid grey;
}
.thumbnail img {
    width: 250px;
    height: 250px;
    border:2 px solid black;
    border-radius: 30px;

}

.paragraph{
    padding:0px 65px;
}
.section{
    
    display: flex;
    align-items: center;
    justify-content:space-evenly;
    max-width: 80%;
    margin: auto;
    font-family: Verdana, Geneva, Tahoma, sans-serif ; 
    font-size: larger; 
    padding: 10px;
    
}
.sectionTag{
    padding: 0 16px;

}
.section-left{
    flex-direction: row-reverse;
}  
.contact{
    background-color: blanchedalmond;
    height: 833px;
}
.text-center{
    text-align: center;
    pad: 33px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
}
.form{
    max-width: 500px;
    margin: 42px auto;
    
}
.form-input{
    margin: 30px 0;
    padding: 5px 3px;
    width: 100%;
    font-size: 19px;
    border: 2px solid grey;
    border-radius: 6px;
    
}
.text-footer{
    text-align: center;
    padding: 30px 0;
    display: flex;
    justify-content: center;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif 
}
.burger{
    display: none;
    position:absolute;
    cursor: pointer;
    right: 5%;
    top: 5%;
    

}    
.line{
    width: 33px;
    background-color: white;
    height: 4px;
    margin: 5px 3px;

}

@media only screen and (max-width:1140px){
    .nav-list{
        flex-direction: column;
    }
    .navbar{
        flex-direction: column;

    }
    .rightNav{
        text-align: center;

    }
    .box-main{
        flex-direction: column-reverse;
        max-width: 100;
    }
    #search1{
        width: 70%;
        display: flex;
    
    }
    .burger{
        display: block;
    }
    .h-nav-resp{
        height:72px;
    }
    .v-class-resp{
        opacity:0;
    }
    .section{
        flex-direction: column-reverse;

    }
    .text-small{
        text-align: center;

    }
    .text-big{
        text-align: center;

    }
    .buttons{
        text-align: center;
    
    }

JS - CODES




burger=document.querySelector('.burger')
navbar=document.querySelector('.navbar')
navList=document.querySelector('.nav-list')
rightNav=document.querySelector('.rightNav')

burger.addEventListener('click', ()=>{
    rightNav.classList.toggle('v-class-resp');
    navList.classList.toggle('v-class-resp');
    navbar.classList.toggle('h-nav-resp');
})











Comments

Post a Comment

Popular posts from this blog

XAMPP, SQL BASIC COMMANDS

 Microsoft Windows [Version 10.0.19042.867] (c) 2020 Microsoft Corporation. All rights reserved. C:\Users\darul Haram>../.. '..' is not recognized as an internal or external command, operable program or batch file. C:\Users\darul Haram>cd../.. C:\>xampp 'xampp' is not recognized as an internal or external command, operable program or batch file. C:\>cd xampp C:\xampp>cd mysql C:\xampp\mysql>cd bin C:\xampp\mysql\bin>../ '..' is not recognized as an internal or external command, operable program or batch file. C:\xampp\mysql\bin>cd .// C:\xampp\mysql\bin>cd ../ C:\xampp\mysql> -u root -p -h localhost '-u' is not recognized as an internal or external command, operable program or batch file. C:\xampp\mysql>cd bin C:\xampp\mysql\bin>cd mysql The system cannot find the path specified. C:\xampp\mysql\bin>mysql -u root -p -h localhost Enter password: Welcome to the MariaDB monitor.  Commands end with ; or \g. Your MariaDB ...
Read more

The Minion Game Hackerrank Solution

Image
  Kevin and Stuart want to play the ' The Minion Game '. Game Rules Both players are given the same string,  . Both players have to make substrings using the letters of the string  . Stuart has to make words starting with  consonants . Kevin has to make words starting with  vowels . The game ends when both players have made all possible substrings. Scoring A player gets  +1  point for each occurrence of the substring in the string  . For Example : String   =  BANANA Kevin's vowel beginning word =  ANA Here,  ANA  occurs twice in  BANANA . Hence, Kevin will get  2  Points. For better understanding, see the image below: Your task is to determine the winner of the game and their score. Function Description Complete the  minion_game  in the editor below. minion_game  has the following parameters: string string:  the string to analyze Prints string:  the winner's name and score, sepa...
Read more

Arrays - DS | HackerRank Solutions

  An   array   is a type of data structure that stores elements of the same type in a contiguous block of memory. In an array,   , of size   , each memory location has some unique index,     (where   ), that can be referenced as     or   . Reverse an array of integers. Note:  If you've already solved our C++ domain's  Arrays Introduction  challenge, you may want to skip this. Example Return  . Function Description Complete the function  reverseArray  in the editor below. reverseArray  has the following parameter(s): int A[n] : the array to reverse Returns int[n] : the reversed array Input Format The first line contains an integer,  , the number of integers in  . The second line contains   space-separated integers that make up  . Constraints Sample Input 1 Copy Download Array: arr 1 4 3 2 4 1 4 3 2 Sample Output 1 2 3 4 1 ## Solutions:1-- import  math impor...
Read more