Web Development: October 2020

Friday, October 30, 2020

OFF CANVAS MENU CSS

body{

    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body::before{
    content: "";
    background: url('Images/back5.jpg') no-repeat center center/cover;
    position: absolute;
    height: 100vh;
    width: 100%;
    z-index: -1;
    opacity: 0.95;
}

.navbar{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-radius: 5px;
    padding-top: 20px;
    z-index: 1;
    transition:  display 0.5s;
}

.navbar ul{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
}

.navbar ul li a{
    text-decoration: none;
    font-size: 20px;
    color: white;
    font-weight: bold;
    font-family: cursive;
    margin-left: 50px;
    padding: 5px;
    border: 2px solid white;
    border-radius: 8px;
}

.navbar ul li a:hover{
    background-color: rgb(212, 10, 212);
    color: black;
}

.navbar .searchbar {
    width: min-content;
    max-width: 500px;
    margin-right: 50px;
    display: flex;
    align-items: center;
}

.navbar .searchbar input {
    width: 400px;
    font-size: 15px;
    border-radius: 5px;
    outline: none;
    background-color: black;
    color: white;
    font-weight: bold;
    border: 2px solid white;
}

.navbar .searchbar input:focus {
    width: 500px;
}

.main-container{
    height: 500px;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
}

.main-container .header{
    font-size: 30px;
    color: rgb(24, 221, 24);
}

.main-container .header-button .getStarted{
    background-color: rgb(206, 9, 140);
    font-size: 25px;
    outline: none;
    color: white;
    padding: 10px;
    width: 200px;
    border-radius: 5px;
}
.main-container .header-button .getStarted:hover{
    background-color: rgb(122, 6, 84);
    border-radius: 10px;
  
}

OFF CANVAS MENU HTML JS

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>syncprogramming.com</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .sideNav{
            height: 100%;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: rgb(206, 9, 140);
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
            width: 0;
            
        }

        .sideNav a{
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: white;
            display: block;
            transition: 0.3s;

        }

        .sideNav a:hover{
            color: yellow;
        }

        .sideNav .closeBtn{
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }

        #main{
            transition: margin-left 0.5s;
            padding: 16px;
        }
    </style>
    
</head>
<body>
    <nav class="navbar" id="navbar">
        <ul>
            <li style="color: white; font-size: 20px; cursor: pointer;" onclick="openNav()" id="open"><span>&#9776</span></li>
            <li><a href="">Home</a></li>
            <li><a href="">Contact us</a></li>
            <li><a href="">Services</a></li>
            <li><a href="">About us</a></li>
            <li><a href="">Our Clients</a></li>
        </ul>
        
        <div class="searchbar">
            <input type="text" placeholder="SEARCH" style="text-align: center;">
        </div>
    </nav>

    <div class="sideNav" id="mySidenav">
        <a href="#" class="closeBtn" onclick="closeNav()">&times</a>
        <a href="">About</a>
        <a href="">Services</a>
        <a href="">Clients</a>
        <a href="">Contact</a>
    </div>
    
    <div class="main-container" id="main">
        <div class="header">
            <h1>Welcome to Sync Programming</h1>
            <p style="text-align: center;">Start your own Career</p>
        </div>
        <div class="header-button">
            <button class="getStarted">Get Started</button>
        </div>
    </div>

    <script>
        function openNav(){
            document.getElementById('mySidenav').style.width = '250px';
            document.getElementById('main').style.marginLeft = '250px'
            document.getElementById('open').style.display = 'none';
            document.getElementById('navbar').style.marginLeft = '250px'
            document.getElementById('navbar').style.display = 'none'
        }

        function closeNav(){
            document.getElementById('mySidenav').style.width = '0';
            document.getElementById('main').style.marginLeft = '0'
            document.getElementById('open').style.display = 'block';
            document.getElementById('navbar').style.marginLeft = '0'
            document.getElementById('navbar').style.display = 'flex'
        }
    </script>

    
</body>
</html>

FIXED SIDE NAVIGATION MENU CSS .....

body,html{

    height: 100%;
    margin: 0;
    font-size: 16px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 400;
    line-height: 1.8rem;
    color: #666;
}

.pimg1, .pimg2 , .pimg3{
    position: relative;
    opacity: 0.75;
    background-position: center;
    background-attachment: fixed;
}

.pimg1{
    background-image: url('img/pexels-pixabay-40884.jpg');
    min-height: 100%;
    background-size: cover;
}
.pimg2{
    background-image: url('img/pexels-fnfoto-3045635.jpg');
    min-height: 400px;
    background-size: cover;
}
.pimg3{
    background-image: url('img/pexels-taryn-elliott-4098987.jpg');
    min-height: 400px;
    background-size: cover;
}

.section{
    text-align: center;
    padding: 50px 80px;
    background-color: black;
    color: white;
}

.ptext{
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 30px;
}

.ptext .border{
    background-color: green;
    padding: 10px;
    color: yellow;
    border-radius: 5px;

}

FIXED SIDE NAVIGATION MENU HTML...

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Sidebar</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="sidenav">
        <a href="">Home</a>
        <a href="">About</a>
        <a href="">Clients</a>
        <a href="">Services</a>
        <a href="">Contact</a>
    </div>

    <div class="main">
        <h1>Welcome to sync Programming</h1>
        <h4>You can subscribe to my channel</h4>
        <h4>Please like this video before leaving</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit,
 ratione ipsum veritatis
 suscipit quae mollitia dolor magnam accusantium dolorem,
 aliquam beatae distinctio hic eveniet natus? Voluptas eius sunt 
incidunt pariatur quos, eum, vel est nulla accusamus aut quia. Voluptas
 blanditiis, odit amet veniam dignissimos excepturi eligendi eaque 
ipsam alias aspernatur animi ab, delectus nisi soluta itaque quam repellat
 asperiores dicta ut! Laudantium nostrum laboriosam, non cum 
quas vel ex veritatis neque aspernatur quaerat harum. Et quae
 dolorem harum veniam architecto odio quidem rem dignissimos labore
 voluptatem consectetur, temporibus eos perspiciatis sunt eaque sint, dolores 
recusandae praesentium? Fuga placeat eum quod. Optio, ad ea? At ab maxime
 voluptatem provident cum. Quaerat inventore quibusdam culpa illum, consect
etur ea ut facilis, debitis ad sunt quam perspiciatis a, vero quasi? Soluta 
dolorem facilis beatae voluptates esse perspiciatis eum in quisquam
, architecto reiciendis cupiditate, veritatis voluptas quis earum, nam 
voluptatum sit nisi illum numquam hic quo magnam? Harum eum, blanditiis, sed corporis ea exercitationem obcaecati totam nihil consequuntur deleniti commodi eveniet placeat? Porro magni adipisci repellendus, quisquam consectetur expedita quibusdam nesciunt eaque architecto voluptate ullam accusantium distinctio eius eos, pariatur voluptatum maiores repudiandae, ipsum provident nulla tenetur. Eligendi impedit dolorum possimus et labore sunt, exercitationem perferendis. Culpa corrupti repellendus hic soluta, nulla id asperiores quaerat nam, amet sequi unde esse sed harum nostrum atque vero neque? Itaque necessitatibus, dolore sunt sed, eum corrupti at fugit velit perferendis autem, quidem ad omnis ipsam quisquam similique suscipit rem nemo numquam doloremque veniam architecto deleniti! Tempore non, optio tempora esse nisi quis fugit assumenda deserunt. Tenetur veritatis et iste accusantium sint laudantium voluptatibus mollitia, optio aperiam at ab. Dolorem aperiam at quas modi id? Ipsa delectus odio temporibus! Alias ex nesciunt labore qui deleniti nihil ad fuga perspiciatis corrupti ullam hic atque dolorum corporis ipsa, praesentium porro? Porro, nulla provident eaque nihil quae impedit quaerat labore inventore consequatur libero ducimus deleniti necessitatibus distinctio aspernatur numquam quo ratione doloremque quis suscipit. Adipisci unde earum ut exercitationem provident veritatis, amet corporis corrupti possimus. Vel aliquid suscipit obcaecati doloremque consectetur accusamus assumenda molestias, perferendis eum vitae facilis id distinctio. Deserunt modi quos similique dignissimos deleniti nam explicabo et veniam nostrum, adipisci eveniet corporis nihil consequuntur amet neque incidunt officia enim? Exercitationem tempora odit ut itaque. Labore voluptates voluptas doloribus, omnis numquam neque vel, cumque impedit blanditiis et nostrum qui. Corporis, dolor perspiciatis porro officia et maxime facere accusamus hic harum cumque vitae obcaecati veniam ut autem ratione expedita rem eligendi voluptate quam dolores. Veniam, ratione, nesciunt, architecto asperiores nulla eius deserunt sint corporis necessitatibus assumenda nihil officiis laudantium. Animi non provident temporibus tenetur vel doloribus? Amet consequatur quas rem mollitia nostrum accusantium maiores culpa eaque aperiam asperiores error delectus debitis, incidunt est totam et architecto eos veniam, illo voluptas quis magnam placeat quia officia? Possimus accusantium eaque cum, sit iure veniam, illo quam facilis quaerat saepe repellendus dolor, alias at necessitatibus ea eos inventore hic eveniet esse! Cupiditate impedit possimus, at, iusto nobis ratione nulla veritatis eius ipsum, maiores cumque provident.</p>


    </div>
</body>
</html>

CREATING INSTAGRAM LOGO USING HTML AND CSS

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ig logo</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html{
            font-size: 62.5px;
        }
        .center-div{
            width: 100vw;
            height: 100vh;
            background-color: black;
            display: grid;
            place-items: center;
        }
        .instaLogo{
            width: 150px;
            height: 150px;
            background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
            border-radius: 30px;
            display: grid;
            place-items: center;

            
        }

        .squareBorder{
            width: 110px;
            height: 110px;
            border: 10px solid white;
            background-color: transparent;
            border-radius: 30px;
            position: relative;
            display: grid;
            place-items: center;

        }
        .squareBorder::before{
            content: "";
            width: 38px;
            height: 38px;
            border: 10px solid white;
            border-radius: 30px;
            background-color: transparent;
            position: absolute;
        }

        .squareBorder::after{
            content: "";
            width: 10px;
            height: 10px;
            border: 1.5px solid white;
            border-radius: 50%;
            background-color: white;
            position: absolute;
            top: 10px;
            right: 8px;

        }
    </style>
</head>
<body>
    <div class="center-div">
        <div class="instaLogo">
            <div class="squareBorder">
            
            </div>
        </div>
    </div>
</body>
</html>

Monday, October 26, 2020

Website Template Css

body{

    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body::before{
    content: "";
    background: url('Images/back5.jpg') no-repeat center center/cover;
    position: absolute;
    height: 100vh;
    width: 100%;
    z-index: -1;
    opacity: 0.95;
}

.navbar{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-radius: 5px;
    padding-top: 20px;
    z-index: 1;
    transition:  display 0.5s;
}

.navbar ul{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
}

.navbar ul li a{
    text-decoration: none;
    font-size: 20px;
    color: white;
    font-weight: bold;
    font-family: cursive;
    margin-left: 50px;
    padding: 5px;
    border: 2px solid white;
    border-radius: 8px;
}

.navbar ul li a:hover{
    background-color: rgb(212, 10, 212);
    color: black;
}

.navbar .searchbar {
    width: min-content;
    max-width: 500px;
    margin-right: 50px;
    display: flex;
    align-items: center;
}

.navbar .searchbar input {
    width: 400px;
    font-size: 15px;
    border-radius: 5px;
    outline: none;
    background-color: black;
    color: white;
    font-weight: bold;
    border: 2px solid white;
}

.navbar .searchbar input:focus {
    width: 500px;
}

.main-container{
    height: 500px;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
}

.main-container .header{
    font-size: 30px;
    color: rgb(24, 221, 24);
}

.main-container .header-button .getStarted{
    background-color: rgb(206, 9, 140);
    font-size: 25px;
    outline: none;
    color: white;
    padding: 10px;
    width: 200px;
    border-radius: 5px;
}
.main-container .header-button .getStarted:hover{
    background-color: rgb(122, 6, 84);
    border-radius: 10px;
  
}

Website Template HTML

        <ul>
            <li style="color: white; font-size: 20px; cursor: pointer;" onclick="openNav()" id="open"><span>&#9776</span></li>
            <li><a href="">Home</a></li>
            <li><a href="">Contact us</a></li>
            <li><a href="">Services</a></li>
            <li><a href="">About us</a></li>
            <li><a href="">Our Clients</a></li>
        </ul>
        
        <div class="searchbar">
            <input type="text" placeholder="SEARCH" style="text-align: center;">
        </div>
    </nav>

    <div class="sideNav" id="mySidenav">
        <a href="#" class="closeBtn" onclick="closeNav()">&times</a>
        <a href="">About</a>
        <a href="">Services</a>
        <a href="">Clients</a>
        <a href="">Contact</a>
    </div>
    
    <div class="main-container" id="main">
        <div class="header">
            <h1>Welcome to Sync Programming</h1>
            <p style="text-align: center;">Start your own Career</p>
        </div>
        <div class="header-button">
            <button class="getStarted">Get Started</button>
        </div>
    </div>

Image Slider Using HTML CSS and Javascript

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Image Slider</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div class="header">
	<h1>Image Slider</h1>
	</div>
	<div class="slideshow-container">
	<div class="myslides fade">
	<div class="numberText">1/6</div>
	<img src="images/athena.jpg" alt="" style="width:100%">
	<div class="text">Athena</div>
	</div>
	<div class="myslides fade">
	<div class="numberText">2/6</div>
	<img src="images/apollo.jpg" alt="" style="width:100%">
	<div class="text">apollo</div>
	</div>
	<div class="myslides fade">
	<div class="numberText">3/6</div>
	<img src="images/hades.jpg" alt="" style="width:100%">
	<div class="text">hades</div>
	</div>
	<div class="myslides fade">
	<div class="numberText">4/6</div>
	<img src="images/zeus.jpg" alt="" style="width:100%">
	<div class="text">zeus</div>
	</div>
	<div class="myslides fade">
	<div class="numberText">5/6</div>
	<img src="images/aphrodite.jpg" alt="" style="width:100%">
	<div class="text">Aphrodite</div>
	</div>
	<div class="myslides fade">
	<div class="numberText">6/6</div>
	<img src="images/poseiden.jpg" alt="" style="width:100%">
	<div class="text">poseiden</div>
	</div>

	<span class="prev" onclick="plusSlides(-1)">&#10094</span>
	<span class="next" onclick="plusSlides(1)">&#10095</span>
	<br>
	<div style="text-align: center;">
	<span class="dot" onclick="currentSlide(1)"></span>
	<span class="dot" onclick="currentSlide(2)"></span>
	<span class="dot" onclick="currentSlide(3)"></span>
	<span class="dot" onclick="currentSlide(4)"></span>
	<span class="dot" onclick="currentSlide(5)"></span>
	<span class="dot" onclick="currentSlide(6)"></span>
	</div>
	</div>
	<script src="index.js"></script>
	</body>
	</html>