search

R1cky68 / Programs

List of all programs I have worked on, some are from CS50 others from my own time
0 stars 0 forks source link

Day 9 #10

Open R1cky68 opened 1 year ago

R1cky68 commented 1 year ago

I've added most of the front-end functionality onto the homepage now. There's still some things to iron out such as the underline on the go buttons, form specifics and getting those vertices animated, but I'll get to designing the other webpages so they can interact with each other properly. Pretty happy with how it's turned out so far. This is how it looks at the moment:

Image

Image

Source code is here: <!DOCTYPE html>

Welcome!

Most Recent Programs

  • Program 1
  • Program 2
  • Program 3

Sign up below!

About me

Contact

Hargun Singh 2023 (C)

@font-face { font-family: 'Inter'; src: url(Website/Styles.css) format('ttf'); font-weight: normal; font-style: normal; }

html, body { background-size:400% 400%; background-color:#1E1E1E; color:#FFFFFF; font-family:Inter, sans-serif; }

.container{ width: 100%; height: 100%; overflow: hidden; }

.navigation{ width:100%; height:60px; font-size:32px; position:fixed; z-index: 1; }

.navigation ul{ list-style: none; }

.navigation li { display: inline; margin-right: 20px; }

.navigation a { text-decoration: none; color: white; font-size: 32px; }

.items a:hover{ text-decoration:underline; transition-duration: 0.5s; }

.socials{ width:300px; height:60px; float:right; margin-top:-47px; }

.socials li{ margin-right:10px; }

.title{ font-weight: bold; font-size: 64px; text-align: center; margin-top: 350px; }

.preview{ height:300px; width: 100%; margin-top:30px; }

.images{ width:350px; height:250px; background-color:lightgray; margin-right:50px; float:left; list-style:none; margin-left:50px; margin-top:25px; transition-duration: 0.5s; }

.images:hover { transform: scale(1.2);

}

.titles{ width:100%; height:100px; margin:auto; font-size:24px; }

.titles ul{ list-style:none; }

.titles li{ display: inline; text-align: center; margin-right:165px; margin-left:170px; }

.buttons{ width:100%; height:60px; margin-left:5px; }

.buttons li{ text-align:center; margin-right:180px; }

.go{ width:100px; height:40px; background-color: #0AE33A; color:black; font-size:24px; border-radius: 30px; outline: none; }

.footer{ width:100%; height:100px; background-color: #0AE33A; text-align:center; font-size: 24px; color:black; }