RIP ALI

Developer
BROWNERD
Size
5,327 Kb
Views
22,264
  1. RIP ALI Previews
  2. RIP ALI HTML Codes
  3. RIP ALI CSS Codes

How do I make an rip ali?

A tribute to Muhammad Ali, the Greatest of All Time (G.O.A.T). Rest in peace big brother. . What is a rip ali? How do you make a rip ali? This script and codes were developed by BROWNERD on 29 August 2022, Monday.

RIP ALI Previews
IQ Test

RIP ALI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>RIP ALI</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="nav" id="top"><a class="logo" href="#top"><span class="greatest">Greatest</span><span class="of">Of</span><span class="all">All</span><span class="time">Time</span><span class="rip">RIP Muhammad Ali</span></a></nav>
<div class="content"> <h2>Fighting Words</h2> <div class="row"> <div class="box"><img src="http://static1.squarespace.com/static/545cee6ae4b08eea0ac518c1/t/562b7010e4b0f8ea9498fd1c/1445687313836/"/> <p>Float like a butterfly, sting like a bee.</p> </div> <div class="box"><img src="https://i.ytimg.com/vi/GKhWqGNep-s/hqdefault.jpg"/> <p>If you even dream of beating me you'd better wake up and apologize.</p> </div> <div class="box"><img src="http://how-rich.org/wp-content/uploads/2015/04/How-rich-is-Muhammad-Ali.jpg"/> <p>Silence is golden when you can't think of a good answer.</p> </div> </div> <div class="row"> <div class="box"><img src="http://www.oldtimestrongman.com/sites/default/files/ali.png"/> <p>If they can make penicillin out of moldy bread, they can sure make something out of you.</p> </div> <div class="box"><img src="http://cdn.wittyfeed.com/14052/76bwt1f8epst3engq5iy.jpeg"/> <p>I hated every minute of training, but I said, ‘Don’t quit. Suffer now and live the rest of your life as a champion.'</p> </div> <div class="box"><img src="http://www.thenation.com/wp-content/uploads/2015/04/muhammad_ali_dr._king_ap_img.jpg"/> <p>Hating people because of their color is wrong. And it doesn't matter which color does the hating. It's just plain wrong.</p> </div> </div> <div class="row"> <div class="box"><img src="http://www.erictrules.com/blog/wp-content/uploads/2014/08/fist.jpg"/> <p>Don’t count the days; make the days count.</p> </div> <div class="box"><img src="http://www.pbs.org/independentlens/wp/wp-content/uploads/2014/04/the-trials-of-muhammad-ali-1920x830.jpg"/> <p>Service to others is the rent you pay for your room here on earth.</p> </div> <div class="box"><img src="http://i2.cdn.turner.com/cnnnext/dam/assets/160604012743-03-muhammad-ali-0604-large-169.jpg"/> <p>Live everyday as if it were your last because someday you're going to be right.</p> </div> </div>
</div>
</body>
</html>

RIP ALI - Script Codes CSS Codes

@import url("http://fonts.googleapis.com/css?family=Roboto\+Slab:300,100,400,700");
@import url("https://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,600,700,900,400italic");
* { box-sizing: border-box;
}
body { background-color: #ccc; color: #333; font-family: 'Titillium Web', sans-serif; font-size: 20px; line-height: 1.5; position: relative;
}
a { color: #fff; display: inline-block; padding: 1rem; text-decoration: none;
}
a:hover { background-color: #fff; color: #609;
}
.nav { background-color: #000; box-shadow: 0 0 30px #000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: fixed; top: 0; width: 100vw; z-index: 20;
}
a.button { color: #000; display: inline-block; padding: 1rem; text-decoration: none; -webkit-transition: all 0.3s; transition: all 0.3s;
}
a.button:hover { background-color: #dda0dd; color: #fff;
}
a.logo { background-color: #000; font-family: titillium web; font-weight: 900; position: relative; text-decoration: none; -webkit-transition: all 0.1s; transition: all 0.1s;
}
a.logo:hover .greatest,
a.logo:hover .of,
a.logo:hover .all,
a.logo:hover .time,
a.logo:hover .rip { -webkit-transform: translateX(0); transform: translateX(0);
}
.greatest,
.of,
.all,
.time,
.rip { background-color: #000; color: #fff; display: inline-block; -webkit-transition: all 0.33s cubic-bezier(0.91, -0.44, 0.12, 1.51); transition: all 0.33s cubic-bezier(0.91, -0.44, 0.12, 1.51);
}
.of { -webkit-transform: translateX(-309%); transform: translateX(-309%);
}
.all { -webkit-transform: translateX(-300%); transform: translateX(-300%);
}
.time { -webkit-transform: translateX(-190%); transform: translateX(-190%);
}
.rip { background-color: #000; color: #fff; font-weight: 200; padding-left: 5px; -webkit-transform: translateX(-72%); transform: translateX(-72%);
}
.content { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 4.5rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 auto; max-width: 1200px;
}
.row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 0 1rem;
}
@media (max-width: 800px) { .row { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
}
.box { background-color: #fff; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: 1rem; padding: 1rem; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
img { -o-object-fit: cover; object-fit: cover; width: 100%;
}
@media (max-width: 2400px) { img { height: 300px; }
}
@media (max-width: 800px) { img { height: 400px; }
}
h2 { color: #000; font-size: 2.5rem; font-weight: 900; line-height: 1; padding: 1rem; text-align: center;
}
p { font-family: roboto slab; font-size: 1.25rem; font-weight: 300; line-height: 1.2;
}
RIP ALI - Script Codes
RIP ALI - Script Codes
Home Page Home
Developer BROWNERD
Username brownerd
Uploaded August 29, 2022
Rating 4
Size 5,327 Kb
Views 22,264
Do you need developer help for RIP ALI?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

BROWNERD (brownerd) Script Codes
Name
R EVOL UTION
Chunky Nav buttons, centered, no floats
Meditation bean
C.Rowe Button
Parellogram button
Love for Paris
3 rad blend-mode techniques
DevWars Player
Always be...
Cool Beans Button 60fps
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!