-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
111 lines (102 loc) · 8.05 KB
/
index.html
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
<!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="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<title>Abdulrahman Portfolio</title>
</head>
<body style="height: 100vh;">
<nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: black; border-bottom: thin white;">
<div class="container-fluid">
<a class="navbar-brand" style="color: rgb(255, 191, 0);" href="#">Abdulrahamn_Azhar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
</ul>
</div>
</div>
</nav>
<section style="background-image: url(background.png); height: 95%; border-radius: 25px; border-color: rgb(255, 191, 0); box-shadow: 0 0 7px rgb(255, 238, 0);" class="m-4">
<div class="d-flex align-items-center justify-content-center" style="height: 100%;">
<div class="card text-white w-50 text-center" style="max-width: fit-content; background: transparent;">
<div class="row no-gutters">
<div class="col-md-14">
<div class="card-body fade-in-text" style="border-bottom-right-radius: 50%;">
<h2 class="card-title neonText-intro">Hi, my name is Abdulrahman Azhar!</h2>
<p class="card-text">Emerging Junior developer eager to contribute academic knowledge to hands-on role. Strong knowledge of emerging technologies and industry trends. Innovative and resourceful team player with expertise not just in one programming language but in various programming languages...</p>
<!-- <small class="text-muted fade-in-text">Last updated 3 mins ago</small> -->
<a href="#" class="btn btn-outline-warning">Download my CV</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="card m-4" id="projects" style="background-color: rgb(23, 23, 23); border-color: rgb(255, 191, 0); box-shadow: 0 0 7px rgb(255, 238, 0);" data-aos="fade-in">
<h4 class="text-center m-3" style="color: orange;" >Projects</h4>
</div>
<!-- <hr class="ml-4 mr-4 rounded"> -->
<div class="card m-4 d-flex flex-row" style="background: transparent;">
<div class="card-body w-50 h-100" style="background-color: rgb(23, 23, 23); border-color: rgb(255, 191, 0); box-shadow: 0 0 7px rgb(255, 238, 0);" data-aos="fade-right">
<h5 class="card-title" style="color: orange;">Contact Management App</h5>
<p class="card-text text-white">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere explicabo obcaecati architecto voluptatibus ipsa consequuntur quod in? Iste accusantium dicta, id, tempore officiis cumque non eaque optio perferendis voluptates quis! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo veritatis molestias exercitationem qui amet quia voluptatem voluptas! Cum iste, suscipit, quidem natus delectus esse alias tempore, nisi accusantium ducimus nihil!</p>
<a href="#" class="btn btn-outline-warning">Go to Github</a>
</div>
</div>
<div class="card m-4 d-flex flex-row" style="background: transparent;">
<div class="card-body w-50 " data-aos="fade-down">
<img src="maxresdefault.webp" height="300px" alt="An image of a Project" >
</div>
<div class="card-body mb-3 w-100" style="background-color: rgb(23, 23, 23); border-color: rgb(255, 191, 0); box-shadow: 0 0 7px rgb(255, 238, 0);" data-aos="fade-left">
<h5 class="card-title" style="color: orange;">Todolist App</h5>
<p class="card-text text-white">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere explicabo obcaecati architecto voluptatibus ipsa consequuntur quod in? Iste accusantium dicta, id, tempore officiis cumque non eaque optio perferendis voluptates quis! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo veritatis molestias exercitationem qui amet quia voluptatem voluptas! Cum iste, suscipit, quidem natus delectus esse alias tempore, nisi accusantium ducimus nihil!</p>
<a href="#" class="btn btn-outline-warning"">Go to Github</a>
<a href="#" class="btn btn-outline-danger">Watch Demo Video</a>
</div>
</div>
<div class="card m-4 d-flex flex-row" style="background: transparent;">
<div class="card-body mb-3 w-50 h-100" style="background-color: rgb(23, 23, 23); border-color: rgb(255, 191, 0); box-shadow: 0 0 7px rgb(255, 238, 0);" data-aos="fade-right">
<h5 class="card-title" style="color: orange;">Amazon Transaction Automation </h5>
<p class="card-text text-white">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere explicabo obcaecati architecto voluptatibus ipsa consequuntur quod in? Iste accusantium dicta, id, tempore officiis cumque non eaque optio perferendis voluptates quis! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo veritatis molestias exercitationem qui amet quia voluptatem voluptas! Cum iste, suscipit, quidem natus delectus esse alias tempore, nisi accusantium ducimus nihil!</p>
<small class="text-muted fade-in-text">Cannot be viewed</small>
</div>
</div>
<div class="card m-4 d-flex flex-row" style="background: transparent;">
<div class="card-body mb-3 w-50 h-100" style="background-color: rgb(23, 23, 23); border-color: rgb(255, 191, 0); box-shadow: 0 0 7px rgb(255, 238, 0);" data-aos="fade-left">
<h5 class="card-title" style="color: orange;">Order Processing App (In Progress)</h5>
<p class="card-text text-white">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere explicabo obcaecati architecto voluptatibus ipsa consequuntur quod in? Iste accusantium dicta, id, tempore officiis cumque non eaque optio perferendis voluptates quis! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo veritatis molestias exercitationem qui amet quia voluptatem voluptas! Cum iste, suscipit, quidem natus delectus esse alias tempore, nisi accusantium ducimus nihil!</p>
<a href="#" class="btn btn-outline-warning"">Go to Github</a>
</div>
</div>
</section>
<section>
<div class="card m-4" style="background-color: rgb(23, 23, 23); border-color: rgb(255, 191, 0); box-shadow: 0 0 7px rgb(255, 238, 0);">
<h4 class="text-center m-3" style="color: orange;">Skills</h4>
</div>
</section>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
duration: 2000,
mirror: false,
anchorPlacement: 'top-bottom'
// offset: 200
});
</script>
</body>
</html>