Stocks index page

Developer
Valentin Treu
Size
2,890 Kb
Views
10,120
  1. Stocks index page Previews
  2. Stocks index page HTML Codes
  3. Stocks index page CSS Codes

How do I make an stocks index page?

What is a stocks index page? How do you make a stocks index page? This script and codes were developed by Valentin Treu on 20 December 2022, Tuesday.

Stocks index page Previews
IQ Test

Stocks index page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>stocks index page</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="
crossorigin="anonymous">
<div class="container"> <!-- that's the term row --> <div class="row"> <div class="term-icons-row col-sm-12 col-md-12 col-lg-12 col-xs-12"> <div class="term-icons-container vdivide pull-right col-sm-5 col-md-5 col-lg-5 col-xs-5 no-gutter"> <div class="term-icon-box col-sm-4 col-md-4 col-lg-4 col-xs-4"> <img src="https://s13.postimg.org/pyg56gopf/short_term.png" /> </div> <div class="term-icon-box col-sm-4 col-md-4 col-lg-4 col-xs-4"> <img src="https://s13.postimg.org/sehykb6s3/medium_term.png" /> </div> <div class="term-icon-box col-sm-4 col-md-4 col-lg-4 col-xs-4"> <img src="https://s13.postimg.org/lqlcxpn9v/long_term.png" /> </div> </div> </div> </div> <!-- that's an index row --> <div class="row"> <div class="parent-stock-row col-sm-12 col-md-12 col-lg-12 col-xs-12"> <div class="parent-stock-row-image col-sm-1 col-md-1 col-lg-1 col-xs-1"> <img src="https://s19.postimg.org/d04lqe8i7/European_Union.png" /> </div> <div class="parent-stock-row-title col-xs-6 col-sm-6 col-md-6 col-lg-6"> <div class=""> <span>EURO STOXX 50</span> </div> <div class="parent-stock-row-content-button btn btn-default"> Content </div> </div> <!-- 3 term signals for a stock --> <div class="parent-stock-row-signalscontainer vdivide pull-right col-sm-5 col-md-5 col-lg-5 col-xs-5 no-gutter"> <!-- short term signal box --> <div class="parent-stock-row-signal-box col-sm-4 col-md-4 col-lg-4 col-xs-4 no-gutter"> <div class="row parent-stock-row-signal-box-first-row no-gutter"> <div class="col-xs-6 parent-stock-row-signal-box-previous-signal-image no-gutter"> <img src="http://s19.postimage.org/66pjm5fnz/sell.png" /> </div> <div class="col-xs-6 parent-stock-row-signal-box-star-signal-image no-gutter"> <img src="https://s19.postimg.org/eg1f0k9e7/star.png" /> </div> </div> <div class="row parent-stock-row-signal-box-current-signal-row"> <div class="col-xs-12 parent-stock-row-signal-box-current-signal-image"> <img src="http://s19.postimage.org/f6xbaf9u7/buy.png" /> </div> </div> <div class="row parent-stock-row-signal-box-current-signal-date-row"> <div class="col-xs-12 col-centered parent-stock-row-signal-box-current-signal-date"> 25.11.2010 </div> </div> </div> <!-- medium term signal box --> <div class="parent-stock-row-signal-box col-sm-4 col-md-4 col-lg-4 col-xs-4 no-gutter"> <div class="row parent-stock-row-signal-box-first-row no-gutter"> <div class="col-xs-6 parent-stock-row-signal-box-previous-signal-image no-gutter"> <img src="http://s19.postimage.org/gutakzpn3/flat.png" /> </div> <!-- no star image --> </div> <div class="row parent-stock-row-signal-box-current-signal-row"> <div class="col-xs-12 parent-stock-row-signal-box-current-signal-image"> <img src="http://s19.postimage.org/bbtx7uqof/sell.png" /> </div> </div> <div class="row parent-stock-row-signal-box-current-signal-date-row"> <div class="col-xs-12 col-centered parent-stock-row-signal-box-current-signal-date"> 25.11.2010 </div> </div> </div> <!-- long term signal box --> <div class="parent-stock-row-signal-box col-sm-4 col-md-4 col-lg-4 col-xs-4 no-gutter"> <div class="row parent-stock-row-signal-box-first-row no-gutter"> <div class="col-xs-6 parent-stock-row-signal-box-previous-signal-image no-gutter"> <img src="http://s19.postimage.org/hydewyaa7/buy.png" /> </div> <div class="col-xs-6 parent-stock-row-signal-box-star-signal-image no-gutter"> <img src="https://s19.postimg.org/eg1f0k9e7/star.png" /> </div> </div> <div class="row parent-stock-row-signal-box-current-signal-row"> <div class="col-xs-12 parent-stock-row-signal-box-current-signal-image"> <img src="http://s19.postimage.org/iggbumnbj/flat.png" /> </div> </div> <div class="row parent-stock-row-signal-box-current-signal-date-row"> <div class="col-xs-12 col-centered parent-stock-row-signal-box-current-signal-date"> 25.11.2010 </div> </div> </div> </div> </div> </div> <!-- that's another index row --> <div class="row"> <div class="parent-stock-row col-sm-12 col-md-12 col-lg-12 col-xs-12"> <div class="parent-stock-row-image col-sm-1 col-md-1 col-lg-1 col-xs-1"> <div class=""> <img src="https://s19.postimg.org/9s04dcm8f/Germany.png" /> </div> </div> <div class="parent-stock-row-title col-xs-6 col-sm-6 col-md-6 col-lg-6"> <div class=""> <span>DAX</span> </div> <div class="parent-stock-row-content-button btn btn-default"> Content </div> </div> <!-- 3 term signals for a stock --> <div class="parent-stock-row-signalscontainer vdivide pull-right col-sm-5 col-md-5 col-lg-5 col-xs-5 no-gutter"> <!-- short term signal box --> <div class="parent-stock-row-signal-box col-sm-4 col-md-4 col-lg-4 col-xs-4 no-gutter"> <div class="row parent-stock-row-signal-box-first-row no-gutter"> <div class="col-xs-6 parent-stock-row-signal-box-previous-signal-image no-gutter"> <img src="http://s19.postimage.org/66pjm5fnz/sell.png" /> </div> <div class="col-xs-6 parent-stock-row-signal-box-star-signal-image no-gutter"> <img src="https://s19.postimg.org/eg1f0k9e7/star.png" /> </div> </div> <div class="row parent-stock-row-signal-box-current-signal-row"> <div class="col-xs-12 parent-stock-row-signal-box-current-signal-image"> <img src="http://s19.postimage.org/f6xbaf9u7/buy.png" /> </div> </div> <div class="row parent-stock-row-signal-box-current-signal-date-row"> <div class="col-xs-12 col-centered parent-stock-row-signal-box-current-signal-date"> 25.11.2010 </div> </div> </div> <!-- medium term signal box --> <div class="parent-stock-row-signal-box col-sm-4 col-md-4 col-lg-4 col-xs-4 no-gutter"> <div class="row parent-stock-row-signal-box-first-row no-gutter"> <div class="col-xs-6 parent-stock-row-signal-box-previous-signal-image no-gutter"> <img src="http://s19.postimage.org/gutakzpn3/flat.png" /> </div> <!-- no star image --> </div> <div class="row parent-stock-row-signal-box-current-signal-row"> <div class="col-xs-12 parent-stock-row-signal-box-current-signal-image"> <img src="http://s19.postimage.org/bbtx7uqof/sell.png" /> </div> </div> <div class="row parent-stock-row-signal-box-current-signal-date-row"> <div class="col-xs-12 col-centered parent-stock-row-signal-box-current-signal-date"> 25.11.2010 </div> </div> </div> <!-- long term signal box --> <div class="parent-stock-row-signal-box col-sm-4 col-md-4 col-lg-4 col-xs-4 no-gutter"> <div class="row parent-stock-row-signal-box-first-row no-gutter"> <div class="col-xs-6 parent-stock-row-signal-box-previous-signal-image no-gutter"> <img src="http://s19.postimage.org/hydewyaa7/buy.png" /> </div> <div class="col-xs-6 parent-stock-row-signal-box-star-signal-image no-gutter"> <img src="https://s19.postimg.org/eg1f0k9e7/star.png" /> </div> </div> <div class="row parent-stock-row-signal-box-current-signal-row"> <div class="col-xs-12 parent-stock-row-signal-box-current-signal-image"> <img src="http://s19.postimage.org/iggbumnbj/flat.png" /> </div> </div> <div class="row parent-stock-row-signal-box-current-signal-date-row"> <div class="col-xs-12 col-centered parent-stock-row-signal-box-current-signal-date"> 25.11.2010 </div> </div> </div> </div> </div> </div> <!-- that's a stock row --> <div class="row"> <div class="parent-stock-row col-sm-12 col-md-12 col-lg-12 col-xs-12"> <div class="parent-stock-row-image col-sm-1 col-md-1 col-lg-1 col-xs-1"> <div class=""> <img src="https://s19.postimg.org/uxvrdfssv/indices.png" /> </div> </div> <div class="parent-stock-row-title col-xs-6 col-sm-6 col-md-6 col-lg-6"> <div class=""> <span>Adidas</span> </div> <!-- no children --> </div> <!-- 3 term signals for a stock --> <div class="parent-stock-row-signalscontainer vdivide pull-right col-sm-5 col-md-5 col-lg-5 col-xs-5 no-gutter"> <!-- short term signal box --> <div class="parent-stock-row-signal-box col-sm-4 col-md-4 col-lg-4 col-xs-4 no-gutter"> <div class="row parent-stock-row-signal-box-first-row no-gutter"> <div class="col-xs-6 parent-stock-row-signal-box-previous-signal-image no-gutter"> <img src="http://s19.postimage.org/66pjm5fnz/sell.png" /> </div> <div class="col-xs-6 parent-stock-row-signal-box-star-signal-image no-gutter"> <img src="https://s19.postimg.org/eg1f0k9e7/star.png" /> </div> </div> <div class="row parent-stock-row-signal-box-current-signal-row"> <div class="col-xs-12 parent-stock-row-signal-box-current-signal-image"> <img src="http://s19.postimage.org/f6xbaf9u7/buy.png" /> </div> </div> <div class="row parent-stock-row-signal-box-current-signal-date-row"> <div class="col-xs-12 col-centered parent-stock-row-signal-box-current-signal-date"> 25.11.2010 </div> </div> </div> <!-- medium term signal box --> <div class="parent-stock-row-signal-box col-sm-4 col-md-4 col-lg-4 col-xs-4 no-gutter"> <div class="row parent-stock-row-signal-box-first-row no-gutter"> <div class="col-xs-6 parent-stock-row-signal-box-previous-signal-image no-gutter"> <img src="http://s19.postimage.org/gutakzpn3/flat.png" /> </div> <!-- no star image --> </div> <div class="row parent-stock-row-signal-box-current-signal-row"> <div class="col-xs-12 parent-stock-row-signal-box-current-signal-image"> <img src="http://s19.postimage.org/bbtx7uqof/sell.png" /> </div> </div> <div class="row parent-stock-row-signal-box-current-signal-date-row"> <div class="col-xs-12 col-centered parent-stock-row-signal-box-current-signal-date"> 25.11.2010 </div> </div> </div> <!-- long term signal box --> <div class="parent-stock-row-signal-box col-sm-4 col-md-4 col-lg-4 col-xs-4 no-gutter"> <div class="row parent-stock-row-signal-box-first-row no-gutter"> <div class="col-xs-6 parent-stock-row-signal-box-previous-signal-image no-gutter"> <img src="http://s19.postimage.org/hydewyaa7/buy.png" /> </div> <div class="col-xs-6 parent-stock-row-signal-box-star-signal-image no-gutter"> <img src="https://s19.postimg.org/eg1f0k9e7/star.png" /> </div> </div> <div class="row parent-stock-row-signal-box-current-signal-row"> <div class="col-xs-12 parent-stock-row-signal-box-current-signal-image"> <img src="http://s19.postimage.org/iggbumnbj/flat.png" /> </div> </div> <div class="row parent-stock-row-signal-box-current-signal-date-row"> <div class="col-xs-12 col-centered parent-stock-row-signal-box-current-signal-date"> 25.11.2010 </div> </div> </div> </div> </div> </div>
</div>
</body>
</html>

Stocks index page - Script Codes CSS Codes

@media (min-width: 768px) { .parent-stock-row-image {} .parent-stock-row-title {} .parent-stock-row-signalscontainer {}
}
@media (min-width: 992px) { .parent-stock-row-image {} .parent-stock-row-title {} .parent-stock-row-signalscontainer {}
}
@media (min-width: 1200px) { .parent-stock-row-image {} .parent-stock-row-title {} .parent-stock-row-signalscontainer {}
}
.no-gutter { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
}
.parent-stock-row { border-style: solid; border-width: 1px; padding: 10px 0 10px 0;
}
.parent-stock-row-image { padding-left: 10px !important; width: 50px !important;
}
.parent-stock-row-title { width: 200px !important;
}
.parent-stock-row-content-button { margin-top: 12px;
}
.parent-stock-row-title span { display: inline-block; vertical-align: middle;
}
.parent-stock-row-signalscontainer { width: 210px !important;
}
/* http://www.bootply.com/qjvYXfWLuN */
.vdivide [class^="term-icon-box"]:not(:last-child):after,
.vdivide [class^="parent-stock-row-signal-box"]:not(:last-child):after { background: #e0e0e0; width: 1px; content: ""; display: block; position: absolute; top: 0; bottom: 0; right: 0;
}
.parent-stock-row-signal-box { min-width: 60px; max-width: 60px;
}
.term-icons-row { margin-bottom: 5px;
}
.term-icons-container { width: 210px !important;
}
.term-icon-box { min-width: 60px; max-width: 60px;
}
.parent-stock-row-signal-box-first-row { margin-bottom: 5px;
}
.parent-stock-row-signal-box-current-signal-image { text-align: center;
}
.parent-stock-row-signal-box-current-signal-date-row { margin-top: 3px;
}
.parent-stock-row-signal-box-current-signal-date { font-size: 10px; text-align: center;
}
.parent-stock-row-signal-box-previous-signal-image { padding-left: 2px !important;
}
.parent-stock-row-signal-box-star-signal-image { padding-right: 2px !important; text-align: right;
}
Stocks index page - Script Codes
Stocks index page - Script Codes
Home Page Home
Developer Valentin Treu
Username rivella50
Uploaded December 20, 2022
Rating 3
Size 2,890 Kb
Views 10,120
Do you need developer help for Stocks index page?

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!

Valentin Treu (rivella50) Script Codes
Name
Guestbook Entries
Infobox video
Pure CSS3 News Ticker
Signature
Beispiel Kaskade
A Pen by Valentin Treu
Float example
Bootstrap 4 Gridsystem Demo
HTML5 Seite
Cegmka
Create amazing art & images 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!