A simple website. Uses animation for some place. Fixed menu (click on each one),Uses shadow.
A Pen by behzad.samii on CodePen.
Created
August 14, 2019 16:34
-
-
Save abdurraufahmad/1b9ef2077fc61f59a730995cc28a9cce to your computer and use it in GitHub Desktop.
website
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Website</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.5.0/css/all.css'> | |
| <link href="https://fonts.googleapis.com/css?family=Black+Han+Sans|Raleway" rel="stylesheet"> | |
| <link rel="stylesheet" type="text/css" href="style6.css"> | |
| </head> | |
| <body> | |
| <div class="nav"> | |
| <a href="#home">Home</a> | |
| <a href="#about">About</a> | |
| <a href="#contact">Contact</a> | |
| </div> | |
| <div class="logo"> | |
| <header> | |
| <h1>LOGO</h1> | |
| </header> | |
| </div> | |
| <div class="art clearfix"> | |
| <img src="https://images.pexels.com/photos/1628062/pexels-photo-1628062.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="photo" title="thi is photo"> | |
| <p>this is loremipsum.<br />this is loremipsum .<br />this is loremipsum .<br />this is loremipsum.</p> | |
| </div> | |
| <div id="about" class="sty clearfix"> | |
| <img src="https://images.pexels.com/photos/50632/pexels-photo-50632.jpeg?cs=srgb&dl=big-ben-bridge-clock-tower-50632.jpg&fm=jpg" title="this is photo" alt="photo"> | |
| <p>About</p> | |
| <p>this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum. this is loremipsum.</p> | |
| </div> | |
| <div id="contact" class="sty clearfix"> | |
| <img src="https://images.pexels.com/photos/362/marketing-man-person-communication.jpg?cs=srgb&dl=can-chat-chatting-362.jpg&fm=jpg" title="this is photo" alt="photo"> | |
| <p>Contact</p> | |
| <div class="box-message"> | |
| <input class="mrg" type="text" placeholder="Name"> | |
| <br /> | |
| <input type="text" placeholder="Email"> | |
| <br /> | |
| <textarea class="txt" placeholder="Message"></textarea> | |
| <br /> | |
| <input type="submit" value="Send"> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| margin:0; | |
| padding:0; | |
| font-family:"Raleway", sans-serif; | |
| font-size:14pt; | |
| background-image:url(https://images.pexels.com/photos/1047540/pexels-photo-1047540.jpeg?cs=srgb&dl=art-art-materials-bright-1047540.jpg&fm=jpg); | |
| background-position:center; | |
| background-attachment:fixed; | |
| background-repeat:no-repeat; | |
| background-size:100%; | |
| } | |
| .nav{ | |
| position:fixed; | |
| display:block; | |
| background:#222; | |
| width:100%; | |
| top:0; | |
| left:0; | |
| right:0; | |
| padding:15px 0; | |
| box-shadow:0 4px 18px 4px rgba(0,0,0,0.5); | |
| z-index:100; | |
| } | |
| .nav a{ | |
| text-decoration:none; | |
| color:#fff; | |
| text-align:center; | |
| padding:5px 10px; | |
| margin:10px; | |
| } | |
| .nav a:nth-child(1){ | |
| margin-left:40%; | |
| } | |
| .logo{ | |
| margin-top:100px; | |
| margin-left:80px; | |
| font-family:"Black Han Sans", sans-serif; | |
| font-size:30pt; | |
| width:20%; | |
| text-align:center; | |
| padding:0; | |
| opacity:0; | |
| -webkit-animation:logo 2s forwards; | |
| color:#003366; | |
| } | |
| @-webkit-keyframes logo{ | |
| 0%{top:0;} | |
| 100%{opacity:1;} | |
| } | |
| .art{ | |
| transform:translateX(-500px); | |
| margin-top:150px; | |
| width:30%; | |
| background:linear-gradient(to right bottom, #003366, #00995c); | |
| box-shadow:2px 2px 18px 4px rgba(0,0,0,0.5); | |
| -webkit-animation:art 2s forwards; | |
| -webkit-animation-delay:2s; | |
| opacity:0; | |
| padding:10px; | |
| } | |
| .art img{ | |
| float:left; | |
| border:none; | |
| border-radius:200px; | |
| height:150px; | |
| width:150px; | |
| } | |
| .art p{ | |
| padding:10px; | |
| margin:10px 0 0 160px; | |
| text-align:center; | |
| color:#fff; | |
| } | |
| .clearfix{ | |
| content:" "; | |
| display:table; | |
| clear:both; | |
| } | |
| @-webkit-keyframes art{ | |
| 0%{transform:translateX(0);} | |
| 100%{transform:translateX(100px); opacity:1;} | |
| } | |
| .sty{ | |
| width:90%; | |
| margin:auto; | |
| margin-top:50px; | |
| margin-bottom:50px; | |
| background:linear-gradient(to right bottom, #003366, #00995c); | |
| box-shadow:2px 2px 18px 4px rgba(0,0,0,0.5); | |
| } | |
| .sty img{ | |
| float:left; | |
| height:500px; | |
| width:500px; | |
| padding:0; | |
| margin-right:10px; | |
| } | |
| .sty p{ | |
| padding:10px; | |
| margin:10px 0 0 500px; | |
| height:auto; | |
| text-align:center; | |
| color:#fff; | |
| } | |
| .box-message{ | |
| margin:10px 0 0 500px; | |
| text-align:center; | |
| } | |
| input[type=text]{ | |
| border:none; | |
| border-bottom:1px solid black; | |
| padding:10px 150px 10px 5px; | |
| background:transparent; | |
| margin:10px 0; | |
| font-size:18pt; | |
| color:#fff; | |
| } | |
| .mrg{ | |
| margin-top:80px; | |
| } | |
| .txt{ | |
| border:none; | |
| border-bottom:1px solid black; | |
| padding:10px 120px 10px 5px; | |
| background:transparent; | |
| margin:10px 0; | |
| font-size:18pt; | |
| font-family:"Raleway", sans-serif; | |
| color:#fff; | |
| } | |
| input[type=submit]{ | |
| color:#000; | |
| border:1px solid black; | |
| border-radius:5px; | |
| padding:10px 50px; | |
| margin:50px 0; | |
| background:transparent; | |
| box-shadow:-5px 8px 18px 4px rgba(0,0,0,0.5); | |
| -webkit-transition:box-shadow, .5s; | |
| font-family:"Raleway", sans-serif; | |
| font-size:18pt; | |
| color:#fff; | |
| } | |
| input[type=submit]:hover{ | |
| box-shadow:none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment