Skip to content

Azan Hussain #87

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Azan-H wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Azan Hussain #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 112 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,117 @@
</head>
<body>

<a href="" id="top"></a>

<section class="main">

<nav>

<h1>Azan Hussain</h1>
<ul>
<a href="#experience">Experience</a>
<a href="#portfolio">Portfolio</a>
<a href="#about">About me</a>
</ul>

</nav>

<main>
<div></div>

<div class="container">
<h1>Hiring a Full-stack developer?</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero cumque voluptas, corrupti molestias temporibus natus.</p>
</div>

<div></div>
</main>

</section>

<hr>

<section class="about" id="about">

<main>

<h1>ABOUT ME</h1>

<h2>Introduction</h2>
<br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro ea, adipisci minima maiores laborum distinctio itaque cum perspiciatis quia rerum ipsa, aspernatur nam facilis, eaque cumque eligendi deserunt repellat eveniet neque ullam in veniam laudantium doloribus vero? Laboriosam maxime sapiente doloribus odio assumenda ipsam, exercitationem incidunt pariatur doloremque inventore ipsum.</p>
<br>

<h2>Technical Skills</h2>
<ul>
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>Turning on laptop</li>
<li>Using a mouse</li>
<li>Using a keyboard</li>
<li>Turning off laptop</li>
</ul>

</main>

</section>

<hr>

<section class="portfolio" id="portfolio">

<h1>Portfolio</h1>

<div class="grid">
<div></div>

<div class="item-1">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci tempore minus provident illo pariatur, ipsum maxime. Odit, asperiores magni? Ab consectetur quasi tempore repellendus vero tenetur fugit nihil quae et?</p>
<a class="read-more" href="https://github.com/Azan-H">Read More</a>
<a class="repo" href="https://github.com/Azan-H" target="_blank">Git Hub Repo</a>
</div>
<div class="item-2">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci tempore minus provident illo pariatur, ipsum maxime. Odit, asperiores magni? Ab consectetur quasi tempore repellendus vero tenetur fugit nihil quae et?</p>
<a class="read-more" href="https://github.com/Azan-H">Read More</a>
<a class="repo" href="https://github.com/Azan-H" target="_blank">Git Hub Repo</a>
</div>
<div class="item-3">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci tempore minus provident illo pariatur, ipsum maxime. Odit, asperiores magni? Ab consectetur quasi tempore repellendus vero tenetur fugit nihil quae et?</p>
<a class="read-more" href="https://github.com/Azan-H">Read More</a>
<a class="repo" href="https://github.com/Azan-H" target="_blank">Git Hub Repo</a>
</div>

<div></div>
</div>

</section>

<hr>

<section class="experience" id="experience">

<h1>Experience</h1>
<div class="exp-grid">
<div></div>
<div class="epx-main">
<h2>Job Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime repellat magni neque culpa dicta aspernatur voluptate consequatur autem, cupiditate sunt eveniet porro excepturi! Unde reiciendis inventore veritatis iure, laboriosam repudiandae tempora incidunt. Laborum maxime placeat dignissimos ad nesciunt iure, perferendis quo iusto esse illo similique, facilis, neque dolorem explicabo eum.</p>

<h2>Job Title</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae fuga natus maxime alias velit optio numquam et debitis eos. Doloremque sint eligendi officiis iure in enim ea saepe repudiandae fuga. Fugiat quidem aliquid expedita tenetur rem illum culpa quos, labore autem nulla aspernatur maxime! Modi ut accusantium asperiores libero incidunt?</p>
</div>
<div></div>
</div>

</section>

<footer>
© Azan Hussain
<a href="#top">Back to top</a>
</footer>

</body>
</html>
245 changes: 245 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,245 @@
* {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
scroll-behavior: smooth;
}

hr {
height: 5px;
background-color: black;
border: none;
}

.main {
height: 100vh;
background-color: rgb(48, 121, 204);
}

nav {
padding: 10px;
overflow: auto;
}

nav h1 {
font-weight: bolder;
float: left;
font-size: 1.7em;
padding-top: 8px;
color: aliceblue;
}

nav ul a {
font-weight: bold;
font-size: 1.5em;
display: inline;
float: right;
padding: 4px 15px 3px 15px;
margin: 10px 15px 0px 0px;
text-decoration: none;
text-align: center;
color: rgb(48, 121, 204);
background-color: aliceblue;
border-radius: 5px;
transition-duration: 0.5s;
}

nav ul a:hover {
color: aliceblue;
background-color: rgb(48, 121, 204);
}

.main main {
display: grid;
height: 100vh;
grid-template-columns: 1fr 0.9fr 1fr;
grid-template-rows: 20vh 1fr;
padding: 10px;
grid-template-areas:
'. . .'
'. main .';
}

.container {
grid-area: main;

}

.container h1 {
max-width: 500px;
color: aliceblue;
justify-self: center;
font-size: 5em;
overflow-wrap: break-word;
position: relative;
}

.container p {
justify-self: end;
}

.about {
display: grid;
height: 75vh;
background-color: rgb(69, 200, 69);
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr;
grid-template-areas:
'. mid .';
}

.about main {
grid-area: mid;
font-size: 20px;
}

.about h2 {
font-size: 20px;
}

.about h1 {
grid-area: mid;
padding-top: 45px;
font-size: 2.2em;
text-align: center;
height: 100px;
color: rgb(14, 14, 39);
position: relative;
}


.about p {
justify-self: end;
}

.about ul {
justify-self: end;
grid-column-start: 2;
columns: 2;
margin-bottom: 50px;
margin-top: 20px;
padding-left: 50px;
}

.portfolio {
min-height: 90vh;
max-height: auto;
background-color: rgb(231, 231, 59);
padding-bottom: 50px;
}

.portfolio h1 {
text-align: center;
font-size: 2.2em;
padding-top: 45px;
}

.portfolio h2 {
font-size: 2.2em;
margin-bottom: 10px;
}

.portfolio p {
font-size: 1.3em;
margin-bottom: 50px;
}

.grid {
display: grid;
height: 80%;
grid-template-columns: 100px 1fr 1fr 1fr 100px;
grid-template-rows: 1fr;
grid-gap: 45px;
grid-template-areas:
'. left middle right .';
}

.item-1 {
grid-area: left;
}

.item-2 {
grid-area: middle;
}

.item-3 {
grid-area: right;
}

.item-1, .item-2, .item-3 {
border: 10px solid purple;
border-radius: 10px;
padding: 50px 50px 0px 50px;
display: grid;
margin-top: 30px;
}

.grid a {
display: block;
text-align: center;
align-self: self-end;
padding: 10px;
}

.read-more {
text-decoration: none;
background-color: purple;
padding: 10px 0;
font-size: 1.5em;
border-radius: 5px;
color: aliceblue;
transition-duration: 0.5s;
}

.read-more:hover {
background-color: aliceblue;
color: purple;
}

.repo {
margin-top: 10px;
margin-bottom: 20px;
color: purple;
}

.experience {
height: 90vh;
background-color: rgb(224, 57, 57);
}

.experience h1 {
text-align: center;
padding: 30px;
font-size: 2.2em;
}

.exp-grid {
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
grid-template-rows: 1fr;
grid-template-areas:
'. main .';
}

.exp-main{
grid-area: main;
}

.experience h2, p {
font-size: 20px;
padding: 10px;
}

footer {
max-height: 10vh;
background-color: rgb(22, 22, 73);
color: aliceblue;
padding: 4vh;
padding-top: 5vh;
font-size: 1.5em;
}

footer a {
text-decoration: none;
float: right;
color: aliceblue;
}