Skip to content
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

Rakan abulathou responsive #1151

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Rakan abulathou responsive #1151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
837f11a
finished html and most of css styling
localhuncho Dec 3, 2023
4072407
committing index.html
localhuncho Dec 3, 2023
71c9947
initial push
localhuncho Dec 5, 2023
d0ae6d9
second initial commit attempt
localhuncho Dec 5, 2023
ae2bc14
added css for new responsive layouts at 800px and 500px
localhuncho Dec 6, 2023
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
26 changes: 13 additions & 13 deletions ReadMe.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,29 +23,29 @@ Portfolio websites are a great way to show off your work to friends, family, and

Follow these steps to set up and work on your project:

- [ ] Fork and clone this repository.
- [ ] Go into Canvas and connect your repository by copy-pasting its Github URL into the submission slot.
- [ ] DO NOT MAKE A BRANCH! You will be pushing to main/master today.
- [ ] cd into your repository on the command line and use code . to open VS Code.
- [ ] Download the Live Server extension from the Extensions tab on the left side of your VS Code. After it is done installing, click "Go Live" on the bottom right side of your screen to run your HTML file.
- [ ] Complete your work making regular commits; your submitted URL will always reflect your most recent work.
- [x] Fork and clone this repository.
- [x] Go into Canvas and connect your repository by copy-pasting its Github URL into the submission slot.
- [x] DO NOT MAKE A BRANCH! You will be pushing to main/master today.
- [x] cd into your repository on the command line and use code . to open VS Code.
- [x] Download the Live Server extension from the Extensions tab on the left side of your VS Code. After it is done installing, click "Go Live" on the bottom right side of your screen to run your HTML file.
- [x] Complete your work making regular commits; your submitted URL will always reflect your most recent work.

### Task 2: Minimum Viable Product

Once your repository is set up, practice what you learned today to create a portfolio site from the wireframe of your choosing. **You may choose any of the three wireframes in the "Wireframe Options" folder above.** Your complete project should look similar to the wireframe you chose, and include all of the following elements:

- [ ] A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages
- [ ] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you
- [ ] Information about you in place of the given placeholder
- [ ] A `My Projects` button that links to the projects page
- [ ] A `Contact Me` button that links to the contact page
- [ ] Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page
- [x] A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages
- [x] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you
- [x] Information about you in place of the given placeholder
- [x] A `My Projects` button that links to the projects page
- [x] A `Contact Me` button that links to the contact page
- [x] Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page

### Task 3: Stretch Goals

The following goals are designed to stretch your knowledge and may require additional research beyond what was learned in class today.

- [ ] Make your webpage work at different browser widths, including mobile
- [x] Make your webpage work at different browser widths, including mobile
- [ ] Add CSS animations
- [ ] Design and execute your own wireframe for `About`, `Projects`, and `Contact` pages
- [ ] Host your website on Netlify.com
Expand Down
83 changes: 76 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" type="text/css" href="./style/index.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>

</body>
</head>
<body>
<header>
<div class="name">
<h1>Rakan B Abulatou</h1>
</div>
<div class="headerNav">
<nav>
<button><a href="./index.html">Home</a></button>
<button><a href="./about.html">About</a></button>
<button><a href="./contact.html">Contact</a></button>
<button><a href="./projects.html">Projects</a></button>
</nav>
<div>
</header>
<section>
<div class="container">
<div class="topBodyLeft">
<img src="https://picsum.photos/600/400"/>
</div>
<div class="topBodyRight">
<h2>Rakan B Abulatou</h2>
<button><a href="">My Projects</a></button>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam placeat incidunt porro maiores fugit voluptas, voluptate maxime nesciunt natus, repudiandae sit eligendi quisquam dolor assumenda officia quam dicta molestiae quo!
</p>
</div>
</div>
</section>
<section class="mainBodyBottom">
<div class="topRow">
<div class="project1">
<img src="https://picsum.photos/id/1/300" />
<p>Project Title</p>
</div>
<div class="project2">
<img src="https://picsum.photos/id/2/300" />
<p>Project Title</p>
</div>
<div class="project3">
<img src="https://picsum.photos/id/3/300" />
<p>Project Title</p>
</div>
<div class="project4">
<img src="https://picsum.photos/id/4/300" />
<p>Project Title</p>
</div>
</div>
<div class="bottomRow">
<div class="project5">
<img src="https://picsum.photos/id/5/300" />
<p>Project Title</p>
</div>
<div class="project6">
<img src="https://picsum.photos/id/6/300" />
<p>Project Title</p>
</div>
<div class="project7">
<img src="https://picsum.photos/id/7/300" />
<p>Project Title</p>
</div>
<div class="project8">
<img src="https://picsum.photos/id/8/300" />
<p>Project Title</p>
</div>
</div>
</section>
<footer>
<h2>Like what you see?</h2>
<button><a href="./contact.html">Contact Me</a></button>
</footer>
</body>
</html>
237 changes: 236 additions & 1 deletion style/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,236 @@
/* Add CSS styling here */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
max-width: 100%;

}

header {
background-color: lightgrey;
padding: 20px;
margin-bottom: 15px;
}
.name {
display: flex;
justify-content: flex-start;
align-content: center;
}

.headerNav {
display: flex;
align-content: flex-start;
justify-content: flex-start;
}

.container {
display: flex;
flex-direction: row;
justify-content: center;
}

.topBodyRight {
padding: 20px;
width: 50%;
}

.mainBodyBottom {
text-align: center;
}

.topRow {
display: flex;
justify-content: space-evenly;
flex-direction: row;
padding: 20px;
}

.bottomRow {
display: flex;
justify-content: space-evenly;
flex-direction: row;
padding: 20px;
}

footer {
background-color: lightgrey;
text-align: center;
padding: 20px;
}

button {
padding: 10px;
background-color: white;
color: black;
border: black solid 1px;
}

button:hover {
padding: 15px;
background-color: black;
color: white;
border: white solid 1px;
}

button a {
text-decoration: none;
color: inherit;
}

@media (max-width: 800px) {
header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.headerNav {
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
width: 100%;
}

.headerNav nav {
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
width: 100%;
}

button {
width: 40%;
margin: 1% 0;
}

button a {
width: 80%;
}

.container {
display: flex;
flex-direction: column;
align-items: center;
}

.topBodyRight {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}

.topBodyLeft {
display: flex;
}

.mainBodyBottom {
display: flex;
}

.topRow {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.bottomRow {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.topRow div{
margin: 4%;
}

.bottomRow div{
margin: 4%;
}

footer {
width: 100%;
}
}

@media (max-width: 500px) {
header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.headerNav {
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
width: 100%;
}

.headerNav nav {
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
width: 100%;
}

button {
width: 40%;
margin: 1% 0;
}

button a {
width: 80%;
}

.container {
display: flex;
flex-direction: column;
align-items: center;
}

.topBodyRight {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}

.topBodyLeft {
display: flex;
}

.mainBodyBottom {
display: flex;
}

.topRow {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.bottomRow {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.topRow div{
margin: 4%;
}

.bottomRow div{
margin: 4%;
}

footer {
width: 100%;
}
}