<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Serius 2.0</title>

    <link rel="icon" type="image/x-icon" href="/images/freelance.png">

    <link href="https://fonts.googleapis.com/css2?family=Quattrocento:wght@700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Quattrocento+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Quattrocento Sans', sans-serif;
}

h2 {
    text-shadow: 1px 5px black;
}

.header {
    font-family: 'Quattrocento', serif;
    width: 100%;  
    background-image: linear-gradient(to bottom, #172554, #1e40af);
    color: white;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.logo a {
    font-size: 1.4rem;
    margin-left: auto;
}

.logo i {
    transition: width 0.2s, height 0.2s, transform 0.2s, color 0.2s;
}

.logo i:hover {
    transform: scale(1.2);
    color: orange;
}

.logo img {
    width: 50px;
    height: 50px;
}

.logo-text {
    font-size: 1.8rem;
    margin-left: 10px;
    animation: colorchange 3s infinite;
}

@keyframes colorchange {
    0% {color: white;}
    50% {color: orange;}
    100% {color: white;}
}

.nav-links {
    display: flex;
    padding: 20px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    padding: 20px;
    text-shadow: 5px 5px 8px black;
    transition: color 0.5s;       
    font-size: 1.1rem;
}

.nav-links a:hover {
    color: orange;
}

.navbar2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    background-color: #1e40af;
}

.searchbar input {
    margin-left: 10px;
    border-radius: 8px;
    width: 250px;
    height: 25px;
    border: 0;
}

.buttons button {
    padding: 8px 25px;
    margin-right: 10px;
    background-color: #ff4800;
    color: white;
    text-shadow: 1px 1px 2px black;
    border-radius: 10px;
    font-weight: bold;
    border: 0;
}

.buttons button:hover {
    box-shadow: 0px 2px 10px black;
}

.buttons button:last-child {
    margin-right: 0;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.sidebar {
    background-image: linear-gradient(#1e40af, #c2410c, #1e40af);
    color: #cbd5e1;
    flex: 30%;
    padding: 40px;
    text-align: justify;
    letter-spacing: 1px;
}

.intro img {
    width: 200px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 2px 4px 10px black;
    filter: saturate(1.20) brightness(1); 
}

.myname {
    animation: blinkingcolors 0.5s infinite;
}

@keyframes blinkingcolors {
    0% {color: black;}
    50% {color: white;}
    100% {color: black;}
}

.social-links {
    padding: 10 0px;
}

.social-links a {
    padding: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 24px;
    color: white;
}

.main {
    background-image: linear-gradient(#1e40af, #c2410c, #1e40af);
    flex: 70%;
    padding: 40px;
    text-align: justify;
    letter-spacing: 1px;
}

.main img {
    margin-bottom: 10px;
    width: 100%;
}

.main h3 {
    color: white;
    text-shadow: 2px 2px black;
}

.main h5 {
    color: rgb(162, 162, 162);
}

.project {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 20px;
    margin-bottom: 20px;
}

.project a {
    color: white;
    text-decoration: none;
    text-shadow: 1px 1px black;
}

.project a:hover {
    color: grey;
}

.description {
    background-color: #fed7aa;
    padding: 20px;
}

.footer {
    background-image: linear-gradient(to bottom, #1e40af, #172554);
    color: white;
    padding: 20px;
    text-align: center;
}

.footer-text {
    padding-bottom: 10px;
}

.footer a {
    font-size: 0.8rem;
    margin-right: 30px;
    color: white;
    text-decoration: none;
}

.footer a:last-child {
    margin-right: 0;
}

.footer a:hover {
    color: grey;
}

@media screen and (max-width: 700px) {
    .row, .nav-links, .navbar2 {
        flex-direction: column;
        align-items: center;
    }

    .nav-links a {
        background-color: rgba(0, 0, 0, 0.3);
        text-align: center;
        width: 100%;
        padding: 15px;
        margin-bottom: 5px;
    }

    .nav-links a:last-child {
        margin-bottom: 0;
    }

    .buttons {
        margin-top: 20px;
    }
}
    </style>
    
</head>
<body>
    <div class="header">
        <div class="logo">
            <a href="#"><img src="images/freelance.png"></a>
            <div class="logo-text">SERIUS 2.0</div>
            <a style="text-decoration: none; color: white;" href="login.html"><i class="fa-solid fa-user"></i></a>
        </div>

        <div class="nav-links">
            <a href="#">Home</a>
            <a href="#">News</a>
            <a href="#">Explore</a>
            <a href="#">About</a>
        </div>
    </div>

    <div class="navbar2">
        <div class="searchbar">
            <i style="color: white;" class="fa-solid fa-magnifying-glass"></i>
            <input type="text" placeholder="   Search Here">
        </div>

        <div class="buttons">
            <button>New</button>
            <button>Upload</button>
            <button>Share</button>
        </div>
    </div>

    <div class="row">
        <div class="sidebar">
            <div class="intro">
                <h2 style="color: #f8fafc;">DEVELOPER</h2><br>
                <img src="images/profile.JPG">
                
                <h3 style="color: #f8fafc;">Hey! I'm <span class="myname">Sudhir Das</span>.</h3><br>
                
                <p>
                    This is the testament to my newfound passion for Software Engineering. I completed my degree <strong>Bachelor of Technology</strong> from <strong>VSSUT, Burla</strong>,in <strong>2022</strong>.
                    While pursuing my degree, I discovered a deep interest in the field of Software Engineering and has been actively pursuing it ever since.
                </p><br>
                
                <p>
                    Currently, I am focused on honing my skills in <strong>web development</strong>. Recently completed courses in <strong>HTML and CSS</strong>, I developed this portfolio that showcases my proficiency in these languages till now. 
                    I am aspiring to become a great <strong>Frontend Developer</strong> someday, combining my technical knowledge with my creativity to build <strong>engaging and intuitive user interfaces</strong>.
                </p><br>

                <p><strong>To know more, check out the links given below.</strong></p><br>
            </div>
                        
            <div class="social-links">
                <a href="mailto:sudhirdas1999@gmail.com?subject=Regarding-Serius-2.0"><i class="fa-solid fa-envelope"></i></a>
                <a href="https://github.com/untserius"><i class="fa-brands fa-github"></i></a>
                <a href="https://www.linkedin.com/in/itsmesudhirdas"><i class="fa-brands fa-linkedin"></i></a>
            </div>
        </div>

        <div class="main">
            <h2 style="color: white;">PROJECTS</h2><br>
            <div class="project">
                <h3><a href="#">Serius 2.0</a></h3><br>
                <h5>My second portfolio. Jul 7, 2023</h5><br>

                <img src="images/serius2.png">

                <div class="description">
                    <p>The web page represents "Serius 2.0," a portfolio website. It utilizes HTML and CSS to structure content and define styles. Responsive design techniques ensure adaptability across devices. Flexbox creates a flexible grid system. Font Awesome Icons enhance visual elements. Basic animations are added with gradient background adds visual appeal. External resources like Google Fonts and Font Awesome CSS are imported. Navigation is implemented with anchor tags. Images are displayed, including the logo and profile picture. The result is a responsive and visually appealing portfolio website.</p>
                </div>
            </div>

            <div class="project">
                <h3><a href="SeriusWeb v1.0.html" target="_blank">Serius 1.0</a></h3><br>
                <h5>My first portfolio. 31 March, 2023</h5><br>

                <img src="images/serius1.png">

                <div class="description">
                    <p>The web page represents "Serius 1.0" showcasing my skills involved include HTML for structuring content, CSS for styling and layout, and responsive design for adaptability. Navigation is implemented with a top menu and side menu. The page incorporates typography with the 'Open Sans' font from Google Fonts. Overall, it effectively presents my profile.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="footer-text">
            <p>© 2021 Serius 2.0. All rights reserved.</p>
        </div>

        <div class="footer-links">
            <a href="#">Terms of Service</a>
            <a href="#">Privacy Policy</a>
            <a href="#">Cookie Policy</a>
        </div>
    </div>
</body>
</html>