193: Sidebar and topbar(header) and projects

<!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>Portfolio</title>


    <style>
        * {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
    /* text-align: center; */
}

html {
    font-size: 10px;
}

body {
    background-color: #f1f1f1;
    display: flex;
}

.sidebar {
    /* border: 2px solid limegreen; */
    background-color: #fff;
    position: fixed;
    left: 0rem;
    width: 23vw;
    height: 100vh;
    overflow: hidden;
}

.cont {
    padding: 1.1rem;
    padding-top: 1.5rem;
}

.cont img {
    width: 12rem;
    border: 1.5px solid black;
    border-radius: 0.5rem;
}

.cont h1 {
    font-family: cursive;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 2.5rem;
}

.cont p {
    font-family: cursive;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1.6rem;
    color: gray;
}

.element {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.element a {
    text-decoration: none;
    color: black;
    font-size: 1.6rem;
    font-family: cursive;
}

.element img {
    margin-right: 1.2rem;
    width: 1.3rem;
}

.element:hover {
    background-color: #f1f1f1;
}


.social {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    margin-top: 2.1rem;
    margin-bottom: 1.1rem;
}

.social img {
    width: 1.7rem;
}


.main {
    position: absolute;
    right: 0px;
    width: 77vw;
    padding-left: 2rem;
    /* overflow: hidden; */
}

.topbar {
    /* border: 2px solid red; */
    padding: 1rem;
    padding-top: 1rem;
    /* width: 75vw; */
}

.topbar h1 {
    font-family: cursive;
    font-size: 3rem;
}

.topbar ul{
    display: flex;
    margin-top: 1rem;
    border-bottom: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    gap: 0.6rem;
}

.filter {
    font-family: cursive;
    font-size: 1.7rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    padding-right: 1.3rem;
}

.topbar ul li {
    list-style-type: none;
    background-color: #FFFFFF;
    font-family: cursive;
    font-size: 1.4rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    padding-right: 1.3rem;
    padding-left: 1.3rem;
    border: 0.1px solid black;
    flex-wrap: wrap;
}

.topbar img {
    width: 1.3rem;
    margin-right: 1.3rem;
}

.topbar a {
    text-decoration: none;
    color: black;
}


.topbar ul li:hover {
    background-color: #f1f1f1;
}

.blank {
    background-color: rgb(175, 173, 173);
    height: 1vh;
}


.grid-container {
    /* border: 2px solid orange; */
    padding: 0rem 1rem;
    /* width: 75vw; */
    display: grid;
    /* right: 0px; */
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    grid-gap: 1rem;
    overflow: hidden;
    align-content: center;
    justify-content: center;
}

.g-item {
    /* border: 1px solid sandybrown; */
    background-color: #FFFFFF;
}

.g-item img {
    width: 100%;
    /* min-width: 20rem; */
}

.g-item img:hover {
    cursor: pointer;
    opacity: 60%;
}

.g-content {
    font-family: cursive;
    padding: 1rem;
    font-size: 1.4rem;
    /* color: gray; */
}

.pro-cont {
    color: gray;
}







@media (min-width: 1600px){
    .grid-container {
        grid-template-columns: repeat(4, 1fr);
    }
}


    </style>


</head>

<body>
    <div class="sidebar">
        <div class="cont">
            <img src="https://whova.com/wp-content/uploads/2020/10/Untitled-design-18.png" alt="img">
            <br>
            <br>
            <h1>Portfolio</h1>
            <p>Muhammad Umar Chaudhry</p>
        </div>

        <div class="personal">
            <div class="element"><img src="https://cdn-icons-png.flaticon.com/128/3603/3603050.png" alt="icon"><a
                    href="#">PORTFOLIO</a></div>
            <div class="element"><img src="https://cdn-icons-png.flaticon.com/128/1077/1077114.png" alt="icon"><a
                    href="#">ABOUT</a></div>
            <div class="element"><img src="https://cdn-icons-png.flaticon.com/128/25/25236.png" alt="icon"><a
                    href="#">CONTACT</a></div>
        </div>

        <div class="social">
            <a href="#"><img src="https://cdn-icons-png.flaticon.com/128/1051/1051309.png" alt="icon"></a>
            <a href="#"><img src="https://cdn-icons-png.flaticon.com/128/1384/1384031.png" alt="icon"></a>
            <a href="#"><img src="https://cdn-icons-png.flaticon.com/128/1384/1384018.png" alt="icon"></a>
            <a href="#"><img src="https://cdn-icons-png.flaticon.com/128/2111/2111601.png" alt="icon"></a>
            <a href="#"><img src="https://cdn-icons-png.flaticon.com/128/733/733635.png" alt="icon"></a>
            <a href="#"><img src="https://cdn-icons-png.flaticon.com/128/3128/3128219.png" alt="icon"></a>
        </div>
    </div>

    <div class="main">
        <div class="topbar">
            <h1>My Portfolio</h1>
            <ul>
                <span class="filter">Filter:</span>
                <a href="#" class="all">
                    <li>All</li>
                </a>
                <a href="#">
                    <li><img src="https://cdn-icons-png.flaticon.com/128/636/636600.png" alt="pic">Design</li>
                </a>
                <a href="#">
                    <li><img src="https://cdn-icons-png.flaticon.com/128/25/25666.png" alt="pic">Photo</li>
                </a>
                <a href="#">
                    <li><img src="https://cdn-icons-png.flaticon.com/128/149/149983.png" alt="pic">Art</li>
                </a>
               
            </ul>
            <div class="blank"></div>
        </div>
        <div class="grid-container">
            <!-- project start -->
            <div class="g-item grid-1">
                <img src="https://www.w3schools.com/w3images/mountains.jpg" alt="pic">
                <div class="g-content">
                    <p><b>Lorem Ipsum</b></p>
                    <br>
                    <p class="pro-cont">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates magnam quibusdam ratione
                        numquam, voluptas culpa accusantium placeat aliquid</p>

                </div>
                <!-- project end -->
            </div>

            <div class="g-item grid-2">
                <img src="https://www.w3schools.com/w3images/mountains.jpg" alt="pic">
                <div class="g-content">
                    <p><b>Lorem Ipsum</b></p>
                    <br>
                    <p class="pro-cont">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates magnam quibusdam ratione
                        numquam, voluptas culpa accusantium placeat aliquid</p>

                </div>
                <!-- project end -->
            </div>

            <div class="g-item grid-3">
                <img src="https://www.w3schools.com/w3images/mountains.jpg" alt="pic">
                <div class="g-content">
                    <p><b>Lorem Ipsum</b></p>
                    <br>
                    <p class="pro-cont">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates magnam quibusdam ratione
                        numquam, voluptas culpa accusantium placeat aliquid</p>

                </div>
                <!-- project end -->
            </div>

            <div class="g-item grid-4">
                <img src="https://www.w3schools.com/w3images/mountains.jpg" alt="pic">
                <div class="g-content">
                    <p><b>Lorem Ipsum</b></p>
                    <br>
                    <p class="pro-cont">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates magnam quibusdam ratione
                        numquam, voluptas culpa accusantium placeat aliquid</p>

                </div>
                <!-- project end -->
            </div>

            <div class="g-item grid-5">
                <img src="https://www.w3schools.com/w3images/mountains.jpg" alt="pic">
                <div class="g-content">
                    <p><b>Lorem Ipsum</b></p>
                    <br>
                    <p class="pro-cont">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates magnam quibusdam ratione
                        numquam, voluptas culpa accusantium placeat aliquid</p>

                </div>
                <!-- project end -->
            </div>

            <div class="g-item grid-6">
                <img src="https://www.w3schools.com/w3images/mountains.jpg" alt="pic">
                <div class="g-content">
                    <p><b>Lorem Ipsum</b></p>
                    <br>
                    <p class="pro-cont">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates magnam quibusdam ratione
                        numquam, voluptas culpa accusantium placeat aliquid</p>

                </div>
                <!-- project end -->
            </div>

            <div class="g-item grid-7">
                <img src="https://www.w3schools.com/w3images/mountains.jpg" alt="pic">
                <div class="g-content">
                    <p><b>Lorem Ipsum</b></p>
                    <br>
                    <p class="pro-cont">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates magnam quibusdam ratione
                        numquam, voluptas culpa accusantium placeat aliquid</p>

                </div>
                <!-- project end -->
            </div>

            <div class="g-item grid-8">
                <img src="https://www.w3schools.com/w3images/mountains.jpg" alt="pic">
                <div class="g-content">
                    <p><b>Lorem Ipsum</b></p>
                    <br>
                    <p class="pro-cont">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates magnam quibusdam ratione
                        numquam, voluptas culpa accusantium placeat aliquid</p>

                </div>
                <!-- project end -->
            </div>

            <div class="g-item grid-9">
                <img src="https://www.w3schools.com/w3images/mountains.jpg" alt="pic">
                <div class="g-content">
                    <p><b>Lorem Ipsum</b></p>
                    <br>
                    <p class="pro-cont">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates magnam quibusdam ratione
                        numquam, voluptas culpa accusantium placeat aliquid</p>

                </div>
                <!-- project end -->
            </div>

            <div class="g-item grid-10">
                <img src="https://www.w3schools.com/w3images/mountains.jpg" alt="pic">
                <div class="g-content">
                    <p><b>Lorem Ipsum</b></p>
                    <br>
                    <p class="pro-cont">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates magnam quibusdam ratione
                        numquam, voluptas culpa accusantium placeat aliquid</p>

                </div>
                <!-- project end -->
            </div>

            <div class="g-item grid-11">
                <img src="https://www.w3schools.com/w3images/mountains.jpg" alt="pic">
                <div class="g-content">
                    <p><b>Lorem Ipsum</b></p>
                    <br>
                    <p class="pro-cont">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates magnam quibusdam ratione
                        numquam, voluptas culpa accusantium placeat aliquid</p>

                </div>
                <!-- project end -->
            </div>

        </div>
    </div>



</body>

</html>

Comments

Post a Comment

Popular posts from this blog

153: Write a program to read an amount (integer value) and break the amount into smallest possible number of bank notes. Note: The possible banknotes are 500, 100, 50, 20, 10, 5, 2, and 1

  // Write a program to read an amount (integer value) and break the amount into smallest possible // number of bank notes. Note: The possible banknotes are 500, 100, 50, 20, 10, 5, 2, and 1 #include < iostream > using namespace std ; int main () {     cout << " Muhammad Umar Chaudhry " << endl ;     cout << " SU92-BSCSM-S23-007 " << endl ;     cout << " Question # 11 " << endl           << endl ;     int cash ;     cout << " Enter the amount of cash you have: " ;     cin >> cash ;     int five_hundred = cash / 500 ;     cash = cash % 500 ;     int hundred = cash / 100 ;     cash = cash % 100 ;     int fifty = cash / 50 ;     cash = cash % 50 ;     int twenty = cash / 20 ;     cash = cash % 20 ;     int ten = cas...
Read more

206: Write a program to create a class named "Circle" which has the property "radius". Define functions to calculate the area and circumference of the circle.

  // Write a program to create a class named "Circle" which has the property "radius". // Define functions to calculate the area and circumference of the circle. #include < iostream > using namespace std ; class Circle { private :     float radius ; public :     void setRadius ( float x )     {         radius = x ;     }     float getRadius ()     {         return radius ;     }     float area ()     {         return ( 3.14 * radius * radius );     }     float circumference ()     {         return ( 2 * 3.14 * radius );     } }; int main () {     float x ;     cout << " Enter the radius of circle: " ;     cin >> x ;     Circle circle1 ;     circle1 . setRadius ( x );     ...
Read more

221: // In Task 2, we discussed multilevel inheritance with parameterized constructors for Student, UndergraduateStudent, and GraduateStudent classes in a university management system. Can you explain the advantages of using multilevel inheritance with specific details about the functions and data members in these classes? How were the parameterized constructors (e.g., setting student name, age, and ID) used to ensure that each class in the hierarchy correctly initializes its properties, such as creating an UndergraduateStudent named "John," aged 20, with a student ID of 12345

  // In Task 2, we discussed multilevel inheritance with parameterized constructors for Student, UndergraduateStudent,  and  GraduateStudent  classes  in  a  university  management  system. Can  you  explain  the  advantages  of  using  multilevel  inheritance  with  specific   details  about the functions and data members in these classes? How were the parameterized constructors (e.g.,  setting  student  name,  age,  and  ID)  used  to  ensure  that  each   class  in  the  hierarchy correctly initializes its properties. #include < iostream > using namespace std ; class Student { private :     string name , ID ;     int age ; public :     Student () { name = "" , ID = "" , age = 0 ; }     Student ( string n , string i , int a ) { name ...
Read more