Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Onepage only with CSS3 (hiding and showing parts of page)

    Hello, i have assignment in my HTMl5 and CSS3 course to create replica of this website only with CSS3 and HTML5 (no bootstrap like the original website and no javascript).
    Can you give me suggestions how to show and hide the first and second part of the page using button like the original website but without javascript?

    So far this is my code

    Code:
    <!doctype html>
    <html lang="en">
    <head>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    		<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1, user-scalable=no" name="viewport" />
    		<title>Code Abroad - Find your IT job abroad</title>
    		<link href="style.css" rel="stylesheet">
    	</head>
    	<body>
    	
    	
    		<div id="container" class="container-classie intro-effect-push">
    			
    				<header class="header ">
    				<div class="navbar">
    					<div class="clearfix container">
    						<div class="row">
    							<div class="col-md-12">
    								<a class="logo" href="index.html"><img src="assets/img/logo.png" hspace="300" alt="Code Abroad" /></a>
    								<div id="header-links-wrapper" class="hidden-xs">
    									<a class="header-link" href="#">Working abroad</a>
    									<a class="header-link" href="#">For companies</a>
    								</div>
    							</div>
    						</div>
    					</div>
    				</div>
    				<button class="trigger btn btn-big">
    				<span>Explore now! <i class="fa fa-caret-down"></i></span>
    			</button>
    			<div class="title">
    					<h1>Find programming jobs in</h1>
    					<h1><span id="myWords"></span></h1>
    				</div>
    	</body>
    	</html>

    Code:
    *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    .clearfix:before, .clearfix:after { display: table; content: ''; }
    .clearfix:after { clear: both; }
    
    body {
    	background-color: #312401;
    	background-image: url("assets/img/bg_berlin.jpg");
    	background-repeat: no-repeat;
    	background-attachment: fixed;
    	background-size: cover;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	background-position: center bottom;
    	margin: 0;
    	padding: 0;
    	overflow-x: hidden;
    }
    
    .bg-img {
    	position: absolute;
    	overflow: hidden;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	-webkit-backface-visibility: hidden;
    	backface-visibility: hidden;
            background-color: white;
            background-image: url("../img/bg_berlin.jpg");
    	background-repeat: no-repeat;
    	background-attachment: fixed;
    	background-size: cover;
            background-position: center;
    }
    
    html, body, .container-classie, .header {
    	height: 100%;
    }
    
    
    
    #logoto .box {
    	background-color: #fff;
    	padding: 10px;
    	margin-bottom: 15px;
    	margin-right: 20% !important;
    }
    #logoto .box.logo {}
    
    #logoo .box p {
    	margin: 0;
    	font-size: 13px;
    	line-height: 19px;
    	color: #666;
    	margin-right: 20%;
    }
    
    
    header .navbar {
    	background: none;
    	border: none;
    	z-index: 1;
    	padding-top: 20px;
    }
    header .navbar #header-links-wrapper {
    	float: right;
    	margin-right: 15%;
    	margin-top: 25px;
    }
    header .navbar #header-links-wrapper a.header-link {
    	text-transform: uppercase;
    	font-weight: bold;
    	margin-left: 25px;
    	font-size: 20px;
    	color: rgba(255,255,255,0.7);
    	text-decoration: none;
    }
    
    button.trigger {
    	position: absolute;
    	bottom: 40px;
    	right: 50%;
    	margin-right: -95px;
    	z-index: 5000;
    	background-color: rgba(255,197,0,0.85);
    	font-size: 18px;
    	font-weight: 500;
    	color: #ffffff;
    }
    
    
    
    .btn {
    	background-color: #fff5d1;
    	color: #ffc500;
    	border-radius: 0;
    	transition-duration: 0.2s;
    }
    
    .btn:hover {
    	color: #b78d00;
    }
    
    .btn-big {
    	border-right: 3px solid #d9a700;
    	border-bottom: 3px solid #d9a700;
    	font-weight: 600;
    	font-size: 16px;
    	padding: 15px 30px;
    	margin-bottom: 15px;
    }
    .btn-big.btn-block {
    	padding: 15px 0;
    }
    .btn-big:hover {
    	
    }
    @media (max-width: 768px) {
    	button.trigger {
    		font-size: 15px;
    	}
    }
    
    button.trigger:focus {
    	color: #b78d00;
    	outline: none;
    }
    
    .container-classie:not(.notrans) button.trigger {
    	-webkit-transition: opacity 0.3s 0.5s;
    	transition: opacity 0.3s 0.5s;
    }
    
    .container-classie.modify:not(.notrans) button.trigger {
    	opacity: 0;
    	pointer-events: none;
    	-webkit-transition-delay: 0s;
    	transition-delay: 0s;
    }
    
    
    @media (max-width: 768px) {
    	header h1:first-of-type {
    		font-size: 22px;
    	}
    	header h1 {
    		font-size: 30px
    	}
    	header .navbar #header-links-wrapper {
    		margin-top: 18px;
    	}
    	header .navbar #header-links-wrapper a.header-link {
    		font-size: 13px;
    		margin-left: 12px;
    	}
    	
    	button.trigger {
    		bottom: 40px;
    		right: 50%;
    		margin-right: -75px;
    		z-index: 5000;
    		padding: 8px 20px;
    	}
    }
    
    .title {
    	color: white;
    	z-index: 1000;
    	margin: 0 auto;
    	padding: 0 1.25em;
    	width: 100%;
    	text-align: center;
    	position: absolute;
    	top: 43%;
    	left: 50%;
    	-webkit-transform: translateX(-50%) translateY(-50%);
    	transform: translateX(-50%) translateY(-50%);
    }
    
    header h1 {
    	text-align: center;
    	color: #fff;
    	text-shadow: 4px 4px 20px rgba(0,0,0,0.2);
    	padding: 0 0 0.2em;
    	font-weight: 700;
    	font-size: 3.25em;
    	margin: 0 auto;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,898
    Thanks
    23
    Thanked 1,868 Times in 1,852 Posts
    Hell Wiched,
    I wonder if a page anchor would put you to the next page the way you want. The page that link takes you to uses page anchors, it also uses a bit of jQuery for the transition (jquery.anchor.js).

    Try your page like this once (see changes highlighted in red) -
    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta content="minimum-scale=1.0, width=device-width, maximum-scale=1, user-scalable=no" name="viewport" />
    <title>Code Abroad - Find your IT job abroad</title>
    <style type="text/css">
    *, *:after, *:before {
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    }
    .clearfix:before, .clearfix:after {
    	display: table;
    	content: '';
    }
    .clearfix:after { clear: both; }
    body {
    	background-color: #312401;
    	background-image: url("assets/img/bg_berlin.jpg");
    	background-repeat: no-repeat;
    	background-attachment: fixed;
    	background-size: cover;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	background-position: center bottom;
    	margin: 0;
    	padding: 0;
    	overflow-x: hidden;
    }
    .bg-img {
    	position: absolute;
    	overflow: hidden;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	-webkit-backface-visibility: hidden;
    	backface-visibility: hidden;
    	background-color: white;
    	background-image: url("../img/bg_berlin.jpg");
    	background-repeat: no-repeat;
    	background-attachment: fixed;
    	background-size: cover;
    	background-position: center;
    }
    html, body, .container-classie, .header { height: 100%; }
    #logoto .box {
    	background-color: #fff;
    	padding: 10px;
    	margin-bottom: 15px;
    	margin-right: 20% !important;
    }
    #logoto .box.logo { }
    #logoo .box p {
    	margin: 0;
    	font-size: 13px;
    	line-height: 19px;
    	color: #666;
    	margin-right: 20%;
    }
    header .navbar {
    	background: none;
    	border: none;
    	z-index: 1;
    	padding-top: 20px;
    }
    header .navbar #header-links-wrapper {
    	float: right;
    	margin-right: 15%;
    	margin-top: 25px;
    }
    header .navbar #header-links-wrapper a.header-link {
    	text-transform: uppercase;
    	font-weight: bold;
    	margin-left: 25px;
    	font-size: 20px;
    	color: rgba(255,255,255,0.7);
    	text-decoration: none;
    }
    button.trigger {
    	position: absolute;
    	bottom: 40px;
    	right: 50%;
    	margin-right: -95px;
    	z-index: 5000;
    	background-color: rgba(255,197,0,0.85);
    	font-size: 18px;
    	font-weight: 500;
    	color: #ffffff;
    }
    .btn {
    	background-color: #fff5d1;
    	color: #ffc500;
    	border-radius: 0;
    	transition-duration: 0.2s;
    }
    .btn:hover { color: #b78d00; }
    .btn-big {
    	border-right: 3px solid #d9a700;
    	border-bottom: 3px solid #d9a700;
    	font-weight: 600;
    	font-size: 16px;
    	padding: 15px 30px;
    	margin-bottom: 15px;
    }
    .btn-big.btn-block { padding: 15px 0; }
    .btn-big:hover { }
    
    @media (max-width: 768px) {
    button.trigger { font-size: 15px; }
    }
    button.trigger:focus {
    	color: #b78d00;
    	outline: none;
    }
    .container-classie:not(.notrans) button.trigger {
    	-webkit-transition: opacity 0.3s 0.5s;
    	transition: opacity 0.3s 0.5s;
    }
    .container-classie.modify:not(.notrans) button.trigger {
    	opacity: 0;
    	pointer-events: none;
    	-webkit-transition-delay: 0s;
    	transition-delay: 0s;
    }
    
    @media (max-width: 768px) {
    header h1:first-of-type { font-size: 22px; }
    header h1 { font-size: 30px }
    header .navbar #header-links-wrapper { margin-top: 18px; }
    header .navbar #header-links-wrapper a.header-link {
    	font-size: 13px;
    	margin-left: 12px;
    }
    button.trigger {
    	bottom: 40px;
    	right: 50%;
    	margin-right: -75px;
    	z-index: 5000;
    	padding: 8px 20px;
    }
    }
    .title {
    	color: white;
    	z-index: 1000;
    	margin: 0 auto;
    	padding: 0 1.25em;
    	width: 100%;
    	text-align: center;
    	position: absolute;
    	top: 43%;
    	left: 50%;
    	-webkit-transform: translateX(-50%) translateY(-50%);
    	transform: translateX(-50%) translateY(-50%);
    }
    header h1 {
    	text-align: center;
    	color: #fff;
    	text-shadow: 4px 4px 20px rgba(0,0,0,0.2);
    	padding: 0 0 0.2em;
    	font-weight: 700;
    	font-size: 3.25em;
    	margin: 0 auto;
    }
    #abroad {
    	height: 600px;
    	width: 800px;
    	margin: 1600px auto 50px;
    	background: #fc6;
    }</style>
    </head>
    <body>	
    	<div id="container" class="container-classie intro-effect-push">	
    	<a href="#" id="top"></a>
    			<header class="header ">
    				<div class="navbar">
    					<div class="clearfix container">
    						<div class="row">
    							<div class="col-md-12">
    								<a class="logo" href="index.html"><img src="assets/img/logo.png" alt="Code Abroad" /></a>
    								<div id="header-links-wrapper" class="hidden-xs">
    									<a href="#abroad" class="header-link">Working abroad</a>
    									<a class="header-link" href="#">For companies</a>
    								</div>
    							</div>
    						</div>
    					</div>
    				</div>
    			</header>
    			<button class="trigger btn btn-big">
    			<span>Explore now! <i class="fa fa-caret-down"></i></span>
    		</button>
    			<div class="title">
    				<h1>Find programming jobs in</h1>
    				<h1><span id="myWords">Your State here</span></h1>
    			</div>
    	</div>
    	<div id="abroad">
    		<a href="#top" class="header-link">Back to top</a>
    	<!--end working--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Dec 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello Excavator, and thank you for the quick reply!
    Generally this is the idea but when the anchor is clicked i want not only to be send to it, but the first part of the page to be hidden, and with scroll up to be showed again. Im not sure if that is possible without javascript.

    Regards,
    Wiched


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •