Notes
Notes - notes.io |
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body { background: url(img/bg.jpg) center; margin: 0 auto; width: 960px; padding: 50px }
.slider-wrapper { position: relative; margin: 0 auto;}
.div1{
height:512px;
width: 512px;
background-image: url('Capture.PNG');
background-repeat: repeat;
background-position: center;
margin: auto;
}
.image{
height: 100px;
width:100px;
}
.gradient{
margin:auto;
width:500px;
height:50px;
background-image: linear-gradient(to right, #3498db,#2980b9,#8e44ad,#B53471,#EA2027,#F79F1F,#FFC312,#fbc531,#4cd137,#55E6C1);
}
.borderimage{
margin-top:50px;
border: 10px solid transparent;
border-image: url("Capture.png") 15 round;
}
.slider-wrapper ul,
.slider-wrapper li,
.slider-wrapper div,
.slider-wrapper img,
.slider-wrapper a {
margin: 0;
padding: 0;
border: none;
outline: none;
list-style: none;
}
.slider-wrapper {
width: 508px;
overflow: hidden;
}
/* Slider Load */
@-webkit-keyframes 'load' {
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
.slider-wrapper {
-webkit-animation-name: load;
-webkit-animation-duration: 2s;
-webkit-transition-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
}
/* Slider Style */
ul.s-thumbs li {
float: left;
margin-bottom: 10px;
margin-right: 11px;
}
ul.s-thumbs li:last-child {
margin-left: 1px;
margin-right: 0;
}
ul.s-thumbs a {
display: block;
position: relative;
width: 55px;
height: 55px;
border: 4px solid transparent;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
font: bold 12px/25px Arial, sans-serif;
color: #515151;
text-decoration: none;
text-shadow: 1px 1px 0px rgba(255,255,255,.25), inset 1px 1px 0px rgba(0,0,0,.15);
}
ul.s-thumbs img {
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
-moz-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}
ul.s-thumbs a:hover,
ul.s-slides {
border: 4px solid #141517;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 0px rgba(255,255,255,.05);
-moz-box-shadow: 0px 1px 0px rgba(255,255,255,.05);
box-shadow: 0px 1px 0px rgba(255,255,255,.05);
}
ul.s-slides,
ul.s-slides li,
ul.s-slides a,
ul.s-slides img {
width: 500px;
height: 350px;
position: relative;
}
ul.s-slides {
overflow: hidden;
clear: both;
}
ul.s-slides li {
position: absolute;
z-index: 50;
}
/* Image Description */
ul.s-thumbs li a:hover span {
position: absolute;
z-index: 101;
bottom: -30px;
left: -22px;
display: block;
width: 100px;
height: 25px;
text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 0px rgba(0,0,0,.4);
box-shadow: 0px 1px 0px rgba(0,0,0,.4);
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #bcbcbc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#bcbcbc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#bcbcbc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#bcbcbc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#bcbcbc 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#bcbcbc 100%); /* W3C */
}
ul.s-thumbs li a:hover span:before {
width: 0;
height: 0;
border-bottom: 5px solid #ffffff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
content: '';
position: absolute;
top: -5px;
left: 44px;
}
ul.s-thumbs li:first-child a:hover span {
left: -3px;
}
ul.s-thumbs li:first-child a:hover span:before {
left: 25px;
}
ul.s-thumbs li:last-child a:hover span {
left: auto;
right: -3px;
}
ul.s-thumbs li:last-child a:hover span:before {
left: auto;
right: 26px;
}
/* Slide Left */
@-webkit-keyframes 'slideLeft' {
0% { left: -500px; }
100% { left: 0; }
}
ul.s-slides li.slideLeft:target {
z-index: 100;
-webkit-animation-name: slideLeft;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
/* Slide Right */
@-webkit-keyframes 'slideRight' {
0% { left: 500px; }
100% { left: 0; }
}
ul.s-slides li.slideRight:target {
z-index: 100;
-webkit-animation-name: slideRight;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
/* Slide Top */
@-webkit-keyframes 'slideTop' {
0% { top: -350px; }
100% { top: 0; }
}
ul.s-slides li.slideTop:target {
z-index: 100;
-webkit-animation-name: slideTop;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
/* Slide Bottom */
@-webkit-keyframes 'slideBottom' {
0% { top: 350px; }
100% { top: 0; }
}
ul.s-slides li.slideBottom:target {
z-index: 100;
-webkit-animation-name: slideBottom;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
/* Zoom In */
@-webkit-keyframes 'zoomIn' {
0% { -webkit-transform: scale(0.1); }
100% { -webkit-transform: none; }
}
ul.s-slides li.zoomIn:target {
z-index: 100;
top: 4px;
-webkit-animation-name: zoomIn;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
/* Zoom Out */
@-webkit-keyframes 'zoomOut' {
0% { -webkit-transform: scale(2); }
100% { -webkit-transform: none; }
}
ul.s-slides li.zoomOut:target {
z-index: 100;
-webkit-animation-name: zoomOut;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
/* Rotate */
@-webkit-keyframes 'rotate' {
0% { -webkit-transform: rotate(-360deg) scale(0.1); }
100% { -webkit-transform: none; }
}
ul.s-slides li.rotate:target {
z-index: 100;
top: 4px;
-webkit-animation-name: rotate;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
/* Not Target */
@-webkit-keyframes 'notTarget' {
0% { z-index: 75; }
100% { z-index: 75; }
}
ul.s-slides li:not(:target) {
-webkit-animation-name: notTarget;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
/* First Slide */
ul.s-slides li.first {
z-index: 60;
}
</style>
<body>
<div class="div1">
</div>
<div class="gradient">
</div>
<div class="borderimage">
2. In this task, generate the following pattern by repeating a portion of the image given and also create another div with some paragraphs use the slice of the image as border image.
</div>
<img src="img/title.png" alt="">
<div class="slider-wrapper">
<ul class="s-thumbs">
<li><a class="image" href="#slide-1"><img class="image" src="https://c.tribune.com.pk/2018/11/1842787-nustbusinessschoolxx-1541654657-156-160x120.jpg" alt=""><span>Slide Left</span></a></li>
<li><a class="image" href="#slide-2"><img class="image" src="https://live.staticflickr.com/5101/5610654630_360ae2fec7_b.jpg" alt=""><span>Slide Right</span></a></li>
<li><a class="image" href="#slide-3"><img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpD9sd9gh2OgWmtZngWW5HJit_LvaVGfEYJ0nFujgdVNNUECAq" alt=""><span>Slide Top</span></a></li>
<li><a class="image" href="#slide-4"><img class="image" src="http://intermark.com.pk/wp-content/uploads/2018/08/1-3-400x284.jpg" alt=""><span>Slide Bottom</span></a></li>
<li><a class="image" href="#slide-5"><img class="image"src="https://live.staticflickr.com/5013/5465227191_c57ec0e2df_b.jpg" alt=""><span>Zoom In</span></a></li>
<li><a class="image" href="#slide-6"><img class="image"src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8MaG02Cub3t4uPnRJkCSv3uWDzEG9UCBs7kM4QK9bWyg8hddk" alt=""><span>Zoom Out</span></a></li>
<li><a class="image" href="#slide-7"><img class="image"src="https://live.staticflickr.com/6022/5991282390_5e59f8af89_b.jpg" alt=""><span>Rotate</span></a></li>
</ul>
<ul class="s-slides">
<li class="slideLeft first" id="slide-1"><img src="https://c.tribune.com.pk/2018/11/1842787-nustbusinessschoolxx-1541654657-156-160x120.jpg" alt=""></li>
<li class="slideRight" id="slide-2"><img src="https://live.staticflickr.com/5101/5610654630_360ae2fec7_b.jpg" alt=""></li>
<li class="slideTop" id="slide-3"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpD9sd9gh2OgWmtZngWW5HJit_LvaVGfEYJ0nFujgdVNNUECAq" alt=""></li>
<li class="slideBottom" id="slide-4"><img src="http://intermark.com.pk/wp-content/uploads/2018/08/1-3-400x284.jpg" alt=""></li>
<li class="zoomIn" id="slide-5"><img src="https://live.staticflickr.com/5013/5465227191_c57ec0e2df_b.jpg" alt=""></li>
<li class="zoomOut" id="slide-6"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8MaG02Cub3t4uPnRJkCSv3uWDzEG9UCBs7kM4QK9bWyg8hddk" alt=""></li>
<li class="rotate" id="slide-7"><img src="https://live.staticflickr.com/6022/5991282390_5e59f8af89_b.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
|
|
Notes is a web-based application for online taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000+ notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 14 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
