Spotlight Solution 1

Developer
Xavier Porter
Size
2,499 Kb
Views
14,168
  1. Spotlight Solution 1 Previews
  2. Spotlight Solution 1 HTML Codes
  3. Spotlight Solution 1 CSS Codes

How do I make an spotlight solution 1?

Spotlight Solution for the long image and fixed height.. What is a spotlight solution 1? How do you make a spotlight solution 1? This script and codes were developed by Xavier Porter on 27 October 2022, Thursday.

Spotlight Solution 1 Previews
IQ Test

Spotlight Solution 1 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spotlight Solution 1</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Spotlight Solution</h1>
<p>Long image with a fixed height<br>
No one on staff to fade images or crop images to the correct size.<br><br> <strong>Solution:</strong> Fade the edges of the image using CSS
</p>
<div class="spotlight"></div>
<h3>Spotlight with Text Area</h3>
<div class="spotlight">	<div class="container">	<div class="section-area">	<h1 class="section-title">	Hello World!	</h1>	<p class="section-description">	Lorem ipsum dolor sit amet, consectetur adipiscing elit.	</h4>	</div>	</div>
</div>
</body>
</html>

Spotlight Solution 1 - Script Codes CSS Codes

body { font-family:HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.spotlight {
position: relative;
height: 250px;
margin-bottom: 15px;
overflow: hidden; /* Important! Keeps the gradient from overflowing the div */
background-color: #cbc7bb;
background-size: cover; background-image:url(https://unsplash.com/photos/_iVG4MsY2N0/download); background-position:50%;
}
/* *** Start of the Gradient Edges **** */
.spotlight:after,
.spotlight:before { position: absolute;
display: block;
content: "";
}
.spotlight:after { top: 0;
right: 0;
width: 30%;
height: 250px;
background: -moz-linear-gradient(right, #cbc7bb 0%, rgba(202, 198, 186, 0.8) 40%, rgba(202, 198, 186, 0) 100%);
background: -webkit-gradient(linear, right top, left top, color-stop(0%, #cbc7bb), color-stop(40%, rgba(202, 198, 186, 0.8)), color-stop(100%, rgba(202, 198, 186, 0)));
background: -webkit-linear-gradient(right, #cbc7bb 0%, rgba(202, 198, 186, 0.8) 40%, rgba(202, 198, 186, 0) 100%);
background: -o-linear-gradient(right, #cbc7bb 0%, rgba(202, 198, 186, 0.8) 40%, rgba(202, 198, 186, 0) 100%);
background: -ms-linear-gradient(right, #cbc7bb 0%, rgba(202, 198, 186, 0.8) 40%, rgba(202, 198, 186, 0) 100%);
}
.spotlight:before {
top: 0;
left: 0;
width: 30%;
height: 250px;
background: -moz-linear-gradient(left, #cbc7bb 0%, rgba(202, 198, 186, 0.8) 40%, rgba(202, 198, 186, 0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #cbc7bb), color-stop(40%, rgba(202, 198, 186, 0.8)), color-stop(100%, rgba(202, 198, 186, 0)));
background: -webkit-linear-gradient(left, #cbc7bb 0%, rgba(202, 198, 186, 0.8) 40%, rgba(202, 198, 186, 0) 100%);
background: -o-linear-gradient(left, #cbc7bb 0%, rgba(202, 198, 186, 0.8) 40%, rgba(202, 198, 186, 0) 100%);
background: -ms-linear-gradient(left, #cbc7bb 0%, rgba(202, 198, 186, 0.8) 40%, rgba(202, 198, 186, 0) 100%);
}
.container { padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto; max-width:1170px;
}
.section-area { box-sizing: border-box; color: rgb(255, 255, 255); float: left; height: 250px; min-height: 1px; position: relative; width: 285px; z-index: 99; perspective-origin: 142.5px 125px; transform-origin: 142.5px 125px; background: rgba(82, 0, 0, 0.6) none repeat scroll 0% 0% / auto padding-box border-box; border: 0px none rgb(255, 255, 255); font: normal normal normal normal 13px/20.4828567504883px 'Open Sans', HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; outline: rgb(255, 255, 255) none 0px; padding: 70px 15px 20px;
}
.section-title { color: rgb(255, 255, 255); height: 50px; text-transform: uppercase; width: 255px; font: normal normal 500 normal 40px/50px 'News Cycle', HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0px 0px 10px; }
.section-description { color: rgb(255, 255, 255); font: normal normal 400 normal 17px/21.25px 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 10px 0px;
}
Spotlight Solution 1 - Script Codes
Spotlight Solution 1 - Script Codes
Home Page Home
Developer Xavier Porter
Username xporter
Uploaded October 27, 2022
Rating 3
Size 2,499 Kb
Views 14,168
Do you need developer help for Spotlight Solution 1?

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!

Xavier Porter (xporter) Script Codes
Name
Quote Styling
A Pen by Xavier Porter
Foundation 5 Menu - Accessibility
Restarting Counter-Reset
Transforms examples
Style tiles with SCSS
Unsplash.it image viewer
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!