Untitled

mail@pastecode.io avatar
unknown
html
2 years ago
6.9 kB
4
Indexable
Never
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			box-sizing: border-box;
		}

		body{
			margin:0;
			font-family: "Segoe UI", "Roboto";
		}

		h3{
			margin:0px;
		}
		.container{
			max-width:1320px;
			margin: 0 auto;
		}

		.row{
			display:flex;
			flex-direction: row;
		}

		.row>*{
			max-width:100%;
			width:100%;
		}

		.text-white{
			color:white;
		}

		.text-blue{
			color: rgb(13, 110, 253);
		}

		.bg-blue{
			background: rgb(13, 110, 253)
		}

		.bg-green{
			background: rgb(25, 135, 84);
		}

		.text-green{
			color:	rgb(25, 135, 84);
		}

		.col-4{
			width:33.33333333%;
			padding:0 12px;
		}

		.col-8{
			width:66.66666667%;
			padding:0 12px;
		}

		.col-6{
			width:50%;
			padding:0 12px;
		}

		.card{
			position: relative;
			display: flex;
			flex-direction: column;
			min-width: 0;
			word-wrap: break-word;
			background-clip: border-box;
			border: 1px solid rgba(0, 0, 0, 0.125);
			border-radius: 0.25rem;
	    }

	    .card-header{
	      	padding: 8px 16px;
	      	border-radius:4px;
	      	border-bottom: 1px solid gray;
	    }

	    .card-body{
	    	padding:16px;
	    }

		.heading{
			font-size:56px;
			font-weight:300;
			line-height: 1.2;
		}

	    .btn{
	      display: inline-block;
	      text-align: center;
	      vertical-align: middle;
	      border: 1px solid transparent;
	      padding: 8px 12px;
	      border-radius: 4px;
	      cursor:pointer;
	      text-decoration:none;
	    }

	    .btn-blue{
	    	color:white;
	    	background-color: #0a58ca;
    		border-color: #0a53be;
	    }

	    .btn-yellow{
	    	color: #000;
		    background-color: #ffcd39;
		    border-color: #ffc720;
	    }

	    .title{
	    	font-size:48px;
			font-weight:300;
			line-height: 1.2;
	    }

		.badge{
		    padding: 3px 6px;
		    font-size: 12px;
		    font-weight: bold;
		    color: #fff;
		    border-radius: 4px;
		    background:gray;
		}
		.heading{
			font-weight:bold;
			font-size:32px;
			margin-bottom:12px;
		}

	    .fst-italic{
	    	font-style:italic;
	    }

	    .p-40{
	    	padding:40px;
	    }

	    .p-16{
	    	padding:16px;
	    }

	    .mt-40{
	    	margin-top:40px;
	    }
	    .mx-8{
	    	margin-left:8px;
	    	margin-right:8px;
	    }
		.nav{
			list-style-type:none;
			margin:0px;
			display:flex;
			line-height:1.5;
		}

		.nav-link{
			display:block;
			padding:8px 16px;
			text-decoration: none;
		}

		.nav-item{
			border-bottom:solid 1px white;
			border-radius:3px;
		}

		.justify-content-right{
			justify-content:end;
		}

		.round-border{
			border-radius:4px;
		}
	</style>
	<script>
        // задача 1 Изведете в конзолата съдържанието на елементи на списъци
        // задача 2 Програмно променете цвета на фона за елемент с клас bg-blue на #cddc39
        // задача 3 Програмно добавете към съдържанието на h3 и Вашия факултетен нонмер 
        // задача 4 Добавете поведение за посочване с мишката върху елементи с клас text-blue, при което около тях се добавя непрекъсната рамка с дебелина 1px и цвят #000000, а при премахване на курсора се премахва и рамката
        // задача 5 Добавете поведение за клик върху елементи с клас nav-link, при което се променя атрибута href, така че да пише https://www.google.bg
        document.addEventListener('DOMContentLoaded', () => {

            task1();
            task2();
            task3();
            task4();
            task5();

        });


        const task1 = () => {
        	
        }

        const task2 = () => {	
            
        }

        const task3 = () => {
            
        }

        const task4 = () => {
            
        }

        const task5 = () => {
            
        }

    </script>


</head>
<body>
	<div class="container">
		<div class="row bg-green p-16 round-border  ">
			<ul class="nav justify-content-right">
				<li class="nav-link ">
					<a href="" class="nav-link nav-item text-white">Homepage</a>
				</li>
				<li class="nav-link ">
					<a href="" class="nav-link nav-item text-white">About us</a>
				</li>
				<li class="nav-link">
					<a href="" class="nav-link nav-item text-white">Services</a>
				</li>
				<li class="nav-link">
					<a href="" class="nav-link nav-item text-white">Contact us</a>
				</li>
			</ul>
		
		</div>
		<div class="container row mt-40 p-16 ">
			<div class="col-8 ">
				<div class="card">
					<div class="card-header bg-green text-white"> Our Agenda </div>
					<div class="card-body">
						<h1 class="title">
							Help the community
						</h1>
						<div class="">
							<p class="text-green">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa ipsa cumque optio voluptatum non facere porro ea velit</p>
							<a href="#" class="btn btn-blue text-white">Find out how</a>
							<a href="#" class="btn btn-yellow">Check our Linktr.ee</a>
						</div>
					</div>
				</div>
			</div>
			<div class="col-8 mx-8">
				<div class="card">
					<div class="card-header bg-green text-white"> Meet the team </div>
					<div class="card-body">
						<h1 class="title">
							Hear the inspiring story
						</h1>
						<p class="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa ipsa cumque optio voluptatum non facere porro ea velit, iure ipsam quaerat expedita deserunt quidem ratione, atque quod recusandae molestias dignissimos. <a href="#" class="badge"> Read more </a></p>
					</div>
				</div>
			</div>

		</div>
		<div class="row p-16">
			<div class="col-4">
				<h3 class="heading text-green">
					Features
				</h3>
				<ul>
					<li class="fst-italic text-blue">
						Agile development
					</li>
					<li class="fst-italic text-blue">
						Senior expertise
					</li>
					<li class="fst-italic text-blue">
						Multicultural methodology
					</li>
					<li class="fst-italic text-blue">
						Guaranteed upkeep
					</li>
				</ul>
			</div>
			<div class="col-8 bg-blue p-40">
				<svg width="100%" height="100">
					<rect width="100%" height="100%" fill="#868e96"></rect>
					<text x="40%" y="50%" fill="#dee2e6">
						Responsive image
					</text>
				</svg>
			</div>
		</div>
	</div>
</body>
</html>