I have a project that needs a CSS menu bar with panel of overview panels on the right side of HTML page. My issue is the that the CSS menu bar style sheet menu does not render. Attempting to get this CSS menu bar working, then extend code functionality for content links, login, dashboard, etc.
Code: tag
<header class='header'>
<div class='header_top-bar'>
<div class='top-bar_title'>
<a href='index'><h1><img src='images/logo.png' data-image='images/logo.png' alt='Athena'></h1></a>
<div class='ajax-loader' id='ajax-loader'>
<div class='ajax-loader_animator'></div>
</div>
</div>
<div class='top-bar_toggle' id='menu_toggle'>
<span></span>
<span></span>
<span></span>
</div>
<!-- <div class='top-bar_share' id='share_toggle'>
<span class='underline--white'>
SHARE
</span>
</div> -->
<div class='top-bar_menu' id='overlay_menu'>
<ul class='menu_container'>
<li class='menu_item'>
<span>.01.</span>
<a class='link-ajax' href='/'>Home</a>
</li>
<li class='menu_item'>
<span>.02.</span>
<a class='link-ajax' href='/project'>Athena Customers</a>
</li>
<li class='menu_item'>
<span>.03.</span>
<a class='link-ajax' href='/wines'>Athena Services</a>
</li>
<li class='menu_item'>
<span>.04.</span>
<a class='link-ajax' href='/sustainability'>Athena Sustainability</a>
</li>
<li class='menu_item'>
<span>.05.</span>
<a class='link-ajax' href='/hospitality'>Athena Dashboards</a>
</li>
</ul>
<div class='language-chooser menu_item'>
<div class='masi-agricola_wrapper hide-on-mobile'>
<a href='http://www.masi.it' target='_blank' class='masi-agricola_link'>
<img src='images/agricola.png' data-image='images/agricola.png'/>
</a>
</div>
<p class='text--subtitle'>select your language</p>
<span class='language-link'><a class='' href='/en/'>Eng</a></span>
<span class='line-break'></span>
<span class='language-link'><a class='' href='/es/'>Esp</a></span>
<span class='line-break'></span>
<span class='language-link'><a class='' href='/it/'>Ita</a></span>
</div>
</div>
</div>
</header>
Code: content section
<div id="new-plh" class="plh"></div>
<div id="actual-plh" class="plh">
<section class="main-content clearfix homepage">
<div class="main-content_background">
<div class="half_screen full-height-desk" id="biggest_block">
<a href="project" class="">
<div class="text-block">
<div class="full-image_header page-header">
<h1 class="page-header_title text--title">
Athena Intelligence Earth's Essential Data
</h1>
<strong class="page-header_subtitle text--subtitle">
Athena Intelligence Login
</strong>
</div>
<img data-image="images/project-header.jpg" src="images/project-header.jpg" alt="">
</div>
</a>
</div>
<div class="half_screen full-height-desk">
<a href="wines">
<div class="text-block three_row">
<div class="full-image_header page-header">
<h1 class="page-header_title text--title">
Athena: Many industries: all use Land, Food, Energy, Water
</h1>
<strong class="page-header_subtitle text--subtitle">
The Gods: Land, Food, Energy, Water
</strong>
</div>
<div class="image-container">
<img class="three_images" data-image="images/wines-header.jpg" src="images/wines-header.jpg" alt="">
</div>
</div>
</a>
<a href="sustainability" class="">
<div class="text-block three_row">
<div class="full-image_header page-header">
<h1 class="page-header_title text--title">
Land, Food, Energy, Water: Sustainability
</h1>
<strong class="page-header_subtitle text--subtitle">
Athena : Dedication To Land, Food, Energy, Water
</strong>
</div>
<div class="image-container">
<img class="three_images" data-image="images/sustainability-header.jpg" src="images/sustainability-header.jpg" alt="">
</div>
</div>
</a>
<a href="hospitality">
<div class="text-block three_row">
<div class="full-image_header page-header">
<h1 class="page-header_title text--title">
Land, Food, Energy, Water: Hospitality
</h1>
<strong class="page-header_subtitle text--subtitle">
Land, Food, Energy, Water: That Welcomes You
</strong>
</div>
<div class="image-container">
<img class="three_images" data-image="images/hospitality-header.jpg" src="images/hospitality-header.jpg" alt="">
</div>
</div>
</a>
</div>
</div>
</section>
Code: title bar wrapper tag
<div class='out-loader_wrapper'>
<div class='out-loader'>
<div class='filler' id='filler'>
<img class='logo-loader' src='images/logo.png' data-image='images/logo.png'/>
<div class='filler-bar'></div>
<p class='text--title' id='loader_text'>0</p>
</div>
</div>
</div>
Given you did not post the complete HTML I cannot tell if you are linking the stylesheet correctly. Nothing in your HTML looks out of place, which means that if you can't see the styles rendered then either the stylesheet was not linked correctly to the document or you did not import it correctly if you're using a preprocessor like SASS or LESS.
However, you can try the following:
Make sure you're linking it correctly in your document's <head> like <link href="path/to/your/menu-stylesheet.css rel="stylesheet">.
If you're linking multiple stylesheets, make sure to link them in the correct order. This means that if you reference classes or styles that are declared in another stylesheet, you must ensure to link the stylesheet that is referenced before the stylesheet that makes the reference.
If you're using a preprocessor, make sure you imported the stylesheet correctly like #import 'path/to/stylesheet.less (mind the correct extension whichever your case.
If you're using a task runner like grunt or gulp, you can concatenate your stylesheets into one single stylesheet.
Related
I'm trying to run npm run build but I encounter this error. I tried to solve it but I'm just beginning my dev journey and was following an old tutoria.how can i go about solving this issue, any solutions will be appreciated.
the error:
error during build:
TypeError: Cannot read properties of undefined (reading 'startOffset')
at overwriteAttrValue (file:///C:/Users/Altayeb/Desktop/guide_gps/node_modules/vite/dist/node/chunks/dep-557f29e6.js:43339:50)
at Object.transform (file:///C:/Users/Altayeb/Desktop/guide_gps/node_modules/vite/dist/node/chunks/dep-557f29e6.js:43575:29)
at async transform (file:///C:/Users/Altayeb/Desktop/guide_gps/node_modules/rollup/dist/es/shared/rollup.js:21928:16)
at async ModuleLoader.addModuleSource (file:///C:/Users/Altayeb/Desktop/guide_gps/node_modules/rollup/dist/es/shared/rollup.js:22153:30)
here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GUIDE GPS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght#400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unpkg.com/a11y-slider#latest/dist/a11y-slider.css" />
<script src="https://unpkg.com/a11y-slider#latest/dist/a11y-slider.js" defer></script>
</head>
<body>
<header class="primary-header">
<div class="container">
<div class="nav-wrapper">
<img src="images/logo.svg" alt="Logo">
<button class="mobile-nav-toggle" aria-controls="primary-navigation" aria-expanded="false">
<span class="visually-hidden">Menu</span>
</button>
<nav class="primary-navigation" id="primary-navigation">
<ul aria-label="Primary" role="list" class="nav-list">
<li>Pricing</li>
<li>Services</li>
<li>About Us</li>
<li>Privacy Policy</li>
<!-- <li>Careers</li>
<li>Community</li> -->
</ul>
</nav>
<button class="button | display-sm-none display-md-inline-flex">Get Started</button>
</div>
</div>
</header>
<main>
<section class="hero | text-center-sm-only padding-block-900">
<div class="container">
<div class="even-columns">
<div class="flow">
<h1 class="fs-primary-heading fw-bold">
Vehicle tracking systems can offer companies big benefits.</h1>
<p>Manage makes it simple for software teams to plan day-to-day tasks while keeping the larger team goals in
view.</p>
<button class="button">Get Started</button>
</div>
<div class="hero__image">
<img class="mx-auto" src="images/gps.png" alt="">
</div>
</div>
</div>
</section>
<section class="sales-points | padding-block-900">
<div class="container">
<div class="even-columns">
<div class="sales-points__blog flow text-center-sm-only" style="--flow-spacer: 1.5rem">
<h2 class="fs-secondary-heading fw-bold">What technology we use?</h2>
<p>We use the state of the art tracking hardware,
Teltonika FMB920 is compact and smart tracker with Bluetooth connectivity,
internal High Gain GNSS and GSM antennas and integrated backup battery.
FMB920 is designed for light vehicles tracking in applications like insurance telematics,
rental cars, recovery of stolen cars, public safety services, delivery transport, taxi and much more.
</p>
<div>
<img src="images/tracker1.png" alt="">
</div>
</div>
<div>
<ul class="numbered-items | flow" role="list">
<li>
<div class="flow" style="--flow-spacer: 1em">
<h3 class="numbered-items__title | fs-600 fw-bold">Accelerometer sensor</h3>
<p class="numbered-items__body" data-width="wide">
The FMB920 is packed with Accelerometer sensor to detect every possible driving senario,
Green Driving, Over Speeding detection, Jamming detection, GNSS Fuel Counter, DOUT Control Via Call, Excessive Idling detection, Unplug detection, Towing detection, Crash detection, Auto Geofence, Manual Geofence.</p>
</div>
</li>
<li>
<div class="flow" style="--flow-spacer: 1em">
<h3 class="numbered-items__title | fs-600 fw-bold">Rugged Build</h3>
<p class="numbered-items__body" data-width="wide">
The FMB920 is designed to withstand harsh environmental condition making it last for years.
Operating temperature (without battery) -40 °C to +85 °C,
Operating humidity 5% to 95% non-condensing,
Ingress Protection Rating IP54,
Battery charge temperature 0 °C to +45 °C, Battery discharge temperature -20 °C to +60 °C.</p>
</div>
</li>
<li>
<div class="flow" style="--flow-spacer: 1em">
<h3 class="numbered-items__title | fs-600 fw-bold">Mobile App For Live-Tracking</h3>
<p class="numbered-items__body" data-width="wide">
GUIDE GPS provide a mobile application for
tracking your vehicles live within the app,
after the inatallment of the tracking hardware.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="carousel | padding-block-700 text-center">
<h2 class="fs-secondary-heading fw-bold">Mobile App</h2>
<div class="hero__image" >
<img class="mx-auto" width="300" height="430" src="images/app.svg" alt="">
</div>
<ul class="slider">
<li>
<!-- <img src="images/avatar-anisha.png" alt=""> -->
<div class="slider-content | flow" style="--flow-spacer: 1rem">
<h3 class="fw-bold text-accent-400">Live Tracking</h3>
<p data-width="wide">
The applicaton provide the ability to live track your vhechile anywhere.
providing information on the time, distanc, fuel conusumption, and much more.</p>
</div>
</li>
<li>
<li>
<!-- <img src="images/avatar-anisha.png" alt=""> -->
<div class="slider-content | flow" style="--flow-spacer: 1rem">
<h3 class="fw-bold text-accent-400">Live Tracking</h3>
<p data-width="wide">
The applicaton provide the ability to live track your vhechile anywhere.
providing information on the time, distanc, fuel conusumption, and much more.</p>
</div>
</li>
<li>
<!-- <img src="images/truck.jpg" alt=""> -->
<div class="slider-content | flow" style="--flow-spacer: 1rem">
<h3 class="fw-bold text-accent-400">Track Your Entire Fleet</h3>
<p data-width="wide">
With our App you will be alble to track
multiple vechiles, with live location updates, time , speed,
fuel conusumbtion, engine igntion, etc...
</p>
</div>
</li>
<li>
<!-- <img src="images/tracker1.png" alt=""> -->
<div class="slider-content | flow" style="--flow-spacer: 1rem">
<h3 class="fw-bold text-accent-400">Hardware Monitring</h3>
<p data-width="wide">
The App allows you to monitor your hardware "GPS Device"
status, incase of dissconnection or signal failure.
</p>
</div>
</li>
<li>
</li>
</ul>
<a class="btn btn-google" href="https://play.google.com/store/apps/details?id=com.guidegpsclient.android" title="Google Play">Google Play</a>
</section>
<section class="cta | padding-block-900 bg-accent-400 text-neutral-100">
<div class="container">
<div class="even-columns vertical-align-center">
<div>
<p class="fs-primary-heading fw-bold">Secure Your Vhicles With Us.</p>
</div>
<div class="justify-self-end-md">
<button class="button" data-type="inverted">Call Us</button>
</div>
</div>
</div>
</section>
</main>
<footer class="primary-footer | padding-block-700 bg-neutral-900 text-neutral-100">
<div class="container">
<div class="primary-footer-wrapper">
<div class="primary-footer-logo-social">
<a href="#" aria-label="home">
<svg class="logo" width="146" height="24">
<use xlink:href=""></use>
</svg>
</a>
<ul class="social-list" role="list" aria-label="Social links">
<li><a aria-label="facebook" href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-facebook"></use>
</svg></a>
</li>
<li><a aria-label="youtube" href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-youtube"></use>
</svg>
</a></li>
<li><a aria-label="twitter" href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-twitter"></use>
</svg>
</a></li>
<li><a aria-label="pinterest" href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-pinterest"></use>
</svg>
</a></li>
<li><a aria-label="instragram" href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-instagram"></use>
</svg>
</a></li>
</ul>
</div>
<div class="primary-footer-nav">
<nav class="footer-nav">
<ul class="flow" style="--flow-spacer: 1em" aria-label="Footer" role="list">
<li>Home</li>
<li>Pricing</li>
<li>Services</li>
<li>About Us</li>
<!-- <li>Careers</li>
<li>Community</li> -->
<li>Privacy Policy</li>
</ul>
</nav>
</div>
<div class="primary-footer-form">
<form action="">
<input type="email">
<button class="button" data-shadow="none">Go</button>
</form>
<p>Copyright 2020. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<script type="module" src="/main.js"></script>
</body>
</html>
I've got a list of products and what i want to do is to make the price of the product clickable just like the product title linking to the same product URL.
I've created a for loop to try and do this, but the issue i have is each href link for each product is being created per product where i only need the one price with the corresponding href link. How do i correct this?
Note: I don't have access to change the original html which is why i'm trying to make these changes in javascript
var getAllLinks = document.querySelectorAll('.productTitle').forEach(function(el){
var createNewLinks = document.querySelectorAll('.productPrice').forEach(function (elem){
elem.insertAdjacentHTML("afterend", ""+ elem.innerText +"");
})
});
.container {padding-bottom: 20px;}
<article class="container" data-ga-product="04245">
<div class="productContent">
<a class="productTitle" href="#product1">Product 1</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 5,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="05395">
<div class="productContent">
<a class="productTitle" href="#product2">Product 2</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 145,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="263743">
<div class="productContent">
<a class="productTitle" href="#product3">Product 3</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 35,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="60493">
<div class="productContent">
<a class="productTitle" href="#product4">Product 4</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 125,90</span>
</div>
</div>
</div>
</article>
I'm not quite sure about your problem but I think maybe this is what you want.
Please let me know if I got it wrong :)
var getLink = document.querySelectorAll('.productTitle');
var newLink = document.querySelectorAll('.productPrice');
getLink.forEach((link, i) => {
newLink[i].insertAdjacentHTML("afterend", "" + newLink[i].innerText + "");
newLink[i].remove();
});
.container {padding-bottom: 20px;}
<article class="container" data-ga-product="04245">
<div class="productContent">
<a class="productTitle" href="#product1">Product 1</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 5,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="05395">
<div class="productContent">
<a class="productTitle" href="#product2">Product 2</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 145,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="263743">
<div class="productContent">
<a class="productTitle" href="#product3">Product 3</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 35,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="60493">
<div class="productContent">
<a class="productTitle" href="#product4">Product 4</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 125,90</span>
</div>
</div>
</div>
</article>
Why don't you just include the price within the a tag and forget about JavaScript all together?
<article class="container" data-ga-product="04245">
<div class="productContent">
<a class="productTitle" href="#product1">Product 1
<span class="productPriceContainer">
<span class="productPrimary">
<span class="productPrice">€ 5,90</span>
</span>
</span>
</a>
</div>
</article>
You'd need to change the inner divs to spans to be semantic HTML, and potentially some CSS changes to get the styling just right, but this seems like a way better solution.
I'm using this library https://github.com/makotot/react-scrollspy to get the scroll to div effect.However after following the documentation ,I don't seem to get it working.Code :
<RewardContainer>
<div className="pageWrapper">
<div className="rewardInfoWrapper">
<div className="tabsContainer">
<div>
<Scrollspy
items={[
"section-1",
"section-2",
"section-3"
]}
currentClassName="is-current"
>
<li>
<a
href="#section-1"
className="c-side-nav__link"
>
Streak
</a>
</li>
<li>
<a
href="#section-2"
className="c-side-nav__link"
>
Gems
</a>
</li>
<li>
<a
href="#section-3"
className="c-side-nav__link"
>
Xp Points
</a>
</li>
</Scrollspy>
</div>
</div>
<div className="columnContainer">
<div className="tabInfo">
<div>
<div id="section-1">
<p>
This is Section 1
</p>
</div>
<div id="section-2">
<p>
This is Section 2
</p>
</div>
<div id="section-3">
<p>
This is Section 3
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</RewardContainer>
The issue is ,my a href="#id" tag reloads the browser and treats id as a route instead of scrolling to that div's id.For instance,clicking on the third li element reloads the browser with http://localhost:7000/#section-3 in the url.
I'm attempting to create a profile website.
However I seem to have hit a brick wall; I'm unable to figure out a way of making my carousel center itself in my section.
Does anyone have any advice on what I could do?
Here is a codepen with the code:
https://codepen.io/Todai/pen/RRPGwZ
And here is my .html:
<html>
<head>
<link rel="stylesheet" href="resources/font-awesome-4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/flipCardCSS.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<div class="container-fluid">
<header id="banner">
<div class="container">
<div class="col-md-2">
<!-- <span id="link"> -F </span> -->
<img src="http://res.cloudinary.com/todai/image/upload/v1464873431/146487352498428_v9sob9.gif" id="bannerImg">
</div>
<div class="col-md-10">
<button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" class="navbar-toggle collapsed">
<span class="sr-only"> Toggle navigation </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
<nav id="navbar" role="navigation" class="collapse navbar-collapse" aria-expanded="false">
<ul class="nav navbar-nav navbar-right">
<li class="active">
About
</li>
<li class>
Portfolio
</li>
<li class>
Contact
</li>
</ul>
</nav>
</div>
<a id="top" name="home"> </a>
</header>
<main >
<header class="row customClass">
<div class="intro-text col-md-8" >
<p class="text-right">
My name is <strong> J</strong>oakim <strong>K</strong>akaei, I'm a Software Engineer with knowledge of most main-stream languages as well as some more obscure. I have experience working with c++, c#, java amongst many other; working knowledge of project management and methodologies.
</p>
<hr class="star-bright">
</hr>
<span class="skills">
Software Engineer - Web Developer - Security Hobbyist
</span>
</div>
<div class="col-md-4">
<img src="http://res.cloudinary.com/todai/image/upload/v1464900561/12976795_10208023281372738_6826518550098825642_o_e2brh3.jpg" alt>
</div>
</header>
<section id="Portfolio">
<h2> Portfolio </h2>
<hr class="star-dark"/>
<div class="container center">
<div class="prev">Prev</div>
<div class="carousel">
<div class="item a">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/v1469565942/geostocks-transparent_pyxgvj.png"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
<div class="item b">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535266/Screen-Shot-2011-12-11-at-9.39.26-PM_twyfwy.png"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
<div class="item c">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
<div class="item d">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
<div class="item e">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
<div class="item f">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
</div>
<div class="next">Next</div>
</div>
</section>
</main>
</div>
</div>
</div>
</body>
</html>
<script src="resources/scripts/carousel.js"> </script>
This is an easy way to horizontally center a relatively positioned element:
.carousel {
position: relative;
margin: 0 auto;
}
I am building a page using Ionic and Angular. I'm including the stylesheet at the top as you can see, but when the page loads, the styles are completely messed up, until I refresh the page. I am not sure what I'm doing wrong. Thanks in advance.
<link rel="stylesheet" type="text/css" href="css/event-nba.css">
<div ng-repeat="events in eventsList" class="events-bg">
<a>
<div class="event-box" ng-style="{'background-image':'url({{events.backgroundImage}})'}">
<div class="nba-event-team">
<span><img class="logos logo-margin" src="{{events.logo1}}"></span>
<span><img class="logos" src="{{events.logo2}}"></span>
</div>
<div class="nba-event-team">
<span class="team">{{events.eventDate}}</span>
</div>
<div class="nba-event-team">
<span class="team">{{events.eventLocation}}</span>
</div>
<div class="nba-event-team">
<img class="network-logo" src="{{events.networkLogo}}"></img>
</div>
<div class="nba-event-team">
<button class="button button-assertive bth-red">
TICKETS
</button>
</div>
</div>
<div class="preview-box">
<span class="preview-text">{{events.eventPreview}}</span>
</div>
<div class="gear-title-box">
<span class="gear-title-text">PICK UP GEAR FOR THE GAME</span>
</div>
<div class="row">
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-jacket">
<div class="item item-body">
<img class="full-image" src="img/nikesweatshirt200.png">
<p class="shop-product-box-text-margin">
Clothing
</p>
<h3 class="shop-product-box-text-margin">Nike Jacket <br>Elite Sports - Men's $79.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product">
<div class="item item-body">
<img class="full-image" src="img/kobe xi.jpeg">
<p class="shop-product-box-text-margin">
Shoes
</p>
<h3 class="shop-product-box-text-margin">Nike Kobe 11 <br>Elite Low - Men's $199.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-uptime">
<div class="item item-body">
<img class="full-image" src="img/uptimebottle.png">
<p class="shop-product-box-text-margin">
Sport Supplements
</p>
<h3 class="shop-product-box-text-margin">UPTIME Energy <br>Original $4.39</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-nba">
<div class="item item-body">
<img class="full-image" src="img/lavinjersey.jpeg">
<p class="shop-product-box-text-margin">
Clothing
</p>
<h3 class="shop-product-box-text-margin">Lavine Jersery <br>NBA Black - Men's $99.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
</div>
</a>
So I found the answer. This stylesheet was using a few class names from a previous page, and that stylesheet had different css for those classes. The classes weren't being dumped before this page was loading, thus inheriting the other styles.