Monday, November 20, 2023

Responsive Design with HTML and CSS SPYDEVCODE

 In the world of web development, creating responsive designs is essential to ensure a seamless user experience across various devices. In this tutorial, we'll explore a sample HTML and CSS code for building a responsive webpage. codePen Link


Responsive Website Design Templete
Responsive Website Design


The HTML Structure


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Responsive Design</title>
</head>
<body>
    <section class="container">
        <div class="main-container">

            <nav class="navbar">
                <div class="navbar-container container">
                    <input type="checkbox" name="" id="">
                    <div class="hamburger-lines">
                        <span class="line line1"></span>
                        <span class="line line2"></span>
                        <span class="line line3"></span>
                    </div>
                    <ul class="menu-items">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Category</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Testimonial</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                    <h1 class="logo">Navbar</h1>
                </div>
            </nav>

            <div class="main">
            <div class="main-text">
          <h4>Lorem ipsum dolor sit amet!</h4>
         <h1>Build Earn<ion-icon name="flash"></ion-icon> Automate</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
At consequuntur, quidem amet rem sapiente in. Officia beatae quia vel
atque sunt iure placeat, culpa modi! Necessitatibus eaque doloribus laudantium
labore?</p>
    <div class="btns">
    <a href="https://codepen.io/amkamble/pen/yLZvwov" class="btn">
    Get Code <ion-icon name="code-slash"></ion-icon></a>
    <a href="#" class="btn">Explore <ion-icon name="arrow-forward"></ion-icon></a>
                </div>
            </div>
        </div>

        </div>
    </section>
   
    <span class="circle-1"></span>
    <span class="circle-2"></span>

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js">
</script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js">
</script>
   
</body>
</html>

The HTML structure includes sections for the navigation bar, main content, and circular elements for a visually appealing design.

Styling with CSS

        CodePen Link Click The Given Code Pen Link To live Demo

  @import url('https://fonts.googleapis.com/css2?family=Edu+TAS+Beginner:wght@500&family=Gluten:wght@500&family=Merienda:wght@700&family=Poppins&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(109.6deg, rgb(17, 19, 23)
11.2%, rgb(11, 18, 24) 51.2%, rgb(6, 18, 24) 98.6%);
}

a{
    text-decoration: none;
    color: #fff;
}
li{
    list-style: none;
}
.container{
    width: 100%;
    height: 100vh;
    position: relative;
    display: block;
}
.main-container{
    width: 100%;
    color: #fff;
    position: relative;
}

.navbar input[type="checkbox"],
.navbar .hamburger-lines{
    display: none;
}

.container{
    max-width: 1200px;
    width: 100%;
    position: fixed;
    top: 0;
    margin: auto;
}

.navbar{
    width: 100%;
    color: #fff;
    opacity: 0.85;
    z-index: 100;
}

.navbar-container{
    display: flex;
    justify-content: space-between;
    height: 50px;
    margin-top: 10px;
    align-items: center;
}

.menu-items{
    order: 2;
    display: flex;
}
.logo{
    order: 1;
    font-size: 2.3rem;
}

.menu-items li{
    list-style: none;
    margin-left: 1.5rem;
    font-size: 1.2rem;
}

.navbar a{
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease-in-out;
}

.navbar a:hover{
    color:  rgb(19, 119, 220) ;
}


.main{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
    text-align: center;
}
.main-text{
    width: 70%;
    margin-top: 5%;
}
.main-text h4{
    font-size: 15px;
    padding: auto;
    color: skyblue;
    margin-top: 10px;
}
.main-text h1{
    color: #fff;
    margin-top: 10px;
    font-size: 3rem;
    font-weight: bolder;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
 h1 [name="flash"]{
    font-size: 2.3rem;
    color: rgb(14, 156, 188);
    text-align: center;
    margin-top: 10px;
}

.main-text p{
    padding: 10px;
    margin-top: 5px;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    line-height: 1.5rem;
    text-align: center;

}

.main-text .btns{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    padding-top: 20px;
    margin-top: 10px;
}
.main-text .btns .btn{
   border: 2px solid rgb(107, 41, 194);
    padding: 10px 40px;
    margin: 15px;
    border-radius: 20px;
    transition: 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

[name="code-slash"] ,[name="arrow-forward"]{
    margin: 0 5px;
    font-size: 1rem;
}
.btn:nth-child(1){
    background-color:rgb(107, 41, 194);
}
.btns a:hover{
    background-color:rgb(107, 41, 194);
}



 .circle-1{
    position: absolute;
    display: flex;
    height: 300px;
    width: 300px;
    left: 0%;
    top: 50%;
    border-radius: 50%;
    filter: blur(70px);
    background: linear-gradient(180.8deg, rgb(234, 8, 211) 6.9%,
    rgb(73, 6, 70) 73.2%);
    z-index: -999;
}

.circle-1::after {
    content:"";
    position: absolute;
    height: 90%;
    width: 90%;
    left: 10%;
    top:30%;
    border-radius: 50%;
    background: linear-gradient(180.8deg, rgb(19, 119, 220) 6.9%,
    rgb(73, 6, 70) 73.2%);
  }

  .circle-2{
    position: absolute;
    display: flex;
    height: 300px;
    width: 300px;
    right: 0;
    border-radius: 50%;
    filter: blur(80px);
    background: linear-gradient(180.8deg, rgb(27, 10, 139) 6.9%,
    rgb(73, 6, 70) 73.2%);
    z-index: -999;
}

.circle-2::after {
    content:"";
    position: absolute;
    height: 90%;
    width: 90%;
    right: -20%;
    top: -120px;
    border-radius: 50%;
    background: linear-gradient(180.8deg, rgb(139, 10, 36) 6.9%,
    rgb(73, 6, 70) 73.2%);
  }


 
@media (max-width: 920px){
    .navbar-container input[type="checkbox"]:checked ~ .logo{
        display: none;
   
    }
   
    .navbar-container input[type="checkbox"],
    .navbar-container .hamburger-lines{
        display: block;
       
    }

    .navbar-container{
        display: block;
        position: relative;
        height: 64px;
        margin-top: 5px;
    }

    .navbar-container input[type="checkbox"]{
        position: absolute;
        display: block;
        height: 32px;
        width: 30px;
        top: 20px;
        left: 20px;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
    }

    .navbar-container .hamburger-lines{
        display: block;
        height: 20px;
        width: 25px;
        position: absolute;
        top: 20px;
        left: 40px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .navbar-container .hamburger-lines .line{
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 10px;
        background: white;
    }
   
    .navbar-container .hamburger-lines .line1{
        transform-origin: 0% 0%;
        transition: transform 0.3s ease-in-out;
    }

    .navbar-container .hamburger-lines .line2{
        transition: transform 0.2s ease-in-out;
    }

    .navbar-container .hamburger-lines .line3{
        transform-origin: 0% 100%;
        transition: transform 0.3s ease-in-out;
    }

    .navbar .menu-items{
        padding-top: 100px;
        background: transparent;
        height: 100vh;
        max-width: 300px;
        transform: translate(-150%);
        display: flex;
        flex-direction: column;
        margin-left: 00px;
        padding-left: 40px;
        transition: transform 0.5s ease-in-out;
       background-color: rgba(0,0,0,0.5);
       
    }

    .navbar .menu-items li{
        margin-bottom: 1.8rem;
        font-size: 1.7rem;
        font-weight: 500;
    }

    .logo{
        position: absolute;
        top: 10px;
        right: 15px;
        margin-right: 50px;
        font-size: 1.5rem;
    }

   
}

@media (max-width: 768px){
    .navbar{
        opacity: 0.95;
    }

    .navbar-container input[type="checkbox"],
    .navbar-container .hamburger-lines{
        display: block;
       
    }

    .navbar-container{
        display: block;
        position: relative;
        height: 64px;
        margin-top: 5px;
    }

    .navbar-container input[type="checkbox"]{
        position: absolute;
        display: block;
        height: 32px;
        width: 30px;
        top: 20px;
        left: 20px;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
    }

    .navbar-container .hamburger-lines{
        display: block;
        height: 28px;
        width: 35px;
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .navbar-container .hamburger-lines .line{
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 10px;
        background: white;
    }
   
    .navbar-container .hamburger-lines .line1{
        transform-origin: 0% 0%;
        transition: transform 0.3s ease-in-out;
    }

    .navbar-container .hamburger-lines .line2{
        transition: transform 0.2s ease-in-out;
    }

    .navbar-container .hamburger-lines .line3{
        transform-origin: 0% 100%;
        transition: transform 0.3s ease-in-out;
    }

    .navbar .menu-items{
        padding-top: 100px;
        background: transparent;
        height: 100vh;
        max-width: 300px;
        transform: translate(-150%);
        display: flex;
        flex-direction: column;
        margin-left: -40px;
        padding-left: 40px;
        transition: transform 0.5s ease-in-out;
       background-color: rgba(0,0,0,0.5);
       
    }

    .navbar .menu-items li{
        margin-bottom: 1.8rem;
        font-size: 1.1rem;
        font-weight: 500;
    }

    .logo{
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 1.5rem;
    }

    .navbar-container input[type="checkbox"]:checked ~ .menu-items{
        transform: translateX(0);
    }

    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1{
        transform: rotate(45deg);
    }

    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2{
        transform: scaleY(0);
    }

    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3{
        transform: rotate(-45deg);
    }


    .main-text{
        margin-top: 20%;
    }

    .main-text h4{
        font-size: 15px;
        padding: auto;
       
    }
    .main-text h1{
        color: #fff;
        font-size: 1.4rem;
        padding-bottom:10px;
    }
     h1 [name="flash"]{
        font-size: 1.7rem;
        color: rgb(14, 156, 188);
        text-align: center;
        margin-top: 5px;
    }
   
    .main-text p{
        padding: 0 10px;
        margin-top: 5px;
        font-size: 0.8rem;
    }
   
    .main-text .btns .btn{
        padding: 7px 25px;
        margin: 5px;
    }
   
    [name="code-slash"] ,[name="arrow-forward"]{
        margin: 0 5px;
        font-size: 0.9rem;
    }

}

@media (max-width: 500px){
    .navbar-container input[type="checkbox"]:checked ~ .logo{
        display: none;
    }
   
    .navbar-container input[type="checkbox"],
    .navbar-container .hamburger-lines{
        display: block;
       
    }

    .navbar-container{
        display: block;
        position: relative;
        height: 64px;
        margin-top: 5px;
    }

    .navbar-container input[type="checkbox"]{
        position: absolute;
        display: block;
        height: 32px;
        width: 30px;
        top: 20px;
        left: 20px;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
    }

    .navbar-container .hamburger-lines{
        display: block;
        height: 20px;
        width: 25px;
        position: absolute;
        top: 20px;
        left: 40px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .navbar-container .hamburger-lines .line{
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 10px;
        background: white;
    }
   
    .navbar-container .hamburger-lines .line1{
        transform-origin: 0% 0%;
        transition: transform 0.3s ease-in-out;
    }

    .navbar-container .hamburger-lines .line2{
        transition: transform 0.2s ease-in-out;
    }

    .navbar-container .hamburger-lines .line3{
        transform-origin: 0% 100%;
        transition: transform 0.3s ease-in-out;
    }

    .navbar .menu-items{
        padding-top: 100px;
        background: transparent;
        height: 100vh;
        max-width: 300px;
        transform: translate(-150%);
        display: flex;
        flex-direction: column;
        margin-left: 00px;
        padding-left: 40px;
        transition: transform 0.5s ease-in-out;
       background-color: rgba(0,0,0,0.5);
       
    }

    .navbar .menu-items li{
        margin-bottom: 1.8rem;
        font-size: 1.1rem;
        font-weight: 500;
    }

    .logo{
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 1.5rem;
        margin-right: 50px;
    }

   
}

The accompanying CSS code provides styling for the entire webpage, from the body to the navigation bar, main content, and responsive design adjustments for different screen sizes.

Key Features

  1. Navigation Bar: The navigation bar includes a hamburger menu for a clean and responsive design. The menu items are styled with a smooth hover effect.

  2. Main Content: The main content section features a bold heading, subheading, and a call-to-action button. The use of Ionicons adds visually appealing icons to the buttons.

  3. Circular Elements: The webpage includes circular elements with gradient colors, enhancing the overall visual appeal. The use of the ::after pseudo-element adds depth to the circles.

  4. Responsive Design: The CSS includes media queries for responsiveness. The navigation bar transforms into a mobile-friendly version on smaller screens, providing a better user experience.

Conclusion

Building a responsive webpage is crucial for reaching users on different devices. This HTML and CSS template serves as a foundation for creating visually appealing and user-friendly designs. Feel free to customize and expand upon this code for your specific projects.



at No comments:
Labels:

Friday, November 17, 2023

Building a Simple Stopwatch with HTML and JavaScript

 

In the fast-paced world of web development, it's crucial to have tools that help us manage time effectively. One such tool is a stopwatch, and in this tutorial, we'll walk through the process of building a simple stopwatch using HTML and JavaScript.

How We can create A simple stopwatch with use of HTML CSS and JavaScript.

Output:

stopwatch png
Output of project : Stopwatch


HTML Structure

To begin, let's take a look at the HTML structure that forms the foundation of our stopwatch:

html
<div class="stopWatch">
  <div id="timer">00:00:00</div>
  <div id="buttons">
    <button id="start">Start</button>
    <button id="stop">Stop</button><button id="reset">Reset</button>
  </div>
</div>

Here, we have a container div with the class stopWatch that houses the display area (timer) and control buttons (start, stop, and reset

We recently create a structure of Our Projects Now Its Time to Design it With the help of CSS Okay Kindly Select the Whole Code and Paste it Your Styles.css File and Save it Successfully.

body {
  background-color: #f0f0f0;
  font-family: "Poppins", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  align-items: center;
}
.stopWatch{
  height: 300px;
  width: 70%;
  background-color: #223;
  border-radius: 10px;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}
#timer {
  font-size: 7rem;
  font-weight: 700;
  text-shadow: 2px 2px #223;
  color: #f0f0f0;
  width: 600px;
  text-align: center;
  margin: 40px auto;
}

#buttons {
  display: flex;
  justify-content: center;
}

button {
  background-color: #fff;
  color: black;
  border: none;
  font-size: 20px;
  font-weight: 600;
  padding: 1.1rem 3rem;
  margin: 1rem;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  transition: all 0.2s;
  transition: 0.5s ease-in-out;
}

button:hover {
  background-color: rgb(44, 44, 66);
  color: #f0f0f0;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}



@media (max-width: 800px) {
  #timer {
    font-size: 4rem;
    width: 350px;
  }

  button {
    font-size: 1.1rem;
    padding: 1rem 1.5rem;
  }
}

JavaScript Implementation

Let's break down the JavaScript code that powers our enhanced stopwatch:

javascript
const timerEl = document.getElementById("timer");
const startButtonEl = document.getElementById("start");
const stopButtonEl = document.getElementById("stop");
const resetButtonEl = document.getElementById("reset");

let startTime = 0;
let elapsedTime = 0;
let timerInterval;

In this section, we set up variables to capture elements from the HTML and define variables to manage the stopwatch's state.

Start Timer Function

javascript
function startTimer() {
  startTime = Date.now() - elapsedTime;

  timerInterval = setInterval(() => {
    elapsedTime = Date.now() - startTime;
    timerEl.textContent = formatTime(elapsedTime);
  }, 10);

  startButtonEl.disabled = true;
  stopButtonEl.disabled = false;
}

The startTimer function initializes the timer, capturing the start time and updating the elapsed time at regular intervals. It also disables the start button while enabling the stop button.

Format Time Function

javascript
function formatTime(elapsedTime) {
  // ... precise time formatting logic
}

The formatTime function takes the elapsed time and formats it into hours, minutes, seconds, and milliseconds for a user-friendly display.

Stop and Reset Functions

javascript
function stopTimer() {
  clearInterval(timerInterval);
  startButtonEl.disabled = false;
  stopButtonEl.disabled = true;
}

function resetTimer() {
  clearInterval(timerInterval);
  elapsedTime = 0;
  timerEl.textContent = "00:00:00.00";
  startButtonEl.disabled = false;
  stopButtonEl.disabled = true;
}

The stopTimer function stops the timer and toggles button states, while the resetTimer function resets the timer to zero and updates the display accordingly.

Event Listeners

javascript
startButtonEl.addEventListener("click", startTimer);
stopButtonEl.addEventListener("click", stopTimer);
resetButtonEl.addEventListener("click", resetTimer);

Lastly, we set up event listeners for the start, stop, and reset buttons to trigger their respective functions.

Conclusion

Congratulations! You've successfully built an enhanced stopwatch with JavaScript, featuring precise time formatting and intuitive controls. Feel free to customize and integrate this stopwatch into your projects. Time is on your side!


at No comments:
Labels:

Latest Updates

Responsive Design with HTML and CSS SPYDEVCODE