A Pen by Lan Le

Developer
Lan Le
Size
3,257 Kb
Views
14,168
  1. A Pen by Lan Le Previews
  2. A Pen by Lan Le HTML Codes
  3. A Pen by Lan Le CSS Codes

How do I make an a pen by lan le?

What is a a pen by lan le? How do you make a a pen by lan le? This script and codes were developed by Lan Le on 20 November 2022, Sunday.

A Pen by Lan Le Previews
IQ Test

A Pen by Lan Le - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Lan Le</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Rakkas" rel="stylesheet">
<head> <title>Kaleidoscope</title> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body> <div class="container-fluid"> <div class="intro"> <div class="row"> <div class="col-md-8"><img id="icon" src="https://i.imgur.com/ekuxCCJ.png" width=400></div> <div class="col-xs-1"><img class="soc" src="http://www.fellowshipnwa.org/websites/fellowshipnwa/images/visitors/social_media/socialmediaicons-round-facebook.png" width=50></div> <div class="col-xs-1"><img class="soc" src="http://static1.squarespace.com/static/53a097b1e4b017961ee16c1f/t/53a461f0e4b0cb7c99226e08/1403281915197/Twitter+Icon.png" width=50></div> <div class="col-xs-1"><img class="soc" src="http://spokanefamilyphoto.com/wp-content/uploads/2014/06/social-icons-grey-circle-instagram.png" width=50></div> </div> <h1 id="ttl">WE REPRESENT CROSS-CULTURAL COMMUNITY ON DENISON CAMPUS</h1> <div id="headline">Learn more about us</div> </div> </div> <div class="bg-content"> <div class="bg-overlay"> <div class="container"> <div class="row"> <section class="cate"> <div class="col-xs-4"> <p class="item">Announcement</p> </div> <div class="col-xs-3"> <p class="item">Events</p> </div> <div class="col-xs-4"> <p class="item">Programs</p> </div> <div class="col-xs-4"> <p class="item">Opportunities</p> </div> <div class="col-xs-5"> <p class="item">Student Organizations</p> </div> </section> </div> </div> <div class="container"> <div class="row"> <div class="col-md-9"> <h2 id="hili">Kaleidoscope Highlights</h2> <h4 class="txt">Some random quote or phrase or anykind of intro about C3/ Diversity at Denison</h4> </div> <div class="col-md-3"> <div class="pic"> <div class="pic-overlay"> <img src="https://d2uyvva3rmpkli.cloudfront.net/kaleidoscope/files/2016/04/SOL-Logo.png" width=300 height=300> </div> </div> </div> <div class="row"> <div class="col-md-9"></div> <div class="col-md-3"> <h3 class="capt">Summit of Ohio Latinx</h3></div> </div> <div class="row"> <div class="col-md-5"> <h4 class="txt">"Some other random quote... " </h4> <h4 class="txt">Maybe some line describing our mission statements. goals for the coming year</h4> </div> <div class="col-md-4"> <div class="pic"> <div class="pic-overlay"> <img src="https://d2uyvva3rmpkli.cloudfront.net/kaleidoscope/files/2016/04/12719152_1573570836287738_496623661441742850_o.jpg" width=300 height=300></div> </div> </div> <div class="col-md-3"> <div class="pic"> <div class="pic-overlay"><img src="https://d2uyvva3rmpkli.cloudfront.net/kaleidoscope/files/2016/03/12909557_10206993019398026_8035983983619808478_o-490x218.jpg" width=300 height=300></div> </div> </div> </div> <div class="row"> <div class="col-md-6"></div> <div class="col-md-3"> <h3 class="capt">Taste of Culture</h3></div> <div class="col-md-3"> <h3 class="capt">In the eyes of beholder</h3></div> </div> <div class="row"> <div class="col-md-1"></div> <div class="col-md-4"> <div class="pic"> <div class="pic-overlay"> <img src="https://i.imgur.com/oD5c8Qo.jpg" width=300 height=300> </div> </div> </div> <div class="col-md-4"> <div class="pic"> <div class="pic-overlay"> <img src="https://blogs.denison.edu/kaleidoscope/files/2016/03/Screen-Shot-2016-03-30-at-4.01.26-PM-1-300x166.png" width=300 height=300> </div> </div> </div> <div class="col-md-3"> <div class="pic"> <div class="pic-overlay"> <img src="https://i.imgur.com/3gpYPu2.jpg" width=300 height=300> </div> </div> </div> </div> <div class="row"> <div class="col-md-1"></div> <div class="col-md-4"><h3 class="capt">Solidarity March</h3></div> <div class="col-md-4"><h3 class="capt">Service Learning</h3></div> <div class="col-md-3"><h3 class="capt">Cross-cultural Experience</h3></div> </div> </div> </div> </div>
</html>
</body>
</html>

A Pen by Lan Le - Script Codes CSS Codes

.intro{ background-size: cover; background : url("https://i.imgur.com/TASuk9P.jpg?1") no-repeat center center fixed;	background-size: cover; margin-left:-15px; margin-right:-20px; height: 600px;
}
.bg-overlay { background:rgba(0,0,0, 0.2); height: 100%;
}
.bg-content{ background: url("https://i.imgur.com/WywGJXM.jpg") no-repeat center center fixed; background-size:cover;
}
.soc{ padding-top:20px;
}
#icon{ padding-left:100px;
}
#ttl{ display: inline-block; padding-top:100px; padding-left:100px; color: black; text-align:center; font-family: 'Passion One', cursive; font-size:45px;
}
#headline{ display: inline-block; font-size:25px; color:black; border: 2px solid black; border-radius:10px; text-align:center; margin-left:300px; margin-left:500px; font-family: 'Pacifico', cursive;
}
#headline:hover{ background-color: white; border:4px solid black;
}
#headline:active{ text-decoration:underline;
}
.cate{ display: flex; margin-top:30px;; padding-top:10px; color: black; font-family: 'Pacifico', cursive; font-size:25px; padding-left:50px; background-color: white; border-radius:5px;
}
}
p:active{ text-shadow:10px 2px #00ffbf; text-decoration:underline;
}
p:hover{ text-shadow:10px 2px #00ffbf; text-decoration: underline;
}
#hili{ text-align:center; padding-top:50px; font-size:40px; color:white; text-decoration:underline; font-family: rakkas, cursive;
}
.capt{ padding-left:10px; font-family: 'Pacifico', cursive; color: white;
}
h3:hover{ text-decoration:underline;
}
.txt{ color: #FFF; padding-left:70px;
}
.pic{ padding-top:70px;
}
.pic-overlay{ height: 300px; width:300px; }
}
.pic-desc{ top:50%; text-align:center;
}
.pic:hover .pic-overlay{ opacity: 0.5; background:rgba(0,0,0,.85);
}
A Pen by Lan Le - Script Codes
A Pen by Lan Le - Script Codes
Home Page Home
Developer Lan Le
Username lanlengoc97
Uploaded November 20, 2022
Rating 3
Size 3,257 Kb
Views 14,168
Do you need developer help for A Pen by Lan Le?

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!

Lan Le (lanlengoc97) Script Codes
Name
Profile
Entries
Digital Clock
Profile page
Colorful Grid
The Tic Tac Toe Game 2.0
Diversity Tag Project
Tic Tac Toe Game
Money Converter
Hover Overlay Project
Create amazing captions 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!