CSS RESPONSIVE LANDING PAGE

HTML

<!DOCTYPE html>
<html>
<head>
	<title> LANDING PAGE  </title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
</head>
<body>

	<aside>

		<label for="mobil-btn"><i class="fa fa-bars fa-2x"></i></label>
		<input type="checkbox" id="mobil-btn">

		<img src="https://erkanunlu.com.tr/resim/prof.jpg">
		<div>		
			<h1>MR CSS</h1>
			<span>Lorem, ipsum dolor sit amet,  </span>
		</div> 
		<ul>
			<li><a href="">Lorem Ipsum</a></li>
			<li><a href="">Lorem Ipsum</a></li>
			<li><a href="">Lorem Ipsum</a></li>
			<li><a href="">Lorem Ipsum</a></li>
			<li><a href="">Lorem Ipsum</a></li>
			<li><a href="">Lorem Ipsum</a></li>
			<li><a href="">Lorem Ipsum</a></li>  
		</ul>		
		<div class="social">
			<i class="fa fa-instagram fa-2x"></i>
			<i class="fa fa-youtube fa-2x"></i>
			<i class="fa fa-facebook fa-2x"></i>
			<i class="fa fa-twitter fa-2x"></i>
		</div>
	</aside>

	<section class="home" id="home">
		<h1>MR. <span class="green"> CSS</span>  </h1> 
		<h3>
			3542 BERRY STREET · CHEYENNE WELLS, CO 80810 · (317) 585-8468 ·  
			<span class="green">NAME@EMAIL.COM</span> 
		</h3> 
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod		tempor incididunt ut labore et dolore magna aliqua. <br> Ut enim ad minim veniam,	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		</p> 
		<a href="" class="btn">Lorem Ipsum</a>  
	</section> 

</body>
</html>

CSS

		@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
		* {
			box-sizing: border-box;
			margin:0;
			padding:0;
			font-family: Roboto;
			transition: .5s;
		}

		.green {color:#65B741;}

		aside {
			width:18rem;
			height: 100vh;
			background: linear-gradient(to bottom,#65B741, #C1F2B0);
			position:fixed;
			border-right:8px solid  #65B741;
			display:flex;
			flex-direction:column;
			justify-content: center;
			align-items:center;
			gap:2rem;
			text-align: center; 
		}
		aside input ,aside label{display:none;}
		aside img {
			width:75%;
			border-radius:50%; 
			border:5px solid  #65B741;  
		}
		aside h1 {font-size:2rem; color:#fff} 
		aside span {color:#eee} 
		aside ul {
			margin: 0;
			padding:0;
			list-style-type: none;
			width:75%;
		}
		aside ul a {
			display: block;
			background-color: #65B741;
			text-decoration:none;
			padding:.8rem 2rem; 
			margin-bottom:5px;
			border-radius:10px;
			color:#fff;
			font-size:1rem;
			text-indent:0;
			border-left:5px solid #fff;

		}
		aside ul a:hover {
			font-weight:bold;	
			text-indent:15px;
		}

		aside p {
			padding: 2rem;
			text-align: center;
			color: #777;
		}

		aside i {
			color: #65B741; 
			margin:0 .5rem;
			transition:300ms;
		} 

		aside i:hover {
			color: #000;
			cursor:pointer;
			transform:rotate(360deg);
		} 

		.home {
			width: calc( 100% - 18rem);
			height:100vh;
			background-color: #000;
			margin-left:18rem;
			background-image:linear-gradient(transparent,black ), url('https://erkanunlu.com.tr/resim/bgdag.jpg');
			background-size:cover;
			display:flex;
			flex-direction: column;
			align-items:center;
			justify-content: center;
			padding:50px;
			color:#fff;
			text-align:center;

		}
		.home h1 {
			font-size:4.5rem;
			text-shadow:2px 2px 5px #fff;
			margin-bottom: 0;
		}

		.home h3 {
			font-size:1.5rem;
			color:#ddd;
			margin-top:10px;
		}

		.home p {
			font-size:1.2rem;
			color:#aaa;
			margin-top: 20px;
			margin-bottom:3rem; 
		}

		.home .btn {
			padding:1rem 1.5rem;
			background-color:#65B74133 ;
			color: #fff;
			text-decoration: none;
			border-radius:1rem;
		}
		.home .btn:hover { background-color:#65B741aa; }



		/* MOBİL MENÜ  BUTON */

		aside input:checked~ul {
			display: block;
			position: absolute;
			width:100%;
			top:50px;
			left:0;
			height: calc(100vh - 50px);
			background-color: #000000aa;
			padding: 0;
			padding : 2rem;
		}
		aside input:checked~ul a {
			font-size: 1.5rem;
			border:none;
		}



		/*RESPONSIVE ÖZELLİKLER*/

		@media (max-width:1000px) {
			html {font-size: 12px}
		}


		@media (max-width:768px) {

			aside {
				width:100%;
				height: 50px;
				background: linear-gradient(to bottom,#65B741, #C1F2B0);
				position:fixed;
				border-right:none;
				bottom:8px solid  #65B741;  
				flex-direction:row;  
				justify-content: space-between;
				gap:.5rem;
				padding: 1rem;  
			}
			aside label{display:block;} 
			aside img { width:40px; }
			aside ul { display: none;background-color: #000; }
			aside h1+span { display: none; }

			.home {
				width:  100% ;
				height:100vh;
				padding-top:50px;
				background-color: #000;
				margin-left:0; 
			}
		}

		@media (max-height:600px) {
			html {font-size: 10px}
			aside ul a { padding-left: 1rem} 
		}

Tarayıcıda Aç Uygulamayı İndir

Son Güncelleme : 15 Ocak 2025 17:00, Çarşamba

YORUMLAR (0) YORUM YAZ

Yorum yapılmamış!

BENZER İÇERİK