Skip to main content

How to make the Music website using the HTML and CSS (Source Code) || Creating a Website||codeandman

 

Hey guys how are you all today in this post I am going to give you the source code of my video called How to make Music Website Using HTML and CSS so let's begin:

Source code of index.html is here:

<!doctype html>
<html lang = "en-in">
<head>
    <link rel="stylesheet" href="style.css">
    <title>Music Website using HTML and CSS - codeandman</title>
</head>
<body>
    <header>
        <nav>
            <h1>Gautam Sharma</h1>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Serivces</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">FAQ</a></li>
            </ul>
        </nav>
        <section>
            <h1>Music as your passion</h1>
            <p>Music is your passion as you all know that the music can change 
                any one life and can do anything
            </p>
        </section>
    </header>
</body>
</html>

The Source code of style.css is given here:

*{
    margin:0;
    padding:0;
    font-family:cursive;
    font-weight:bold;
    font-style:italic;
    box-sizing:border-box;
}
li{
    list-style:none;
}
a{
    text-decoration: none;
    text-transform: uppercase;
    color:#0000EE;
}
header{
    height:100vh;
}
nav{
    height:10vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background:transparent; */
    background:linear-gradient(90deg,aqua 50%, rgb(121, 255, 59) 50%);

}
nav h1{
    width:30%;
}
nav ul{
    width:70%;
}
ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
header section{
    display: flex;
    align-items: center;
    justify-content: center;
    height:90vh;
    flex-direction: column;
    background:linear-gradient(90deg,aqua 50%, rgb(121, 255, 59) 50%);
    
}
section h1{
    width:100vw;
    text-align:center;
}
section p {
    width:40%;
}

I hope guys that you liked this source code.

LIKE AND SHARE THE VIDEO.

ALSO SUBSCIBE TO THE CHANNEL IF YOU HAVEN'T.

THANK YOU.

Labels:

Comments

Post a Comment

Popular posts from this blog

Codes Post - Code And Man

Movie Post Code <div class="post-movie-details">      <div class="hide-this-on-index">   <div class="movie-details-insidepost">     <div class="moviethumbnail">       <!--MOVIE POSTER-->  <img alt="Mastaney" src="https://image.tmdb.org/t/p/w300/8vrlTSiMcNlnCQn6oNcgbbKbSn3.jpg" />             </div>     <div class="moviestoryline">       Mastaney is a 2023 Indian Punjabi-language historical action drama film. It stars Tarsem Jassar and Gurpreet Ghuggi with Simi Chahal and Karamjit Anmol in supporting roles. Set in 1739, Nader Shah's undefeated army was attacked by Sikh rebellions. Nader demands to arrest them but it doesn't work out. Five ordinary men are hired to play Sikh rebels but over time they learn what Sikhs are.     </div>   </div>        <div class="movietechdetails"...
Post a Comment
Continue Reading

Arrays and conversion in Javascript || javascript complete course || #7 (sourcecode)

hey guys how are you all today in this post I am going to give you the source code of my video called arrays and  conversion in JavaScript so let's begin:- // ARRAYS in javascript console . log (" This is arrays in js ") var arr1 = [ 32 , 34 , 23 , 23 , 234 ," this ", {     name:" Gautam ",     class : " 8th ",     rollno: 6 } ] console . log ( arr1 ) console . log ( arr1 [ 5 ]) console . log ( arr1 .length) console . log ( arr1 . concat (' main ')); console . log ( arr1 ); // // ---------------------------------------------------- // CONVERSION IN JAVASCRIPT // Converting in to strings var num1 = 45 ; console . log ( num1 ); var str1 = String ( num1 ); console . log ( str1 ); console . log ( typeof str1 ); console . log ( typeof num1 ); var number1 = 33453434 ; console . log ( number1 , typeof number1 ); var string1 = number1 . toString (); console . log ( string1 , typeof string1 ); // ----------------------------...
Post a Comment
Continue Reading

Step by step guide to coding a game in Python

  How to Code a Simple Game in Python Python is a powerful and versatile programming language that can be used for a wide range of applications, including game development. In this tutorial, we will be creating a simple game using the Pygame library in Python. Pygame is a set of Python modules designed for writing video games. It provides functionality for creating 2D graphics, handling events, and playing sounds and music. By the end of this tutorial, you will have a basic understanding of how to create a game using Pygame and Python. Setting up the Development Environment Before we can start coding our game, we must set up our development environment. To do this, we will need to install Python and the Pygame library. If you already have Python installed on your machine, you can install Pygame by running the following command in your terminal: pip install pygame If you don't have Python installed, you can download the latest version from the official Python website. Once you have ...
Post a Comment
Continue Reading