Thread: Enjoy

Results 1 to 3 of 3
  1. #1 Enjoy 
    Registered Member duration's Avatar
    Join Date
    Feb 2017
    Posts
    102
    Thanks given
    39
    Thanks received
    3
    Rep Power
    0
    I was really bored and made this in like 30min. Feedback would be cool. You can use it if you like.

    File structure
    MAIN FOLDER
    -index.html
    -[folder]css

    inside of the folder css
    -banner.css
    -blog.css
    -main.css
    -navbar.css
    -style.css


    File name then code for the file
    index.html
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<!-- CSS BOOT STRAP JS JQuery -->
    	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    	<!--End OF CSS BOOT STRAP JS JQuery -->
    	<!-- Link to css files -->
    	<link rel="stylesheet" type="text/css" href="css/style.css">
    	<!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic|Open+Sans|PT+Sans|Roboto&display=swap" rel="stylesheet">
    	<title>Website template</title>
    	<link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
    <!-- For anyone editing this its very simple to read the website. Just follow the tages
    	for example div class="Container" is the container it self. class="container_navbar"
    	it is talking about the navbar itself.
    	everything is tag sensitive
    -->
    <!-- Navagation Start -->
    <div class="container_navbar">
    	<!-- This is the navagation items. If you wish to add another item you must include the container_navbar_items class around it. -->
    	<div class="container_navbar_items">
    		<img src="https://via.placeholder.com/400x90">
    	</div>
    	
    	<div class="container_navbar_items">
    		<a href=""><h3>Home</h3></a>
    	</div>
    	<div class="container_navbar_items">
    		<a href=""><h3>Vote</h3></a>
    	</div>
    	<div class="container_navbar_items">
    		<a href=""><h3>Carrots</h3></a>
    	</div>
    	<div class="container_navbar_items">
    		<a href=""><h3>Info</h3></a>
    	</div>
    	<div class="container_navbar_items">
    		<a href=""><h3>Store</h3></a>
    	</div>
    </div>
    <!-- Navagation End -->
    <!-- Banner Begin -->
    <div class="container_banner">
    	<div class="banner">
     	 <div class="banner-content">
     	 	<h1>Potato Server</h1>
     	 	<p>LETS PLAY TO WIN!</p>
     	 	<a href="" class="btn-twitter">Download File</a>	
     	 </div>
     	 </div>
    </div>
    
    <!-- Banner End -->
    <!-- Blog begin -->
    <div class="container_education">
    	<div class="container_education_title">
    		<h2>Server Updates</h2>
    	</div>
    	<div class="container_education_educationcontainer">
    		<div class="container_education_educationcontainer_item">
    			<h2>Quality Of Life</h2>
    			<h3>Xp and skills update</h3>
    			<p>This is a lovely paragraph of the skills and xp you need to take on potato from one farm patch and place it into another. This way your potato grow together and will always have a friend. Friends are good. Fish are friends not food.</p>
    			<h4>June 8 2019</h4>
    		</div>
    	</div>
    	<div class="container_education_educationcontainer">
    		<div class="container_education_educationcontainer_item">
    			<h2>Quality Of Life</h2>
    			<h3>Xp and skills update</h3>
    			<p>This is a lovely paragraph of the skills and xp you need to take on potato from one farm patch and place it into another. This way your potato grow together and will always have a friend. Friends are good. Fish are friends not food.</p>
    			<h4>June 7 2019</h4>
    		</div>
    	</div>
    	<div class="container_education_educationcontainer">
    		<div class="container_education_educationcontainer_item">
    			<h2>Quality Of Life</h2>
    			<h3>Xp and skills update</h3>
    			<p>This is a lovely paragraph of the skills and xp you need to take on potato from one farm patch and place it into another. This way your potato grow together and will always have a friend. Friends are good. Fish are friends not food.</p>
    			<h4>June 6 2019</h4>
    		</div>
    	</div>
    </div>
    <!-- Blog End -->
    
    </body>
    </html>
    style.css
    Code:
    @import url("main.css");
    @import url("navbar.css");
    @import url("banner.css");
    @import url("blog.css");
    navbar.css
    Code:
    .container_navbar {
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    	text-align: center;
    border-bottom: 3px solid rgba(52, 152, 219, 1);
    background: linear-gradient(  135deg, rgba(29, 104, 153, 0.9) 0%,
    										  rgba(71, 145, 194, 0.8) 50%),
    	url('../img/apple_background.jpg');
    
    }
    .container_navbar_items {
    	flex:1 1 0;
    
    
    }
    .container_navbar_items a {
    	text-decoration: none;
    }
    .container_navbar_items h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    color: rgba(252, 254, 255, 1);
    padding: 10px;
    margin: 20px; 
    border: 1px solid rgba(252, 254, 255, 1);
    }
    .container_navbar_items h3:hover {
    color: rgba(52, 152, 219, 1);
    background-color: rgba(252, 254, 255, 1);
    }
    .container_navbar_items img {
    	padding-left: 10px;
    	padding-top: 10px;
    	padding-bottom: 10px;
    }
    main.css
    Code:
    /* Hello
    If you are reading this then you are intrested in using this template. 
    Most of the time when I design a website I use the main.css for comments for the client
    I only put css in the main.css if its a global css class. That means global buttons or 
    something. Please do not edit any of the css in this file becuase its important 
    to the backbone of the website. This is for educaitonal purposes only. 
    
    Creator -Duration
    
    If you would like to use these files for your project please do not remove my creator signature. 
    If you do its rude but whos stopping you really. 
    
    Quote "What will you do when you are succesfull and have climed the mountain all the way? I will put
    my helping hand out and encurage others to make it to the top as well."
    
    Thanks
    
    -Duration 
    
    */
    body {
    	margin: 0px, 0px, 0px, 0px !important;
    }
    blog.css
    Code:
    .container_education{
    
    	background-color: rgba(255, 255 ,255 , 1);
    	border-top: 1px solid rgba(220, 217, 217, 1);
    	padding-top: 60px;
    	padding-bottom: 60px;
    	color: rgba(0, 0, 0, 0.9);
    	font-family: 'Nanum Gothic', sans-serif;
    }
    
    .container_education_title{
    text-align: center;
    	font-family: 'Roboto', sans-serif;
    	margin-bottom: 60px;
    	color: rgba(52, 152, 219, 0.9);
    }
    
    .container_education_educationcontainer{
    display: flex;
    	justify-content: space-around;
    	margin-left: 60px;
    	margin-right: 60px;
    	margin-bottom: 20px;
    	
    }
    .container_education_educationcontainer_item{
    	flex:1 1 0;
    	border: 1px solid red;
    	max-width: 700px;
    	border:1px solid rgba(220, 217, 217, 1);
    padding: 10px 10px 5px 10px; 
    background-color: white;
    border-radius: 3px;
    position: relative;
    }
    .container_education_educationcontainer_item h2 {
    	font-size: 18px;
    
    }
    .container_education_educationcontainer_item h3 {
    	font-size: 14px;
    	color: rgba(0, 0, 0, 0.7);
    }
    .container_education_educationcontainer_item h4 {
    	font-size: 14px;
    	color: rgba(0, 0, 0, 0.7);
    	position: absolute;
    	top: 10px;
    	right: 10px;
    }
    .container_education_educationcontainer_item p {
    	font-size: 12px;
    }
    banner.css
    Code:
    .banner {
    	height: calc(100vh - 115px);
    	
    	color: white;
    	background: linear-gradient(  135deg, rgba(29, 104, 153, 0.9) 0%,
    										  rgba(71, 145, 194, 0.8) 50%),
    	url('https://www.wallpapermaiden.com/image/2016/11/12/fantasy-landscape-moon-reflection-river-artwork-stars-painting-fantasy-9255.jpg');
    	background-size: cover;
    	overflow: hidden;
    	display: flex;
    	justify-content: space-around;
    	align-items: center;
    	text-align: center;
    }
    .banner h1 {
    	font-family: 'Roboto', sans-serif;
    	font-size: calc(5vw + 50px);
    	opacity: 0.8;
    	margin-bottom: 0px;
    }
    
    .banner-content p {
    	font-size: calc(1vw + 25px);
    	font-weight: lighter;
    	opacity: 0.8;
    	margin-bottom: 0px;
    	font-family: 'Roboto', sans-serif;
    	margin-bottom: 20px;
    }
    .banner-content a {
    	font-size: calc(1vw + 10px);
    	opacity: 0.8;
    	margin-bottom: 0px;
    	text-decoration: none;
    	color: white;
    	font-family: 'Roboto', sans-serif;
    	padding: 5px 25px 5px 25px;
    	border: 2px solid white;
    	border-radius: 10px;
    }
    .banner-content a:hover {
    	font-size: calc(1vw + 10px);
    	opacity: 0.8;
    	margin-bottom: 0px;
    	text-decoration: none;
    	color: rgba(52, 152, 219, 1);
    	font-family: 'Roboto', sans-serif;
    	padding: 5px 25px 5px 25px;
    	border: 2px solid white;
    	border-radius: 10px;
    	background-color: white;
    }

    Reply With Quote  
     

  2. #2  
    A.K.A. YCGamez
    ShrekTastic's Avatar
    Join Date
    Jun 2015
    Posts
    88
    Thanks given
    34
    Thanks received
    10
    Rep Power
    12
    Not my style at all. Also the thread title is a bit lame..
    Nevertheless might be useful for people willing to learn basic web development. They have a starting point.
    Reply With Quote  
     

  3. #3  
    Registered Member duration's Avatar
    Join Date
    Feb 2017
    Posts
    102
    Thanks given
    39
    Thanks received
    3
    Rep Power
    0
    Thanks for the useless comment. I posted it for people to use. Iím sure your thread titles are good lol stop spamming
    Reply With Quote  
     


Thread Information
Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. [RSCD] v25 Uploaded - Enjoy
    By musly in forum Downloads
    Replies: 26
    Last Post: 05-14-2010, 06:12 AM
  2. 508 hd client no html enjoy :)
    By itachi6404 in forum Downloads
    Replies: 91
    Last Post: 12-01-2008, 08:58 PM
  3. My client background enjoy it
    By Aggi in forum Graphics
    Replies: 10
    Last Post: 11-11-2008, 09:45 AM
  4. exilion isle v1 - v2 comeing soon enjoy!
    By alec105owns in forum Downloads
    Replies: 31
    Last Post: 10-06-2008, 02:52 AM
  5. Comedy (to enjoy)
    By =(Kajakas)= in forum Videos
    Replies: 2
    Last Post: 07-07-2008, 12:13 PM
Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •