Loading video…
All breakouts
5.4Text-HeavyHow-To hook
Hook
Simply HTML and CSS coding 💻💗🔥
@csstudent55
2.2K followers · usually 5.7K views a post
Views
29.2K
Likes
2.7K
Comments
118
Shares
67
Why it worked
The video uses a common TikTok trend of showing code with trending audio, which appeals to a niche audience interested in programming and web development. The use of relevant hashtags and tags increases discoverability.
Summary
The video displays code for an HTML and CSS file, likely for a web page. It shows sections for "About our college" and "Why join our events," with details about the college and event highlights.
Structure
- 1Displaying HTML and CSS code
- 2Showing "About our college" section
- 3Showing "Why join our events" section
- 4Displaying code for event highlights
On-screen text
C:\Users\DANISH LAPTOP\Desktop\about us page > about us.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>About Page</title>
</head>
<body>
<section>
<h1>About our college</h1>
<div class="row">
<div class="col">
<p><b>Aptech College of Engineering</b>, Affiliated with ABC University, is a hub of learning and innovation. Our campus is recognized for excellence in academics, research, and student activities.</p>
<ul>
<li>Where knowledge meets innovation</li>
<li>A campus designed for future leaders</li>
<li>Connecting students with a global alumni family</li>
</ul>
</div>
</div>
</section>
<section>
<h1>Annual highlights</h1>
<div class="timeline">
<p><b>Jan-Feb</b> TechFest, Robotics Championship, Workshop</p>
<p><b>Jul-Aug</b> Cultural Week, Independence Day Celebrations</p>
<p><b>Nov-Dec</b> Sports Week, Alumni Meet</p>
</div>
</section>
<section>
<div class="row">
<div class="col box">
Build Teamwork
</div>
<div class="col box">
Gain Recognition
</div>
<div class="col box">
Network with Alumni
</div>
<div class="col box">
career opportunities
</div>
<div class="col box">
Knowledge sharing
</div>
</div>
</section>
</body>
</html>
/* CSS */
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f7f7f7;
color: #333;
}
h1
{
text-align: center;
margin: 30px 0 20px;
color: #4B2E83;
}
section
{
max-width: 1000px;
margin: 20px auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.row
{
display: flex;
flex-wrap: wrap;
}
.col
{
flex: 1;
min-width: 250px;
padding: 10px;
}
.col img
{
width: 100%;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.box
{
background-color: #eef;
padding: 20px;
border-radius: 10px;
margin: 10px 0;
border-left: 4px solid #4B2E83;
}
.box img
{
width: 50px;
height: 50px;
margin-right: 10px;
}
ul li
{
margin-bottom: 8px;
}
@media (max-width: 992px)
{
.col
{
flex: 1 1 45%;
max-width: 45%;
}
}
@media (max-width: 600px)
{
.col
{
flex: 1 1 100%;
max-width: 90%;
}
}
Simply HTML and CSS coding 💻💗🔥 #programmer #htmlcss #computerscience #codmobile #trendingviralvideos @TikTok
Original caption
Simply HTML and CSS coding 💻💗🔥 #programmer #htmlcss #computerscience #codmobile #trendingviralvideos @TikTok
More from @csstudent55
Their other posts in the index, biggest breakout first.
