Portfolio slideshow 2

In  the lesson today I went and fixed the slideshow problem I mentioned on the previous blog where it just showed the pictures individually, instead of the slideshow format. I also added pictures on to the drawing section of the portfolio. I don't think I have anything else to add onto it for the time being but when I do find more stuff it will be added on.

When the link is in a normal format it doesn't allow the slideshow to work but when it is an unprotected script it does.

https://abbisands1.github.io/New-Portfolio/concept.html

I wasn't able to do everything I wanted to do for example on the home page where the blue and black boxes are I wanted to make a collage, or a big group picture with the best of my works side by side in one environment. There was also over things I wanted to do like the email button takes you to my email but the computers don't allow that, and the software try's to kill my computer, so that will not be fixed for awhile, I also wished I could put more things on the portfolio section but there are parts that I just didn't have any images to put on them, so there empty for the time being but will have things put on them most likely on a later date.

slideshow

In today's class I made the about me section of my website which I had but at the bottom of the home page. If you click the about button on the homepage it takes you to the bottom of the page, If you click it on any other page it take you to another page with the about me section in the center.

I also changed the background from read to a nice pattern that doesn't hurt the eyes.

On the portfolio section I added a slide show on the main portfolio section and the 3D modeling section. I put on the portfolio slideshow I put the map I made for the spatial storytelling game, and a couple of 3D models on it.On the 3D section slideshow I put almost all my 3D models on and made them all the same size, which distracted some of the images.

https://abbisands1.github.io/New-Portfolio/.

I came back later in the week to see the slideshow function had stopped working and showed the pictures separately and stacked one above the other, for the time being I'm going to leave it like this and sought the slideshow out at a later date.

Website 2

In today's lesson we did more work on the Portfolio, I planed to make it so the search bar would follow down the screen when you scrolled.

I couldn't do this because the coding we needed to use doesn't work very well with flex box and would mess things up and make it look a bit wired and not like the above design.(It stacked the links on top of each other) In the end I ditched the idea of  the search bar following when you scrolled so it just stayed where it is.

I also made it so when you select twitter in the drop down menu in contacts it takes you to my twitter, this however did cause problems and made it that if you selected anything that didn't have a link on it it would take you to the twitter which caused a bit of a problem because it would mess up if anyone was to do that. But we managed to fix, I missed a bit of coding and didn't close of a section properly so it would do what I said above, but after going through all the code I found where I went wrong and fixed it.

The final thing I did was Make a link on the about section of the search bar which takes you to the bottom of the page which will show the about me section with a picture and a short bio on what I do.

The outline of what my about me section will look like.

https://abbisands1.github.io/New-Portfolio/#link1

Making a Portfolio part 1

In class today I started making my portfolio based on the sketch that I did at home.

The first thing I did was make a navigation bar which should link you to the Home, About, Portfolio,Blog, Contact.

On the contact section and Portfolio section of the navigation bar it drops down to show the choices It can take you too. 

The portfolio drop down menu.

I then added three parent sections with a margin top of 5 px for all of them and a margin 8 px bottom with 5 different sections with spaces between of 5 px in between each section.

Where the white Square is I added text which was put into a child div which was inside a parent div
the white box is called section_two_right and it has a paragraph in it that says click here for Portfolio. this has a class which I called click. In the css for section two right we made the font-size: 2 rem, and the position relative.

On the div class click in the css we made the position:absolute with a top of -50%, and transform: translateY  (-50%) which allowed it to look like this.

I also made it so when you click on the section in  the navigation bar that says blog it opens a new page and takes you to my blogger.

 https://abbisands1.github.io/New-Portfolio/

research on designs for my portfolio

Yui Moreau

Retro game looking  

Christopher Lee

cartoon looking almost childish but Is aimed probably for all ages as it uses styles from shows that older people probably watched when they where younger.

Studio Airport

Just a simple design most people could pull of a portfolio that looks like this, but they make it unique for the own  cause.

Justin Maller

unique art style yet a simple layout making the work stand out more on the black background

Responsive images

In the class we had 3 hours to make a site that had the same layout as one of the tree sites we had the choice of copying. I decided to copy the third choice.

Dwayne Helped me with this project because I was behind and I couldn't remember a lot of the stuff I needed to do, so he helped look at what we where doing and think logically.

we thought logically and decided to split the website into sections. 5 sections so we can go a step at a time. the entire website is a div, one section is a div parent, and the small sections in the div parent are called children div's.

I total there is one div, 5 parent divs, and 15 children div's.

We then added a navigation at the top with 3 different  nav classes with ul's and lists

My try at the website displayed above but with no pictures

https://abbisands1.github.io/abbie-flexbox/

Github

These links take you too all the pages I've done in lesson that work it shows a variety of tasks and different layouts like flex box and other stuff as well. 

Here is a link to all the pages I did on  github

css.layout exercise: https://abbisands1.github.io/css_layout_exercises_starter_files-master/

About me: https://abbisands1.github.io/about_me/

Palace :https://abbisands1.github.io/flex_box/

new website: https://abbisands1.github.io/new_website/

recap

In todays lesson we had a recap lesson doing a pop quiz throughout the lessons.
we went over all the work we been doing over the term.

We also went onto flex box froggy again to see what we could remember doing it from last week and to see if we could do it faster.

in the last session we  had to try and finish the flex box website we where doing last week. I didn't complete it but I added onto it.

Flexbox and

In the first lesson we went on to a website called flex box froggy which teaches you how to use flex box.
http://flexboxfroggy.com/
The last task- incomplete

Session 2
Check out the Post called Team Flex box as it has been edited to a better standard for this lesson:
https://projectonegamesdesign.blogspot.co.uk/2016/11/team-flexbox.html.

Session 3
we made our own design using flex box. it needed to look like this

and mine turned out like this. I got a quarter of it done.

here is the coding

html

 css

copying a website Design

In this lesson we where given the task to try and replicate the layout of a website we had 4 choices to chose from that we got sent in the an email. I chose the 3rd one which was based on bloodborne.

I made the website on the top ten games of certain genres (action, JRPG, Etc.)
Layout of my website below.

for the section with the first chunk of text I went and found an arcade machine to use as a background so it looked like it was texted displayed on the screen.

I then found backgrounds that suited the genre I was doing the top 10 on and used them as backgrounds to have behind the text.

Team Flexbox

Research and planning
Flexbox is a layout mode providing for the arrangement of the elements displayed on the page such that they behave predictably when the page layout must suit different skills.


Examples of Flexbox designs: 

Link 1: https://codepen.io/jeremyfrank/pen/pyexQJ

Link 2: https://codepen.io/_Billy_Brown/pen/ACamb

Link 3: https://codepen.io/iAmNathanJ/pen/pvprQZ

Link 4: https://codepen.io/paulomrcunha/pen/qlLaj

Link 5: https://codepen.io/jenie/pen/BLEZLd

The website I found  information on flex box is called:  https://css-tricks.com/snippets/css/a-guide-to-flexbox/


The advantages of flex box is that. 

• It is supported across 95% of  desktop and mobile browsers.
• Creating  repeatable elements is easy and fast .
• and they finally ,made centering easier
• along with other ups.

The disadvantage to flex box is that almost every other layout option you could use is superior to it for example the grid method is better. the layout is better on the grid then flex box shown bellow

flex box

Grid

Sure the grid method isn't good in  itself it has it's own faults but everything has, It still manages to be better.

Making Cards

In the lesson today we made cards.

we had to make 10 cards. to make them we had to make individual dive classes for each card so we could change them to what we want them to look like.

to get the images go in the place I wanted them to stay where they at the correct size I had to put the codes img { width:100%:}

.container{

width: 90%;

margin:auto;

}

into the css section.

To actually insert the picture we had to write <img src=> and in between the equals and the right arrow  paste the picture.

To add the text we had to put <p></p> and in between the highlighted section put what you want to write.To make text at the top be where it is put the <p></p> above the <img src=>.

To make one card we had to have this in the html section

<div class="red-box">

<p class="text">Lion Rider</p>

<img src="https://i.kinja-img.com/gawker-media/image/upload/s--3wtXh6PJ--/c_scale,fl_progressive,q_80,w_800/18bltictofxg7jpg.jpg">

<p class="text">When this card is placed any lion card gets +5 attack</p>

and the section in the css to make one card look like this 

.red-box{

width:300px; 

height:400px;

background-color:red;

margin: 20px;

float: left;

border: 5px solid black;

}

06/10/2016

session 1

In todays lesson we went to brand style guide and looked at Marvel. We looked at the design,looking at what the color scheme they use, like the brand colors, grey colors and UI colors. we also looked at the typography they used <p class="fontFamily-fakt Soft">....</p>

https://marvelapp.com/styleguide/design/typography

We went onto google font's to find a font to use on our Portfolio.

https://fonts.google.com/specimen/Chewy

https://fonts.google.com/specimen/Orbitron

https://fonts.google.com/specimen/Bangers

we also went onto Adobe Kuler to get color schemes.

https://color.adobe.com/create/image/

color scheme 1 

color scheme 2

color scheme 3

https://color.adobe.com/create/image/

session 2

to change the font 

index.html

under the css

<link href="https://fonts.googleapis.com/css?family=Bangers|Chewy|Orbitron" rel="stylesheet">

style.css

h1{

font-family: 'Orbitron', sans-serif;

This changes the design of the font to what you have chosen I choose Orbittron which is the second image of my font choice

we went onto Unsplash and got a picture to use as a background for the about me section for my about me page.

download image and save in image file about.me

index.html

<div class="about_me"> put everything in between</div>

style.css

.about_me {background-image:url(../images/lake.jpg

);

width: 100%;

height:500px;

color: a60010;

font-size: 30px;

}

index.html

<div class="container">put what you want between (e.g.text for me)</div>

style.css

.container{

width:75%

margin:auto;