Tumgik
sidkiddohtml-blog · 7 years
Text
Notes 09/19/2017
Tumblr media
0 notes
sidkiddohtml-blog · 7 years
Text
Notes 09/14/2017
Tumblr media
0 notes
sidkiddohtml-blog · 7 years
Text
Wire frame and Website Sketches
Tumblr media Tumblr media
0 notes
sidkiddohtml-blog · 7 years
Text
Local, National, and International Design Agencies
Local
1. http://427design.com/
427
Akron, OH
When I first moved to Akron from California, this was actually one of the first design agencies I looked up. I was immediately in adoration of the printed illustrations popularly produced by this company. If ever there were a studio tour that I would love to take locally it would be this one. They seem pretty well rounded here too, most of the web section is dedicated to really branding that company with its own personal sensibility. Meaning that even though the designers here have tremendous creative style and voices, they respect the client and still deliver a wonder finished project.
 2. http://gomedia.com/
Cleveland OH
Go Media
This design studio in Cleveland, much like that of 427 design, is also a well rounded group of creatives and talented individuals. I think what has surprised me the most about some of our local studios is just how diverse and specialized they are at many different design applications. There were many local places that had a heavy specialization in just one category, such as logo design or web development. There are some however, like GO media that really represent the kind of place that I would eventually like to work at. It would be a terrible thing to only ever work for a company that specializes in a very limited field with a stagnating scope that would almost certainly kill creativity.
 More Akron!
http://www.evolvecreativegroup.com/
http://www.louisandpartners.com/
http://www.arraycreative.com/
 National
1. http://www.studionumberone.com/
Studio Number One
Shepard Fairey
From the dude that brought us the iconic Obama “Hope” poster comes this unique west coast design studio called “Studio Number One”. If you can get passed the interesting choice in naming, the studio itself produces a variety of work from illustrative, typographic, and even video entertainment media. This is a decent example of a studio that can take care of pretty much any design need that has to be fulfilled.
 2. http://sagmeisterwalsh.com/
Sagmeister & Walsh
New York, NY
This is an interesting studio because it offers a dose of complete crazy. The avantgarde style of the work that this associated studio puts out is certainly a breath of fresh air while wading through the torrent of extremely bring and bland ad agencies. It is a bit odd that they have a real time live feed of their employees working in creative projects on the home page of their website, but never mind privacy! A design studio that produces such illustrative and strange work is bound to have a few quirks.
 International
1. http://alphabeticalstudio.com/index.html
Shoreditch, London UK
Alphebetical studio is an interesting marragige of digital art meets fine art meets application. They do not advertise much in the way of corporate identity or Web development, however they do showcase typography, illustration, and graphic design as more of a fine art institution. In other words “Strictly business” is not a term that would define this studio well. So far I have found that the most successful places tend to have fine art establishment endeavors as well as creating beautiful graphic slutions for major companys. Perhaps they have the ability and freedom to do this because they are so well established, or maybe perhaps this is something every ad agency should strive to do to create diversity and resilience in their image.
 2. http://www.jaegerundjaeger.de/home/
Germany
I first clicked on this agency because they had an unusual logo that drew me it. Just goes to show you how powerful that kind of branding can be when it comes to obtaining new clients. I was taken aback by how minimalist the work is, and yet it breathes creativity and absurdity even with large company branding. I find it interesting that something so simple from some agencies can be so inspiring, whereas others tend to put me to sleep with their lack of clever wit to back up that use of simplicity.
0 notes
sidkiddohtml-blog · 7 years
Text
5+ Student Portfolio Sites
Tumblr media
http://chriswallenhorst.com/
Chris’s website has a comparatively unique feel to it with respect to his peers. A large gif with a funny quote is presented as the first visual element that you see. This is a great idea for those visiting the site to get a clear picture of the personality of the artist. It sets it apart from most of the sites I have seen so far which are just a single page with image, or a scroll down website that reflects the same Ideas. He decided to entertain the user before they even had an opportunity to view his work, which is outstanding, however can change the way people understand your work.
Tumblr media
https://www.meg-steele.com/
What I like about Meg Steels website is that it is very clean and organized. I find that she carries over this approach into her design esthetic so the website makes sense and is very cohesive.  The index of the site is her “work” page, which I think can be effective and at the same time a bit impersonal. It does however paint a picture of who she is as a designer at first glance.
Tumblr media
http://www.aubreyejoseph.com/ Out of most of the scrolling websites I have seen I think this one is one of the more effective approaches. Everything you need to know is listed in an organized fashion, and has a unique and colorful flair to it. If I had to change one thing, it would be the obnoxiously large side bar to the right of the page. It seems unnecessarily large, and redundant for the flow of the website. Some of the links don’t even bring you to the appropriate spot of the site 6/10.
Tumblr media
http://www.tamaraklewis.com/
What I enjoyed most about this website was the transitions and animations attached to the graphic elements and task bars. This website has a very subdued color palate with an extremely organized layout that makes information easy to locate. I find the “works” interactive bar to be a unique touch, however the lack of available work leaves something to be desired. I guess the best problem to have is someone wanting to see more of your work because they are intrigued.
Tumblr media
http://davidpashovich.com/
David has a tremendously good eye for understanding “white space”. His website is very organized and visually appealing with several animations and transitions, however, the part that strikes me the most is how well the visual and type elements work without seeming to cluttered or chaotic. I feel that when I present ideas for my website, I may have to consider doing a minimalist site as that seems to be more eye catching after viewing so many of these.
Tumblr media
http://papantoniou.co/
I like the idea of having a clean website that is well organized but at the same time gives you a good sense of the personality of this artist. I feel that Philip has a lot of good things going on because he combines a lot of the traits that I admire most from the other websites I enjoyed, and combines them in an organized and presentable way. It’s not extremely flashy with animation and graphics, however it makes good use of space and is practical when it comes to viewing the actual work.
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
http://davelamp.com/
This website isn’t quite the definition of perfection, however I think it has a few little touches that are worth talking about. For starters, one of the first things I noticed was that the website tab alternates through an animation. Not only have I never seen this before, but it’s extrememly unique, and something that I wouldn’t mind learning how to do. I do appreciate aspects of the layout that leave a bit of “wiggle room” however I think some of his typograpy needs work.
0 notes
sidkiddohtml-blog · 7 years
Text
20+ Portfolio Websites 5+ Inspirational Blogs 09/07/17
Websites
Tumblr media
https://www.femmefatale.paris/en
The title page for this website was extremely invigorating and unique compared to any I had ever seen before. Not only did it use 3d perspective with respect to mouse movement, but the fade in text animation gave it an interesting level of depth.  Once you enter the site it is a single page scroll down website with various changing animations for separate sections and projects. I do however find the actual content of the index page less engaging and esthetically pleasing than that of the enter page. It is only when you click on a project that you are again rewarded with unique visuals.
Tumblr media
http://www.alexandrerochet.com/
This website creeped me the fuck out at first. The static visuals mixed with elements of sound bordering on ASMR created quite the experience, and that was only for the enter page. It gives us an interesting look into the personality of the artist, and yet he is not limited to this esthetic. There is a sharp contrast between light and dark in the visual elements of this website. I think that is a unique idea because it’s as if he is completely changing the look and mood of the website for every single project that you click on. I a lot of work for desired effect.
Tumblr media
http://y78.fr/
This website is an immediate assault on the senses, and I’m into it. You are treated instantly to an curious barrage of 80’s techno music, imagery, and typography that seems to shout “HEY LOOK AT THIS ASSHOLE” as soon as the website loads. This video combination scroll based portfolio takes an old idea and makes it its own with the incorporation of unexpected visual and audio media. I must say however, it is a little startling…but I can appreciate this.
Tumblr media
http://www.adandypunk.com/
This was sort of an unexpected image map based website. I find that an image map can make creativity difficult to navigate if it is too contrived, however this website has a good balance. I like the idea of creating a gallery that overlays the index page with an animation that slides in from the right containing thumbnails. I haven’t seen too much of that done and it allows the user to have an instant look of the artists work rather than clicking on a link and loading a separate page.
Tumblr media
 http://www.rleonardi.com/
This guy knows how to animate and everything else in-between. I chose to write briefly about this website as well because I had the most fun playing around on it.  The interactive resume is the most creative thing I have ever seen anyone do in the history of resumes. It was as immersive as playing a platformer game, in fact, that’s practically what it is but in resume form. I was simply blown away by the animation mixed with type and functionality. http://www.rleonardi.com/interactive-resume/
Tumblr media
 http://smartgc.com.ar/english.php
The most interesting thing about this website is its blatant lack of any color. The entire website is presented in greyscale until you mouse over a selected work or project. This is an interesting tactic to stand out because most of the websites I have visited are so vibrant and use interesting color schemes. That being said, I remember them far less than this website due to the sheer fact that it uses its grey scale theme as a creative advantage. I think this is a unique approach and an unexpected correct choice.
Tumblr media
http://www.ollygibbs.com/
To contrast the previous site, Olly Gibbs has created a site filled with explosions of color, whimsy, and rampant imagination. There is a lot going on here that one can easily become overwhelmed by. I find it an interesting way to present your work however because it effectively gives the user a lot to look at in such a small amount of space. One could argue however that doing such can distract the user from the direction you would like them to take in seeking out information on the site. Organized chaos, that’s the word.
Tumblr media
http://strangelove.me/
This is a simple portfolio site layout that is clean and to the point. Of all the ones I chose to write about, I truly feel that this design is the most practical and achievable on the list. A simple and clean interface with clear links and pathways that give you what you are expecting from a portfolio website. Now that may be somewhat boring, however the art makes up for a less than enthusiastic layout.
Tumblr media
http://www.trademark-trademark.com/
Tumblr media
This website was an absolute joy to look at because I felt like it never once took itself seriously. Even the website tab has a middle finger on it. It may be simple, but an artist like this needs to let their work stand alone. It seems like incorporating a lot of graphic elements would get in the way of the already blatant “fuck you society” vibe of this site. If I could change one minor detail, it would be to get rid of the harsh underline of the type in the navigation bar.
Tumblr media
http://justinmaller.com/
This is a simple scroll down portfolio website with an interesting twist. You are offered a series of thumbnails that when clicked open up into a mini portfolio outlaying the process of that individual piece, or multiple projects that reflect the design of the thumbnail. This is a curious way to present work because it gives you a small sample, and when you click the payoff is a tremendous amount of insight and work that is quite unexpected. (I thought it would just enlarge the thumbnail…I was pretty fabulously wrong).
Tumblr media
http://stereocreative.com/work
This is obviously a design portfolio site for a huge media company, and it flaunts that spectacularly. Each image is a still, and when you mouse over that section it springs to live as a video with typographic overlay. The amount of impressive work listed on this website is to be expected, so I can’t really give them that much credit. There is also a heavy influx in imagery featuring the Kardashians so they lose points there as well… Still, very impressive stuff.
Tumblr media
http://www.ralphsteadman.com/
I wanted to throw this one into the mix, as ralph Steadman is one of my favorite illustrators and I think he has quite a unique portfolio website. I’m not sure if it counts as a “portfolio only” website because it also serves as a promotional website for his brand, services, shop, and etc. I do however enjoy the animated features that give you a sense of organized chaos that embodies his style and spirit. The website itself directs you to a tab where all of his past works can be viewed. For this portion of the website, he splits each collection up into its own separate page, with the information presented embedded into a container. I don’t find this as visually appealing as the index page, however it is functional and organized if you are trying to access a specific work from a specific collection. 
Tumblr media
http://www.blublu.org/
This is a unique portfolio website that I have visited in the past. I like the idea of using image maps for design purposes, however I think that could be somewhat of an organizational nightmare unless it is done properly. The feel of this website is indeed organized, however it can at times be difficult to find exactly what you are looking for due to the limitations of the interface.  I do however think it is one of the most unique portfolio approaches I have seen yet, it’s also so street art so that’s a big plus for me.
Tumblr media
http://www.vitosalvatore.com/
This is one of the more basic professional portfolio websites I’ve found, however I do think it is executable at my level of understanding. The animations and slide shows that showcase Vito’s work are a nice touch to an already organized and well thought out wesite. The use of whitespace and design icons work very well together with the larger full screen graphics. The works or index page is a scroll down that features the artist’s projects with a subtle image enlargement effect.  This is a site I will be inspecting heavily for code information as it features a lot of effects that I am curious about.
Tumblr media
https://www.studioanja.com/
This was a very different website apart from the rest I have included on this list. It is so basic and simple. It really leaves a lot to be desired, however it allows the work to really speak for itself. There is much graphically to be improved upon, but the content is there. 
Tumblr media
https://www.ferrisnorman.com/
I like the clean look of this contained website. It’s very organized and clean. This centered look can be favorable sometimes if you want absolute focus to right in front of the user. I appreciate this method, but at the same time, I can see how this could contribute to experiences of boredom. 
Tumblr media
http://www.christiansiriano.com/
This is a bit different from your typical design website, this is a fashion design website. This website has stunning visuals that make it seem larger than itself. One of the main problems of this site is the loading of the images, it could be improved by the slideshow.
Tumblr media
http://www.joshharker.com/
Tumblr media
http://stevenharrington.com/   => 
Tumblr media
http://www.erikmarinovich.com/
Tumblr media
https://www.mikeyburton.com/
Tumblr media
http://mikemcquade.com/
Blogs:
Design---------------------------------------------------------
http://www.designclever.co.uk/
What I appreciate most about this blog is that it is 95% image. This is a great blog to gain inspirational images from as it incorporates so many different approaches to design. Often times if it appears on this blog its because it has recently been nominated for an award or considered by the design community as outstanding. I do enjoy the amount of posts on this site as well, I haven’t finished getting to the end of it yet. 
https://eyeondesign.aiga.org/
This is a fascinating design blog that is more article than image. This blog is interesting visually and has the ability to capture your attention when it comes to recent creative politics and news. 
https://illustrationage.com/
Since illustration is one of my stronger qualities as a designer, I do occasionally peruse articles and information on illustration age. This website is interesting because they often times do an illustrator of the week and showcase recent projects from that individual. It is a good way to learn about new creative individuals and their application of illustration and creativity that may defy conventional understanding of what it means to be an illustrator. 
Web----------------------------------------------------------
https://www.webpagefx.com/blog/web-design/
In terms of usefulness centered around web themed blogs, I chose to speak about six revisions. While perusing the internet for interesting blogs steeped heavily in web design, I noticed that some where certainly form over function. I chose this blog because I find it extremely useful in solving web woes and answering questions that I didn’t even know I had. It is not particularly flashy or appealing in any regard, it is however extremely helpful.
http://materialdesignblog.com/
This is a unique hybrid site that focuses mainly on “how to” webdesign, however it contains information, works, and tutorials for regular design projects as well. This blog is more involved in showing off the creative aspects of web design rather than tackling problems with easy to understand articles such and “six revisions”. This is a much more engaging blog at it contains rich color and imagery within the posts. It flows well and is pretty organised so tutorials and information is easy to locate. 10/10
0 notes
sidkiddohtml-blog · 7 years
Text
Class notes 08/31/17
Tumblr media Tumblr media
------------------------------------------Source Code--------------------------------------------
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body>     <div class ="container"> <header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="social.html">Social</a></li> </ul> </nav> </header> <main></main> <footer>     <img src="Image/deviantart-4-xxl.png" width="25" height="25" alt=""/>     <img src="Image/linkedin.png" width="300" height="300" alt=""/>     <img src="Image/social-media-icons-facebook-grey-copy.png" width="400" height="400" alt=""/>     <img src="Image/tumblr-3-xxl.png" width="256" height="256" alt=""/> </footer>     <!---end of container--->
</div> </body> </html>
-----------------------------------------------CSS-------------------------------------------------
@charset "UTF-8"; /* HTML styles  */ body{ background: #262626; margin: 0px; }
a{ text-decoration: none; text-transform: uppercase; font-family: 'Oswald', sans-serif; } /* unvisited link */ a:link {    color: #453B39; }
/* visited link */ a:visited {    color: #E1B69E; }
/* mouse over link */ a:hover {    color: #E1B69E; }
/* selected link */ a:active {    color: #3B2C2D; }
header{ //background: #9B9B9B; height: 50px; border-bottom: solid 1px rgba(100,100,100,0.7); } nav{ } nav ul{ list-style: none; padding: 0px; margin: 0px; } nav li{ float:left; margin: 10px; }
main{ //background:#3EBED3; height:610px; }
footer{ height:50px; //background: #0CE0E6; border-top: solid 1px rgba(100,100,100,0.7); } img{ width: 40px; height: 40px; padding-right: 1px; float: center; }
/*custom styles */ .container { width: 1200px; height: 700px; border: solid 1px rgba(100,100,100,0.7); /*last number is for border transparancy */ margin: 20px auto; }
0 notes
sidkiddohtml-blog · 7 years
Text
10 design concepts that every web developer needs to know 09/04/17
Much like the previous article, this one has many congruent principles that echo the world of fine art.
In the first paragraph it is argued that design isn’t just visual, it is the entire experience you have with the functionality, the speed of the site, the content, and the overall philosophy behind the information being presented. This is a concept that I wish more people were talking about, because at the end of the day we are functionally (hopefully) creating a product or experience for others to examine and understand. How the hell does Stevie Wonder see things?
Being user centric can sometimes be a challenging feat because you must remove yourself from the project enough to be able to analyze it constructively from a stranger’s point of view. This of course is no easy task once you are so engrossed with something, however being married to an interface doesn’t make it easy to navigate. I think this is something you always have to consider, however you must also make this idea a big part of your initial sketches and designs.
Details are an interesting thing to pay attention to, or sometimes that level of focus can be a curse. I am often times never satisfied with my own work, and this becomes a problem with respect to refining minute details for an extended period of time. Learning to adjust what is necessary and not overcomplicating things will be a challenge for me personally, but it is something that I need to stop obsessing so much over as it can be ultimately time consuming and unnecessary.
The functionality of sketching and using white spaces or breaks is not something that has escaped me too much. I like the feel of a design that I can move around in. I started off as a traditional artist, so in many ways I am more comfortable sketching out ideas vs trying to make them come to life in a program. That being said, I often find myself tentative of moving from one to the other. One of my professors has suggested that because I think this way, if I get stuck digitally I should go back to paper to reason out my difficulties. This method, for me, is successful.
Grid structure and hierarchy...ah my old mistresses. Let me address this by saying that I had never in my life used a grid structure for design prior to University. Now let me say that it has improved my life and ability to organize information drastically. I don’t even know what I was doing before I figured out the correct way to design something with a grid structure. Also, another big rule in general has always been hierarchy…that I understand, however applying that to information wasn’t something considered by my neophyte self when I decided to embark upon my design journey. These two things have changed the way I work and see the world now.
Something new I got from this article was the idea of keeping an inspiration folder. I don’t really think I have done this before, but it is something that I would love to have to fall back on. Sure I blog things about artists I enjoy and post amusing illustrations now and again, but it’s not as if I have a creative folder to gain knowledge from just floating around on my computer. I need to get on this.
The final points of this article are “design is all about problem solving” and “know how to talk about and critique design”. I think the two go together in a very important way. If design is all about problem solving you have to understand the logic behind what works and what does not (and why). I think if you have an understanding of number nine, it will improve your ability to understand this about your own work and others. If you can identify the problem that needs solved, it makes it much more simple to openly discuss it in a critique with your peers. It also helps to have a thick skin and a resilient nature. Humility goes a long way in this profession I am sure.
Overall I found this article to be extremely helpful in addressing some design concepts I was aware of, and introducing a few that I had not yet considered. The resources and links to other articles proved to be helpful as well (except the design for developers link…that one was broken)
0 notes
sidkiddohtml-blog · 7 years
Text
9 Principles for good web design article 09/04/17
After reading this article, I can’t help but question why I haven’t seen this information prior to this moment. Most of these insights would have been paramount in excelling in Web 1, so I am approaching this with the “better late than never mentality”.
I found this assigned reading to be quite useful as it has given me more insight on how to excel in other courses as well as web design.
One of the first principles discussed is that of precedence or “guiding the eye”. As with most visual forms of media, this principle is multifaceted and applies to many creative things, not just web design. Position, color, contrast, size, and design elements all have their place within fine art and design, that being said, the approach in which they are used can be quite different. For example, you may be limited to the confines of the code while considering precedence, so being clever and coming up with an appropriate solution may prove to be a bit more challenging.
Another key principle is spacing. When you are organizing information in web format, padding, spacing, and white space are quite significant factors. They help the reader understand the information being presented and enhances or diminishes the readability in some instances. When organizing information this way it is important to have it be legible, and having negative space or “white space” can be just as important to the overall rhythm of the design. Having endless information without any room to breathe can tire the reader.
Having your website be navigable is immeasurably important. There is nothing more frustrating that being redirected over and over again, or not being able to easily find a bit of information. Personally, this is something that I have struggled with in the past, so understanding navigation buttons and orientation is something that I hope to become more proficient in.
There is also something to be said of limitations. The fourth principle of “design to build” is a particularly relevant point because it allows for us to understand our limitations. When creating something in photoshop and bringing it over to a web format, will it behave the way you would like it to? With any luck, yes…realistically 1/10. This is an important principle for me to learn from in terms of editing. I find that I tend to be quite ambitious with respect to my web work, I also find that I am incapable of executing some of those ambitions realistically. Editing and simplification are things I struggle with, however, as my understanding of code improves I know that my adaptability to resolving issues will follow-suit.
Typography…Don’t use Bauhaus, comic sans, or papyrus. For the love of baby Jesus… I can’t stress enough how important it is to know what font families work and which ones do not. In many cases you will have the mixing of font size, color, and typeface on a single webpage. I am still learning, but Bob is making sure that I don’t fuck this up too terribly…hopefully.
Usability is a unique problem sometimes because you must assume what most people would do when carrying out tasks and navigating the site. This preemptive knowledge can be quite useful to keep in mind when you are thinking about the layout of the website.
The seventh principle of alignment is a problem that I have had endless grief with. Understanding how to piece things together so the design doesn’t fall apart is quite difficult for me at times. Even when designing with a grid or a container, it is difficult for me to get things to stay put. I will be checking out the resources at DesignByGrid.com for help with this matter.
Clarity and consistency are pretty self explanatory, make sure the design is crisp and make sure all the heading sizes, fonts, coloring, design elements, and etc. are consistent with each other.
This article has quite a number of resources linked to it that I have been checking out and will continue to check out to refresh my coding memory. I find it extremely useful and I will probably find myself returning to it as somewhat of a checklist for future projects to make sure I have designed with these nine principles in mind.
0 notes
sidkiddohtml-blog · 8 years
Text
Artist Website
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
http://www.blublu.org/
This is the website for street artist Blu, I chose this particular website because it was quite unexpected and really unique in terms of design. This website predominately features HTML and CSS elements. There are some Javascript elements on the “Store” tab, but for the majority of the website it is not featured. The website makes extensive use of image maps to guide the viewer to different pages within the site. When you click on an image from the book you are redirected to another page that shows you an enlarged version of the image as well.  I think it is a clever portfolio and design website. 
0 notes
sidkiddohtml-blog · 8 years
Text
Site Map
Tumblr media
0 notes
sidkiddohtml-blog · 8 years
Text
Website Test Colors
Tumblr media
0 notes
sidkiddohtml-blog · 8 years
Text
Animal Website
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
0 notes
sidkiddohtml-blog · 8 years
Text
02/08/17
Embedding Videos!
Tumblr media Tumblr media Tumblr media
0 notes
sidkiddohtml-blog · 8 years
Text
02/06/17
Tumblr media Tumblr media Tumblr media Tumblr media
<html> <head>
<style> .floating-box { text-align: center; float: left; width: 120px; height: 35px; background-color:#F9B274; border-radius: 25px; box-shadow: 5px 5px; } .floating-box2 { text-align:center; float: left; width: 120px; height: 35px; background-color:#FAA053; border-radius: 25px; box-shadow: 5px 5px;} .floating-box3 { text-align:center; float: left; width: 120px; height: 35px; background-color:#F8892A; border-radius: 25px; box-shadow: 5px 5px;} .floating-box4 { text-align:center; float: left; width: 120px; height: 35px; background-color:#F87708; border-radius: 25px; box-shadow: 5px 5px;}
.floating-box5 { text-align:center; float: left; width: 120px; height: 35px; background-color:#DE7215; border-radius: 25px; box-shadow: 5px 5px;} .floating-box6 { text-align: center; float: left; width: 120px; height: 35px; background-color:#AA560E; border-radius: 25px; box-shadow: 5px 5px;} .floating-box7 { text-align: center; float: left; width: 120px; height: 35px; background-color:#783802; border-radius: 25px; box-shadow: 5px 5px;} .floating-box8 { text-align:center; float: left; width: 120px; height: 35px; background-color:#5A2B02; border-radius: 25px; box-shadow: 5px 5px;}
.after-box { background: #1F0D14; border-radius: 25px; color: white; text-align: center; text-decoration: bold; text-transform: uppercase; text-indent: 0px; letter-spacing: 5px; line-height: 2.0; word-spacing: 50px; }
} .after-box2 { clear: left; background:#5F2D01; font-family:Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif"; width: 500px; margin:10px; padding: 10px; border-radius: 25px } div.ggg { text-align:center; background-color: black; position: relative; width: 200px; height: 200px; border-radius: 25px 25px; box-shadow: 0 5px 5px rgba(255,255,225,0.5);
} .right{ float:right; clear:left; background-color: black; width:200px; height:200px; border: 3px solid black; padding: 10px; border-radius: 10px 50px; box-shadow: 0 5px 5px rgba(255,255,225,0.5); }
a:link{ color:forestgreen; background-color: transparent; text-decoration: none; } body { background-color: #B63D2D; } body,td,th { color: #F8F8F8; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif; } </style> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body>
<div class="floating-box"><a href= "photoboxCUTE!!!_new.html">Works</a></div> <div class="floating-box2"><a href= "photobox2.html">Gallery</a></div> <div class="floating-box3"><a href= "photobox3.html">Archive</a></div> <div class="floating-box4"><a href= "photobox4.html">Blog</a></div> <div class="floating-box5"><a href= "photobox5.html">Comic</a></div> <div class="floating-box6">Blog</div> <div class="floating-box7">Store</div> <div class="floating-box8">Contact</div>
<div class="after-box">Welcome to my design page! </div><br>
<div class="after-box2">Here I will be exploring how to create a page! I'm not quite sure if I'm doing a very good job yet... Anyways, I wanted to make this paragraph long enough so I could see whatwould happen to the text box I put it in. Obviously it compensates but maintains the same position and margins, neato! </div><br>
<div class="ggg">This is a text box </div> <p> As you can see, this text box is to the left!</p> <div class="right"> <p>stay on the right, please! =^. .^=</p> </div>
</body> </html>
ADDING LINKS!!!
0 notes
sidkiddohtml-blog · 8 years
Text
Fun with Photoboxes!
Tumblr media Tumblr media
<!DOCTYPE html> <html> <head> <style>
.photobox { margin: 10px; float:left; border: 1px solid black; border-style: ridge; width: 200px; }
.photobox img { width: 100%; height: auto; }
.text { padding: 30px; text-align: center;
}
.photobox:hover { border: 3px solid #92C4F9; width: 300px; background-color: skyblue;
} .text:hover { background-color:black; color:white; } body { background-color: #F8F5BF; } </style> <meta charset="UTF-8"> </head> <body> <div class="photobox"> <img src="image/03.jpg"alt="alternative text"> <div class="text">Beerus: God of Destruction</div> </div>
<div class="photobox"> <img src="file:///Macintosh HD/Users/smb308/Desktop/boop.png" width="631" height="399" alt=""/> <div class="text">Super Cute!</div> </div>
<div class="photobox"> <img src="04.jpg" width="500" height="428" alt=""/> <div class="text">=^..^=</div> </div>
</body> </html>
0 notes
sidkiddohtml-blog · 8 years
Text
Week 2: Website Inspection
http://www.awwwards.com/sites/nature-conservancy-california
Tumblr media Tumblr media
For my website I chose the Nature Conservancy California page. I discovered upon inspection that this website was an HTML document. I wasn’t sure if there were any CSS elements of the website. I didn’t see any in the code so I was hoping that could be cleared up for me. I do know that there are elements of Javascript as well.
0 notes