Foundation Batch 60 Technological Skill Htet Aung Lin

Create Static Website Design and Report

Submitted by: Mg Htet Aung Lin

Foundation- 60

GUSTO University

Issue Date:12/10/2021

Submission Date:26/10/2021

1
Foundation Batch 60 Technological Skill Htet Aung Lin

I decided to create a website for Codashop which is an online shop for buying
money or coin in many online games. It sells only money or points in game, but I
try to add something better. It is for buying skins directly by logging-in to your
game account through Codashop.But it’s currently available for 3 games. So, I drew
my own sample layout style in a paper and applied to the sublime text using tables.

I have learnt some CSS and JavaScript before the class, so I applied them in it.

First of all, there are 7 pages. Main page, contact/help page

So let’s begin from the menu. Firstly, about the gradient background color, I know
them basically but my own gradient colors don’t look great so I searched some code
and tried from https://digitalsynopsis.com/design/beautiful-color-ui-gradients-
backgrounds/ .Main purpose to use gradient as background color is to affect
every nav bar and every other gradient using lower opacity. Next, for the

sign in/sign out/language buttons, I used “button”tag. I found some technical

errors in clicking while using with “input” tag so I used it.But I also use input tag to

2
Foundation Batch 60 Technological Skill Htet Aung Lin

some buttons.So,I fixed the padding,width and border as usual.Also I linked Sign in
and Sign up buttons to my html links using “a”tag.

Here is the hover effects.To do that, I added one div with specific text in each
column. And I hid the div using “display:none”.To reappear on hover, I used
“.button: hover +.div{display: block}”.

For the language button,I want the language scroll bar to be appeared when
clicking it so.I put the list of language with small height in second row and set it div
and made it hidden as earlier.To make the scroll bar if clicked and hide back when
reclick so I used my little JavaScript skill. function langbutton() { var x
=document.getElementById("nav4lang");if (x.style.display === "none")

{ x.style.display = "block";} else { x.style.display = "none"; }}.

For download logo, I downloaded png from google and added link using “a” tag.

3
Foundation Batch 60 Technological Skill Htet Aung Lin

For the input search box, I use transparent background color and paddings. For the
search icon button, I used input tag and set background .Also changed default
placeholder color to cyan using ::placeholder{color:cyan}. And also the input
colors(color of texts we type in) to blue using input{color:blue}.

using url image and background position as center. And I set the input tag with
border color cyan to make it appear.

I used simple marquee with 6 images using default properties because it is okay

with it.

For app logos,I only made Valorant, Dota and league of legends as active
webpages. For others they aren’t active. I used all logo using “button tag” to be
clickable.

4
Foundation Batch 60 Technological Skill Htet Aung Lin

So to be realistic, I used JavaScript to use on-click function so that if they are

clicked, the hidden “div” under each row will appear.

To do that, I used the “sorry..” line as one div under each row. And set the
div display as none. And I gave its onclick function name and wrote

function logobutton1() {

var x = document.getElementById("sorry");

if (x.style.display === "none") {

x.style.display = "block";

} else {

x.style.display = "none";

5
Foundation Batch 60 Technological Skill Htet Aung Lin

}I gave variable to the id as x and used “if”.If the sorry line is none and
clicked ,the sorry line div’s display will be “block”,if not the display will be
“none”.Basically,

I’m making it like on/off button with just one button.If clicked when there is
nothing,the language will be appeared and if you click the button while its
appeared, it will disappear back.

So other logo for the same but with easier one. I set the logos with buttons
again as earlier. Also gave on-click name as alert().This time I used alert
function in JS.

6
Foundation Batch 60 Technological Skill Htet Aung Lin

It is easy one but useful. function alert () {alert("Sorry, Server is down:

( Wait a moment!")}. If the button is clicked, the alert with “Sorry..” will
appear on screen.

I also add Sign in to load more, making Sign in as button inside a tag linked
to “login.html”

I made layout for the first row of bottom line with less opacity and added png
logo to each.

7
Foundation Batch 60 Technological Skill Htet Aung Lin

So, for the second row, I made 2 sides. One with Facebook and Instagram
linked with a tag to official website column and one with “Need help” linked
with “contact.html” which is page I made. The image in it also is linked.
On the other side,I made the copy right and privacy staffs using a tag linked

to each specific official webpage. Also the set the “a” tag under div class to
turn to cyan and underline using div>: hover.a{color:cyan;text-
decoration:underline}

For Valorant webpage, I made suitable theme using cyan color. The top line
is same with the main menu, just without language button and different

colors in each tag.

Also, marquee is added with Valorant items images. I also added background
image

For the items, I put them in box like table and put in each row.

8
Foundation Batch 60 Technological Skill Htet Aung Lin

The specific one is the buy now button.

It is button put inside “a” tag which is linked to “login.html”.Because I want to

make it realistic and effective button. Buy function doesn’t really work so I want to
show alert that you need to sign in first and forwards to sign in page. To do this, I
put button tag inside a tag, and set paddings. Also to make an alert that “you need
to sign in first”, I used JavaScript like earlier. I gave on-click name for the “Buy
now” button and on script I used alert function as earlier, alerting that you need to
sign in first.

The bottom line is the same, just with different values. Dota2 and league of legends
pages works the same as Valorant but with different values like colors and images.

9
Foundation Batch 60 Technological Skill Htet Aung Lin

For the Sign in page, the top and bottom are the same but without sign in and
language button at top.So for the design, I used transparent black color code which
is background-color:rgba(0,0,0,.75) .So for the Gmail or phone number input, I
used input tag .Also I set the paddings. As well as , for the password I used input

with type=password.

The remaining, help and contact is also with the same top and bottom but with
text area for the customer to text messages. I used “textarea” tag with appropriate
padding to look good. The total of my CSS is almost 600 so I only explained the
specific ones. Hope it’s okay. Looking forward for higher grade…

10