Striped background for a container with more than one element

Developer
Laura Moraiti
Size
1,942 Kb
Views
16,192
  1. Striped background for a container with more than one element Previews
  2. Striped background for a container with more than one element HTML Codes
  3. Striped background for a container with more than one element CSS Codes

How do I make an striped background for a container with more than one element?

What is a striped background for a container with more than one element? How do you make a striped background for a container with more than one element? This script and codes were developed by Laura Moraiti on 04 November 2022, Friday.

Striped background for a container with more than one element Previews
IQ Test

Striped background for a container with more than one element - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Striped background for a container with more than one element</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="nav"> <nav> <ul> <li> <a href="#"><span class="icon">&hearts;</span></a> <a href="#" class="nav-link">Hello,</a> </li> <li> <a href="#"><span class="icon">&hearts;</span></a> <a href="#" class="nav-link">is it me you're</a> </li> <li> <a href="#"><span class="icon">&hearts;</span></a> <a href="#" class="nav-link">looking 4?</a> </li> </ul> </nav>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Striped background for a container with more than one element - Script Codes CSS Codes

body { margin: 0; font-family: sans-serif; font-size: 100%;
}
* { box-sizing: border-box;
}
.nav { width: 100%; height: 20%; background: linear-gradient(to bottom, deepskyblue 50%, #fff 50%);
}
ul { margin: 0; padding: 0; list-style: none;
}
nav ul li { display: table-cell; padding: .5em 1em; cursor: hand; cursor: pointer; transition: all .3s ease-in; border-right: 1px solid rgba(0,0,0,.1);
} nav ul li:hover { background-color: #d615a9; }
.icon { display: block; text-align: center; font-size: 1em; padding-bottom: 1.2em; color: #fff;
}
a { text-decoration: none; color: #444; font-size: 1em;
}
nav ul li:hover a { color: #fff;
}
@media (max-width: 600px) { body { font-size: 125%; }
}
@media (max-width: 400px) { .nav { background: linear-gradient(to bottom, deepskyblue 100%, #fff 0%);
} a.nav-link { display: none; }
}
Striped background for a container with more than one element - Script Codes
Striped background for a container with more than one element - Script Codes
Home Page Home
Developer Laura Moraiti
Username Fixie
Uploaded November 04, 2022
Rating 3
Size 1,942 Kb
Views 16,192
Do you need developer help for Striped background for a container with more than one element?

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!

Laura Moraiti (Fixie) Script Codes
Name
Responsive three column fixed layout
Poll
User card
Fun responsive split layout
WIP
Simple and clean form
Dynamic prefix, transition and transform SASS mixins
Horizontal infinite loop newsticker
Responsive and friendly table
Fluid section title with border on both sides
Create amazing blog posts 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!