CLG Web Design Concept

Developer
Calvin
Size
6,672 Kb
Views
32,384
  1. CLG Web Design Concept Previews
  2. CLG Web Design Concept HTML Codes
  3. CLG Web Design Concept CSS Codes
  4. CLG Web Design Concept JS Codes

How do I make an clg web design concept?

An organization as big as CLG needs something that can bring the content that they produce to the forefront. This is a concept.. What is a clg web design concept? How do you make a clg web design concept? This script and codes were developed by Calvin on 11 August 2022, Thursday.

CLG Web Design Concept Previews
IQ Test

CLG Web Design Concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CLG Web Design Concept</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<body> <div id="sitenavi"> <nav id="primary_nav_wrap">
<ul> <li><img src="http://i.imgur.com/qZEqlt0.png" alt="Counter Logic Gaming"></li> <li><a href="#">Home</a></li> <li class="current-menu-item"><a href="#">articles</a></li> <li><a href="#">ORGANIZATION</a> <ul> <li><a href="#">TEAMS & ROSTERS</a> <ul> <li><a href="#">LOL</a> <ul> <li><a href="#">NA LCS ROSTER</a></li> <li><a href="#">NA CS ROSTER</a></li> <li><a href="#">SUBS</a></li> <li><a href="#">Try outs [4/13/15]</a></li> </ul> </li> <li><a href="#">CS:GO</a> <ul> <li><a href="#">STARTING ROSTER</a></li> <li><a href="#">SUBS</a></li> <li><a href="#">Try outs [closed]</a></li> </ul> </li> <li><a href="#">HALO</a> <ul> <li><a href="#">STARTING ROSTER</a></li> <li><a href="#">SUBS</a></li> <li><a href="#">Try outs [5/23/15]</a></li> </ul> </li> </ul> </li> <li><a href="#">STAFF</a> <ul> <li><a href="#">COACHES</a></li> <li><a href="#">ANALYSTS</a></li> <li><a href="#">APPLY</a></li> </ul> </li> </ul> </li> <li><a href="#">MEDIA</a> <ul> <li><a href="#">PHOTOS</a></li> <li><a href="#">VIDEOS</a></li> <li><a href="#">STREAMS</a></li> </ul> </li> <li><a href="#">FORUMS</a></li> <li><a href="#">SHOP</a></li>
</ul>
</nav><div id="socialnav"> <a href=""> <i class="fa fa-facebook-official"></i></a> <a href=""> <i class="fa fa-twitter-square"></i></a> <a href=""> <i class="fa fa-youtube-play"></i></a> <a href=""> <i class="fa fa-twitch"></i></a> </div> </div> <div class="wrap"> <div id="leaderboard">Leaderboard </div> <div id="left-col" > <div id="left-colinner"> <img src="//cdn0.dailydot.com/cache/ab/4e/ab4e82767a8156325cb0cae1b69a746f.jpg"> <div id="caption"><i>Hello this is a Caption // We shall use Source Sans Pro. xxxxxxxxxx xxxxxx xx xxx xxxxxxx xxxx x xxxx xxx.</i> </div> <div class="onews"> <h2>Categories</h2>	<div class="tag-cloud">	<a href="" class="tag-link-4" title="8 topics" style="font-size: 12px;">Doublelift</a>
<a href="" class="tag-link-16" title="7 topics" style="font-size: 12px;">Aphro</a>
<a href="" class="tag-link-2" title="7 topics" style="font-size: 12px;">Zion</a>
<a href="" class="tag-link-3" title="6 topics" style="font-size: 12px;">Hotshotgg</a>
<a href="" class="tag-link-21" title="5 topics" style="font-size: 12px;">Chauster</a>
<a href="" class="tag-link-19" title="5 topics" style="font-size: 12px;">Featured</a>
<a href="" class="tag-link-18" title="5 topics" style="font-size: 12px;">Series</a>
<a href="" class="tag-link-48" title="2 topics" style="font-size: 12px;">Roster</a>
<a href="" class="tag-link-35" title="2 topics" style="font-size: 12px;">Coaching Staff</a>
<a href="" class="tag-link-34" title="2 topics" style="font-size: 12px;">Tryouts</a>
<a href="" class="tag-link-23" title="2 topics" style="font-size: 12px;">Gallery</a>
<a href="" class="tag-link-10" title="1 topic" style="font-size: 12px;">Video</a>
<a href="" class="tag-link-11" title="1 topic" style="font-size: 12px;">Analysis</a> <a href="" class="tag-link-11" title="1 topic" style="font-size: 12px;">CLG Black</a> <a href="" class="tag-link-11" title="1 topic" style="font-size: 12px;">NA LCS</a> <a href="" class="tag-link-11" title="1 topic" style="font-size: 12px;">NA CS</a>
<a href="" class="tag-link-9" title="1 topic" style="font-size: 12px;">Worlds</a>
<a href="" class="tag-link-8" title="1 topic" style="font-size: 12px;">Patch Notes</a>
<a href="" class="tag-link-7" title="1 topic" style="font-size: 12px;">CLG Guides</a>
<a href="" class="tag-link-12" title="1 topic" style="font-size: 12px;">Win Streak</a>
<a href="" class="tag-link-13" title="1 topic" style="font-size: 12px;">Streams</a>
<a href="" class="tag-link-28" title="1 topic" style="font-size: 12px;">Articles & News</a>
<a href="" class="tag-link-27" title="1 topic" style="font-size: 12px;">Shop</a>
<a href="" class="tag-link-29" title="1 topic" style="font-size: 12px;">Auto Attack</a>
<a href="" class="tag-link-30" title="1 topic" style="font-size: 12px;">Team Fight</a>
<a href="" class="tag-link-33" title="1 topic" style="font-size: 12px;">Backdoor</a>
<a href="" class="tag-link-32" title="1 topic" style="font-size: 12px;">Rotations</a>
<a href="" class="tag-link-31" title="1 topic" style="font-size: 12px;">BM</a></div> </div> </div> <BR><div class="adleft">Advertisment </div> </div> <div id="right-col"><div id="left-colinner"> <h1 class="heading">DoubleLift Rockets Home 2 Quadra kills with Jinx vs LMQ</h1><div class="meta"><p class="metaauthor">By Samuel Lingle <p class="metadate">Jul 20, 2014, 7:07pm</p></div> <p>	Peter “<a href="http://thedailydot.com/tags/doublelift">DoubleLift</a>” Peng has more kills in the <a href="http://thedailydot.com/tags/league-championship-series">League Championship Series</a> than any other player. He added eight to that total today over about 30 seconds of in-game time, putting together two quadra kills on the champion Jinx, showing once again why he’s one of the best marksman in <a href="http://thedailydot.com/tags/league-of-legends"><em>League of Legends</em></a>.</p><div data-tag="AdManager" class="dd-ad"><div class="mezzanine dot-ads-adslot" id=":2.ad"></div></div>
<p>	Both came in an important match for <a href="http://thedailydot.com/tags/counter-logic-gaming">Counter Logic Gaming</a>, a battle for first place against <a href="http://thedailydot.com/tags/lmq">LMQ</a>. But Peng’s herculean efforts weren’t enough to lead his team to victory.</p>
<p>	The first quadra came with LMQ knocking on Counter Logic Gaming’s door. An engage by jungler Marcel “<a href="http://thedailydot.com/tags/dexter">Dexter</a>” Feldkamp gave Peng the opening he needed to quickly score two kills before chasing two LMQ players into the jungle and finishing them off.</p>
<p> <div class="videoem"> <video width="100%" height="auto" controls> <source src="//fat.gfycat.com/ApprehensiveEnergeticCapeghostfrog.mp4" type="video/mp4">
Your browser does not support the video tag. </video></div> <div class="videoem"> <video width="100%" height="auto" controls> <source src="//fat.gfycat.com/AfraidUnderstatedDromedary.mp4" type="video/mp4"> Your browser does not support the video tag. </video></div>
<p>	The second would be the clutchest play of the whole split, if only Counter Logic Gaming had somehow managed to come back and win the match.</p>
<p>	LMQ had a huge lead and were using it to crush through Counter Logic Gaming’s top lane inner turrets and inhibitor, an assault that should have ended the game. But Peng managed to dodge just long enough to give him a small opening. The last man standing for Counter Logic Gaming, inches from his nexus, Peng looked like Rambo blasting through a wave of cannon fodder minions.</p>
<p> <div class="videoem"> <video width="100%" height="auto" controls> <source src="//giant.gfycat.com/CoarseMerryAsp.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </div> <div class="videoem"> <video width="100%" height="auto" controls> <source src="//giant.gfycat.com/ConcreteNearBorzoi.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </div>
<p>	Peng put together a monster individual performance today, but his team couldn’t capitalize on it. The loss ended a winless week for Counter Logic Gaming, dropping them out of a tie for first place with LMQ and into a two-game hole behind the league leading Chinese team.</p>
<p>	<em class="last-paragraph">Image via Riot Games</em></p></div> <div class="adright">Advertisment2 </div>
</div> </div> <div id="sponsors" class="fadeInRIGHT"><a href="ssss" >sponsors</a></div> <div id="footer" class="thefoot"> © 2013 Counter Logic Gaming, LLC. <nav class="thefoot2"> <a href="" class="thefoot2"><i class="fa fa-lock"></i></a> <a href="" class="thefoot2"><i class="fa fa-info-circle"></i></a> <a href="" class="thefoot2"><i class="fa fa-envelope-o"></i></a> </nav> </div>
</body> <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900,400italic,600italic,700italic' rel='stylesheet' type='text/css'> <script src="js/index.js"></script>
</body>
</html>

CLG Web Design Concept - Script Codes CSS Codes

*{margin:0;}
body { margin:0 auto; background:#262b32; color:#d2d3d4; font-family:'Source Sans Pro', sans-serif;
}
a{color:#B6A79D;text-decoration:none;}
a:hover{color:#CFC0B6;}
#sitenavi{
height:3.5em;
margin:0 auto;
width:100%;
background:rgba(255,255,255,.15);
color:#000;
font-size:1em;
}
#sitenavi a, #sitenavi a:visited{ font-family: 'Oswald', sans-serif; padding:1em; color:#fff; text-transform:uppercase; text-decoration:none;
}
#sitenavi img{ display:inline; padding-left:10px; padding-right:10px; width:55px; height:55px; vertical-align:middle; outline:0; border:none;
}
#sitenavi i{ padding-left:.1em; color:#d2d3d4; text-decoration:none; -webkit-transition: all .45s; /* Safari */ transition: all .45s;
}
#sitenavi i:hover{
text-shadow: 5px 0px 0px #18CAE6, 10px 0px 0px #2387ed; padding-left:.1em; color:#eee; text-decoration:none; -webkit-transition: all .45s; /* Safari */ transition: all .45s;
}
#sitenavi a:hover{ background:#2387ed; text-decoration:none; color:#FFF;
}
.imgnav{padding:0;margin:-1.5em 1em -1.5em -1em;width:auto;height:100px;vertical-align:top;}
#socialnav{ top:0; right:0; z-index:2; display:inline-block; position:static;
float:right; padding:.5em; font-size:1.75em;
}
#socialnav a{ vertical-align:top; padding:.25em;
}
#socialnav a:hover{ background:none;
}
#sponsors{ bottom:1em; right:1em; position:fixed; font-size:.75em; font-family: 'Source Sans Pro', sans-serif;
}
#sponsors a, #sponsors a:active, #sponsors a:visited{ letter-spacing:.2em; padding:.5em .5em 1em .5em; text-decoration:none; text-transform:uppercase; text-align:center; color:#fff; background:#2387ed;
}
#sponsors a:hover{
background:#3DA1FF;
}
.wrap {
width: 99%;
margin: 0 auto;
overflow: hidden;
}
#leaderboard{ border-top:6px double #2387ed; border-bottom:6px double #2387ed; width:728px; height:90px; color:#ccc; padding:.5em .5em 1em; margin:3em auto 4.25em; background:#474B51; font-size:10px;
}
h2{ margin:0 auto; color:inherit; background:inherit; letter-spacing:2px; text-transform:uppercase; text-decoration:none; text-align:center; padding:5.5px .75em 5px .75em;
}
#left-col {	width: 44%;	float: left; }
#left-colinner {	width: 100%;
}
#left-colinner img{	width: 75%; float:right; border:1px solid #1D2126; }
.adleft{ visibility:hidden; margin-top:-20px; color:#ccc; padding:.5em .5em 1em; background:#474B51; font-size:10px;	width: 120px; height:600px; position:static;
}
.adright{ float:left; margin-top:20px; color:#ccc; font-size:10px;	width: 100%; padding:.5em .5em 1em; height:60px; background:#474B51;
}
#right-col {	width: 46%; border-left:1px solid #1D2126;	margin-left: 45%;
}
#right-colinner {	width: 100%;
}
.heading{
text-shadow: 3px 0px 0px rgba(0,0,0,.5);
-webkit-font-smoothing: antialiased;
letter-spacing:-.05rem;
text-transform:uppercase;
font-size:45px;
line-height:52px;
text-align:left;
padding:0 0 .25em 0.400em;
font-family: 'Oswald', sans-serif;
margin-bottom:18px;
}
.meta{ float:left; height:100%;
display:block; padding:.5em;
line-height:.5em; text-align:center; margin:0 0.714em 1.286em 0.714em;
}
.metaauthor{ word-spacing: 10px; text-align:center; letter-spacing:.15em; font:14px 'Source Sans Pro', sans-serif; color:#fff; font-weight:200;
}
.metaauthor:after { content: ""; display: block; width: 50%; margin: 1em auto 0; border-bottom: solid;
}
.metadate{ width:auto; margin:0 auto; display:inline; font: normal 10px/20px helvetica,sans-serif; color: #2387ed;
}
p{
color:#fff;
text-align:left;
margin:0 3.5em 1.161em 1.161em;
font-size:15.5px;
line-height:inherit;
}
p:first-child {
color:#fff;
text-align:left;
margin:0 .5em 1.161em .5em;
font-size:15.5px;
line-height:inherit;
}
#caption{ float:right; overflow:hidden; width: 75%; padding:.5em 0; text-align:right; letter-spacing:.25em; font: .75em 'Source Sans Pro', sans-serif; border-bottom:1px solid #1D2126;
}
.blockquote{ text-transform:capitalize; text-align:left; background:rgba(0,0,0,.15); padding: .5em; border-top:1px solid rgba(255,255,255,0.1); font:20px 'Source Sans Pro', sans-serif; color:#d2d3d4; font-weight:400; font-style:italic;
}
.em{color:inherit;}
.last-paragraph{ padding-bottom:10px; border-bottom:3px solid #2387ed;}
.videoem{ float:left; width:50%; padding:.75em 0 1.161em;}
.fadeInUp { /* Chrome, Safari, Opera */ -webkit-animation: fadeInUp 600ms cubic-bezier(-.5, -1, 0.9, 12.53); animate: fadeInUp 600ms cubic-bezier(-.5,-0.9, .9, 12.53);
}
/* Chrome, Safari, Opera */
@-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; transform: none; }
}
.fadeInRIGHT { /* Chrome, Safari, Opera */ -webkit-animation: fadeInRIGHT 500ms ease-in; animation: fadeInRIGHT 500ms ease-in;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes fadeInRIGHT { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; transform: none; }
}
.fadeInLeft { /* Chrome, Safari, Opera */ -webkit-animation: fadeInLeft 500ms ease; animation: fadeInLeft 500ms ease;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; transform: none; }
}
h1{text-align:center; font-size:100%;
font-weight:inherit;}
/** test nav drops */
#primary_nav_wrap
{
margin:0 auto;
}
#primary_nav_wrap ul
{	list-style:none;	position:relative;	float:left;	margin:0;	padding:0;
}
#primary_nav_wrap ul a
{ -webkit-transition: all .45s; /* Safari */ transition: all .45s;	display:block; padding:1em; color:#fff; text-transform:uppercase; text-decoration:none;
}
#primary_nav_wrap ul li
{	position:relative;	float:left;	margin:0;	padding:0; }
#primary_nav_wrap ul li.current-menu-item
{	background:rgba(255,255,255,.25);
}
#primary_nav_wrap ul li:hover
{
}
#primary_nav_wrap ul ul
{	display:none;	position:absolute;	top:100%;	left:0;	padding:0;
}
#primary_nav_wrap ul ul li
{ background:rgba(255,255,255,.05);	float:none;	width:200px;
}
#primary_nav_wrap ul ul a
{	line-height:120%;	padding:10px 15px;
}
#primary_nav_wrap ul ul ul
{	top:0;	left:100%;
}
#primary_nav_wrap ul li:hover > ul
{	display:block;
}
.thefoot{ margin-top:2em; position:relative; height:25px; padding-left:1em; padding-top:15px; background:rgba(0,0,0,0.25); bottom:0px; left:0px; margin-bottom:0px; font-size:10px; border-bottom:3px solid #2387ed;
}
.thefoot a{ color:#fff;
padding:0 .9em;
}
.thefoot a:hover{ color:#2387ed;
}
.thefoot2{ z-index:1; position:relative; bottom:0; right:5.5em; text-decoration:none; float:right; display:inline-block; text-align:left;
}
.tag-cloud { margin:1em 0 .25em;	float: left;	width: 100%; padding:5px;	}
.tag-cloud a {	background: rgba(0,0,0,.25);	color:#d2d3d4;	float: right;	font: 400 12px/12px 'Oswald', sans-serif;	margin: 0 5px 5px 0;	padding: 5px 7px;	text-transform: uppercase; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;	}
.tag-cloud a:hover { color:#ddd;	text-decoration: none;	background: #2387ed; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; outline: none;	}
.tag-cloud a:visited {	color: #ddd;	}
.onews{ border-bottom:6px double #2387ed; color:#262B32; background: #34608D; padding:.5em; float:right; width:72.25%; height:auto; display:block; position:relative; margin:.5em auto; }
.onews h2{
overflow:hidden;
}
.onews:after { border-color:#262B32; content: ""; display: block; width: 15%; margin: .25em auto 0; border-bottom: solid;
}

CLG Web Design Concept - Script Codes JS Codes

/**
dark blue = #262B32
alt tron blue = #18CAE6
clg blue = #2387ed
silver = #d2d3d4
accent brown = #695a50 == lighter brown = #B6A79D;
alt light blue = #34608D
*/
/** <div class="videoem"> <video width="100%" height="auto" controls> <source src="http://cdn.streamable.com/video/51288c50b5fe11e49cbfb7882774ed53.mp4" type="video/mp4"> <source src="http://cdn.streamable.com/video/51288c50b5fe11e49cbfb7882774ed53.mp4" type="video/ogg">
Your browser does not support the video tag. </video></div> */
CLG Web Design Concept - Script Codes
CLG Web Design Concept - Script Codes
Home Page Home
Developer Calvin
Username CalvinMorett
Uploaded August 11, 2022
Rating 3
Size 6,672 Kb
Views 32,384
Do you need developer help for CLG Web Design Concept?

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!

Calvin (CalvinMorett) Script Codes
Name
FireHazard Landing Page
CoNTENT
Social Button Transition
Particle Web
Postcard Contact Form
Full Page Slide, Vertical Progress Bar
R
Sectioned-bootstrap-portfolio
Staff Page Mockup
Showcase 1 Gallery
Create amazing Facebook ads 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!