Portfolio/index.htm at main · DevAta515/Portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ata Ur Rehman</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/46cd246def.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500&family=Cormorant:wght@700&family=EB+Garamond&family=Josefin+Sans:wght@600&family=Libre+Baskerville&family=Lobster&family=Lora:wght@700&family=Montserrat:ital@1&family=Playfair+Display:wght@500&family=Yeseva+One&display=swap" rel="stylesheet">
</head>

<body>
    <div class="intro_lap">
        <div class="nav">
            <li>Home</li>
            <li>My Skills</li>
            <li>Recent Projects</li>
            <li>Contact Info</li>
        </div>
        <div class="intro">
            <div class="image">
                <img src="prof.jpeg" alt="">
            </div>
            <div class="int">
                <p style="font-style: 'Playfair Display',serif;">Hello,</p>
                <h1>
                    <!-- <span class="jump">Hello</span> -->
                    <span class="jump">Ata</span>
                    <span class="jump">Ur</span>
                    <span class="jump">Rehman</span>
                </h1>
                <p style="font-family: 'Libre Baskerville', serif;;font-size: 16px;">Welcome to my portfolio website, where creativity meets innovation. I am excited to share with you a curated collection of my work, showcasing my passion for design, development, and all things digital. Whether you're here to explore my web design projects, delve into my coding endeavors, or simply get to know me better, I invite you to embark on this journey with me. Join me as I unveil a visual narrative of my skills, experiences, and aspirations in the ever-evolving world of technology and design.</p>
            </div>
        </div>
        <svg id="wave2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
            <path id="" fill="#d6b8b6" fill-opacity="1" d="M0,160L60,160C120,160,240,160,360,176C480,192,600,224,720,240C840,256,960,256,1080,250.7C1200,245,1320,235,1380,229.3L1440,224L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
        </svg>
    </div>
    <div class="skill_lap">
        <h1 style="font-size:50px">My Skills</h1>
        <div class="skill1">
            <div class="block"><i style="padding-top:5rem; transform: scale(3);color:#f7f9fc;" class="fa-solid fa-terminal fa-2xl fa-hov"></i></div>
            <div class="text">
                <h2>Web Development</h2>
                <p>Web development is the creation and maintenance of websites and web applications. It involves designing the site's layout, structure, and interactivity using coding languages like HTML, CSS, and JavaScript. Developers ensure cross-browser compatibility, optimize performance, and may work on server-side functionality. Web development is vital for online presence and interactive digital services offered by businesses and individuals.</p>
            </div>
        </div>
        <div class="skill1">
            <div class="text">
                <h2>Graphic Designing</h2>
                <p>Graphic design is the art of creating visual content to convey messages and ideas. Graphic designers use typography, imagery, and layout techniques to design everything from logos and advertisements to posters and websites. Their work combines creativity and technical skills to communicate effectively and aesthetically through various media, enhancing branding and visual communication.</p>
            </div>
            <div class="block2"><i style="padding-top:4rem; transform: scale(4); color: #f7f9fc;" class="fa-regular fa-object-ungroup fa-2xl fa-hov"></i></div>
        </div>
        <div class="skill1">
            <div class="block">><i style="padding-top:4rem; transform: scale(4); color:#f7f9fc;" class="fa-solid fa-video fa-2xl fa-hov"></i></div>
            <div class="text">
                <h2>Video Editing</h2>
                <p>Video editing is the process of manipulating and organizing video footage to create a coherent and engaging narrative. Video editors use software to trim, arrange, and enhance clips, adding effects, transitions, and audio to convey a specific message or story. It's a crucial part of filmmaking, marketing, and content creation, shaping the final visual product for various media platforms.</p>
            </div>
        </div>
    </div>
    <div class="proj_lap">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
            <path fill="#d6b8b6" fill-opacity="1" d="M0,160L48,144C96,128,192,96,288,96C384,96,480,128,576,117.3C672,107,768,53,864,69.3C960,85,1056,171,1152,202.7C1248,235,1344,213,1392,202.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
        </svg>
        <h1>Recent Works</h1>
        <div class="container">
            <!-- <div class="box1"> -->
                <div class="box">
                    <p>Spotify Clone</p>
                </div>
                <div class="box">
                    <p>Microsoft Clone</p>
                </div>
            <!-- </div> -->
            <!-- <div class="box2"> -->
                <div class="box">
                    <p>Facebook Login Page</p>
                </div>
                <div class="box">
                    <p>Temperature Converter</p>
                </div>
            <!-- </div> -->
        </div>
    </div>
    <div class="cont_lap">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
            <path fill="#d6b8b6" fill-opacity="1" d="M0,128L48,138.7C96,149,192,171,288,154.7C384,139,480,85,576,64C672,43,768,53,864,90.7C960,128,1056,192,1152,202.7C1248,213,1344,171,1392,149.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
        </svg>
        <h1>Contact Info</h1>
        <div class="info_box">
            <div class="left">
                <div class="block1 rad">
                    <p><i class="icon2 fa-solid fa-phone fa-xl" style="color: #517ecd; padding-top:1rem;"></i></p>
                    <p class="spcl">+91 7078974078</p>
                    <p>+91 9536884078</p>
                </div>
                <div class="block1">
                    <p><i class="icon2 fa-solid fa-at fa-xl" style="color: #3d6ab8; padding-top:1rem;"></i></p>
                    <p>urrehmanata6@gmail.com</p>
                    <p>220104021@hbtu.ac.in</p>
                </div>
                <div class="block1 rad4">
                    <p><i class="icon2 fa-solid fa-location-dot fa-xl" style="color: #456cb0; padding-top:1rem;"></i></p>
                    <p>Harcourt Butler Technical University, Kanpur-208001</Kanpur-208001></p>
                </div>
            </div>
            <div class="right">
                <div class="block3 rad2">
                    <i class=" icon fa-brands fa-facebook fa-2xl" style="color: #4c79c8;"></i>
                </div>
                <div class="block3"><i class=" icon fa-brands fa-instagram fa-2xl" style="color: #376cc8;"></i></div>
                <div class="block3 rad3"><i class=" icon fa-brands fa-linkedin-in fa-2xl" style="color: #3b68b5;"></i></div>
            </div>
        </div>
        <div class="letters">
            <span class="let">A</span>
            <span class="let">T</span>
            <span class="let">A</span>
            <span class="let">-</span>
            <span class="let">U</span>
            <span class="let">R</span>
            <span class="let">-</span>
            <span class="let">R</span>
            <span class="let">E</span>
            <span class="let">H</span>
            <span class="let">M</span>
            <span class="let">A</span>
            <span class="let">N</span>
        </div>
    </div>
</body>

</html>